La plupart des rôles que vous voyez ont été définis dans le cadre d'ARIA 1.0, puis incorporés plus tard dans HTML5. Certains des nouveaux éléments HTML5 (boîte de dialogue, principal, etc.) sont même basés sur les rôles ARIA d'origine.
http://www.w3.org/TR/wai-aria/
Il existe deux raisons principales d'utiliser des rôles en plus de votre élément sémantique natif.
Raison n ° 1. Remplacer le rôle où aucun élément de langage hôte n'est approprié ou, pour diverses raisons, un élément moins sémantiquement approprié a été utilisé.
Dans cet exemple, un lien a été utilisé, même si la fonctionnalité résultante ressemble plus à un bouton qu'un lien de navigation.
<a href="#" role="button" aria-label="Delete item 1">Delete</a>
Les lecteurs d'écran l'entendent comme un bouton (par opposition à un lien), et vous pouvez utiliser un sélecteur d'attributs CSS pour éviter class-itis et 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 implémenté le rôle ARIA mais n'ont pas encore implémenté le rôle de l'élément natif.
Par exemple, le rôle "principal" est pris en charge dans 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 <main>
.
<main role="main">…</main>
Ceci est techniquement redondant, mais aide certains utilisateurs et ne nuit à personne. Dans quelques années, cette technique deviendra probablement inutile.
Vous avez également écrit:
Je vois que certaines personnes inventent la leur. Est-ce autorisé ou une utilisation correcte de l'attribut de rôle?
C'est une utilisation valide de l'attribut, sauf si un vrai rôle n'est pas inclus. Les navigateurs appliqueront le premier rôle reconnu dans la liste des jetons.
<span role="foo link note bar">...</a>
Hors de la 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.)