Attributs ARIA
role
L'attribut role permet de préciser le role d'un élément, soit pour renforcer la balise sémantique déjà utilisée, soit pour préciser un role qui n'a pas d'équivalent sémantique :
Les roles avec des équivalents sémantiques
Si vous utilisez les balises sémantiques appropriées, vous n'avez normalement pas besoin de repréciser les roles de ce contenu.
Les roles sans équivalent sémantique
role="toolbar"
Une toolbar est une liste de contrôles, par exemple, vous pouvez l'utiliser si vous avez une série de champs de formulaires qui permettent de filtrer un contenu.
role="tooltip"
Un tooltip c'est une petite bulle qui vous donne des précisions sur un élément, c'est particulièrement utilisé dans les formulaires.
role="feed"
Un feed est une liste plus ou moins infinie de contenu ou de nouveaux éléments sont ajoutés à la fin de la liste lorsque l'utilisateur atteint le dernier élément affiché.
role="math"
Permet de signaler une expression mathématique.
role="presentation" ou role="none"
Permet de préciser qu'un élément n'a pas de valeur sémantique, il sera normalement ignoré par les technologies d'assistance.
aria-live
aria-live permet de rendre accessible le contenu chargé depuis le Javascript. En effet, un lecteur d'écran ne pourra pas savoir qu'un contenu a été mis à jour et donc l'utilisateur n'aura pas accès à ce contenu. Aria-live permet donc de préciser au lecteur d'écran qu'un élément peut recevoir des mises à jour. L'attribut peut avoir trois valeurs différentes :
aria-live="off"
C'est la valeur par défaut, si le contenu est mis à jour, cela ne sera pas annoncé.
aria-live="polite"
Le lecteur d'écran lira le contenu mis à jour si l'utilisateur n'était pas en train de faire quelque chose d'autre.
aria-live="assertive"
Le lecteur d'écran lira en priorité le contenu mis à jour.
Pour permettre à l'utilisateur de comprendre le type de contenu qui a été mis à jour, vous devriez en plus utiliser l'attribut aria-atomic="true" sur l'élément parent de votre contenu ce qui fera en sorte que le lecteur d'écran relise tout le contenu de l'élément et pas seulement la mise à jour sans contexte.
aria-hidden
Permet de masquer un élément pour les technologies d'assistance, par exemple un menu qui n'est pas en permanence sur l'écran ou un élément purement décoratif.