Principio 1/1.3 Adaptable/1.3.1-D

1.3.1-D. Listas estructuradas

1_Perceptible 1.3_Adaptable

• Nivel: A
• Versión: 2.0
• Principio: 1_Perceptible
• Pauta: 1.3_Adaptable
• Grupo: Estructura y relaciones
• Subgrupo: Listas semánticas

Discapacidades afectadas

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

• Visual total – Barrera leve
• Sordoceguera – Barrera leve

Enunciado del criterio (Observatorio de Accesibilidad Web)

• El contenido que se muestra como un listado de elementos relacionados entre sí (incluyendo los enlaces de menús y barras de navegación) se debe marcar con los elementos adecuados de lista:
  • <ol> para listas ordenadas,
  • <ul> para listas desordenadas y
  • <dl>, <dt>, <dd> para listas de términos y definiciones.

Comprensión del criterio

Descripción resumida

Los conjuntos de elementos relacionados deben marcarse con etiquetas de lista semánticas (<ul>, <ol>, <dl>). Esto incluye menús, barras de navegación y cualquier agrupación de enlaces o ítems relacionados.

Objetivo

Permitir que las tecnologías de apoyo detecten que se trata de una lista, comunicar cuántos elementos contiene y facilitar la navegación estructurada por el contenido.

Importancia de cumplir el criterio

Si se representan listas solo mediante estilo visual (guiones, saltos, iconos) sin semántica HTML, los usuarios de lectores de pantalla no pueden percibir relaciones ni navegar rápidamente entre los elementos.

Las etiquetas de lista permiten identificar grupos de elementos y mejorar la comprensión y escaneo del contenido.

Referencias WCAG

• H48: Using <ol>, <ul> and <dl> for lists or groups of links

Recursos de apoyo

Consejos

• Usar etiquetas <ul> y <li> o <ol> y <li> para listas accesibles
• El uso de listas facilita lectura y comprensión
• Menús y colecciones de enlaces deben marcarse como listas

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomática

Procedimiento de evaluación

Usa la herramienta de Wave.

1. Paso 1. En WAVE, seleccionar Details – Structural elements.
2. Paso 2. Comprobar que los conjuntos de elementos identificados mediante “ordered list” y “unordered list” se corresponden con contenidos que semánticamente estén relacionados entre sí.
3. Nota Cuando hay varios resultados, puede resultar complejo localizar toda la información con WAVE. De manera alternativa, puede ser más sencillo utilizar la herramienta de inspección de código del navegador.
4. Paso 3. Verificar que no existe ningún otro grupo de elementos en la página que deba actuar como una lista y no se haya marcado como tal.

Resultado esperado

Los elementos relacionados se marcan correctamente con etiquetas de lista (<ul>, <ol>, <dl>) y no se utilizan únicamente para marcar un estilo de diseño.

Ejemplo

Los enlaces del menú se marcan como una lista de elementos. Ejemplo correcto:

<nav class="menu">
  <ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Sobre nosotros</a></li>
    <li><a href="#">Contacto</a></li>
  </ul>
</nav>

Otras herramientas de evaluación

• Bookmarklet diagnóstico ALT:
  
  Arrastra este botón a tu barra de marcadores y podrás ejecutarlo y ver los textos alternativos de otras páginas.
  Destacar listas
• Bookmarklet List in pop-up window
• Inspección del navegador Observar si elementos que visualmente son listas también están marcados como listas en el código fuente

Comentarios

A continuación se muestran comentarios sobre el criterio 1.3.1-D. Listas estructuradas

Loading comments...