Éviter la redondance avec Wai-Aria dans les pages HTML-tutoriel CSS-php.cn

Avoiding Redundancy with WAI-ARIA in HTML Pages

Depuis l'intégration des rôles ARIA dans HTML, le développement Web est devenu beaucoup plus facile. Aria améliore la convivialité des applications Web pour les personnes handicapées en fournissant des informations sémantiques supplémentaires pour les technologies d'assistance (ATS). Cependant, une question clé persiste: les attributs de rôle Aria sont-ils nécessaires lorsque les éléments HTML possèdent déjà une sémantique inhérente?

Cet article explore ce problème, en se concentrant sur la façon dont les éléments structurels HTML5 plus récents avec sémantique implicite interagissent avec les rôles Aria.

Points clés:

Évitez d'utiliser des rôles Aria si l'élément HTML fournit déjà la sémantique nécessaire. Les attributs ARIA inutiles créent du code redondant.
Les éléments HTML5 ont une sémantique ARIA implicite par défaut; Par conséquent, l'ajout de rôles Aria correspondants ou aria-* attributs est généralement redondant et découragé.
malgré ces sémantiques implicites, l'ajout de rôles ARIA pour des raisons de compatibilité pourrait être pris en compte, même si elle entraîne une redondance.

Fondamentaux Aria et idées fausses courantes:

wai-aria (applications Internet riches accessibles) comprend des attributs améliorant les éléments HTML. Ces attributs communiquent le rôle, la propriété et les informations d'état à ATS via les API d'accessibilité du navigateur. Pour les nouveaux arrivants Aria, "An Introduction to Wai-Aria" de Stephan est une ressource recommandée.

Une vue répandue dans la communauté HTML est: "N'utilisez pas Aria si HTML le gère déjà." Plus précisément: utiliser Aria uniquement lorsqu'un élément HTML implémenté manque de support d'accessibilité.

rôles Aria et la plupart des éléments:

Les rôles, les propriétés et les états Aria peuvent exposer la sémantique d'un élément HTML. Ceci est connu comme la sémantique ARIA implicite par défaut de l'élément .

Prioriser HTML sémantiquement correct (tirant parti de la sémantique native) avant d'ajouter des attributs ARIA. Les rôles ARIA n'augmentent généralement pas la sémantique par défaut de la plupart des éléments HTML. Gardez les choses simples: si l'élément HTML fournit intrinsèquement la sémantique, n'utilisez pas Aria; Cela crée du code redondant.

rôles Aria et html4:

Comme l'explique l'expert en accessibilité Steve Faulkner, les éléments HTML4 (et antérieurs) n'ont pas besoin de rôles ARIA supplémentaires pour exposer leur sémantique par défaut car ils sont déjà cartographiés. L'ajout de rôles Aria dans ce contexte est inutile et ajoute une complexité inutile aux revues de code.

Html5 Améliorations:

La spécification HTML5 indique: "Dans la plupart des cas, la définition d'un rôle ARIA et / ou

qui correspond à la sémantique ARIA implicite par défaut n'est pas nécessaire et non recommandée." aria-*

Bien que les éléments HTML5 aient une sémantique ARIA implicite par défaut, il n'est pas garanti que chaque élément est cartographié sans vérification. Par conséquent, l'ajout de rôles ARIA en tant que mesure de précaution pourrait être pris en compte, acceptant la redondance.

Redondance en aria:

Ajouter des rôles ARIA implicites par défaut aux éléments HTML5 interactifs (comme les éléments de formulaire ou <button></button>) n'a aucun effet. Bien qu'il ne soit pas nocif, il n'est pas nécessaire et gaspille le temps de développement. Les éléments interactifs nécessitent des noms accessibles (fournissant une valeur à la propriété Nom accessible de l'API de l'accessibilité). Par exemple:

Moins efficace:

<label>Title</label><input type="text">

Copier après la connexion

plus efficace:

<label for="title">Title</label><input type="text" id="title">

Copier après la connexion

Le deuxième exemple utilise les attributs for et id, associant clairement l'étiquette à l'entrée.

Exemples de redondance (pour éviter):

Rôles redondants sur les éléments interactifs:

<button role="button">Submit</button>

Copier après la connexion

le role="button" n'est pas nécessaire.

rôles Aria aux côtés de homologues HTML natifs:

<div hidden aria-hidden="true"></div>

Copier après la connexion

L'attribut html hidden rend aria-hidden redondant.

Aria sur les éléments structurels établis:

<h1 role="heading" aria-level="1">I am a Heading</h1>

Copier après la connexion

Les deux role et aria-level sont inutiles.

Aria avec des éléments structurels HTML5:

HTML5 a introduit des éléments structurels (par exemple, <aside></aside>, <article></article>, <main></main>) avec des mappages de sémantique Aria implicites par défaut. Cependant, certains mappages sont conditionnels. Par exemple, <footer></footer> mappe à role=contentinfo uniquement sinon dans un <article></article> ou <section></section>. Les navigateurs exposent intrinsèquement ces sémantiques par défaut.

Prise en charge du navigateur:

La plupart des navigateurs modernes prennent en charge la sémantique implicite par défaut des éléments structurels et de section HTML5. (L'implémentation d'Internet Explorer peut varier.)

Conclusion:

Éviter les rôles, les propriétés et les états Aria si la spécification HTML5 définit déjà la fonction.
de nombreux éléments HTML5 ont une sémantique Aria implicite par défaut.
Le support Aria est généralement excellent à travers les navigateurs modernes (à des exceptions).

Considérez les implications de l'ajout d'attributs Aria aux éléments HTML et partagez vos pensées dans les commentaires.

Questions fréquemment posées (FAQ):

(La section FAQ de l'entrée d'origine est conservée ici, car elle se rapporte directement au sujet et ne nécessite pas de modification de la pseudo-originalité.)

Quel est le but de Wai-Aria dans les pages HTML?

WAI-ARIA, qui signifie Web Accessibility Initiative - Applications Internet riches accessibles, est une spécification technique publiée par le World Wide Web Consortium (W3C). Il fournit un cadre pour améliorer l'accessibilité et l'interopérabilité du contenu Web et des applications, en particulier pour les personnes handicapées. Il le fait en définissant des moyens de rendre le contenu Web plus accessible aux personnes handicapées, par exemple en fournissant une sémantique supplémentaire pour aider les technologies d'assistance comme les lecteurs d'écran comprennent la structure et la fonctionnalité du contenu Web.

Comment la redondance se produit-elle dans Les pages Wai-Aria et HTML?

La redondance dans les pages WAI-ARIA et HTML peut se produire lorsque les mêmes informations ou fonctionnalités sont fournies plus d'une fois. Par exemple, si un élément HTML a déjà un rôle implicite qui est défini par la spécification HTML, et un développeur ajoute un rôle Aria qui correspond au rôle implicite, cela crée une redondance. Cela peut confondre les technologies d'assistance et les utilisateurs qui comptent sur eux.

Quelle est la différence entre les attributs HTML Hidden et Aria Hidden?

L'attribut HTML Hidden et l'attribut caché Aria servent des objectifs similaires mais travailler de manières légèrement différentes. L'attribut HTML Hidden masque un élément de tous les utilisateurs, tandis que l'attribut Hidden Aria cache spécifiquement un élément de technologies d'assistance. Si un élément est marqué d'Aria caché, il sera toujours visible pour les utilisateurs qui n'utilisent pas les technologies d'assistance.

Comment puis-je éviter la redondance lors de l'utilisation du rôle listItem dans HTML?

Le listem Le rôle n'est pas nécessaire pour l'élément «Li» dans HTML car il a déjà un rôle implicite de listItem. L'ajout du rôle Aria de ListItem à un élément «Li» crée une redondance. Pour éviter cela, utilisez simplement l'élément 'li' tel qu'il est, sans ajouter le rôle Aria.

Quel est l'impact de la redondance sur les audits d'accessibilité?

La redondance peut entraîner des échecs dans l'accessibilité Audits. En effet, les rôles ARIA redondants peuvent confondre les technologies d'assistance, conduisant à une expérience utilisateur moins accessible. En évitant la redondance, vous pouvez améliorer l'accessibilité de votre contenu Web et augmenter vos chances de passer les audits d'accessibilité.

Comment puis-je utiliser des rôles ARIA efficacement pour améliorer l'accessibilité?

Les rôles Aria doivent être utilisés pour fournir une sémantique supplémentaire où la spécification HTML ne les fournit pas. Ils ne doivent pas être utilisés pour dupliquer la sémantique déjà fournie par HTML. En utilisant des rôles Aria judicieusement et en évitant la redondance, vous pouvez améliorer l'accessibilité de votre contenu Web.

Quelles sont les erreurs courantes à éviter lors de l'utilisation de rôles ARIA?

Certaines erreurs courantes à éviter lors de l'utilisation de rôles ARIA incluent leur utilisation de manière redondante, en les utilisant de manière incorrecte et en les exagérant. L'utilisation redondante des rôles ARIA peut confondre les technologies d'assistance, tandis que une utilisation incorrecte peut entraîner une sémantique incorrecte. La surutilisation des rôles Aria peut rendre votre contenu Web trop complexe et difficile à naviguer.

Comment puis-je vérifier la redondance dans mon code HTML et Aria?

Vous pouvez vérifier la redondance dans votre HTML et votre HTML et votre HTML et votre HTML et votre HTML et votre HTML et Code Aria en utilisant des outils d'audit d'accessibilité. Ces outils peuvent identifier les rôles ARIA redondants et d'autres problèmes d'accessibilité dans votre code. En résolvant ces problèmes, vous pouvez améliorer l'accessibilité de votre contenu Web.

Quel est le rôle des technologies d'assistance dans l'accessibilité Web?

Les technologies d'assistance jouent un rôle crucial dans l'accessibilité du Web. Ils aident les personnes handicapées à accéder et à interagir avec le contenu Web. Les exemples de technologies d'assistance incluent les lecteurs d'écran, qui lisent le contenu Web pour les personnes ayant des déficiences visuelles et les logiciels de reconnaissance vocale, qui permet aux personnes atteintes de troubles de la mobilité de contrôler leurs ordinateurs avec leurs voix. La fonctionnalité des technologies d'assistance?