Assurez-vous que seules les parties pertinentes de la page sont exposées aux lecteurs d'écran et aux autres technologies d'assistance. Par exemple, le contenu hors écran doit être masqué des technologies d'assistance.
Effectuer un test manuel
Pour vérifier que le contenu hors écran est masqué, vous devez effectuer des tests avec des lecteurs d'écran.
- Si vous utilisez un 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 faire défiler la page. Le lecteur d'écran ne doit pas annoncer le contenu masqué.
Solution
Pour masquer le contenu hors écran, supprimez l'élément contenant ce contenu de l'ordre des onglets 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 de l'audit Contenu hors écran masqué par les technologies d'assistance