Técnica HTML WCAG 2.2

H48Marcar las listas y los menús con ul, ol y dl

Nombre oficial en el W3C: Usar ol, ul y dl para listas o grupos de enlaces

En pocas palabras

Todo lo que se ve como una lista debe ser una lista en el código. Se usa ol si el orden importa, como unos pasos. Se usa ul si no importa, como unos requisitos. Se usa dl para pares de nombre y valor. Los menús de enlaces también se marcan como listas.

Por qué es importante

Una lista hecha con guiones, asteriscos o saltos de línea parece lista solo a la vista. El lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) la lee como un párrafo.

Con una lista real, anuncia «lista, 5 elementos». La persona sabe cuánto ocupa y puede saltarla entera. Esto es muy útil en menús largos, que de otro modo tendría que escuchar enlace por enlace.

Cómo se hace

Use <ol> para secuencias: pasos de un trámite, un ranking, instrucciones.
Use <ul> para elementos sin orden: requisitos, ventajas, documentos necesarios.
Use <dl> para pares de nombre y valor, como «Plazo: hasta el 30 de noviembre».
Ponga cada elemento en su <li>. No simule listas con <br>, guiones o imágenes de viñetas.
Agrupe los enlaces del menú en un <ul> dentro de <nav>. Quite las viñetas o colóquelos en línea con CSS.

Cómo comprobarlo

Recorra la página buscando contenido que se vea como lista: viñetas, números, menús.
Con las herramientas del navegador (F12), compruebe que usa ul, ol o dl.
Busque en el código párrafos con guiones, asteriscos o <br> que simulen listas.
Con un lector de pantalla, salte entre listas (tecla L en NVDA) y compruebe que anuncia el número de elementos.

Ejemplo

Menú principal de una web municipal marcado como lista de enlaces.

<nav aria-label="Principal">
  <ul>
    <li><a href="/tramites">Trámites</a></li>
    <li><a href="/agenda">Agenda</a></li>
    <li><a href="/contacto">Contacto</a></li>
  </ul>
</nav>

Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica H48 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

Aplicabilidad

HTML

Descripción

El objetivo de esta técnica es crear listas de elementos relacionados usando los elementos de lista adecuados a su finalidad. El elemento ol se usa cuando la lista está ordenada y el elemento ul cuando no lo está. Las listas de descripción (dl) se usan para agrupar pares nombre-valor de información, por ejemplo: términos y definiciones o preguntas y respuestas. Aunque el uso de este marcado puede hacer las listas más legibles, no todas las listas necesitan marcado. Por ejemplo, las frases que contienen enumeraciones separadas por comas pueden no necesitar marcado de lista.

Cuando se usa un marcado que da formato visual de lista a los elementos pero no indica la relación de lista, los usuarios pueden tener dificultades para navegar por la información. Un ejemplo de este tipo de formato visual es incluir asteriscos en el contenido al principio de cada elemento de la lista y usar elementos br para separar los elementos.

Algunas tecnologías de asistencia permiten a los usuarios navegar de una lista a otra o de un elemento a otro. Pueden usarse hojas de estilo para cambiar la presentación de las listas conservando su integridad.

La estructura de lista, normalmente las listas sin ordenar, también es útil para agrupar hipervínculos. Cuando se hace así, ayuda a los usuarios de lectores de pantalla a navegar desde el primer elemento de una lista hasta el final de la misma o a saltar a la siguiente lista. Esto les permite evitar grupos de enlaces si así lo desean.

Ejemplos

Una lista que muestra los pasos de una secuencia

Este ejemplo usa una lista ordenada para mostrar la secuencia de pasos de un proceso.

<ol>
  <li>Mix flour, eggs, milk, and seasoning in a bowl.</li>
  <li>Whisk until the batter is smooth.</li>
  <li>Rest the batter for at least 30 minutes before cooking.</li>
</ol>

Una lista de la compra

Este ejemplo muestra una lista sin ordenar de artículos que comprar en la tienda.

<ul>
  <li>Milk</li>
  <li>Eggs</li>
  <li>Butter</li>
</ul>

Una palabra y su definición

Este ejemplo usa una lista de descripción para agrupar una definición con el término que se define.

<dl>
  <dt>blink</dt>
  <dd>turn on and off between 0.5 and 3 times per second</dd>
</dl>

Información de contacto mediante una lista de descripción

Este ejemplo usa una lista de descripción para marcar pares de elementos relacionados. Los propios pares forman una lista relacionada lógicamente.

<dl>
  <div>
    <dt>Name:</dt>
    <dd>Taisha Silveri</dd>
  </div>
  <div>
    <dt>Tel:</dt>
    <dd>503-123-4567</dd>
  </div>
  <div>
    <dt>Email:</dt>
    <dd>taisha-silveri@example.com</dd>
  </div>
</dl>

Puede verse en el ejemplo práctico de información de contacto mediante una lista de descripción.

Usar listas para agrupar enlaces

En este ejemplo los enlaces se agrupan usando los elementos ul y li.

<h2 id="product-categories">Product Categories</h2>
<nav aria-labelledby="product-categories">
  <ul>
    <li><a href="kitchen.html">Kitchen</a></li>
    <li><a href="bedbath.html">Bed &amp; Bath</a></li>
    <li><a href="dining.html">Fine Dining</a></li>
    <li><a href="lighting.html">Lighting</a></li>
    <li><a href="storage.html">Storage</a><li>
  </ul>
</nav>

Pruebas

Procedimiento

Comprobar que el contenido que tiene apariencia visual de lista (con o sin viñetas) está marcado como lista sin ordenar.
Comprobar que el contenido que tiene apariencia visual de lista numerada está marcado como lista ordenada.
Comprobar que el contenido está marcado como lista de descripción cuando se presentan en forma de lista grupos de pares nombre-valor, por ejemplo: términos y definiciones o preguntas y respuestas.

Resultados esperados

Todas las comprobaciones anteriores son verdaderas.

Recursos

Cómo lo comprobamos en ADDAW

En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.

Solicitar una auditoría

Basado en la técnica H48 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.