Validación HTML: Un atributo "aria-disabled" cuyo valor es "true" no debería especificarse en un elemento "a" que tiene un atributo "href".

Acerca de este problema HTML

El problema principal es que aria-disabled="true" es puramente una pista de accesibilidad — comunica un estado deshabilitado a las tecnologías de asistencia como lectores de pantalla, pero no tiene efecto en el comportamiento real del elemento. Cuando un elemento a tiene un atributo href, el navegador lo trata como un hipervínculo válido independientemente de cualquier atributo ARIA. Los usuarios aún pueden hacer clic en él, seguirlo mediante navegación por teclado y navegar a su destino. Esta discrepancia entre el estado anunciado (“deshabilitado”) y el comportamiento real (“enlace completamente funcional”) crea una experiencia confusa y engañosa, particularmente para usuarios de tecnologías de asistencia.

El validador W3C marca esta combinación porque viola el principio de que los estados ARIA deberían reflejar con precisión el verdadero estado interactivo de un elemento. Un enlace que afirma estar deshabilitado pero aún funciona socava la confianza del usuario y puede causar problemas reales de usabilidad.

Por qué esto importa

Accesibilidad: Los lectores de pantalla anunciarán el enlace como deshabilitado, pero los usuarios que lo activen serán navegados inesperadamente. Esto es desorientador y viola la guía WCAG sobre comportamiento predecible.
Cumplimiento de estándares: La especificación HTML y los requisitos ARIA en HTML desaconsejan o prohíben esta combinación porque produce una experiencia de usuario poco confiable.
Comportamiento del navegador: Ningún navegador deshabilitará un enlace solo porque aria-disabled="true" esté presente. El atributo href siempre hace que el elemento a sea un hipervínculo activo.

Cómo solucionarlo

Tienes dos enfoques principales dependiendo de tu intención:

El enlace debería estar activo: Elimina aria-disabled="true" y mantén el href. Si el enlace funciona, no lo marques como deshabilitado.
El enlace debería estar deshabilitado: Elimina el atributo href. Sin href, el elemento a se convierte en un enlace marcador que no es interactivo. Luego puedes usar aria-disabled="true" para comunicar el estado deshabilitado, tabindex="-1" para eliminarlo del orden de tabulación del teclado, y CSS para darle estilo como visualmente deshabilitado. También deberías agregar JavaScript para prevenir la activación si es necesario.

Ejemplos

Incorrecto

Esto provoca el error de validación porque aria-disabled="true" entra en conflicto con la presencia de href:

<a href="/dashboard" aria-disabled="true">Ir al Panel de Control</a>

Correcto — Mantener el enlace activo

Si el enlace debería funcionar normalmente, simplemente elimina el atributo aria-disabled:

<a href="/dashboard">Ir al Panel de Control</a>

Correcto — Deshabilitar el enlace

Si el enlace debería ser no accionable (por ejemplo, un elemento de navegación al que el usuario actualmente no tiene acceso), elimina el atributo href y usa ARIA y CSS para comunicar el estado deshabilitado:

<a aria-disabled="true" tabindex="-1" role="link" class="link-disabled">Ir al Panel de Control</a>

.link-disabled {
  color: #6c757d;
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: none;
}

En este enfoque:

Eliminar href asegura que el enlace no sea accionable por el navegador.
aria-disabled="true" le dice a las tecnologías de asistencia que el elemento está deshabilitado.
tabindex="-1" elimina el elemento del orden de tabulación del teclado para que los usuarios no puedan navegar a él con Tab.
role="link" preserva la semántica del enlace para que los lectores de pantalla aún lo identifiquen como un enlace (un a sin href pierde su rol implícito de enlace).
El CSS proporciona una indicación visual de que el elemento está deshabilitado, con pointer-events: none previniendo clics del ratón y cursor: not-allowed dando una pista visual al pasar el cursor.

Correcto — Usar un botón en su lugar

Si el “enlace” desencadena una acción en lugar de navegar a algún lugar, considera usar un elemento button en su lugar. Los botones soportan nativamente el atributo disabled:

<button type="button" disabled>Realizar Acción</button>

Esta es la solución más simple y robusta cuando el elemento no necesita ser un enlace. El atributo disabled es entendido nativamente por navegadores y tecnologías de asistencia sin necesidad de soluciones ARIA.