Principio 1/1.1 Texto Alternativo/1.1.1-H
De WCAG Wiki
1.1.1-H. Combinación de enlaces e imágenes
- Nivel: A
- Versión: 2.0
- Principio: 1_Perceptible
- Pauta: 1.1_Textos_alternativos
- Grupo: Contenido
- Subgrupo: No-texto
Discapacidades afectadas
Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.
-
Visual total
–
Barrera grave
Enunciado del criterio (Observatorio de Accesibilidad Web)
- Cuando un enlace y una imagen actúan como enlace al mismo recurso, deben combinarse en un solo enlace para simplificar la navegación.
Comprensión del criterio
Descripción resumida
Si una imagen y un texto apuntan al mismo recurso, ambos deben estar dentro del mismo enlace.
Objetivo
Optimizar la claridad y la eficiencia de la navegación para usuarios de lectores de pantalla o teclado, evitando redundancias innecesarias.
Importancia de cumplir el criterio
Cuando los enlaces están duplicados, un usuario con discapacidad visual puede escuchar dos veces el mismo destino.
Esto dificulta la comprensión y ralentiza la navegación.
Unirlos en un solo enlace evita confusiones.Referencias WCAG
Recursos de apoyo
No hay
Evaluación del criterio
Tipo de evaluación
Evaluación Semiautomática
Procedimiento de evaluación
Usa la herramienta de Web Developer Toolbar.
- Paso 1. Seleccionar Images – Display alt attributes.
- Paso 2. Localizar las imágenes que actúan como enlaces.
- Paso 3. Usando la herramienta de inspección de código del navegador, verificar que no existan enlaces consecutivos al mismo recurso.
Resultado esperado
Imagen y texto enlazados al mismo destino están unidos en un solo enlace accesible, evitando duplicación de enlaces.
Ejemplo ilustrativo
Se indica en el texto alternativo el tipo de documento que se descargará el informe anual.
<a href="informe.pdf"><img src="pdf.gif" alt="en formato PDF"> Informe anual</a>
Otras herramientas de evaluación
- Lector de pantalla: JAWS, NVDA, VoiceOver Verificar que solo se anuncia un enlace.
-
Inspector del navegador:
Confirmar que imagen y texto están dentro del mismo
<a>.
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 1.1.1-H. Combinación de enlaces e imágenes
Loading comments...
