Principio 1/1.3 Adaptable/1.3.1-E

De WCAG Wiki

1.3.1-E. Evitar listas decorativas

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)

  • 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

  1. Usar WAVE → “Details – Structural elements”.
  2. Verificar que las listas detectadas contienen elementos realmente relacionados.
  3. Comprobar que no hay listas creadas solo para diseño o sangrado visual.
  4. 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

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

Comentarios

A continuación se muestran comentarios sobre el criterio 1.3.1-E. Evitar listas decorativas

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_1/1.3_Adaptable/1.3.1-E&oldid=3319»