¿Qué es aria-label y cómo debo usarlo?
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 Mozilla Developer Network 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é lo necesito aria-labely cómo debo usarlo?
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 que de otro modo sería anónimo.
Entonces ahí está el <label>elemento:
<label for="fmUserName">Your name</label>
<input id="fmUserName">
Le <label>indica explícitamente al usuario que escriba su nombre en el inputcuadro donde id="fmUserName".
aria-labelhace prácticamente lo mismo, pero es para aquellos casos en los que no es práctico o deseable tener una labelpantalla.
<button aria-label="Close" onclick="myDialog.close()">X</button>`
La mayoría de la gente podría inferir visualmente que este botón cerrará el cuadro de diálogo. Una persona ciega que utiliza tecnología de asistencia podría simplemente escuchar "X" leída en voz alta, lo que no significa mucho sin las pistas visuales. aria-labelles dice explícitamente qué hará el botón.
En el ejemplo que das, tienes toda la razón, debes establecer el atributo del título.
Si se aria-labeltrata de una herramienta utilizada por tecnologías de asistencia (como lectores de pantalla), no es compatible de forma nativa con los navegadores y no tiene ningún efecto sobre ellos. No será de ninguna ayuda para la mayoría de las personas a las que se dirigen las WCAG (excepto los usuarios de lectores de pantalla), por ejemplo, una persona con discapacidad intelectual.
La "X" no es suficiente para dar información sobre la acción liderada por el botón (pensemos en alguien sin conocimientos de informática). Podría significar "cerrar", "eliminar", "cancelar", "reducir", una cruz extraña, un garabato, nada.
A pesar de que el W3C parece promover el atributo aria-labelen lugar del titleatributo aquí: http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/ARIA14 en un ejemplo similar, se 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, los ciegos no perciben los popups como los que tenemos 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 significativo para alguien sin lector de pantalla.
<button
aria-label="Back to the page"
title="Close" onclick="myDialog.close()">X</button>
