Qu'est-ce que aria-label et comment dois-je l'utiliser?

322

Il y a quelques heures, j'ai lu sur l' attribut aria-label , qui:

Définit une valeur de chaîne qui étiquette l'élément actuel.

Mais à mon avis, c'est ce que l' titleattribut était censé faire. J'ai cherché plus loin dans le Mozilla Developer Network pour obtenir des exemples et des explications, mais la seule chose que j'ai trouvée était

<button aria-label="Close" onclick="myDialog.close()">X</button>

Ce qui ne me donne aucune étiquette (je suppose donc que j'ai mal compris l'idée). Je l'ai essayé ici en jsfiddle .

Ma question est donc: pourquoi ai-je besoin aria-labelet comment dois-je l'utiliser?

html assistive-technology Salvador Dali
la source
3
Il semble que la ressource que vous avez liée aria-labelpeut être utilisée si vous ne souhaitez pas afficher l'info-bulle fournie par l'attribut title: dans les cas où une étiquette visible ou une info-bulle visible n'est pas souhaitable, les auteurs PEUVENT définir le nom accessible de la élément utilisant aria-label
Fabrizio Calderan
13
fyi ARIA = Applications Internet riches accessibles
Eric D'Souza
Est-ce que quelqu'un sait s'il est approprié d'utiliser aria-label pour un texte <h1> plus descriptif lorsque le texte réel visible à l'intérieur de l'élément <h1> est trop bref et que le texte intégral n'est pas souhaité? Dans les exemples de ce fil, une étiquette pourrait être utilisée. Mais les étiquettes ne s'appliquent pas aux titres, c'est pourquoi je demande
HelloWorld
La seule chose similaire appropriée que vous demandez est la propriété "longdesc" (pour les images uniquement) qui a besoin de plus d'informations - je ne peux pas imaginer qu'il y en aurait une pour le texte car elle devrait toujours être descriptive de toute façon. - @HelloWorld
Jamie Paterson

Réponses:

427

Il s'agit d'un attribut conçu pour aider les technologies d'assistance (par exemple, les lecteurs d'écran) à attacher une étiquette à un élément HTML autrement anonyme.

Il y a donc l' <label>élément:

<label for="fmUserName">Your name</label>
<input id="fmUserName">

Le <label>dit explicitement à l'utilisateur de taper son nom dans la inputcase où id="fmUserName".

aria-labelfait à peu près la même chose, mais c'est pour les cas où il n'est pas pratique ou souhaitable d'avoir un labelécran. Prenons l'exemple MDN :

<button aria-label="Close" onclick="myDialog.close()">X</button>`

La plupart des gens pourraient déduire visuellement que ce bouton fermera la boîte de dialogue. Une personne aveugle utilisant une technologie d'assistance pourrait simplement entendre «X» lu à haute voix, ce qui ne signifie pas grand-chose sans les indices visuels. aria-labelleur dit explicitement ce que fera le bouton.

Olly Hodgson
la source
4
Merci pour l'explication, mais comment entendra-t-il de près? Que puis-je faire dans mon navigateur (chrome) pour entendre cela? Et comment un aveugle peut-il sélectionner ce bouton s'il ne sait pas où il se trouve?
Salvador Dali
1
Je suppose qu'une extension comme ChromeVox serait un bon point de départ? Je ne l'ai jamais utilisé cependant. Ils fonctionnent en lisant l'écran à haute voix à l'utilisateur, en s'inspirant du code HTML (par exemple, un h1doit être souligné plus qu'un p, aest clairement un lien , ) indique un endroit où entrer des informations, des aria-*attributs donnent des indices supplémentaires sur ce que font les éléments, etc.) .
Olly Hodgson
2
Dans ce cas particulier, je voudrais l'ajouter à un titre attribute. Pas de mal à montrer une info-bulle pour «voir» les utilisateurs lorsqu'ils survolent le X.
GolezTrol
3
En plus de ChromeVox, il y a NVDA . Les deux sont assez faciles à installer et à démarrer et assez difficiles à maîtriser.
ivarni
1
@SalvadorDali - juste pour information. dans la personne aveugle mobile peut activer l'outil d'accessibilité comme pour mobile Android c'est TalkBack et pour les mobiles iOS c'est VoiceOver. en utilisant cela, la page est lue ligne par ligne.
Rahul J.Rane
71

Dans l'exemple que vous donnez, vous avez parfaitement raison, vous devez définir l'attribut title.

Si aria-labelc'est un outil utilisé par les technologies d'assistance (comme les lecteurs d'écran), il n'est pas pris en charge nativement par les navigateurs et n'a aucun effet sur eux. Cela ne sera d'aucune aide pour la plupart des personnes ciblées par les 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 menée par le bouton (pensez à quelqu'un qui n'a aucune connaissance en informatique). Cela peut signifier "fermer", "supprimer", "annuler", "réduire", une croix étrange, un griffonnage, rien.

Malgré le fait que le W3C semble promouvoir aria-labelplutôt que l' titleattribut ici: http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/ARIA14 dans un exemple similaire, vous pouvez voir que la technologie la prise en charge 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, on pourrait utiliser 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" est plus important pour quelqu'un sans lecteur d'écran.

  <button
      aria-label="Back to the page"
      title="Close" onclick="myDialog.close()">X</button>
Adam
la source
35

Si vous voulez savoir comment aria-labelvous aide pratiquement .. alors suivez les étapes ... vous l'obtiendrez par vous-même ..

Créer une page html avec du 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 le navigateur pour observer la différence. Ainsi, les utilisateurs du navigateur chrome peuvent installer l' extension chromevox et les utilisateurs de mozilla peuvent utiliser le complément de lecteur d'écran fangs

Une fois l'installation terminée, mettez des écouteurs dans vos oreilles, ouvrez la page html et concentrez-vous sur les deux boutons (en appuyant sur l'onglet) un par un .. et vous pouvez entendre .. se concentrer sur first x button.. vous dira seulement x button.. mais en cas de second x button.. vous entendrez back to the page buttonseulement ..

j'espère que vous avez bien compris maintenant !!

Moumit
la source
1
Un point important est que l' titleattribut est ignoré, même sur le premier bouton. Plus d'infos: silktide.com/…
Sphinxxx
2
Est-ce toujours le cas? Encore mieux de fournir soit title et aria-label ?
Kamafeather
2
C'est exactement ce que je voulais. Je voulais juste voir et entendre comment cela fonctionne dans le monde réel et les chromevoxœuvres comme un charme et réciter les champs labellisés par l'aria. Merci.
Raj Rajeshwar Singh Rathore
7

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 lecture d'écran comme JAWS, NVDA, .. Lors de la navigation dans l'application, le logiciel de lecture d'écran annonce le contenu aux utilisateurs. Aria peut être utilisé pour ajouter du contenu dans le code 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 aussi peur des designers).

aria-label

L'attribut aria-label est utilisé pour communiquer l'étiquette aux utilisateurs de lecteurs d'écran. Habituellement, le champ de saisie de 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 aucun 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 utilisés pour communiquer l'étiquette. Mais aria-labelledby peut être utilisé pour référencer n'importe quelle étiquette déjà présente dans la page tandis que aria-label est utilisé pour communiquer l'étiquette que je n'ai pas affichée 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">
ndioewbnc
la source
3

L' titleattribut affiche une info-bulle lorsque la souris survole l'élément. Bien que ce soit un excellent ajout, il n'aide pas les personnes qui ne peuvent pas utiliser la souris (en raison de handicaps de mobilité) ou les personnes qui ne peuvent pas voir cette info-bulle (par exemple: les personnes ayant une déficience visuelle ou les personnes qui utilisent un lecteur d'écran).

En tant que tel, l'approche attentive serait de servir tous les utilisateurs. J'ajouterais les deux titleet les aria-labelattributs (servant différents types d'utilisateurs et différents types d'utilisation du Web).

Voici un bon article qui explique aria-labelen profondeur

lucalanca
la source