Estudio de soporte de aria-label, aria-labelledby, title, alt en imágenes, vínculos y regiones con NVDA

Version 1.0: Support Examples NVDA 2016.1 + Chrome 57, IE 11, Firefox 53 (11 /05/ 2017)

Autor: Olga Carreras Montoto (Usable y accesible). Twitter: @olgacarreras

* Iré añadiendo más lectores, versiones y navegadores.

Estudio de soporte

Índice:

Imágenes: aria-label, aria-labelledby, title, alt (NVDA 2016.1)

Tests con resultados detallados (imágenes y NVDA 2016.1)

esto es alt

<img src="1.jpg" alt="esto es alt"/>

NVDA 2016.1 (IE11, Chrome57, Firefox53) se lee: "esto es alt"

Chrome57, Firefox53, IE11: al no cargarse la imagen se ve: "esto es alt"

Chrome57, Firefox53, IE11: en el tooltip se ve: no sale el tooltip


esto es alt

<img src="1.jpg" alt="esto es alt" title="esto es title"/>

NVDA 2016.1 (IE11, Chrome57, Firefox53) se lee: "esto es alt" *

* Chrome lee el alt + title si accedes saltando de imagen en imagen con "g", IE no.

Chrome57, Firefox53, IE11: al no cargarse la imagen se ve: "esto es alt"

Chrome57, Firefox53, IE11: en el tooltip se ve: "esto es title"


esto es alt

<img src="1.jpg" alt="esto es alt" title="esto es el title" aria-label="esto es el label"/>

NVDA 2016.1 (IE11, Chrome57) se lee : "esto es el label"*

NVDA 2016.1 (Firefox53) se lee : "esto es alt"

* Chrome lee el aria-label + title cuando accedes saltando de imagen en imagen con "g", IE no.

Chrome57, Firefox53, IE11: al no cargarse la imagen se ve : "esto es alt"

Chrome57, Firefox53, IE11: en el tooltip se ve: "esto es title"


esto es alt

<img src="1.jpg" alt="esto es alt" title="esto es el title" aria-label="esto es el label" aria-labelledby="t2"/>

NVDA 2016.1 (IE11, Chrome57) se lee : "esto es el label" *

NVDA 2016.1 (Firefox53) se lee : "esto es alt"

* Chrome lee el aria-label + title cuando accedes saltando de imagen en imagen con "g", IE no.

Chrome57, Firefox53, IE11: al no cargarse la imagen se ve : "esto es alt"

Chrome57, Firefox53, IE11: en el tooltip se ve: "esto es title"


<img src="1.jpg" aria-label="esto es el label"/>

NVDA 2016.1 (IE11, Chrome57, Firefox53) se lee : "esto es el label"

Chrome57, Firefox53, IE11: al no cargarse la imagen se ve : ""

Chrome57, Firefox53, IE11: en el tooltip se ve: no se muestra


<img src="1.jpg" aria-labelledby="t2"/>

NVDA 2016.1 (IE11) no lo lee, lo ignora

NVDA 2016.1 (Chrome57, Firefox53) se lee : "Imágenes: aria-label, aria-labelledby, title, alt (NVDA)" (que es el texto del elemento que tiene el id="t2")

Chrome57, Firefox53, IE11: al no cargarse la imagen se ve : ""

Chrome57, Firefox53, IE11: en el tooltip se ve: no se muestra


esto es alt

<img src="1.jpg" alt="esto es alt" aria-labelledby="t2"/>

NVDA 2016.1 (Firefox53, IE11) se lee : "esto es alt"

NVDA 2016.1 (Chrome57) se lee : "Imágenes: aria-label, aria-labelledby, title, alt (NVDA)" (que es el texto del elemento que tiene el id="t2")

Chrome57, Firefox53, IE11: al no cargarse la imagen se ve : "esto es alt"

Chrome57, Firefox53, IE11: en el tooltip se ve: no se muestra


Conclusiones y recomendaciones (imágenes y NVDA 2016.1)

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.

Vínculos: aria-label, aria-labelledby, title (NVDA 2016.1)

Test con resultados detallados (vínculos y NVDA 2016.1)

<p><button aria-label="cerrar">x</p>

NVDA 2016.1 (IE11, Chrome57, Firefox53) lee: "botón cerrar"

Conclusión:


Descargar Informe anual 2017: PDF

<p>Descargar <span id="report">Informe anual 2017</span>: <a aria-labelledby="report pdf" href="1.html"id="pdf">PDF</a></p>

NVDA 2016.1 (Chrome57, Firefox53) lee: "Descargar informe anual 2017: enlace informe anual 2017 PDF"

NVDA 2016.1 (IE11) lee: "Descargar informe anual 2017: PDF"

Conclusiones:

Recomendaciones


Descargar Informe anual 2017: PDF

<p>Descargar <span id="report">Informe anual 2017</span>: <a aria-labelledby="report" href="1.html" id="pdf">PDF</a></p>

NVDA 2016.1 (Chrome57, Firefox53) lee: "Descargar informe anual 2017: enlace informe anual 2017"

NVDA 2016.1 (IE11) lee: "Descargar informe anual 2017: PDF"

Conclusiones

Recomendaciones


Descargar Informe anual 2017: PDF

<p>Descargar <span id="report">Informe anual 2017</span>: <a aria-label="ejemplo" aria-labelledby="report pdf" href="1.html" id="pdf" >PDF</a></p>

NVDA 2016.1 (Chrome57, Firefox53) lee: "Descargar informe anual 2017: enlace informe anual 2017 PDF"

NVDA 2016.1 (IE11) lee: "Descargar informe anual 2017: ejemplo"

Conclusiones

Recomendaciones


Descargar Informe anual 2017: PDF

<p>Descargar <span id="report">Informe anual 2017</span>: <a aria-label="ejemplo" title="prueba" aria-labelledby="report pdf" href="1.html" id="pdf" >PDF</a></p>

NVDA 2016.1 (Chrome57, Firefox53 acceso lineal) lee: "Descargar informe anual 2017: enlace informe anual 2017 PDF"

NVDA 2016.1 (Chrome57, Firefox53 acceso con tab) lee: "Descargar informe anual 2017: informe anual 2017 PDF enlace prueba"

NVDA 2016.1 (IE11) lee en el acceso lineal y en el acceso con tab: "Descargar informe anual 2017: ejemplo"

Chrome57, Firefox53, IE11: el tooltip que se muestra es el del title.

Conclusiones

Recomendaciones


Descargar Informe anual 2017: PDF

<p>Descargar <span id="report">Informe anual 2017</span>: <a aria-label="ejemplo" title="prueba" href="1.html" id="pdf">PDF</a></p>

NVDA 2016.1 (Chrome57, Firefox53, IE11 acceso lineal) lee: "Descargar informe anual 2017: ejemplo"

NVDA 2016.1 (IE11 acceso con tab) lee: "Descargar informe anual 2017: ejemplo enlace"

NVDA 2016.1 (Chrome57, Firefox53 acceso con tab) lee: "Descargar informe anual 2017: ejemplo enlace prueba"

Chrome57, Firefox53, IE11: el tooltip que se muestra es el del title.

Conclusiones

Recomendaciones


Descargar Informe anual 2017: PDF

<p>Descargar <span id="report">Informe anual 2017</span>: <a title="prueba" href="1.html" id="pdf">PDF</a></p>

NVDA 2016.1 (Chrome57, Firefox53, IE11 acceso lineal) lee: "Descargar informe anual 2017: PDF"

NVDA 2016.1 (IE11 acceso con tab) lee: "Descargar informe anual 2017: PDF enlace"

NVDA 2016.1 (Chrome57, Firefox53 acceso con tab) lee: "Descargar informe anual 2017: PDF enlace prueba"

Chrome57, Firefox53, IE11: el tooltip que se muestra es el del title.

Conclusiones

Recomendaciones

Capturas de los listados de enlaces de NVDA de cada test

Esta es la captura del listado de enlaces de NVDA (insert + F7), donde se resaltan los 6 enlaces correspondientes al test, en el orden en el que se han enumerado.

IE11 + NVDA 2016.1

enlaces listados en IE: PDF, PDF, ejemplo, ejemplo, ejemplo, PDF

Chrome57 + NVDA 2016.1

enlaces listados en Chrome: informe anual 2017 PDF, informe anual 2017, informe anual 2017 PDF, informe anual 2017 PDF, ejemplo, PDF

Firefox53 + NVDA 2016.1

enlaces listados en Firefox: informe anual 2017 PDF, informe anual 2017, informe anual 2017 PDF, informe anual 2017 PDF, ejemplo, PDF

Conclusiones y recomendaciones (vínculos y NVDA 2016.1)

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.

Regiones de la página: aria-label, aria-labelledby

Test con resultados detallados (regiones de la página y NVDA 2016.1)

<section aria-labelledby="tit"> <h2 id="tit">Título con labelledby</h2>

NVDA 2016.1 (Chrome57, Firefox53) acceso lineal, lee: "Título con labelledby region" + primer elemento

NVDA 2016.1 (Chrome57, Firefox53) acceso con atajo "d", lee: "Título con labelledby region" + primer elemento

NVDA 2016.1 (Chrome57, Firefox53) acceso listado "insert+f7", muestra: "Título con labelledby region"

NVDA 2016.1 (IE11): no anuncia el elemento region de ninguna manera. Si se sustituye por <div role="complementary" lee y muestra en la lista: contenido del div + "complementario punto de referencia"


<section aria-label="Título con label"> <h2 id="tit">Título con labelledby</h2>

NVDA 2016.1 (Chrome57, Firefox53) acceso lineal, lee: "Título con label region" + primer elemento

NVDA 2016.1 (Chrome57, Firefox53) acceso con atajo "d", lee: "Título con label region" + primer elemento

NVDA 2016.1 (Chrome57, Firefox53) acceso listado "insert+f7", muestra: "Título con label region"

NVDA 2016.1 (IE11): no anuncia el elemento region de ninguna manera. Si se sustituye por <div role="complementary" lee y muestra en la lista: "Título con label complementario punto de referencia" + primer elemento


<section aria-label="Título con label" aria-labelledby="tit"> <h2 id="tit">Título con labelledby</h2>

NVDA 2016.1 (Chrome57, Firefox53) acceso lineal, lee: "Título con labelledby region" + primer elemento

NVDA 2016.1 (Chrome57, Firefox53) acceso con atajo "d", lee: "Título con labelledby region" + primer elemento

NVDA 2016.1 (Chrome57, Firefox53) acceso listado "insert+f7", muestra: "Título con labelledby region"

NVDA 2016.1 (IE11): no anuncia el elemento region de ninguna manera. Si se sustituye por <div role="complementary" lee y muestra en la lista: "Título con label complementario punto de referencia" + primer elemento


Conclusiones y recomendaciones (regiones de la página y NVDA 2016.1)

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.

Artículos relacionados: