À quoi sert l'attribut «rôle» en HTML?

Je vois toujours des attributs de rôle dans le travail de certaines personnes. Je l'utilise aussi, mais je ne suis pas sûr de son effet.

Par exemple:

<header id="header" role="banner">
    Header stuff in here
</header>

Ou:

<section id="facebook" role="contentinfo">
    Facebook stuff in here
</section>

Ou:

<section id="main" role="main">
     Main content stuff in here
</section>

Cet attribut de rôle est-il nécessaire?

Cet attribut est-il meilleur pour la sémantique?

Améliore-t-il le référencement?

Une liste de rôles peut être trouvée ici , mais je vois que certaines personnes inventent leur propre rôle . Est-ce autorisé ou une utilisation correcte de l'attribut de rôle?

Des réflexions à ce sujet?

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 linket notesont 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.)

Si je comprends bien, les rôles ont été initialement définis par XHTML mais ont été dépréciés. Cependant, ils sont désormais définis par HTML 5, voir ici: https://www.w3.org/WAI/PF/aria/roles#abstract_roles_header

Le but de l'attribut role est d'identifier au logiciel d'analyse la fonction exacte d'un élément (et de ses enfants) dans le cadre d'une application web. C'est principalement une chose d'accessibilité pour les lecteurs d'écran, mais je peux aussi le voir comme utile pour les navigateurs intégrés et les grattoirs d'écran. Pour être utile au client HTML inhabituel, l'attribut doit être défini sur l'un des rôles de la spécification que j'ai liée. Si vous créez votre propre, cette fonctionnalité "future" ne peut pas fonctionner - un commentaire serait mieux.

Détails pratiques ici: http://www.accessibleculture.org/articles/2011/04/html5-aria-2011/

Cet attribut de rôle est-il nécessaire?

Réponse: oui .

• L'attribut role est nécessaire pour prendre en charge les applications Internet riches accessibles ( WAI-ARIA ) pour définir les rôles dans les langues XML, lorsque les langues ne définissent pas leur propre attribut de rôle.
• Bien que ce soit la raison pour laquelle l'attribut role est publié par le groupe de travail sur les protocoles et les formats , l'attribut a également des cas d'utilisation plus généraux.

Il vous offre:

• Accessibilité
• Adaptation de l'appareil
• Traitement côté serveur
• Description de données complexes, ... etc.

Je me rends compte que c'est une vieille question, mais une autre considération possible en fonction de vos besoins exacts est que la validation sur https://validator.w3.org/ génère des avertissements comme suit:

Avertissement: le rôle de formulaire n'est pas nécessaire pour le formulaire d'élément.

L'attribut de rôle améliore principalement l'accessibilité pour les personnes utilisant des lecteurs d'écran. Dans plusieurs cas, nous l'utilisons comme l'accessibilité, l'adaptation des appareils, le traitement côté serveur et la description de données complexes. Pour en savoir plus, cliquez sur: https://www.w3.org/WAI/PF/HTML/wiki/RoleAttribute .