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

El elemento <a> tiene un role ARIA implícito de link (cuando tiene un href) o generic (cuando no lo tiene). Ciertos atributos de estado ARIA, como aria-checked, solo son válidos en elementos con roles específicos que los soporten. Por ejemplo, aria-checked está diseñado para roles como checkbox, menuitemcheckbox, radio, switch, o option. Si colocas aria-checked en un elemento <a> sin asignar uno de estos roles compatibles, el validador genera este error porque el atributo no tiene sentido en el contexto del role actual del elemento.

Esto importa por varias razones. Los lectores de pantalla y otras tecnologías de asistencia dependen de la relación entre los roles y sus estados soportados para transmitir información significativa a los usuarios. Un atributo aria-checked en un enlace simple crea una experiencia confusa: el usuario escucha que algo está “marcado” pero el elemento se anuncia como un enlace, que no es un concepto que soporte estados marcado/desmarcado. Esta discrepancia puede hacer que las interfaces sean inutilizables para las personas que dependen de tecnología de asistencia.

Para solucionar este problema, necesitas:

1. Añadir un role apropiado que soporte el atributo de estado ARIA que estás utilizando.
2. Usar un elemento más apropiado semánticamente, como <input type="checkbox"> o <button>, que soporte de forma nativa el concepto de estar marcado o alternado.
3. Eliminar el atributo ARIA no soportado si no refleja realmente el comportamiento del elemento.

Ejemplos

Incorrecto: aria-checked sin un role compatible

Esto desencadena el error de validación porque <a> no soporta aria-checked sin un role explícito:

<a href="#" aria-checked="true">Modo oscuro</a>

Corregido: añadiendo un role compatible

Añadir role="menuitemcheckbox" (dentro de un contexto de menú) o role="switch" hace que aria-checked sea válido:

<ul role="menu">
  <li role="none">
    <a href="#" role="menuitemcheckbox" aria-checked="true">Mostrar notificaciones</a>
  </li>
  <li role="none">
    <a href="#" role="menuitemcheckbox" aria-checked="false">Modo oscuro</a>
  </li>
</ul>

Corregido: usando un <button> con role="switch" en su lugar

En muchos casos, un <button> es más apropiado semánticamente que un <a> para interacciones tipo alternador:

<button role="switch" aria-checked="true">Modo oscuro</button>

Correcto: lista de pestañas usando elementos <a> con roles apropiados

Al construir una interfaz de pestañas con elementos anchor, cada pestaña necesita role="tab" junto con atributos de soporte como aria-selected:

<div class="tab-interface">
  <div role="tablist" aria-label="Configuración">
    <a role="tab" href="#panel-1" aria-selected="true" aria-controls="panel-1" id="tab-1">
      General
    </a>
    <a role="tab" href="#panel-2" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1">
      Avanzado
    </a>
  </div>
  <div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
    <p>Contenido de configuración general</p>
  </div>
  <div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
    <p>Contenido de configuración avanzada</p>
  </div>
</div>

Incorrecto: aria-selected en un <a> simple sin un role

<a href="/configuracion" aria-selected="true">Configuración</a>

Corregido: añadiendo el role apropiado

<a href="/configuracion" role="tab" aria-selected="true">Configuración</a>

Al elegir una solución, siempre considera si el elemento <a> es realmente la mejor opción. Si el elemento no navega al usuario a una nueva URL, un <button> es generalmente más apropiado. Reserva <a> para navegación real, y usa roles y estados ARIA solo cuando describan con precisión el comportamiento del elemento en la interfaz.

Más información:

MDN Reference

MDN - aria-selected

→