Utilisation d'attributs Aria avec des éléments sémantiques HTML5 pour l'accessibilité

La raison pour laquelle les étiquettes sémantiques ARIA et HTML5 sont nécessaires est que, bien que les éléments sémantiques HTML5 aient des significations d'accessibilité, ARIA peut compléter la sémantique et améliorer les capacités de reconnaissance des technologies auxiliaires. Par exemple, lorsque les navigateurs hérités manquent de support, les composants sans balises natifs (tels que les boîtes modales) et les mises à jour d'état doivent être mises à jour dynamiquement, ARIA fournit un contrôle granulaire plus fin. Les éléments HTML5 tels que NAV, Main, mis à part correspondent au rôle ARIA par défaut, et n'ont pas besoin d'être ajoutés manuellement, sauf si le comportement par défaut doit être remplacé. Les situations où ARIA doit être ajoutée comprennent: 1. Compléter les informations d'état manquantes, telles que l'utilisation de l'ARIA expansée pour représenter le statut d'expansion / effondrement du bouton; 2. Ajouter des rôles sémantiques aux balises non sémantiques, telles que l'utilisation du rôle Div pour implémenter des onglets et coopérer avec Tabindex et ARIA sélectionné; 3. Associez les contrôles et les description du texte, tels que l'utilisation d'Aria-Descripted par pour associer la boîte d'entrée au texte de l'invite. Les notes ne comprennent pas à plusieurs reprises la sémantique existante, ne pas écraser de manière incorrecte la sémantique d'origine, et ne pas ajouter d'attributs au hasard lorsqu'ils sont incertains.

L'ajout d'attributs ARIA aux éléments sémantiques HTML5 est en fait une approche courante mais sujette aux erreurs. Ce n'est pas que tout ira bien si vous utilisez <nav></nav> ou <main></main> . Parfois, Aria est nécessaire pour compléter la sémantique ou améliorer la capacité de reconnaissance de la technologie d'assistance.

Pourquoi dois-je utiliser des balises sémantiques ARIA et HTML5?

Les éléments sémantiques de HTML5 (tels que <header></header> , <footer></footer> , <nav></nav> , <article></article> , etc.) ont certaines significations d'accessibilité et peuvent aider les lecteurs d'écran à identifier la structure de la page. Mais dans certains scénarios, ces comportements par défaut ne sont ni précis ni flexibles.

Par exemple:

• Certains navigateurs plus anciens ou technologies d'assistance peuvent ne pas prendre en charge suffisamment de nouvelles étiquettes sémantiques;
• Certains composants (tels que les boîtes modales, les onglets) n'ont pas de balises HTML natives correspondantes;
• ARIA fournit un contrôle granulaire plus fin lorsque des mises à jour dynamiques sont nécessaires (par exemple si le bouton est sélectionné et si le contenu est élargi).

Ainsi, Aria est un supplément, pas un substitut.

Quels éléments HTML5 apporteront automatiquement des rôles Aria?

De nombreux balises sémantiques HTML5 correspondent en fait à un rôle Aria en bas. Par exemple:

• <nav></nav> role="navigation"
• <main></main> role="main"
• <aside></aside> role="complementary"
• <section></section> est généralement traité comme role="region" (si avec un titre)

Cela signifie que vous n'avez pas besoin d'ajouter manuellement ces rôles, sauf si vous souhaitez remplacer le comportement par défaut ou être compatible avec certains cas spéciaux.

Remarque, cependant: si vous écrivez un div vous-même et le définissez sur la navigation avec le rôle, il n'apparaîtra pas dans l'arborescence d'accessibilité comme un vrai <nav></nav> à moins que vous ajoutiez manuellement d'autres propriétés pour la rendre "focalisable".

Dans quelles circonstances Aria doit-elle être ajoutée?

1. Supplément des informations sur l'état manquant

Par exemple, un bouton basculant (panneau de pliage), <button></button> seul ne peut pas indiquer à l'utilisateur s'il est actuellement "étendu" ou "effondré". Pour le moment, vous pouvez utiliser aria-expanded :

 <Button aria-exided = "false"> développer plus </futton>

Après avoir cliqué sur JS modifier dynamiquement cette valeur, le lecteur d'écran peut lire les modifications d'état.

2. Ajouter des rôles sémantiques aux étiquettes non sémantiques

Si vous devez implémenter une sorte de composant interactif (comme les onglets, le menu) avec <div> ou <span> , vous devez utiliser Aria pour définir son rôle et son comportement:

 <div role = "tablist">
  <div role = "tab" aria-selecd = "true" tabindex = "0"> onglet un </div>
  <div role = "tab" aria-selected = "false" tabindex = "- 1"> onglet deux </div>
</div>

Non seulement le rôle est utilisé ici, mais tabindex est également utilisé pour contrôler l'ordre de mise au point. aria-selected indique l'état d'activation actuel.

3. Contrôles d'associé et texte de description

Par exemple, il y a un texte rapide à côté du champ de formulaire, et vous voulez que le lecteur d'écran le lise, vous pouvez donc:

 <étiquette pour = "nom d&#39;utilisateur"> Nom d&#39;utilisateur: </ label>
<input type = "text" id = "username" aria-descridby = "username-tip">
<p id = "Username-tip"> Veuillez saisir votre e-mail enregistré comme nom d&#39;utilisateur. </p>

De cette façon, lorsque la boîte d'entrée se concentre, le lecteur d'écran lira également les informations de description.

Choses à noter

• Ne définissez pas à plusieurs reprises la sémantique existante. Par exemple, <button></button> a déjà un rôle = "bouton", et vous n'avez pas besoin de l'écrire à nouveau.
• Évitez l'écrasement incorrect de sémantique originale. Par exemple, le réglage de force <a></a> sur role = "bouton" peut entraîner l'échec de la navigation par clavier.
• Si vous n'êtes pas sûr de la fonction d'un attribut Aria, consultez d'abord la documentation officielle MDN ou WAI-ARIA et ne l'ajoutez pas au hasard.

Fondamentalement, c'est tout. S'il est bien utilisé, Aria peut améliorer l'expérience d'accessibilité; S'il est mal utilisé, il détruira le comportement indigène. La clé est de comprendre la signification de chaque attribut et sa relation avec la sémantique HTML5.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!