Hide and show elements from screen readers
Tags: screenreaders, a11y, accesibility, webdev
Published: 2024-01-08 17:58:58

[Versión en español](https://dev.to/miasalazar/ocultar-y-mostrar-elementos-a-los-lectores-de-pantalla-3jhi)

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](https://dev.to/lupitacode/la-propiedad-display-en-css-1b6a)). 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/peekcsf2rxdblbqxt2rd.PNG)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/