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

Il y A quelques heures j'ai lu sur le aria-label attribut:

Définit une chaîne de valeur que les étiquettes de l'élément courant.

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

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

Qui ne veut pas me fournir toute l'étiquette (donc je suppose que j'ai mal compris l'idée). J'ai essayé ici de jsfiddle.

Donc ma question est: pourquoi ai-je besoin aria-label et comment l'utiliser?

  • La recherche au niveau de la ressource que vous avez lié, il semble que aria-label peut être utilisé si vous ne souhaitez pas afficher l'info-bulle fournis par le titre de l'attribut: Dans le cas où une étiquette visible visible ou info-bulle n'est pas souhaitable, les auteurs PEUVENT définir le nom d'accessibilité de l'élément à l'aide de l'aria-label
  • pour info ARIA = Accessible Rich Internet Applications
  • Personne ne sait si il est approprié d'utiliser aria-label pour un plus descriptif <h1> texte lorsque le texte visible à l'intérieur de la <h1> élément est trop courte, et il n'est pas souhaité pour avoir le texte intégral est-elle visible? Dans les exemples dans ce fil, une étiquette peut être utilisé. Mais les étiquettes ne pas appliquer sur les en-têtes et c'est pourquoi je demande
InformationsquelleAutor Salvador Dali | 2014-02-26
  1. 352

    C'est un attribut conçu pour aider les la technologie d'assistance (par exemple, les lecteurs d'écran) attacher une étiquette à un autre anonyme élément HTML.

    Donc il y a la <label> élément: 

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

    La <label> indique explicitement à l'utilisateur de taper son nom dans la input zone où id="fmUserName".

    aria-label fait bien la même chose, mais c'est pour les cas où il n'est pas possible ou souhaitable de disposer d'un label sur l'écran. Prendre le MDN exemple:

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

    La plupart des gens seraient en mesure d'en déduire visuellement que ce bouton pour fermer la boîte de dialogue. Une personne aveugle utilisant une technologie d'assistance risquez d'entendre "X" lire à voix haute, ce qui ne veut pas dire grand-chose sans les indices visuels. aria-label indique explicitement à ce que le bouton ne.

    • Merci pour l'explication, mais comment va-t-il entendre à proximité? Ce que je peux faire dans mon navigateur (chrome) pour entendre cela? Et comment un aveugle sélectionnez ce bouton si il n'ont aucune idée de l'endroit où il est?
    • Je crois qu'une extension comme ChromeVox serait un bon endroit pour commencer? Je n'ai jamais utilisé. Ils travaillent par la lecture de l'écran à haute voix à l'utilisateur, en prenant des repères à partir du HTML (par exemple, un h1 convient de souligner à plus d'un p, a est clairement un lien, forme " indique quelque part pour entrer de l'information, aria-* attributs de donner d'autres indices à ce que les éléments, etc).
    • Dans ce cas particulier, je voudrais ajouter un titre attribute. Pas de mal à montrer une info-bulle pour "voir" les utilisateurs lorsqu'ils placez le X.
    • En plus de ChromeVox, il y a NVDA. Les deux sont assez faciles à installer et à démarrer et assez difficile à maîtriser.
    • <label> est également utilisé pour donner le focus à l'élément via le for attribut, ce qui est équivalent à aria-labelledby. aria-label est plus l'équivalent de la title attribut de la <label> élément, depuis title est ignorée dans de nombreux lecteurs d'écran.
    • Comme ma réponse ci-dessus dit, aria-label est effectivement un remplacement pour <label> pour les situations où vous ne pouvez pas utiliser un <label>. Je suis d'accord - si vous avez besoin d'étiqueter quelque chose, title n'est pas toujours la bonne façon de le faire 🙂
    • juste pour information. dans mobile aveugle peut permettre l'accessibilité de l'outil comme pour les mobiles android, il est TalkBack et pour iOS mobiles, il est VoiceOver. en utilisant le présent, la page est lu ligne par ligne.

    InformationsquelleAutor Olly Hodgson
  2. 55

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

    Si le aria-label est un outil utilisé par les technologies d'assistance (comme les lecteurs d'écran), il n'est pas pris en charge nativement sur les navigateurs et n'a aucun effet sur eux. Il ne sera d'aucune aide pour la plupart des personnes visées par les WCAG (sauf les utilisateurs de lecteurs d'écran), par exemple, une personne avec intellectal handicap.

    Le "X" n'est pas suffisant pour donner de l'information à l'action menée par le bouton (pensez à la personne n'ayant aucune connaissance de l'informatique). Il peut signifier "fermer", "supprimer", "annuler", "réduire", une étrange croix, un doodle, rien.

    Malgré le fait que le W3C semble promouvoir la aria-label plutôt que la title attribut ici: http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/ARIA14 dans un exemple similaire, vous pouvez voir que le support de la technologie ne comprend pas les navigateurs web 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 avec une bonne vision, c'est comme un changement de contexte. "Retour à la page" sera une solution de rechange plus pratique pour un lecteur d'écran, lors de la "Proximité" est plus significatif pour quelqu'un en l'absence d'un lecteur d'écran.

      <button
      aria-label="Back to the page"
      title="Close" onclick="myDialog.close()">X</button>
    InformationsquelleAutor Adam
  3. 26

    Si tu veut savoir comment aria-label vous aide à pratiquement .. puis suivez les étapes ... vous aurez votre propre ..

    Créer une page html à avoir de 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 écran virtuel lecteur émulateur qui sera exécuté sur le navigateur pour observer la différence. Ainsi, le navigateur google chrome, les utilisateurs peuvent installer chromevox extension et les utilisateurs de mozilla aller avec les crocs d'un lecteur d'écran addin

    Une fois fait avec l'installation, mettre des écouteurs dans vos oreilles, ouvrez la page html et de faire des focus sur les deux bouton(en appuyant sur la touche tab) un par un .. et vous pouvez entendre .. en se concentrant sur first x button .. vais vous dire que x button .. mais en cas de second x button .. vous entendrez back to the page button seulement..

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

    • Un point important est que la title attribut est ignoré, même sur le premier bouton. Plus d'infos: silktide.com/...
    • Est-ce toujours le cas? Encore mieux pour fournir soit title et aria-label?
    • C'est exactement ce que je voulais. Je voulais juste voir et d'entendre comment cela fonctionne dans le monde réel et le chromevox fonctionne comme un charme et réciter l'aria-labelledby champs. Merci.
    InformationsquelleAutor Moumit
  4. 1

    Préalable:

    Aria est utilisé pour améliorer l'expérience utilisateur des utilisateurs ayant une déficience visuelle. Pour les utilisateurs malvoyants, passer d'une application à l'aide de logiciel de lecteur d'écran comme JAWS, NVDA,.. lors de la navigation par le biais de l'application, logiciel de lecture d'écran annonce du 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, l'étiquette et le but du contrôle

    Aria ne change rien visuellement. (Aria a peur de designers trop).

    aria-label

    aria-label attribut est utilisé pour communiquer l'étiquette pour les utilisateurs de lecteurs d'écran. Habituellement champ de saisie de recherche visuelle n'est pas de l'étiquette (grâce à des designers). aria-label peut être utilisé pour communiquer de l'étiquette de contrôle pour les 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 de contrôler

    aria-labelledby

    À la fois aria-label et aria-labelledby est utilisée pour communiquer l'étiquette. Mais aria-labelledby peut être utilisé pour faire référence à une étiquette déjà présent dans la page alors que aria-label est utilisé pour communiquer l'étiquette que j'ai pas affiché visuellement

    Approche 1:

    <span id = "sd"> Search </span>

<input type = "text" aria-labelledby = "sd">

    Approche 2:

    aria-labelledby peut également être utilisé pour combiner les 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">
    InformationsquelleAutor Pavan Sai Mohan Kolli