Principio 2/2.4 Navegable/2.4.4-A
De WCAG Wiki
< Principio 2 | 2.4 Navegable
2.4.4-A. Propósito de los enlaces en contexto
- Nivel: A
- Versión: 2.0
- Principio: 2_Operable
- Pauta: 2.4_Navegacion_clara
- Grupo: Navegación
- Subgrupo: Significado_de_enlaces
Discapacidades afectadas
Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.
-
Visual total –
Barrera grave
-
Baja visión –
Barrera moderada
-
Cognitiva –
Barrera grave
-
Motriz –
Barrera leve
Enunciado del criterio (Observatorio de Accesibilidad Web)
- El propósito de cada enlace debe poder determinarse a partir del propio texto del enlace o del texto del enlace junto con su contexto inmediato.
Comprensión del criterio
Descripción resumida
Los enlaces deben indicar de forma clara su función o destino.
El propósito puede deducirse mediante:
- El propio texto del enlace (recomendado)
- El texto cercano que complementa el enlace
- Encabezados o contexto inmediato
Objetivo
Facilitar decisiones rápidas y seguras de navegación para todas las personas, especialmente quienes usan lector de pantalla o quienes se orientan por escaneo visual rápido.
Importancia de cumplir el criterio
Proporcionar contexto claro en los enlaces evita confusión, reduce esfuerzo cognitivo y mejora la eficiencia en la navegación. En enlaces repetidos o ambiguos, las personas usuarias pueden perderse o activar enlaces erróneos.
Referencias WCAG
Recursos de apoyo
Evaluación del criterio
Tipo de evaluación
Evaluación Semiautomática
Procedimiento de evaluación
- Identificar todos los enlaces de la página.
- Analizar si el texto del enlace indica su propósito claramente.
- Si no es claro por sí solo, revisar contexto inmediato (párrafo, encabezado, texto adyacente).
- Confirmar que no se usan enlaces ambiguos como “clic aquí”, “más” o “leer más” sin contexto.
- Probar experiencia con lector de pantalla verificando lista de enlaces.
Resultado esperado
Todos los enlaces permiten comprender su propósito sin necesidad de seguir el enlace.
Ejemplo ilustrativo
✅ Correcto
<a href="/programa">Programa del curso</a>
✅ Correcto con contexto inmediato
Descargar el temario del curso: <a href="/temario.pdf">Temario (PDF)</a>
❌ Incorrecto
Para más información, <a href="/info">haz clic aquí</a>.
Otras herramientas de evaluación
- Listas de enlaces en lectores de pantalla (NVDA: Insert+F7)
- AXE DevTools
- Accessibility Insights
Ejemplos accesibles y no accesibles creados por alumnos
<!DOCTYPE html>
⚠️ PROBLEMA 3.3.2-C: Este formulario NO tiene etiquetas ni instrucciones claras
Reserva de Hotel
⚠️ Problemas de este formulario:
- No hay etiquetas
<label>para ningún campo - Algunos placeholders son ambiguos ("Código" - ¿qué código?)
- No se indica qué campos son obligatorios
- No hay instrucciones sobre el formato esperado
- El select dice "Selecciona" pero ¿seleccionar qué?
- Un campo no tiene ni placeholder ni etiqueta (campo de email)
- No hay indicación de formato de fecha específico
- No se explica para qué sirve cada campo
<!DOCTYPE html>
✅ ACCESIBLE 3.3.2-C: Este formulario tiene etiquetas e instrucciones claras
Reserva de Hotel
Complete el siguiente formulario para reservar su estadía
Nota: Los campos marcados con * son obligatorios
✅ Implementación correcta:
- Cada campo tiene una etiqueta
<label>clara asociada - Los campos obligatorios están claramente marcados con *
- Hay instrucciones específicas sobre formato y contenido esperado
- Los selectores tienen opciones descriptivas, no ambiguas
- Se explica el propósito de cada campo cuando no es obvio
- Se proporcionan ejemplos en los placeholders
- Hay una nota inicial explicando la convención de campos obligatorios
- Se usan atributos ARIA apropiados (aria-required, aria-describedby)
Comentarios
A continuación se muestran comentarios sobre el criterio 2.4.4-A. Propósito de los enlaces en contexto
Loading comments...
