Técnica HTML WCAG 2.2

H81Identificar 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 resumen

Cuando una lista anidada agrupa enlaces breves («HTML», «PDF», «Word») bajo un elemento de lista padre que les da sentido, el propósito de cada enlace se deduce de la combinación de ambos textos. Beneficia a quienes usan lectores de pantalla, aunque les obliga a recorrer la lista elemento a elemento. Úsela solo en listas cortas y poco profundas, y siempre que no pueda hacer los textos de los enlaces autoexplicativos.

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 las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.

Solicitar una auditoría

Fuente y licencia

Traducción al español, no oficial, realizada por ADDAW a partir de la técnica H81 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.