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

Business application and benefits

The rules should be applied to your projects from the design phase through to post-implementation , and they should be understood by all professionals with web and customer experience (CX) responsibilities: from strategy to operations, marketers to project managers, and editorial to technical staff. The benefits of using this ruleset are numerous, including improving customer satisfaction, web performance, and e-commerce, and expanding your client base, while also decreasing your errors and costs.

Multidisciplinary verticles - accessiiblity, SEO, e-commerce, ecodesign etc..- starting from the foundational Opquast base.

The objective of these rules and the Opquast community mission is ‘making the web better’ for your customers and for everyone! Opquast rules cover the key major areas of risk that can negatively affect website users such as privacy, ecodesign, accessibility and security.

Opquast training has already allowed over 11,000 web professionals to have their skills certified. Train your teams or your students, contact us