Técnica HTML WCAG 2.2

H81Aclarar un enlace de una sublista con el texto del elemento que la contiene

Nombre oficial en el W3C: Identificar el propósito de un enlace en una lista anidada mediante el texto del enlace combinado con el elemento de lista padre bajo el que está anidada la lista

En pocas palabras

Cuando un enlace está dentro de una lista anidada, su destino puede aclararse con el texto del elemento de lista superior. Por ejemplo, «PDF» se entiende si cuelga de «Bases de la convocatoria de ayudas». Sirve para listas cortas; lo ideal sigue siendo que el enlace se entienda solo.

Por qué es importante

Muchas personas que usan lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) saltan de enlace en enlace. Si oyen «PDF», «PDF», «PDF», no saben qué documento abre cada uno.

La lista anidada da el contexto: el elemento superior dice de qué trata el grupo de enlaces. Así el usuario sabe adónde lleva cada enlace antes de pulsarlo.

Cómo se hace

Ponga los enlaces relacionados en una sublista (<ul> u <ol>).
Coloque esa sublista dentro de un <li> cuyo texto explique el tema, por ejemplo el nombre del documento o del hotel.
Compruebe que el texto del enlace más el de ese <li> dejan claro el destino.
Use esta técnica solo en listas cortas y con pocos niveles. El usuario tiene que recorrerlas elemento a elemento.
Siempre que pueda, escriba enlaces que se entiendan sin contexto: «Bases de la convocatoria (PDF)».

Cómo comprobarlo

Localice los enlaces con textos poco claros, como «PDF», «Mapa» o «Más información».
Compruebe que están en una sublista situada dentro de un <li>.
Lea juntos el texto de ese <li> y el del enlace. Juntos deben decir adónde lleva el enlace.
Con un lector de pantalla, recorra la lista y confirme que el contexto se oye antes de los enlaces.

Ejemplo

Cada formato del documento se entiende gracias al texto del elemento de lista que contiene la sublista.

<ul>
  <li>Bases de la convocatoria de ayudas 2026
    <ul>
      <li><a href="bases.pdf">PDF</a></li>
      <li><a href="bases.docx">Word</a></li>
      <li><a href="bases.html">Página web</a></li>
    </ul>
  </li>
</ul>

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 H81 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 describir el propósito de un enlace situado en una lista anidada a partir del contexto que proporciona el elemento de lista bajo el que está anidada la lista. Este elemento de lista aporta contexto a un enlace que, de otro modo, no estaría claro. La descripción permite al usuario distinguir este enlace de otros enlaces de la página web que llevan a otros destinos y le ayuda a decidir si desea seguir el enlace.

Dado que las tecnologías de asistencia actuales no incluyen órdenes para consultar la información contextual que proporcionan los elementos de lista padre, el uso de esta técnica obliga a los usuarios a recorrer la lista elemento a elemento. Por tanto, esta técnica puede no ser adecuada para listas muy largas o con muchos niveles de anidamiento.

Siempre que sea posible, proporcione un texto de enlace que identifique el propósito del enlace sin necesidad de contexto adicional.

Ejemplos

Un documento disponible en tres formatos

<ul>
  <li>Annual Report 2021
    <ul> 
      <li>
        <a href="ar-2021.html"><abbr title="HyperText Markup Language">HTML</abbr></a>
      </li>
      <li>
        <a href="ar-2021.pdf"><abbr title="Portable Document Format">PDF</abbr></a>
      </li>
      <li>
        <a href="ar-2021.rtf"><abbr title="Rich Text Format">RTF</abbr></a>
      </li>
    </ul>
  </li>
  <li>Annual Report 2022
    <ul> 
      <li>
        <a href="ar-2022.html">HTML</a>
      </li>
      <li>
        <a href="ar-2022.pdf">PDF</a>
      </li>
      <li>
        <a href="ar-2022.rtf">RTF</a>
      </li>
    </ul>
  </li>
</ul>

Bloques de información sobre hoteles

La información de cada hotel consta del nombre del hotel, una descripción y una serie de enlaces a un mapa, fotos, cómo llegar, opiniones de los huéspedes y un formulario de reserva.

<nav>
  <ul>
    <li><a href="royal-palm-hotel.html">Royal Palm Hotel</a>
      <ul>
        <li><a href="royal-palm-hotel-map.html">Map</a></li>
        <li><a href="royal-palm-hotel-photos.html">Photos</a></li>
        <li><a href="royal-palm-hotel-directions.html">Directions</a></li>
        <li><a href="royal-palm-hotel-reviews.html">Guest reviews</a></li>
        <li><a href="royal-palm-hotel-book.html">Book now</a></li>
      </ul>
    </li>
    <li><a href="hotel-three-rivers.html">Hotel Three Rivers</a>
      <ul>
        <li><a href="hotel-three-rivers-map.html">Map</a></li>
        <li><a href="hotel-three-rivers-photos.html">Photos</a></li>
        <li><a href="hotel-three-rivers-directions.html">Directions</a></li>
        <li><a href="hotel-three-rivers-reviews.html">Guest reviews</a></li>
        <li><a href="hotel-three-rivers-book.html">Book now</a></li>
      </ul>
    </li>
  </ul>
</nav>

Pruebas

Procedimiento

Para cada enlace anidado del contenido que utilice esta técnica:

Localizar el elemento ul u ol padre del enlace.
Comprobar que este elemento de lista (ul, ol) es descendiente de un elemento li.
Comprobar que el texto del enlace, combinado con el texto de ese elemento li padre, describe el propósito del enlace.

Resultados esperados

Las comprobaciones n.º 2 y n.º 3 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 H81 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.