Picto thématique

Rule n° 180 - Content that needs to be reproduced by screen readers is not hidden from them.

Some CSS properties make it possible to make certain content invisible on the screen. The problem is that this content may also disappear for users who need to view it. So know how to hide content with the right tools.

#Presentation #Development #Accessibility

Goal

  • Ensure the correct reproduction of masked content to be read by screen readers.
  • Improve the accessibility of content for people with disabilities.

Implementation

Unless the content is intended to be made visible by user action (tabs, drop-down menus, etc.):

  • Do not use the display and visibility properties to hide the content.
  • Do not use the hidden HTML attribute to hide the content.
  • Do not give the content an aria-hidden="true" ARIA attribute.
  • Do not use the wmode parameter of a Flash object with transparent or opaque values.

Use:
  • CSS properties to position the content outside the display area of the browser (position, text-indent) or to crop it (clip);
  • the ARIA properties allowing a label to be associated with content (aria-label, aria-labelledby, aria-describedby);
  • or, in the case of a form field label, the title attribute of the form

Find out more:

Control

In the generated code and in the CSS style sheets of the pages checked:

  • Find, using a code inspector, content that would be hidden from display (apart from that intended to be made visible by user action)
  • Check that none of this content uses the techniques indicated in the implementation if it is to be rendered in a screen reader.

By Opquast - Read the license