Principio 2/2.4 Navegable/2.4.4-A

De WCAG Wiki

2.4.4-A. Propósito de los enlaces en contexto

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

Enunciado del criterio (Observatorio de Accesibilidad Web)

  • Los enlaces deben identificar cuál es su función o destino en el propio texto del enlace o mediante el texto del enlace junto a su contexto más 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
No debe depender únicamente de información visual, ni usar textos genéricos como haz clic aquí, más información o leer más sin contexto claro.

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

  1. Paso 1. Localizar todos los elementos que sean enlaces.
  2. Paso 2. Verificar que se cumple alguna de las siguientes condiciones:
    • a. El propio texto del enlace o su contexto más cercano sirve para identificar la función o el destino del enlace.
    • b. Se complementa el texto del enlace con una descripción adicional de alguna de las siguientes formas:
      • i. Complementando el texto del enlace con el atributo title. Para comprobarlo, en Web Developer Toolbar seleccionar Information → Display Title attributes.
      • ii. Usando CSS para ocultar parte del texto del enlace. Este caso se comprueba utilizando la herramienta de inspección de código del navegador.

Resultado esperado

Todos los enlaces permiten comprender su propósito sin necesidad de acceder al enlace.

Ejemplo ilustrativo

El enlace ya presenta la información de donde enlaza y qué ocurre al seleccionarlo. 

<a href="/programa">Accede al programa del curso</a>
</pre

Otras herramientas de evaluación

  • Bookmarklet : List links
  • Inspección del contenido: comprobar que el texto del enlace describe claramente su propósito o destino sin depender únicamente del contexto visual lejano (evitar textos como “haz clic aquí” o “más información” sin contexto).
  • Revisión contextual inmediata: verificar que, si el enlace usa un texto genérico, el propósito puede deducirse claramente por el contexto cercano (p. ej., justo antes o después del enlace).
  • Lectores de pantalla: (NVDA, JAWS, VoiceOver) usar la función de “lista de enlaces” para asegurarse de que cada enlace comunica su propósito sin necesidad de leer todo el contenido circundante.
  • Inspección del código: revisar atributos adicionales como aria-label o title que pueden complementar el propósito, asegurando que no se dependa únicamente de ellos.

Ejemplos accesibles y no accesibles creados por alumnos

<!DOCTYPE html>

Formulario de Reserva - NO Accesible 3.3.2-C
⚠️ 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>

Formulario de Reserva - ACCESIBLE 3.3.2-C
✅ 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

Ingrese su nombre tal como aparece en su documento de identidad

Enviaremos la confirmación de reserva a este correo

Incluya el código de país (Ej: +34 para España)

¿Cuántas personas se alojarán?

Formato: DD/MM/AAAA (Ej: 15/02/2025)

Formato: DD/MM/AAAA (Ej: 20/02/2025)

Seleccione el tipo de habitación que prefiere

Si tiene un código promocional, ingréselo aquí

Indique cualquier necesidad especial o preferencia (cama extra, piso bajo, accesibilidad, etc.)

✅ 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...
Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_2/2.4_Navegable/2.4.4-A&oldid=3728»