¿Qué es aria-label y cómo debo usarlo?

322

Hace unas horas leí sobre el atributo aria-label , que:

Define un valor de cadena que etiqueta el elemento actual.

Pero en mi opinión, esto es lo que titlese suponía que debía hacer el atributo. Busqué más en la red de desarrolladores de Mozilla para obtener algunos ejemplos y explicaciones, pero lo único que encontré fue

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

Lo que no me proporciona ninguna etiqueta (por lo que supongo que entendí mal la idea). Lo intenté aquí en jsfiddle .

Entonces mi pregunta es: ¿por qué lo necesito aria-labely cómo debo usarlo?

html assistive-technology Salvador Dalí
fuente
3
Al mirar el recurso que ha vinculado, parece que aria-labelse puede usar si no desea mostrar la información sobre herramientas proporcionada por el atributo title: en los casos en que una etiqueta visible o información sobre herramientas visible no sea deseable, los autores PUEDEN establecer el nombre accesible del elemento usando aria-label
Fabrizio Calderan
13
fyi ARIA = Aplicaciones de Internet enriquecidas accesibles
Eric D'Souza
¿Alguien sabe si es apropiado usar aria-label para un texto <h1> más descriptivo cuando el texto visible real dentro del elemento <h1> es demasiado breve y no se desea tener el texto completo visible? En los ejemplos de este hilo, se podría usar una etiqueta. Pero las etiquetas no se aplican a los títulos, por eso pregunto
HelloWorld
La única cosa similar apropiada que está solicitando es la propiedad "longdesc" (solo para imágenes) que necesita más información; no puedo imaginar que haya una para el texto, ya que siempre debe ser descriptiva de todos modos. Me temo. - @HelloWorld
Jamie Paterson

Respuestas:

427

Es un atributo diseñado para ayudar a la tecnología de asistencia (por ejemplo, lectores de pantalla) a adjuntar una etiqueta a un elemento HTML anónimo.

Entonces ahí está el <label>elemento:

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

El <label>explícitamente le dice al usuario que escriba su nombre en el inputcuadro donde id="fmUserName".

aria-labelhace casi lo mismo, pero es para aquellos casos en los que no es práctico o deseable tener una labelpantalla. Tome el ejemplo de MDN :

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

La mayoría de las personas podrían inferir visualmente que este botón cerrará el diálogo. Una persona ciega que utiliza tecnología de asistencia podría escuchar "X" en voz alta, lo que no significa mucho sin las pistas visuales. aria-labelles dice explícitamente qué hará el botón.

Olly Hodgson
fuente
44
Gracias por la explicación, pero ¿cómo escuchará de cerca? ¿Qué puedo hacer en mi navegador (Chrome) para escuchar esto? ¿Y cómo puede una persona ciega seleccionar este botón si no tiene idea de dónde está?
Salvador Dali
1
¿Supongo que una extensión como ChromeVox sería un buen lugar para comenzar? Aunque nunca lo he usado. Funcionan leyendo la pantalla en voz alta para el usuario, tomando señales del HTML (por ejemplo, se h1debe enfatizar más que un p, aes claramente un , formulario de enlace 'indica en algún lugar para ingresar información, los aria-*atributos dan más pistas sobre lo que hacen los elementos, etc.) .
Olly Hodgson
2
En este caso particular, lo agregaría a un título attribute. No hay daño en mostrar información sobre herramientas para 'ver' a los usuarios cuando pasan el cursor sobre la X.
GolezTrol
3
Además de ChromeVox, hay NVDA . Ambos son bastante fáciles de instalar e iniciar y bastante difíciles de dominar.
ivarni
1
@SalvadorDali - solo para información. en el móvil, la persona ciega puede habilitar la herramienta de accesibilidad, como para dispositivos móviles Android, es TalkBack y para móviles iOS es VoiceOver. Al usar esto, la página se lee línea por línea.
Rahul J. Rane
71

En el ejemplo que da, tiene toda la razón, debe establecer el atributo de título.

Si esta aria-labeles una herramienta utilizada por las tecnologías de asistencia (como los lectores de pantalla), no se admite de forma nativa en los navegadores y no tiene ningún efecto sobre ellos. No será de ninguna ayuda para la mayoría de las personas seleccionadas por WCAG (excepto los usuarios de lectores de pantalla), por ejemplo, una persona con discapacidades intelectuales.

La "X" no es suficiente para dar información a la acción dirigida por el botón (piense en alguien sin conocimientos de informática). Puede significar "cerrar", "eliminar", "cancelar", "reducir", una cruz extraña, un garabato, nada.

A pesar de que el W3C parece promover el atributo aria-labelmás bien que el titleaquí: http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/ARIA14 en un ejemplo similar, puede ver que la tecnología el soporte no incluye navegadores estándar: http://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria#ARIA14

De hecho aria-label, en esta situación exacta podría usarse para dar más contexto a una acción:

Por ejemplo, las personas ciegas no perciben ventanas emergentes como las de nosotros con buena visión, es como un cambio de contexto. "Volver a la página" será una alternativa más conveniente para un lector de pantalla, cuando "Cerrar" es más importante para alguien sin lector de pantalla.

  <button
      aria-label="Back to the page"
      title="Close" onclick="myDialog.close()">X</button>
Adán
fuente
35

Si quieres saber cómo aria-labelte ayuda prácticamente ... entonces sigue los pasos ... lo obtendrás por tu cuenta ...

Crea una página html con el siguiente código

<!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>

Ahora, necesita un emulador de lector de pantalla virtual que se ejecutará en el navegador para observar la diferencia. Por lo tanto, los usuarios del navegador Chrome pueden instalar la extensión Chromevox y los usuarios de Mozilla pueden usar el complemento de lector de pantalla Fangs

Una vez que haya terminado con la instalación, colóquese los auriculares en los oídos, abra la página html y concéntrese en ambos botones (presionando la tecla) uno por uno ... y podrá escuchar ... enfocarse en first x button... solo le dirá x button... pero en caso de second x button... back to the page buttonsolo escuchará ...

espero que lo tengas bien ahora !!

Moumit
fuente
1
Un punto importante es que el titleatributo se ignora, incluso en el primer botón. Más información: silktide.com/…
Sphinxxx
2
¿Sigue siendo el caso? Aún mejor para proporcionar cualquiera title y aria-label ?
Kamafeather
2
Esto es exactamente lo que quería. Solo quería ver y escuchar cómo funciona en el mundo real y chromevoxfunciona de maravilla y recitaré los campos etiquetados por aria. Gracias.
Raj Rajeshwar Singh Rathore
7

Requisito previo:

Aria se utiliza para mejorar la experiencia del usuario de usuarios con discapacidad visual. Los usuarios con discapacidad visual navegan a través de la aplicación utilizando un software lector de pantalla como JAWS, NVDA, ... Mientras navegan por la aplicación, el software lector de pantalla anuncia el contenido a los usuarios. Aria se puede usar para agregar contenido en el código que ayuda a los usuarios de lectores de pantalla a comprender el rol, el estado, la etiqueta y el propósito del control

Aria no cambia nada visualmente. (Aria también tiene miedo de los diseñadores).

etiqueta aria

El atributo aria-label se usa para comunicar la etiqueta a los usuarios del lector de pantalla. Por lo general, el campo de entrada de búsqueda no tiene una etiqueta visual (gracias a los diseñadores). aria-label se puede usar para comunicar la etiqueta de control a los usuarios de lectores de pantalla

Cómo utilizar:

<input type="edit" aria-label="search" placeholder="search">

No hay cambio visual en la aplicación. Pero los lectores de pantalla pueden entender el propósito del control

aria-labelledby

Tanto aria-label como aria-labelledby se utilizan para comunicar la etiqueta. Pero aria-labelledby se puede usar para hacer referencia a cualquier etiqueta ya presente en la página, mientras que aria-label se usa para comunicar la etiqueta que no se visualiza

Enfoque 1:

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

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

Enfoque 2:

aria-labelledby también se puede usar para combinar dos etiquetas para usuarios de lectores de pantalla

<span id="de">Billing Address</span>

<span id="sd">First Name</span>

<input type="text" aria-labelledby="de sd">
ndioewbnc
fuente
3

El titleatributo muestra una información sobre herramientas cuando el mouse se desplaza sobre el elemento. Si bien esta es una gran adición, no ayuda a las personas que no pueden usar el mouse (debido a discapacidades de movilidad) o a las personas que no pueden ver esta información sobre herramientas (por ejemplo: personas con discapacidades visuales o personas que usan un lector de pantalla).

Como tal, el enfoque consciente aquí sería servir a todos los usuarios. Agregaría ambos titley aria-labelatributos (sirviendo a diferentes tipos de usuarios y diferentes tipos de uso de la web).

Aquí hay un buen artículo que explica aria-labelen profundidad

lucalanca
fuente