Técnica HTML WCAG 2.2

H40Marcar glosarios y definiciones con listas de descripción

Nombre oficial en el W3C: Usar listas de descripción

En pocas palabras

Un glosario es una lista de palabras difíciles con su significado. En HTML se marca con una lista de descripción: dl para la lista, dt para cada término y dd para su explicación. Así la relación entre la palabra y su definición queda en el código, no solo en el aspecto.

Por qué es importante

Muchas webs usan palabras técnicas o poco comunes: «IPREM», «empadronamiento», «silencio administrativo». Un glosario ayuda a entenderlas. Es útil para personas con dificultades de comprensión y para cualquiera que no conozca el tema.

Un lector de pantalla es un programa que lee en voz alta lo que hay en la pantalla. Si el glosario se maqueta solo con negritas y saltos de línea, el lector no sabe qué texto es el término y cuál la definición. Con <dl>, el lector anuncia una lista y su número de elementos.

Cómo se hace

Envuelva el glosario en un elemento <dl>.
Ponga cada palabra o expresión en un <dt>.
Ponga su explicación justo después, en uno o varios <dd>.
Escriba definiciones claras y cortas, sin usar otras palabras difíciles.
Dé el aspecto deseado con CSS: negrita, sangría o columnas. El marcado no cambia.

Cómo comprobarlo

Localice los glosarios y listas de términos de la página.
Con las herramientas del navegador (F12), compruebe que usan <dl>, <dt> y <dd>.
Verifique que cada <dt> va seguido de su definición en <dd>.
Pase el validador HTML del W3C para detectar listas mal construidas.

Ejemplo

Glosario al final de una convocatoria de ayudas.

<dl>
  <dt>IPREM</dt>
  <dd>Indicador que se usa para calcular el límite de ingresos de muchas ayudas.</dd>
  <dt>Empadronamiento</dt>
  <dd>Inscripción en el registro de habitantes del municipio.</dd>
</dl>

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 H40 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 proporcionar la descripción de nombres o términos presentándolos en una lista de descripción. La lista se marca con el elemento dl. Dentro de la lista, cada término se coloca en un elemento dt independiente y su descripción va en el elemento dd que le sigue inmediatamente. Se pueden asociar varios términos a una sola descripción, así como un solo término a varias descripciones, siempre que se mantenga la secuencia semántica. El atributo title puede usarse para proporcionar información adicional sobre la lista de descripción. El uso de listas de descripción garantiza que los términos y sus descripciones estén relacionados semánticamente aunque cambie el formato de presentación, además de garantizar que dichos términos y descripciones queden agrupados semánticamente como una unidad.

Las listas de descripción son más fáciles de usar cuando las descripciones están ordenadas alfabéticamente. Un uso habitual de las listas de descripción es el glosario de términos.

Ejemplos

Una lista de descripciones de términos náuticos usados en un sitio web sobre navegación a vela.

<dl title="Nautical Terms">
  <dt>Knot</dt>
  <dd>
    A <i>knot</i> is a unit of speed equaling 1 
    nautical mile per hour (1.15 miles per hour or 1.852 
    kilometers per hour).
  </dd>
  <dt>Port</dt>
  <dd>
    <i>Port</i> is the nautical term (used on 
    boats and ships) that refers to the left side
    of a ship, as perceived by a person facing towards 
    the bow (the front of the vessel).
  </dd>
  <dt>Starboard</dt>
  <dd>
    <i>Starboard</i> is the nautical term (used 
    on boats and ships) that refers to the right 
    side of a vessel, as perceived by a person 
    facing towards the bow (the front of the vessel).
  </dd>
</dl>

Pruebas

Procedimiento

Para cualquier conjunto de términos y sus descripciones asociadas:

Comprobar que la lista está contenida en un elemento dl.
Comprobar que cada término descrito en la lista está contenido en un elemento dt.
Comprobar que, cuando hay más de un término que comparte la misma descripción, los elementos dt se suceden inmediatamente unos a otros.
Comprobar que la descripción de cada término está contenida en uno o más elementos dd.
Comprobar que el elemento o elementos dd siguen inmediatamente al elemento o elementos dt que contienen el término descrito.

Resultados esperados

Todas las comprobaciones anteriores son verdaderas.

Recursos

HTML: el elemento dl.

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 H40 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.