La plupart des rôles que vous voyez ont été définis dans le cadre d'ARIA 1.0, puis incorporés ultérieurement dans HTML5. Certains des nouveaux éléments HTML5 (dialog, main, etc.) sont même basés sur les rôles ARIA originaux.
http://www.w3.org/TR/wai-aria/
Il y a deux raisons principales d'utiliser les rôles en plus de votre élément sémantique natif.
Raison n°1. Remplacer le rôle lorsqu'aucun élément de la langue hôte n'est approprié ou que, pour diverses raisons, un élément moins approprié sur le plan sémantique a été utilisé.
Dans cet exemple, un lien a été utilisé, même si la fonctionnalité résultante ressemble davantage à un bouton qu'à un lien de navigation.
<a href="#" role="button" aria-label="Delete item 1">Delete</a>
Les lecteurs d'écran l'entendront comme un bouton (par opposition à un lien), et vous pouvez utiliser un sélecteur d'attribut CSS pour éviter la class-itis et la div-itis.
*[role="button"] {
/* style these a buttons w/o relying on a .button class */
}
Raison n° 2. Sauvegarde du rôle d'un élément natif, pour prendre en charge les navigateurs qui ont mis en œuvre le rôle ARIA mais pas encore le rôle de l'élément natif.
Par exemple, le rôle "principal" est pris en charge par les navigateurs depuis de nombreuses années, mais il s'agit d'un ajout relativement récent à HTML5, de sorte que de nombreux navigateurs ne prennent pas encore en charge la sémantique pour les éléments suivants <main>
.
<main role="main">…</main>
C'est techniquement redondant, mais cela aide certains utilisateurs et ne nuit à aucun. Dans quelques années, cette technique deviendra probablement inutile.
Vous avez aussi écrit :
Je vois que certaines personnes en inventent. Est-ce autorisé ou est-ce une utilisation correcte de l'attribut "rôle" ?
Il ne s'agit pas d'une utilisation invalide de l'attribut, sauf si un rôle réel n'est pas inclus. Les navigateurs appliqueront le premier rôle reconnu dans la liste des jetons.
<span role="foo link note bar">...</a>
Sur cette liste, seuls link
et note
sont des rôles valides, et donc le rôle de lien sera appliqué car il vient en premier. Si vous utilisez des rôles personnalisés, assurez-vous qu'ils n'entrent pas en conflit avec un rôle défini dans ARIA ou le langage hôte que vous utilisez (HTML, SVG, MathML, etc.).
2 votes
Université de Deque propose d'excellentes ressources pour l'utilisation de l'aria-role ou d'autres attributs pour le balisage sémantique. Vous pouvez également télécharger une extension de test automatique comme Une hache.