jueves, 11 de mayo de 2017

Estudio del soporte de aria-label y aria-labelledby

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:

2 comentarios :
Eduardo dijo...

Ahora mismo, para una imagen, ¿que sería más adecuado, usar alt o aria-label?, y para enlaces ¿title o aria-label?

Muchas gracias.

Olga Carreras dijo...

Para las imágenes deberías utilizar alt.

En 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.

Publicar un comentario