Los atributos ARIA deben usarse según se especifica para el rol del elemento

Cuando los atributos ARIA se aplican a elementos donde la especificación dice que no deberían usarse, el resultado es un comportamiento impredecible entre navegadores y tecnologías asistivas. Diferentes navegadores manejan estos conflictos de manera inconsistente: algunos ignoran el atributo ARIA, otros anulan el estado nativo, y otros pasan ambos valores. Esta inconsistencia significa que un usuario de lector de pantalla en un navegador puede escuchar un estado completamente diferente que un usuario de lector de pantalla en otro, creando una experiencia confusa y poco confiable.

Esta regla se relaciona con WCAG 2.0/2.1/2.2 Criterio de Éxito 4.1.2: Nombre, Función, Valor (Nivel A), que requiere que para todos los componentes de interfaz de usuario, el nombre, función y estados puedan determinarse programáticamente. Cuando los atributos ARIA entran en conflicto con la semántica nativa o se usan fuera de su contexto permitido, el estado determinado programáticamente se vuelve ambiguo o incorrecto. Los usuarios afectados incluyen personas ciegas o sordociegas que dependen de lectores de pantalla, así como personas con discapacidades de movilidad que usan dispositivos de entrada alternativos que dependen de información ARIA precisa.

Hay dos escenarios principales que verifica esta regla:

El atributo aria-checked en checkboxes nativos

El atributo aria-checked no debería usarse en un elemento <input type="checkbox">. Los checkboxes HTML nativos ya comunican su estado marcado al árbol de accesibilidad del navegador a través de la propiedad checked. Cuando añades aria-checked encima de esto, creas dos fuentes de verdad que compiten. Si el estado nativo checked y el valor aria-checked se dessincronizan —lo cual es fácil de hacer— algunas tecnologías asistivas reportarán el estado nativo mientras otras reportan el estado ARIA. El usuario no tiene forma de saber cuál es correcto.

Cómo solucionarlo

Tienes dos opciones:

1. Eliminar aria-checked y depender del atributo o propiedad nativo checked. Si necesitas un estado “mixto” o indeterminado, establece la propiedad indeterminate en el checkbox vía JavaScript.
2. Reemplazar el checkbox nativo con un elemento personalizado (por ejemplo, un <div> o <span>) que use role="checkbox" junto con aria-checked. Al hacer esto, también debes asegurar que el elemento sea accesible por teclado (enfocable y conmutable con Espacio) y tenga un nombre accesible.

Atributos específicos de fila fuera de un treegrid

Los atributos aria-posinset, aria-setsize, aria-expanded y aria-level solo son válidos en una fila (un elemento <tr> o un elemento con role="row") cuando esa fila está dentro de un treegrid. Estos atributos describen relaciones jerárquicas de árbol —posición dentro de un conjunto, nivel de anidación y capacidad de expansión— que son conceptos que solo tienen sentido en un contexto de cuadrícula de árbol. Cuando se usan dentro de una <table> simple o grid, estos atributos no sirven ninguna función y pueden hacer que los lectores de pantalla anuncien información confusa o sin sentido.

Cómo solucionarlo

Elimina los atributos no soportados de las filas, o cambia el rol del contenedor padre a treegrid si los datos realmente representan una estructura jerárquica y expandible. Si cambias a treegrid, asegúrate de que las celdas usen role="gridcell" y que el patrón de interacción por teclado coincida con lo que los usuarios esperan de una cuadrícula de árbol (navegación con teclas de flecha para expandir/colapsar filas).

Ejemplos

Ejemplo malo: aria-checked en un checkbox nativo

El atributo aria-checked entra en conflicto con el estado del checkbox nativo.

<label>
  <input type="checkbox" aria-checked="true">
  Acepto hacer mi sitio web accesible
</label>

Ejemplo bueno: checkbox nativo sin aria-checked

El navegador comunica el estado marcado nativamente —no se necesita anulación ARIA.

<label>
  <input type="checkbox" checked>
  Acepto hacer mi sitio web accesible
</label>

Ejemplo bueno: checkbox personalizado usando aria-checked

Al construir un checkbox personalizado, aria-checked es apropiado porque no hay estado marcado nativo.

<div role="checkbox" aria-checked="true" tabindex="0" aria-label="Acepto hacer mi sitio web accesible">
  ✓ Acepto hacer mi sitio web accesible
</div>

Ejemplo malo: atributos de árbol en filas dentro de una tabla simple

Los atributos aria-level y aria-expanded no son válidos en filas dentro de una <table>.

<table>
  <tr aria-level="1" aria-expanded="false">
    <td>Mis Descargas</td>
  </tr>
  <tr aria-level="2">
    <td>Documentos</td>
  </tr>
</table>

Ejemplo bueno: atributos de árbol en filas dentro de un treegrid

Cambiar el rol de la tabla a treegrid hace que estos atributos sean válidos y significativos.

<table role="treegrid">
  <tr aria-level="1" aria-expanded="false">
    <td role="gridcell">Mis Descargas</td>
  </tr>
  <tr aria-level="2" class="hidden">
    <td role="gridcell">Documentos</td>
  </tr>
</table>

Ejemplo bueno: eliminando atributos no soportados de una tabla simple

Si los datos no son jerárquicos, simplemente elimina los atributos relacionados con árbol.

<table>
  <tr>
    <td>Mis Descargas</td>
  </tr>
  <tr>
    <td>Documentos</td>
  </tr>
</table>

Learn more:

Deque Reference

Deque University - How To Fix

→