Skip to main content

Visibility

There are various CSS Visibility techniques that can be used to affect accessibility.

Visibly Hidden

This css class can be used to make an element "visible" only to screen readers.

.screen-reader-only {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    width: 1px;
}

Hidden with Opacity

Setting opacity to 0 will make an element invisible but will occupy space on the page, it can still be tabbed to with the keyboard and is acknowledged by a screen reader.

.invisible {
    opacity: 0;
}

Hidden with Display

Setting display:none hides an element from everyone in every context.

Changing display will cause the layout to refresh.

.visibly-removed {
    display: none;
}

Hidden with Visibility

Setting visibility: hidden will make an element invisible and occupy space but will also hide the element from screen readers and keyboard access.

Changing visibility will no affect layout.

.visibly-hidden {
    visibility: hidden;
}

Hidden with Aria

Applying aria-hidden="true" to an element is not a CSS technique but affects an element by removing accessibility information. It affects screen readers but not the keyboard.

If a screen reader can focus on a tab stop that does not have accessibility information it can cause a ghost control. Chrome will still render a focusable element that is aria-hidden.

If you really want hide something you also need to add tabindex="-1" to remove it from the tab order.