La guía completa de accesibilidad para enlaces y botones: nombres, distinguibilidad, foco, áreas clicables y prevención de errores para una “UI que puedes pulsar sin dudar” (WCAG 2.1 AA)
Resumen general (puntos clave primero)
- Los enlaces y los botones son las “manos” de la experiencia web. Si los usuarios no pueden pulsarlos, ninguna información o servicio puede llegarles.
- Lo que más importa es ① usar correctamente enlaces vs. botones ② nombres claros y comprensibles (se entiende el propósito) ③ distinguibilidad que no dependa solo del color ④ tamaño suficiente del objetivo de clic/toque ⑤ foco visible ⑥ prevención de errores en acciones destructivas.
- Etiquetas vagas como “Haz clic aquí”, “Detalles” o “Más” causan problemas especialmente en listas de enlaces de lectores de pantalla, entrada por voz y navegación con teclado.
- Este artículo incluye plantillas de nombres listas para usar, ejemplos buenos/malos, muestras de implementación (HTML/CSS) y una prueba rápida de 5 minutos.
Lectores objetivo (específicos): diseñadores UI/UX, ingenieros frontend, editores web, operadores de e-commerce/servicios de reservas, personal de sitios gubernamentales/públicos, QA/testers, responsables de design systems
Nivel de accesibilidad: apuntando a conformidad WCAG 2.1 AA (criterios relacionados: 2.4.4, 2.4.7, 1.4.1, 1.4.3, 1.4.11, 2.5.3, 4.1.2, etc.)
1. Introducción: los enlaces y botones son el “lenguaje de la acción”—la ambigüedad hace que los usuarios se pierdan
Incluso si la estructura de la página y la navegación están bien organizadas, la acción final siempre se realiza mediante “enlaces” y “botones”. En otras palabras, enlaces y botones son las “manos” de la experiencia de usuario. Si son difíciles de entender, difíciles de pulsar o fáciles de pulsar por error, la accesibilidad nunca está completa.
Quienes usan lectores de pantalla suelen buscar mediante “listas de enlaces” o “listas de botones”, quienes usan teclado avanzan secuencialmente con la tecla Tab, y quienes usan entrada por voz operan pronunciando en voz alta las etiquetas visibles (“Toca ○○”). Esto significa que los nombres, la distinguibilidad y la operabilidad de enlaces y botones determinan directamente la usabilidad.
En este artículo, resumimos cuidadosamente puntos prácticos de diseño, implementación y operación para crear una UI que cualquiera pueda pulsar sin dudar.
2. La regla fundamental: elegir correctamente entre enlaces y botones (esto decide la mitad del resultado)
2.1 Los enlaces (<a>) son para “navegación”
- Ir a otra página
- Saltar a otra sección en la misma página
- Abrir o descargar un archivo
- Acciones que deben ser compartibles como URL (routing)
Ejemplos:
- “Ver detalles de envío”
- “Ir a Empleos”
- “Abrir el PDF”
2.2 Los botones (<button>) son para “acciones en el lugar”
- Enviar (submit)
- Abrir/cerrar (acordeones, modales)
- Aplicar filtros
- Acciones como reproducir/pausar, guardar, eliminar
Ejemplos:
- “Guardar”
- “Buscar”
- “Abrir menú”
Si esta distinción se rompe, las tecnologías de asistencia pueden interpretar mal si algo es navegación o ejecución, y la operación con teclado o el anuncio de estados se vuelve inestable. Aunque la apariencia sea la misma, elegir el elemento semántico correcto es la prioridad número uno.
3. Crear “nombres comprensibles”: los enlaces y botones solo son usables cuando su propósito es claro
3.1 Error común: etiquetas vagas
- “Haz clic aquí”
- “Detalles”
- “Más”
- “Confirmar”
- “Enviar” (¿enviar qué?)
Pueden entenderse visualmente por el contexto, pero su significado desaparece en listas de enlaces o de botones. Cuando aparecen muchas etiquetas idénticas, también aumenta la confusión para usuarios de voz y de conmutadores (switch).
3.2 Plantilla de nombres: Verbo + Objeto (+ Condición si hace falta)
- “Ver detalles del pedido”
- “Cambiar dirección de envío”
- “Descargar recibo”
- “Restablecer contraseña”
- “Restablecer condiciones de búsqueda”
La respuesta correcta es cuando queda claro de inmediato qué va a ocurrir.
3.3 Ejemplo: mejorar “Detalles” en una lista de tarjetas
Ejemplo malo
- Diez botones etiquetados “Detalles”
Ejemplo bueno (incluye el objeto en la etiqueta)
- “Ver el perfil de Tanaka”
- “Ver detalles del Proyecto A”
Si las restricciones visuales exigen una etiqueta corta, puedes mantener el texto visible corto y reforzar el nombre accesible:
<a href="/profile/tanaka" aria-label="Ver el perfil de Tanaka">Detalles</a>
Sin embargo, si la etiqueta visible y el nombre “hablado” difieren demasiado, los usuarios pueden confundirse (WCAG 2.5.3). Siempre que sea posible, mejorar la etiqueta visible en sí misma es la opción más segura.
4. No dependas solo del color para enlaces: bases de distinguibilidad y contraste
4.1 El problema de enlaces solo por color
Usuarios con diferencias en visión del color, entornos de bajo contraste, reflejos en pantalla o vistas con zoom pueden ver los enlaces como texto normal.
Como principio, los enlaces deberían combinar el color con otras pistas como:
- Subrayado
- Iconos
- Negrita
Ejemplo recomendado:
a {
text-decoration: underline;
text-underline-offset: 0.15em;
}
a:hover, a:focus-visible {
text-decoration-thickness: 3px;
}
4.2 Contraste (texto, enlaces, no-texto)
- Texto normal: 4.5:1 o superior
- Texto grande: 3:1 o superior
- Elementos no textuales (bordes, iconos, anillos de foco, etc.): 3:1 o superior
Incluso usando colores de marca para enlaces, asegura contraste suficiente tanto con el texto del cuerpo como con el fondo.
5. Foco visible: nunca quites al usuario de teclado su “ubicación actual”
Cuantos más enlaces y botones haya en una página, más crítico se vuelve el foco visible. Si el foco no se ve, quienes navegan con teclado no pueden saber dónde están, haciendo la página prácticamente inutilizable.
Ejemplo recomendado:
:focus-visible{
outline: 3px solid #FF9900;
outline-offset: 3px;
}
5.1 “Eliminar” es la peor opción; “estilizar” es la correcta
Evita outline: none;. En su lugar, ajusta grosor, color y offset para que encaje con tu diseño. Elige colores que sigan siendo visibles incluso sobre imágenes o degradados.
6. Objetivos clicables y prevención de errores: crea áreas tocables con espaciado
6.1 Guía de tamaño de objetivo
Especialmente para usuarios móviles, de seguimiento ocular (eye-tracking) o personas con movilidad limitada, el tamaño del área tocable es crucial.
Como guía, asegura que los botones tengan un área clicable equivalente a 44px.
.btn {
min-height: 44px;
padding: 0.6rem 1rem;
}
6.2 No limites los enlaces a “solo el texto”
Los enlaces en línea pueden funcionar, pero en UIs basadas en tarjetas, objetivos pequeños incrementan errores.
- Si toda la tarjeta es clicable, asegúrate de que el anillo de foco aparezca alrededor de toda la tarjeta
- Las tarjetas con múltiples enlaces mezclados requieren una estructura cuidadosa para evitar clics equivocados
7. Proteger acciones destructivas (eliminar, cancelar, enviar): la accesibilidad incluye recuperarse de errores
La accesibilidad no trata solo de poder pulsar algo—también de poder recuperarse de un error. Las acciones destructivas son especialmente riesgosas bajo alta carga cognitiva o usando tecnologías de asistencia.
7.1 Mantén los botones destructivos a distancia
- Si colocas “Guardar” y “Eliminar” juntos, sepáralos físicamente y no dependas solo del color
- Usa etiquetas claras (“Eliminar esta dirección” en lugar de solo “Eliminar”)
7.2 Usa una confirmación de dos pasos bien pensada
- Indica claramente qué se va a eliminar
- Ofrece “Deshacer” si es posible
- En modales de confirmación, gestiona el foco correctamente (abrir → confirmar/cancelar → devolver el foco)
7.3 Acompaña estados deshabilitados con razones
Solo poner el botón en gris deja a la gente sin saber por qué no se puede usar.
- “Faltan campos obligatorios”
- “No tienes permiso”
Dar una razón textual es más amable para el usuario.
8. Iconos, texto y ARIA: patrones seguros de implementación para UI común
8.1 Botones solo con icono
<button type="button" aria-label="Cerrar">
<img src="close.svg" alt="">
</button>
- Trata la imagen como decorativa con
alt="" - Proporciona el nombre del botón con
aria-label
8.2 Enlaces externos y nuevas pestañas: preserva la previsibilidad
Los enlaces que abren en una nueva pestaña generan más confianza si se anuncian de antemano.
- Icono + texto
- O una nota amigable para lectores de pantalla
Ejemplo:
<a href="…" target="_blank" rel="noopener">
Empleos (se abre en una nueva pestaña)
</a>
Evita abusar de nuevas pestañas—úsalas solo cuando haya una razón clara.
8.3 CTAs (acciones principales): un “héroe” por pantalla es más claro
Demasiados botones generan duda.
- Un CTA principal, uno o dos CTAs secundarios
- Etiquetas como verbo + objeto
- Separar visualmente acciones destructivas
9. Prueba rápida de 5 minutos: checklist mínimo para enlaces y botones
- La navegación son enlaces, las acciones son botones
- No se “clonan” etiquetas vagas como “Haz clic aquí” o “Detalles”
- Los enlaces no se distinguen solo por color
- Contraste suficiente para texto, enlaces y foco
- El foco siempre es visible al tabular con teclado
- Los objetivos clicables no son demasiado pequeños (especialmente en móvil)
- Las acciones destructivas tienen confirmación o recuperación
- Los botones con icono tienen nombres apropiados (
aria-label)
Pasar estas comprobaciones reduce drásticamente fallos de “no puedo pulsar”, “no entiendo” y “pulsé por error”.
10. Valor para cada audiencia (beneficios concretos)
- Usuarios de lector de pantalla: pueden encontrar acciones deseadas fácilmente en listas de enlaces y botones.
- Usuarios de teclado: foco visible y estructura lógica reducen errores y estabilizan la operación.
- Usuarios de entrada por voz: etiquetas específicas y coincidentes facilitan comandos por voz.
- Usuarios con diferencias cognitivas: menos ambigüedad y confirmaciones en acciones destructivas dan tranquilidad.
- Personas mayores y usuarios móviles: objetivos más grandes reducen toques erróneos y estrés.
- Equipos de operación: plantillas de nombres estabilizan calidad en actualizaciones y acortan revisiones.
11. Evaluación del nivel de accesibilidad (lo que logra este artículo)
- Criterios principales WCAG 2.1 AA cubiertos
- 2.4.4 Propósito del enlace (en contexto): eliminar etiquetas vagas, aclarar objetos
- 2.4.7 Foco visible: asegurar indicadores de foco visibles
- 1.4.1 Uso del color: distinguir enlaces sin depender solo del color
- 1.4.3 Contraste (mínimo) / 1.4.11 Contraste no textual: visibilidad de texto, iconos, foco
- 2.5.3 Etiqueta en el nombre: nombres operables por voz
- 4.1.2 Nombre, función, valor: semántica correcta de enlaces/botones y nombres de botones con icono
Mejorar enlaces y botones no solo apoya conformidad AA, sino que también mejora directamente tasas de finalización, tasas de error y consultas a soporte.
12. Conclusión: poder pulsar es la unidad más pequeña de amabilidad
- Los enlaces navegan, los botones actúan—elige elementos semánticos correctamente.
- Usa etiquetas “verbo + objeto” para que el propósito sea claro incluso en listas.
- No dependas solo del color; añade subrayado y otras pistas.
- Nunca elimines la visibilidad del foco—hazla fuerte y clara.
- Crea objetivos clicables con espaciado para reducir errores.
- Protege acciones destructivas con confirmación, recuperación y distancia.
Los enlaces y botones pueden ser componentes pequeños, pero para los usuarios son la puerta de entrada a la acción.
Al tratar esa puerta con un poco más de cuidado, reduces la duda y ayudas a más personas a avanzar con confianza. Que tu UI se convierta en un lugar que cualquiera pueda pulsar con facilidad.