====== 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  [[notices:interfaces-riches-javascript]].

===== 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: 
  - Deleted from the HTML code, 
or if that is not possible,
  - 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. 

<note attention>**Warning**

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:

<code html>
<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>
</code>

<code css>
.a11y
{
position: absolute;
left: -999999px;
}
</code>
</note>


===== Related recommendations =====

<note bulle>
  * Previous recommendation: [[notices:html-css:utiliser-l-attribut-headers-et-id-pour-associer-les-cellules-aux-entetes-des-tableaux-de-donnees-complexes]]
  * Next recommendation: [[notices:html-css:utiliser-css-pour-mettre-en-forme-les-textes]]
</note>