1340 votes

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

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

f.e. :

<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 des rôles peut être trouvée ici mais je vois que certaines personnes inventent leur propre rôle. Est-ce autorisé ou est-ce une utilisation correcte de l'attribut "rôle" ?

Des idées à ce sujet ?

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.

1147voto

James Craig Points 1726

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

21 votes

Ce lien peut également être utile. Utilisation d'ARIA en HTML. rawgithub.com/w3c/aria-in-html/master/index.html

6 votes

@EugeneXa je pense qu'il faut repérer n'importe quel élément avec la balise [role="button"] évitera d'avoir à faire a[role="button"], span[role="button"]

5 votes

"Dans quelques années, cette technique deviendra probablement inutile". Je ne sais rien de l'accessibilité, mais avec des choses comme angular et les composants web qui créent des balises personnalisées, je peux imaginer que cela deviendra de plus en plus nécessaire.

170voto

S Hubble Points 828

D'après ce que j'ai compris, les rôles étaient initialement définis par XHTML mais ont été dépréciés. Cependant, ils sont maintenant définis par HTML 5, voir ici : http://www.w3.org/TR/wai-aria/#roles

Le but de l'attribut role est d'identifier pour le logiciel d'analyse syntaxique la fonction exacte d'un élément (et de ses enfants) dans le cadre d'une application Web. Il s'agit principalement d'une question d'accessibilité pour les lecteurs d'écran, mais je peux également imaginer qu'il soit utile pour les navigateurs intégrés et les racleurs d'écran. Afin d'ê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 citée. Si vous inventez votre propre rôle, cette fonctionnalité "future" ne peut pas fonctionner - un commentaire serait préférable.

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

25voto

Laxmi Points 2773

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 langages basés sur XML, lorsque les langages ne définissent pas leur propre attribut de rôle.
  • Bien que ce soit la raison pour laquelle l'attribut de rôle est publié par le Groupe de travail sur les protocoles et les formats Si l'attribut peut être utilisé dans des cas plus généraux, il l'est également dans d'autres cas.

Il vous fournit :

  • Accessibilité
  • Adaptation du dispositif
  • Traitement côté serveur
  • Description de données complexes,...etc.

12 votes

Pouvez-vous préciser la signification de l'accessibilité, de l'adaptation des dispositifs et de la description des données complexes ? Je suis novice en programmation Web et ces termes sont un peu nouveaux pour moi. Merci.

13voto

dotnetnutty Points 341

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

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

1 votes

Peut-être que downvoter souhaite faire un commentaire ? J'ai répondu à la question du PO "Cet attribut de rôle est-il nécessaire ?".

1 votes

Je n'étais pas l'auteur du vote négatif mais je vais faire un commentaire. Les avertissements du validateur ont été ajoutés depuis l'époque du message original. Ces avertissements sont utiles pour les auteurs, mais la redondance du code n'a aucun effet négatif sur les utilisateurs finaux, à ma connaissance.

0voto

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

3 votes

Veuillez divulguer tout affiliations et n'utilisez pas le site comme un moyen de promouvoir votre site en le publiant. Voir Comment rédiger une bonne réponse ? .

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X