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:

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).

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

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;.

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.

<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>

.a11y
{
position: absolute;
left: -999999px;
}