Os comparto mi Estudio de soporte de aria-label, aria-labelledby, title, alt en imágenes, vínculos y regiones con NVDA, Olga Carreras, 2017.
Los test los he realizado de momento con NVDA 2016.1 + IE 11, Chrome 57, Firefox 53, pero iré añadiendo más lectores y versiones.
He realizados tres tipos de test:
- Con imágenes, analizando cómo anuncia NVDA la imagen con la combinación de diferentes atributos (alt, title, aria-label, aria-labelledby). Se analiza también el tooltip y qué se visualiza si la imagen no se carga.
- Con vínculos, analizando cómo anuncia NVDA el vínculo imagen con la combinación de diferentes atributos (title, aria-label, aria-labelledby). Se estudia en el acceso lineal, en el acceso con el tabulador y en la lista de enlaces de NVDA.
- Con regiones, analizando cómo anuncia NVDA una region con la combinación de diferentes atributos(aria-label, aria-labelledby). Se estudia en el acceso lineal, en el acceso con la tecla "d" para saltar de región a región y en el listado de puntos de referencia o landmark roles (insert + f7)
Incluyo las tablas resumen, pero en el estudio podréis consultar todos los test, los resultados y las conclusiones.
También podéis consultar más test en Test, estadísticas, encuestas y estudios sobre lectores de pantalla, Olga Carreras.
Tabla resumen (imágenes y NVDA 2016.1)
| Atributos en <img> | Chrome57 lee* | Firefox53 lee* | IE11 lee* |
|---|---|---|---|
| alt | alt | alt | alt |
| alt + title | alt | alt | alt |
| alt + title + aria-label | aria-label | alt | aria-label |
| alt + title + aria-label + aria-labelledby | aria-label | alt | aria-label |
| aria-label | aria-label | aria-label | aria-label |
| aria-labelledby | aria-labelledby | aria-labelledby | ignora la imagen |
| alt + aria-labelledby | aria-labelledby | alt | alt |
* En el acceso lineal. Al saltar con "g" el title se lee añadido al texto anunciado solo en Chrome, en IE no.
Tabla resumen (vínculos y NVDA 2016.1)
| Atributos en <a> | Chrome57 lee* | Firefox53 lee* | IE11 lee* |
|---|---|---|---|
| aria-labelledby | aria-labelledby | aria-labelledby | texto de enlace |
| aria-labelledby + aria-label | aria-labelledby | aria-labelledby | aria-label |
| aria-labelledby + aria-label + title * | aria-labelledby | aria-labelledby | aria-label |
| aria-label + title * | aria-label | aria-label | aria-label |
| title * | texto de enlace | texto de enlace | texto de enlace |
* En la lectura lineal. En el acceso con el tabulador, Chrome y Firefox añadirán al texto anunciado el texto del title.
Tabla resumen (regiones de la página y NVDA 2016.1)
| Atributos en <section> | Chrome57 lee ** | Firefox53 lee ** | IE11 lee ** |
|---|---|---|---|
| aria-labelledby | aria-labelledby | aria-labelledby | no lo anuncia / lo anuncia con todo su contenido* |
| aria-label | aria-label | aria-label | no lo anuncia / aria-label* |
| aria-label + aria-labelledby | aria-labelledby | aria-labelledby | no lo anuncia / aria-label* |
* Si se sustituye por <div role="complementary"> lee lo que se indica.
** Además se anuncia seguido el primer elemento que le sigue.
Enlace: Estudio de soporte de aria-label, aria-labelledby, title, alt en imágenes, vínculos y regiones con NVDA, Olga Carreras, 2017.
Artículos relacionados:
- Test, estadísticas, encuestas y estudios sobre lectores de pantalla
- Landmark Roles (WAI-ARIA). Navegación más accesible y semántica en 2 minutos.
- LONGDESC. Soporte y alternativas (WCAG 2.0, ARIA:aria-describedby y aria-describedat, HTML5: figure y picture)
- Novedades WAI-ARIA 1.1
- WAI-ARIA. Introducción, referencias, ejemplos, herramientas
- Live Regions y WAI-ARIA. Cómo mejorar la accesibilidad de contenidos que se actualizan automáticamente
Ahora mismo, para una imagen, ¿que sería más adecuado, usar alt o aria-label?, y para enlaces ¿title o aria-label?
ResponderEliminarMuchas gracias.
Para las imágenes deberías utilizar alt.
ResponderEliminarEn el caso de los enlaces, si tu texto de enlace no puede ser suficientemente significativo, es mejor usar aria-label que title, siempre y cuando tengas en cuenta que aria-label sustituye al texto del enlace, y title lo complementa.
Es decir, Leer mas o Leer más
En el primer caso (title), en la lista de enlaces del lector, el propósito del enlace seguirá sin ser claro (no se muestra el title), y el title no se leerá en la lectura lineal. Desventajas que no tenemos con aria-label.