web-dev-qa-db-fra.com

Quel est le but de l'attribut "role" en HTML?

Je continue à voir les 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?

Cela 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 les leurs. Est-ce autorisé ou une utilisation correcte de l'attribut de rôle?

Des idées à ce sujet?

html
1095
jeroen

La plupart des rôles que vous voyez ont été définis dans le cadre de ARIA 1.0, puis incorporés ultérieurement à HTML5. Certains des nouveaux éléments HTML5 (boîte de dialogue, élément principal, etc.) sont même basés sur les rôles ARIA d'origine.

http://www.w3.org/TR/wai-aria/

Il existe deux principales raisons d'utiliser des rôles en plus de votre élément sémantique natif.

Raison n ° 1. Remplacement du rôle lorsqu'un élément du langage hôte n'est pas 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 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 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, afin de 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. Par conséquent, de nombreux navigateurs ne prennent pas encore en charge la sémantique de <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 rôle réel n'est pas inclus. Les navigateurs appliqueront le premier rôle reconnu dans la liste de jetons.

<span role="foo link note bar">...</a>

En dehors de la liste, seuls link et note sont des rôles valides. Le rôle de lien sera donc appliqué car il vient en premier. Si vous utilisez des rôles personnalisés, assurez-vous qu'ils ne sont pas en conflit avec un rôle défini dans ARIA ou dans le langage hôte que vous utilisez (HTML, SVG, MathML, etc.).

944
James Craig

Si je comprends bien, les rôles étaient initialement définis par XHTML mais étaient obsolètes. Cependant, ils sont maintenant définis par HTML 5, voir ici: https://www.w3.org/WAI/PF/aria/roles#abstract_roles_header

Le rôle de l'attribut de rôle est d'identifier dans le logiciel d'analyse la fonction exacte d'un élément (et de ses enfants) dans le cadre d'une application Web. C’est surtout une question d’accessibilité pour les lecteurs d’écran, mais je peux aussi penser que c’est utile pour les navigateurs intégrés et les scrapers. Pour être utile au client HTML inhabituel, l'attribut doit être défini sur l'un des rôles de la spécification liée. Si vous créez la vôtre, cette fonctionnalité "future" ne fonctionnera pas - un commentaire serait préférable.

Infos pratiques ici: http://www.accessibleculture.org/articles/2011/04/html5-aria-2011/

155
S Hubble

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

Réponse: Oui .

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

Il vous fournit:

  • Accessibilité
  • Adaptation de l'appareil
  • Traitement côté serveur
  • Description complexe des données, etc.
18
Laxmi

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

Avertissement: Le rôle de formulaire est inutile pour la forme d'élément.

10
dotnetnutty