Principio 1/1.3 Adaptable/1.3.1-E
De WCAG Wiki
< Principio 1 | 1.3 Adaptable
1.3.1-E. Evitar listas decorativas
- Nivel: A
- Versión: 2.2
- Principio: 1_Perceptible
- Pauta: 1.3_Adaptable
- Grupo: Estructura y relaciones
- Subgrupo: Listas decorativas
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 leve
Enunciado del criterio (Observatorio de Accesibilidad Web)
- No se deben emplear los elementos de lista únicamente con fines presentacionales para marcar contenidos que no son elementos relacionados entre sí.
Comprensión del criterio
Descripción resumida
Las etiquetas de lista (<ul>, <ol>, <dl>) solo deben usarse cuando los ítems están semánticamente relacionados. Nunca deben emplearse para añadir sangría, espaciado visual o maquetación sin sentido estructural.
Objetivo
Garantizar que la estructura semántica represente relaciones reales entre elementos, permitiendo a los lectores de pantalla y otras tecnologías interpretar correctamente la organización del contenido.
Importancia de cumplir el criterio
Las tecnologías de apoyo anuncian las listas y el número de elementos. Si se usa una lista para fines decorativos, se transmite información falsa, causando confusión y dificultando la navegación y comprensión.
Referencias WCAG
- H48: Using <ol>, <ul>, <dl> for lists or groups of links
- F43: Incorrect structural markup
- G115: Using semantic elements to mark up structure
Recursos de apoyo
- No usar listas para maqueta visual
- No emplear saltos, espacios o tabulaciones para simular estructura
- Usar CSS para diseño, no etiquetas semánticas
Evaluación del criterio
Tipo de evaluación
Evaluación Semiautomática
Procedimiento de evaluación
- Usar WAVE → “Details – Structural elements”.
- Verificar que las listas detectadas contienen elementos realmente relacionados.
- Comprobar que no hay listas creadas solo para diseño o sangrado visual.
- Revisar código si hay duda (<ul>, <ol>, <dl> para estructura real).
Resultado esperado
Las listas se usan únicamente para conjuntos de elementos relacionados, no para fines de presentación o maquetación.
Ejemplo ilustrativo
Ejemplo correcto:
<ul> <li>Inicio</li> <li>Servicios</li> <li>Contacto</li> </ul>
Ejemplo incorrecto (solo sangrado):
<ul> <li><p>Texto del párrafo</p></li> </ul>
Otras herramientas de evaluación
- WAVE
- Inspección del navegador
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.3.1-E. Evitar listas decorativas
Loading comments...
