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:
or if that is not possible,
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.
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>
.a11y { position: absolute; left: -999999px; }