Enlaces y botones con semántica correcta

Diferenciar navegación y acción para evitar componentes confusos y mejorar la experiencia con teclado y lector.

📘 Teoría

Criterios simples para elegir elemento y evitar ambigüedad funcional.

Navegación interna o externa: usa `a` con `href` válido.

Abrir modal, guardar, filtrar o disparar lógica sin cambio de ruta.

Usar `div` clickable para acciones o navegación rompe semántica y accesibilidad.

El texto visible debe expresar acción o destino de forma clara.

Un botón deshabilitado debe comunicar estado; un enlace no tiene disabled nativo.

Con semántica correcta, las pruebas de teclado y lector son más predecibles.

Cómo detectar rápido usos incorrectos en componentes compartidos.

Revisa menús, cards, CTAs y barras de acciones: ahí suele estar el mayor número de errores.

Si encuentras `onClick` en elementos no interactivos, probablemente hay deuda de accesibilidad.

Corrige primero componentes base para propagar mejora a todas las vistas.

Dos casos correctos: navegar al perfil y ejecutar guardado local.

Elección semántica correcta

<a href="/perfil">Ver perfil</a>
<button type="button" id="guardar">Guardar cambios</button>

Ejemplo Demo guiada Compara una implementación semántica correcta frente a una ambigua.

⌄

Reto Reto práctico Corrige un enlace usado indebidamente como botón de acción.

⌄

Test

Comprueba tus conocimientos con un test sobre Accesibilidad Web.

Recursos del curso 25