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:

• 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