Versión en español

When developing, we often hide or show elements without taking screen readers into account. In some cases, when we hide a component we want the screen readers to not be able to view them either; In others, we want them to be able to see them; and in other circumstances, we wish not to show them.

To ensure that the user experience is equally pleasant for everyone, and to guarantee universal use of the website, in this article I am going to list the different ways to hide and display components.

CSS

To begin with, let's talk about different properties of Cascading Style Sheets, their behavior in browsers and, finally, how they are perceived by screen readers.

display

display: none;

This CSS property determines the type of box display (for more information you can consult this article). If you add the value none, whatever this code receives will be hidden and eliminated from the flow, so the place it previously occupied also disappears.

Screen reader: The element will be ignored.

visibility

visibility: hidden;

It allows us to hide or show an element without removing it from the flow and maintaining the structure of the page. That is, unlike with display: none;, if we indicate the value hidden, the element is no longer visible on the page but the space is still occupied.

Screen reader: The element will be ignored.

Image with an element with visibility: hidden

width, height, overflow

width: 0;
height: 0;
overflow: hidden;

Height and width are used to set the height and width of the elements and overflow allows you to control what will be done with content that exceeds the size of an element.

If we combine them in this way, the components that are affected by this code will be hidden and the space they occupy will not be maintained.

Screen reader: The element will be ignored.

position

position: absolute;
left: -9999em;

This property indicates the positioning method to be used in a component. If we use the absolute and left: -9999em, the content will fade out of the normal flow, it will be located in the left corner and the space it occupies will also disappear.

Screen reader: They will take these elements into account and will be able to access their content.

text-indent

text-indent: -9999em;

text-indent specifies the indentation that the first line of a paragraph will have. In this case, the elements are hidden although they can still receive focus.

Screen reader: They will take these elements into account and will be able to access their content, although this can only be text or online elements.

HTML

Leaving CSS properties aside, some HTML attributes should be highlighted.

aria-hidden

<p aria-hidden="true">This is text</p>

If this HTML attribute has its value set to true, it will be hidden exclusively for screen readers, and can be viewed in browsers.

However, keep in mind that this attribute does not work on elements that can receive focus such as buttons, inputs or links.

Screen reader: The element will be ignored.

type="hidden"

<input type="hidden" name="input"/>

As we mentioned above, the aria-hidden="true" will not work on elements that support focus, such as inputs. However, if we specify that an input is of type hidden, it can be hidden.

Screen reader: The element will be ignored.

hidden

<p hidden="true">This is text</p>

By placing this attribute in the HTML, this element will behave as if it had a display: none, being hidden and removed from the flow. This attribute affects elements that can receive focus.

Screen reader: The element will be ignored.

Conclusion

We have many ways to show and hide elements using both HTML and CSS and they behave differently. Now that we know how each of them work, we can take it into account when developing and thus create accessible projects.

For more information
https://www.pluralsight.com/guides/how-to-hide-text-from-screen-readers
http://alistapart.com/article/now-you-see-me/