Qu'est-ce que aria-label et comment dois-je l'utiliser?
Il y a quelques heures, j'ai entendu parler de l'attribut aria-label , qui:
Définit une valeur de chaîne qui étiquette l'élément en cours.
Mais à mon avis, c’est ce que l’attribut title était censé faire. J'ai cherché plus loin dans Mozilla Developer Network pour obtenir des exemples et des explications, mais la seule chose que j'ai trouvée est
<button aria-label="Close" onclick="myDialog.close()">X</button>
Ce qui ne me fournit aucune étiquette (donc je suppose que j'ai mal compris l'idée). Je l'ai essayé ici dans jsfiddle .
Ma question est donc la suivante: pourquoi ai-je besoin de aria-label et comment dois-je l’utiliser?
C'est un attribut conçu pour aider technologie d'assistance (par exemple, les lecteurs d'écran) à attacher une étiquette à un élément HTML par ailleurs anonyme.
Donc, il y a l'élément <label>:
<label for="fmUserName">Your name</label>
<input id="fmUserName">
Le <label> indique explicitement à l'utilisateur de taper son nom dans la zone input où id="fmUserName".
aria-label fait à peu près la même chose, mais c'est pour les cas où il n'est ni pratique ni souhaitable d'avoir un label à l'écran. Prenez l'exemple MDN :
<button aria-label="Close" onclick="myDialog.close()">X</button>`
La plupart des gens pourraient en déduire visuellement que ce bouton ferme la boîte de dialogue. Une personne aveugle utilisant une technologie d'assistance peut simplement entendre "X" lire à voix haute, ce qui ne veut pas dire grand chose sans indices visuels. aria-label leur dit explicitement ce que le bouton fera.
Dans l'exemple que vous donnez, vous avez parfaitement raison, vous devez définir l'attribut title.
Si aria-label est l'un des outils utilisés par les technologies d'assistance (comme les lecteurs d'écran), il n'est pas pris en charge de manière native sur les navigateurs et n'a aucun effet sur eux. Cela ne sera d'aucune aide pour la plupart des personnes ciblées par le WCAG (à l'exception des utilisateurs de lecteurs d'écran), par exemple une personne ayant une déficience intellectuelle.
Le "X" n'est pas suffisant pour donner des informations sur l'action dirigée par le bouton (pensez à une personne sans connaissance en informatique). Cela pourrait signifier "fermer", "supprimer", "annuler", "réduire", une croix étrange, un griffonnage, rien.
Malgré le fait que le W3C semble promouvoir le aria-label plutôt que l'attribut title ici: http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS- 20140916/ARIA14 Dans un exemple similaire, vous pouvez constater que le support technique n'inclut pas les navigateurs standard: http://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria# ARIA14
En fait, aria-label, dans cette situation exacte, pourrait être utilisé pour donner plus de contexte à une action:
Par exemple, les aveugles ne perçoivent pas les popups comme ceux d'entre nous qui ont une bonne vision, c'est comme un changement de contexte. "Retour à la page" sera une alternative plus pratique pour un lecteur d'écran, lorsque "Fermer" sera plus important pour une personne sans lecteur d'écran.
<button
aria-label="Back to the page"
title="Close" onclick="myDialog.close()">X</button>
Si vous voulez savoir comment aria-label vous aide pratiquement .. alors suivez les étapes ... vous l'obtiendrez vous-même ..
Créer une page HTML ayant le code ci-dessous
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<button title="Close"> X </button>
<br />
<br />
<br />
<br />
<button aria-label="Back to the page" title="Close" > X </button>
</body>
</html>
Maintenant, vous avez besoin d'un émulateur de lecteur d'écran virtuel qui s'exécutera sur un navigateur pour observer la différence. Ainsi, chrome utilisateurs du navigateur peuvent installer chromevox extension et les utilisateurs de Mozilla peuvent utiliser lecteur d’écran de crocs addin
Une fois l’installation terminée, mettez un casque dans vos oreilles, ouvrez la page html et mettez l’accent sur les deux boutons (en appuyant sur la touche) un par un .. et vous pouvez entendre .. vous concentrer sur first x button .. vous le dira. vous ne pouvez que x button .. mais dans le cas de second x button .. vous entendrez back to the page button seulement ..
j'espère que vous l'avez bien maintenant !!
Prérequis:
Aria est utilisé pour améliorer l'expérience utilisateur des utilisateurs malvoyants. Les utilisateurs malvoyants naviguent dans l'application à l'aide d'un logiciel de lecteur d'écran tel que JAWS, NVDA, .. Lors de la navigation dans l'application, le logiciel de lecteur d'écran annonce le contenu aux utilisateurs. Aria peut être utilisé pour ajouter du contenu dans le code, ce qui aide les utilisateurs de lecteurs d'écran à comprendre le rôle, l'état, le libellé et le but du contrôle.
Aria ne change rien visuellement. (Aria a peur des concepteurs aussi).
aria-label
l'attribut aria-label est utilisé pour communiquer l'étiquette aux utilisateurs de lecteurs d'écran. Généralement, le champ de saisie de la recherche n’a pas d’étiquette visuelle (merci aux concepteurs). aria-label peut être utilisé pour communiquer l'étiquette de contrôle aux utilisateurs de lecteurs d'écran
Comment utiliser:
<input type="edit" aria-label="search" placeholder="search">
Il n'y a pas de changement visuel dans l'application. Mais les lecteurs d'écran peuvent comprendre le but du contrôle
aria-labelledby
Aria-label et aria-labelledby sont tous deux utilisés pour communiquer l'étiquette. Mais aria-labelledby peut être utilisé pour référencer toute étiquette déjà présente dans la page, tandis que aria-label est utilisé pour communiquer l'étiquette qui ne s'affiche pas visuellement.
approche 1:
<span id="sd">Search</span>
<input type="text" aria-labelledby="sd">
approche 2:
aria-labelledby peut également être utilisé pour combiner deux étiquettes pour les utilisateurs de lecteurs d'écran
<span id="de">Billing Address</span>
<span id="sd">First Name</span>
<input type="text" aria-labelledby="de sd">