html5 - span - aria-label w3schools
¿Qué es aria-label y cómo debo usarlo? (3)
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.
Así que ahí está el elemento <label> :
<label for="fmUserName">Your name</label>
<input id="fmUserName">
La <label> le dice explícitamente al usuario que escriba su nombre en el cuadro de input donde id="fmUserName" .
aria-label hace casi lo mismo, pero es para aquellos casos donde no es práctico o deseable tener una label en la pantalla. Tomemos 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 usa tecnología de asistencia podría simplemente escuchar "X" en voz alta, lo que no significa mucho sin las pistas visuales. aria-label explícitamente les dice lo que hará el botón.
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 se suponía que debía hacer el atributo del title . 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 cual no me proporciona ninguna etiqueta (así que supongo que entendí mal la idea). Lo probé aquí en jsfiddle .
Entonces, mi pregunta es: ¿por qué necesito aria-label y cómo debo usarla?
Si desea saber cómo aria-label ayuda prácticamente ... luego siga los pasos ... lo obtendrá por su 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 ejecute 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 chromevox pueden chromevox complemento de lector de pantalla de colmillos
Una vez que haya terminado con la instalación, ponga los auriculares en sus oídos, abra la página html y enfóquese en ambos botones (presionando la pestaña) uno por uno ... y podrá escuchar ... enfocarse en el first x button .. le dirá solo x button ... pero en el caso del second x button ... escuchará solo el back to the page button ...
Espero que lo tengas bien ahora !!
En el ejemplo que da, tiene toda la razón, debe establecer el atributo de título.
Si la aria-label es 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 en 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 liderada por el botón (piense en alguien sin conocimientos informáticos). Podría significar "cerrar", "eliminar", "cancelar", "reducir", una cruz extraña, un garabato, nada.
A pesar del hecho de que el W3C parece promover la aria-label lugar del atributo de title aquí: http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/ARIA14 en un ejemplo similar, puede ver que el soporte de tecnología 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 las ventanas emergentes como las que tenemos con una 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 un lector de pantalla.
<button
aria-label="Back to the page"
title="Close" onclick="myDialog.close()">X</button>