Validación HTML: Al elemento "a" le falta uno o más de los siguientes atributos: "href", "role".

Acerca de este problema HTML

Según la especificación HTML, el elemento <a> puede existir sin un atributo href, pero en ese caso representa un marcador de posición donde un enlace podría haber sido colocado de otra manera. Sin embargo, el validador marca esto como un problema porque un elemento <a> sin href y sin role es ambiguo — los navegadores no lo tratarán como un enlace (no será enfocable o accesible por teclado), y las tecnologías de asistencia no sabrán cómo presentarlo a los usuarios.

Esto es importante por varias razones:

Accesibilidad: Sin href, el elemento <a> pierde su role="link" implícito y ya no es anunciado como un enlace por los lectores de pantalla. Tampoco aparecerá en el orden de tabulación, haciéndolo invisible para los usuarios de teclado.
Semántica: Si el elemento tiene estilos y scripts para comportarse como un botón o enlace pero carece de los atributos apropiados, crea una desconexión entre lo que los usuarios ven y lo que el navegador entiende.
Cumplimiento de estándares: La especificación espera que seas explícito sobre el propósito del elemento cuando href está ausente.

La causa más común de este problema es usar elementos <a> como objetivos de clic solo para JavaScript sin proporcionar un href, o usarlos como contenedores con estilos sin ningún propósito interactivo.

Cómo solucionarlo

Hay varios enfoques dependiendo de tu intención:

Añade un atributo href si el elemento debe ser un enlace. Esta es la solución más común y recomendada.
Añade un atributo role si estás usando deliberadamente <a> sin href para un propósito específico, como role="button".
Usa un elemento diferente completamente. Si no es un enlace, considera usar un <button>, <span>, u otro elemento semánticamente apropiado.

Ejemplos

❌ Faltan tanto `href` como `role`

<a>Haz clic aquí</a>

Esto provoca el error del validador porque el <a> no tiene ni href ni role.

❌ Manejador solo para JavaScript sin `href`

<a onclick="doSomething()">Enviar</a>

Incluso con un manejador de eventos, el elemento carece de href y role, por lo que falla la validación y es inaccesible para los usuarios de teclado.

✅ Solución añadiendo un `href`

<a href="/acerca-de">Acerca de nosotros</a>

Añadir href lo convierte en un hipervínculo apropiado — enfocable, accesible por teclado, y reconocido por los lectores de pantalla.

✅ Solución añadiendo `role` para un propósito que no es enlace

<a role="button" tabindex="0" onclick="doSomething()">Enviar</a>

Si debes usar <a> sin href como un botón, añade role="button" y tabindex="0" para asegurar que sea enfocable y correctamente anunciado. Sin embargo, considera usar un <button> real en su lugar.

✅ Mejor: usa el elemento correcto

<button type="button" onclick="doSomething()">Enviar</button>

Si el elemento desencadena una acción en lugar de navegar a algún lugar, un <button> es la elección semántica correcta. Es enfocable por defecto, responde a eventos de teclado, y no necesita atributos adicionales.

✅ Ancla de marcador de posición (no-enlace intencional)

<a role="link" aria-disabled="true">Próximamente</a>

Si intencionalmente estás mostrando un marcador de posición donde un enlace aparecerá eventualmente, puedes añadir un role e indicar su estado deshabilitado para las tecnologías de asistencia. Alternativamente, usa un <span> con estilos apropiados para evitar el problema por completo.