El elemento “td” carece de uno o más de los siguientes atributos: “aria-checked”, “role”.

El atributo aria-checked comunica el estado marcado de un widget interactivo a las tecnologías de asistencia. Según la especificación WAI-ARIA, este atributo solo se permite en elementos que tienen un role que soporta el estado “checked” — como checkbox, switch, radio, menuitemcheckbox, o menuitemradio. Un elemento <td> simple tiene un role implícito de cell (o gridcell cuando está dentro de una tabla con role="grid"), ninguno de los cuales soporta aria-checked. Cuando el validador encuentra aria-checked en un <td> sin un role compatible, marca el elemento como inválido.

Esto importa por varias razones:

• Accesibilidad: Los lectores de pantalla y otras tecnologías de asistencia dependen de la relación entre role y los atributos de estado ARIA. Un aria-checked en un elemento sin un role marcable reconocido crea una experiencia confusa o rota — los usuarios pueden no entender que la celda se supone que es interactiva.
• Cumplimiento de estándares: La especificación ARIA en HTML define reglas estrictas sobre qué atributos están permitidos en qué roles. Violar estas reglas significa que tu HTML es técnicamente inválido.
• Comportamiento del navegador: Los navegadores pueden ignorar aria-checked completamente cuando se usa en un elemento sin un role válido, haciendo el atributo inútil.

Cómo solucionarlo

Tienes dos enfoques principales dependiendo de lo que tu <td> esté destinado a hacer:

1. Añade un atributo role apropiado. Si la celda de la tabla genuinamente representa un control marcable (por ejemplo, en una grilla de datos interactiva), añade role="checkbox", role="switch", u otro role marcable apropiado al <td>, junto con tabindex para accesibilidad de teclado.

2. Elimina aria-checked y usa un control real. Si la celda simplemente contiene un checkbox o toggle, coloca un <input type="checkbox"> real dentro del <td> y elimina los atributos ARIA de la celda misma. Los controles HTML nativos ya comunican su estado a las tecnologías de asistencia sin ARIA extra.

Ejemplos

❌ Incorrecto: aria-checked sin un role

<table>
  <tr>
    <td aria-checked="true">Seleccionado</td>
    <td>Elemento A</td>
  </tr>
</table>

Esto desencadena el error porque <td> tiene el role implícito de cell, que no soporta aria-checked.

✅ Solución: Añade un role compatible al <td>

<table role="grid">
  <tr>
    <td role="checkbox" aria-checked="true" tabindex="0">Seleccionado</td>
    <td>Elemento A</td>
  </tr>
</table>

Aquí el <td> explícitamente tiene role="checkbox", que soporta aria-checked. El tabindex="0" lo hace enfocable por teclado, y role="grid" en la tabla señala que las celdas pueden ser interactivas.

✅ Solución: Usa un checkbox nativo dentro del <td>

<table>
  <tr>
    <td>
      <label>
        <input type="checkbox" checked>
        Seleccionado
      </label>
    </td>
    <td>Elemento A</td>
  </tr>
</table>

Este enfoque es a menudo la mejor opción. El <input type="checkbox"> nativo ya transmite su estado marcado a las tecnologías de asistencia, y no se necesitan atributos ARIA en el <td>.

❌ Incorrecto: role y aria-checked no coinciden

<table>
  <tr>
    <td role="button" aria-checked="false">Alternar</td>
    <td>Elemento B</td>
  </tr>
</table>

El role button no soporta aria-checked. Esto desencadenaría un error de validación diferente pero relacionado.

✅ Solución: Usa un role que soporte aria-checked

<table role="grid">
  <tr>
    <td role="switch" aria-checked="false" tabindex="0">Alternar</td>
    <td>Elemento B</td>
  </tr>
</table>

El role switch soporta aria-checked y es apropiado para controles de estilo toggle.

Más información:

MDN Reference

MDN: td

→

MDN Reference

MDN: aria-checked

→

MDN Reference

MDN: role

→