Assurez-vous que seules les parties pertinentes de la page sont exposées aux lecteurs d'écran et à d'autres technologies d'assistance. Par exemple, les contenus qui se trouvent hors de l'écran ou qui ne sont que des présentations doivent être cachés aux technologies d'assistance.
Tester manuellement
Pour vérifier que le contenu hors écran est masqué, vous devez le tester manuellement à l'aide d'un lecteur d'écran. - Pour les utilisateurs Mac, regardez cette vidéo sur l'utilisation de VoiceOver. - Pour les utilisateurs de PC, regardez cette vidéo sur l'utilisation de NVDA. - Pour les utilisateurs de Chromebooks, découvrez ChromeVox, le lecteur d'écran intégré.
Utilisez la touche TAB pour parcourir votre page avec la touche de tabulation.
Le lecteur d'écran ne doit pas annoncer le contenu masqué.
Solutions
Pour masquer le contenu hors écran, supprimez l'élément contenant ce contenu de l'ordre de tabulation en le définissant sur display: none ou visibility: hidden.
Exemple :
.remove-me {
visibility: hidden;
}
<button class="remove-me">Can't reach me with the TAB key!</button>
Consultez également Définir correctement la visibilité du contenu hors écran.
Ressources
Le code source du contenu hors écran n'est pas visible dans l'audit des technologies d'assistance.