10.1.1. Do not use the CSS properties display or visibility to hide content that cannot be displayed by the user

There are two possible scenarios for elements that are present in the HTML code, but are not displayed on the screen by default:

Scenario 1: elements are hidden but can be displayed by a user action

This scenario includes, for example, the content of a modal window, a drop-down menu, or the different panels in a dynamic slideshow.

To find out how to use make these elements accessible, refer to the document Accessibility guidelines for rich interfaces and JavaScript (Use cases to comply with France’s accessibility guidelines).

Scenario 2: elements are hidden but will never be displayed

Hidden elements that will never be displayed can be divided into two categories:

Category 2.1: elements that serve no purpose for users

Elements that serve no purpose should preferably be:

  1. Deleted from the HTML code,

or if that is not possible,

  1. Hidden with the CSS properties display: none; or visibility: hidden;.

Category 2.2: elements that are useful for users of screen readers, but serve no purpose for other users

Elements that are useful to screen reader users should be made invisible or moved outside the screen with the CSS properties opacity: 0; or position: absolute; for example.

These elements include, for example, indications that are useful for navigating in pages, skip links, etc.


Whenever links, or more generally interactive links, are included in content that is targeted at users of screen readers, use tabindex=”-1” on these elements in order to prevent access with the standard keyboard method.

For example:

<a href="alternative-interactive-map.html" tabindex="-1" class="a11y">Users of screen readers, please follow this link to access the alternative version of the interactive map.</a>
position: absolute;
left: -999999px;

notices/html-css/ne-pas-utiliser-les-proprietes-css-display-ou-visibility-pour-masquer-un-contenu-qui-ne-peut-pas-etre-affiche-par-l-utilisateur.txt · Last modified: 13 August 2013 at 15:08 by Sébastien Delorme (Atalan)

Project coordinated by Atalan.

In partnership with: