Usar el atributo «aria-labeledby» para proporcionar un texto alternativo a contenido no textual. [Técnica ARIA10 – WCAG 2.1] (Accesibilidad Web 71)


Se aplica a

Se aplica a HTML de Aplicaciones Web Interactivas (WAI-ARIA)

Esta técnica se relaciona con el Criterio 1.1.1 – Existencia de alternativas textuales

Descripción

El propósito de esta técnica es aportar descripciones cortas para los elementos que puedan ser leidas por tecnologías de asistencia usando el atributo «aria-labelledby».

El atributo «aria-labelledby» asocia un elemento con texto que es visible en otro lugar de la página usando una referencia via el atributo ID del elemento al que se asocia la etiqueta.

Las tecnologías de asistencia, como los lectores de pantalla, usan el texto del elemento identificado por el valor del atributo «aria-labelledby» comot exto alternativo para elemento al que hace referencia.

Ejemplos

Ejemplo 1: Proporcionando una descripción alternativa corta para un gráfico complejo

Este ejemplo muestra como usar el atributo «aria-labelledby» para proporcionar una descripción alterantiva cortar para un gráfico complejo de solo lectura, consistente en una serie de estrellas.

El texto alternativo para el gráfico es la etiqueta visible en la página, situado bajo las estrellas.

<div role="img" aria-labelledby="star_id">
<img src="fullstar.png" alt=""/>
<img src="fullstar.png" alt=""/>
<img src="fullstar.png" alt=""/>
<img src="fullstar.png" alt=""/>
<img src="emptystar.png" alt=""/>
</div>

<div id="star_id">4 of 5</div>

Ejemplo interactivo (en Inglés) «Providing a short description for a complex graphic

Recursos

Estos recursos (en Inglés) son únicamente para propósitos informativos, no implican apoyo alguno.

Técnicas Relacionadas

  • H37: Usando atributos alt en elementos de tipo imagen

Fallos Relacionados

Tests

Procedimiento

  1. Examine cada elemento donde el atributo «aria-labelledby» este presente y el elemento no soporte al atributo alt.
  2. Compruebe que el valor del atributo «aria-labelledby» es el id de un elemento existente en la página web.
  3. Determine si el texto del elemento identificado por el atributo «aria-labelledby» proporciona una descripción apropiada y precisa, cumpliendo el propósito de aportar informacion equivalente.

Resultados Esperados

  • Tanto 2 como 3 son verdaderos

Bibliografía


Quizá te interese leer más sobre WCAG 2.1 - Técnicas

Dejar una Respuesta

XHTML: Usted puede usar las siguientes etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>