Comprendre le masquage
Ce laboratoire permet de tester le comportement réel des technologies d’assistance face aux différentes techniques CSS et HTML de masquage.
1. L’attribut aria-hidden= »true »
Cet attribut indique aux technologies d’assistance d’ignorer l’élément, même s’il est visible.
2. La classe .sr-only
La méthode standard pour cacher du contenu visuellement tout en le laissant accessible.
Ci-dessous se trouve un texte caché :
✅ BRAVO ! Si vous entendez ceci, votre lecteur d’écran fonctionne correctement. Ce texte est invisible à l’œil nu.
Le bouton ci-dessus montre une loupe, mais vocalise « Rechercher dans le site ».
3. Display none & Visibility hidden
Ces méthodes retirent l’élément pour tout le monde (visuel et vocal).
Si votre lecteur d’écran ne dit rien entre cette phrase et la suivante, c’est réussi.
4. L’attribut tabindex= »-1″
L’élément reste visible et lisible (navigation virtuelle), mais sort de l’ordre de tabulation.
Essayez d’atteindre le lien suivant avec la touche [TAB] :
Lien avec tabindex -1Vous devriez passer par-dessus. Par contre, avec les flèches directionnelles, il est lu.
5. Opacité opacity: 0
L’élément est là, interactif, lu, mais totalement transparent.
☝️ Il y a un bouton invisible juste au-dessus. Si vous tabulez, vous verrez le focus apparaitre « dans le vide » (ou sur le contour si le focus ring est géré par le navigateur).
6. Iframe masquée
Test d’une iframe contenant du code interactif mais masquée via aria-hidden.