Dans des composants interactifs, une interaction très courante consiste à afficher ou cacher du contenu au moyen d'un bouton. En utilisant aria-expanded sur le bouton qui déclenche l'action, on permet à un lecteur d'écran de vocaliser l'état du contenu correspondant : affiché ou caché.
Structure et sémantique
ARIA signifie "Accessible Rich Internet Applications". La spécification ARIA définit une série d'attributs qui peuvent améliorer la sémantique de composants complexes pour les rendre plus accessibles aux utilisateurs d'aides techniques.
Dans un formulaire, chaque champ doit avoir une étiquette ou label. Ce label doit être visible et lisible. Il doit être pertinent. Et il doit être relié au champ dans le code.
Pour chaque type de contenu, utilisez les balises HTML sémantiques appropriées. Par exemple, utilisez h1-h6 pour identifier les titres (ou sous-titres), ul, ol, li pour les listes p pour les paragrap…
Les attributs aria-label et aria-labelleby peuvent servir à définir le nom d'un élément.
Certaines attributs ARIA permettent de spécifier ou modifier l'état ou les propriétés des éléments.
L'attribut ARIA role définit le rôle d'un élément dans l'accessibility tree.
Il existe plusieurs façons de cacher du texte, des images ou tout autre élément sur une page web. Choisissez la meilleure technique en fonction de vos objectifs.