Los atributos aria-braille deben tener un equivalente no-braille

Los atributos aria-braillelabel y aria-brailleroledescription se introdujeron para dar a los autores un control detallado sobre cómo se presenta el contenido en las pantallas braille actualizables. Por ejemplo, una calificación visual de “4 estrellas” podría representarse como **** en braille para ahorrar espacio y mejorar la legibilidad en una pantalla de celdas limitadas. De manera similar, una descripción de rol personalizada como “diapositiva” podría abreviarse a “diap” para la salida braille.

Sin embargo, estos atributos específicos de braille están diseñados como sobrescrituras, no como valores independientes. Modifican cómo se renderiza un nombre accesible o descripción de rol existente en braille. Si no existe un nombre accesible o descripción de rol, no hay nada que el atributo braille pueda sobrescribir. La especificación WAI-ARIA establece que los atributos braille sin sus equivalentes no-braille deberían ser ignorados, pero las tecnologías de asistencia pueden no manejar esto de manera consistente. Algunos lectores de pantalla podrían mostrar el texto solo-braille mientras que otros lo ignoran completamente, llevando a una experiencia impredecible.

A quién afecta

Este problema afecta principalmente a usuarios que son ciegos o sordociegos y dependen de pantallas braille actualizables. También puede afectar a usuarios con discapacidades motoras que usan tecnologías de asistencia que interpretan atributos ARIA. Cuando los atributos braille carecen de sus contrapartes no-braille, estos usuarios pueden encontrar etiquetas faltantes o información de rol confusa, haciendo más difícil —o imposible— entender e interactuar con el contenido.

Criterios de éxito WCAG relacionados

Esta regla se mapea al Criterio de Éxito WCAG 4.1.2: Nombre, Rol, Valor (Nivel A), que requiere que todos los componentes de interfaz de usuario tengan un nombre accesible y rol que puedan ser determinados programáticamente. Usar aria-braillelabel sin un nombre accesible apropiado, o aria-brailleroledescription sin aria-roledescription, significa que el nombre o descripción de rol del elemento no se comunica de manera confiable a las tecnologías de asistencia. Esto se aplica a WCAG 2.0, 2.1 y 2.2 en Nivel A, así como a la directriz EN 301 549 9.4.1.2.

Cómo solucionarlo

• Agrega un equivalente no-braille. Si un elemento tiene aria-braillelabel, asegúrate de que también tenga un nombre accesible — vía aria-label, aria-labelledby, contenido de texto visible, o el atributo alt en imágenes. Si un elemento tiene aria-brailleroledescription, asegúrate de que también tenga aria-roledescription.
• Verifica la ubicación del atributo. El atributo aria-braillelabel o aria-brailleroledescription podría estar en el elemento incorrecto. Verifica que esté en el mismo elemento que tiene el nombre accesible o descripción de rol correspondiente.
• Elimina atributos braille innecesarios. Si el atributo braille no está sirviendo un propósito significativo (por ejemplo, si el texto braille sería el mismo que el nombre accesible), elimínalo completamente.

Ejemplos

Incorrecto: aria-braillelabel sin un nombre accesible

La imagen tiene un atributo alt vacío, por lo que no tiene nombre accesible. El aria-braillelabel no tiene nada que sobrescribir.

<img alt="" aria-braillelabel="****" src="stars.jpg">

Correcto: aria-braillelabel con un nombre accesible

El botón tiene un nombre accesible del texto alt de la imagen. El aria-braillelabel sobrescribe cómo aparece ese nombre en una pantalla braille.

<button aria-braillelabel="****">
  <img alt="4 estrellas" src="stars.jpg">
</button>

Incorrecto: aria-brailleroledescription sin aria-roledescription

El elemento tiene una descripción de rol braille pero no tiene aria-roledescription para servir como el equivalente no-braille.

<div
  role="article"
  aria-labelledby="slideheading"
  aria-brailleroledescription="diap">
  <h1 id="slideheading">Mis vacaciones en Roma</h1>
</div>

Correcto: aria-brailleroledescription con aria-roledescription

Tanto aria-roledescription como aria-brailleroledescription están presentes, por lo que la pantalla braille puede usar la versión abreviada mientras los lectores de pantalla usan la descripción de rol completa.

<div
  role="article"
  aria-labelledby="slideheading"
  aria-roledescription="diapositiva"
  aria-brailleroledescription="diap">
  <h1 id="slideheading">Mis vacaciones en Roma</h1>
</div>

Incorrecto: aria-braillelabel en el elemento incorrecto

El aria-braillelabel está en un <span> que no tiene nombre accesible, aunque el botón padre sí lo tiene.

<button aria-label="Cerrar">
  <span aria-braillelabel="cerr">X</span>
</button>

Correcto: aria-braillelabel en el elemento con el nombre accesible

El aria-braillelabel está ubicado en el mismo elemento que tiene aria-label.

<button aria-label="Cerrar" aria-braillelabel="cerr">
  <span>X</span>
</button>

Learn more:

Deque Reference

Deque University - How To Fix

→