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:

0 comentarios :
Publicar un comentario