Técnica HTML WCAG 2.2
H80Aclarar un enlace con el encabezado que tiene justo antes
Nombre oficial en el W3C: Identificar el propósito de un enlace mediante el texto del enlace combinado con el encabezado que lo precede
En pocas palabras
Enlaces como «Leer más», «Mapa» o «Fotos» se repiten en muchas webs, uno por cada noticia, hotel o producto. Esta técnica permite que los aclare el encabezado que va justo antes, como el titular de la noticia. Así se sabe a qué bloque pertenece cada enlace. Siempre que se pueda, es mejor que el enlace se entienda solo.
Por qué es importante
Una página de noticias puede tener diez enlaces «Leer más». Quien la ve sabe a qué noticia va cada uno por su posición. Quien usa un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) y salta de enlace en enlace solo oye «Leer más» diez veces.
Muchas de estas personas también navegan por encabezados. Si cada bloque empieza con un encabezado, saben a qué noticia o producto pertenece cada enlace.
Cómo se hace
- Empiece cada bloque (noticia, ficha de producto, hotel) con un encabezado real, de
<h2>a<h6>. - Ponga los enlaces de ese bloque después de su encabezado y antes del siguiente.
- Compruebe que el encabezado y el texto del enlace, juntos, dicen adónde lleva.
- Cuando sea posible, mejore el propio enlace: «Leer más sobre las becas de comedor».
Cómo comprobarlo
- Localice los enlaces que se repiten o que no se entienden solos.
- Compruebe que el encabezado más cercano por encima está marcado con
h1ah6y pertenece al mismo bloque. - Confirme que encabezado y enlace, juntos, explican el destino.
- Con NVDA, sitúese en el enlace y pulse Mayús + H para oír el encabezado anterior.
Ejemplo
Listado de noticias: cada «Leer más» se entiende por el titular que lo precede.
<article>
<h2>Abierto el plazo de las becas de comedor</h2>
<p>Las familias pueden pedirlas hasta el 15 de noviembre.</p>
<a href="becas-comedor.html">Leer más</a>
</article>
<article>
<h2>Nuevo horario de la biblioteca municipal</h2>
<p>Desde el lunes abre también por las tardes.</p>
<a href="horario-biblioteca.html">Leer más</a>
</article>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 H80 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 a partir del contexto que proporciona su encabezado. El encabezado que precede al enlace 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.
Siempre que sea posible, proporcione un texto de enlace que identifique el propósito del enlace sin necesidad de contexto adicional.
Ejemplos
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.
<h2><a href="royal_palm_hotel.html" id="royal-heading">Royal Palm Hotel</a></h2>
<nav aria-labelledby="royal-heading">
<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="hroyal-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>
</nav>
<h2><a href="hotel-three-rivers.html" id="rivers-heading">Hotel Three Rivers</a></h2>
<nav aria-labelledby="rivers-heading">
<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>
</nav>Un documento disponible en tres formatos
<h2>Annual Report 2006-2007</h2>
<p>
<a href="annual-report-0607.html">HTML</a>
<a href="annual-report-0607.pdf">PDF</a>
<a href="annual-report-0607.rtf">RTF</a>
</p>Sitio web de un periódico
<div class="card-link">
<h2><a href="market-2023-09-27.html">Stock market soars as bullishness prevails</a></h2>
<p>This week was a stellar week for the stock market as investing in gold rose 2%.</p>
</div>Se utiliza un script para localizar cada elemento con la clase card-link y añadir un párrafo adicional con un enlace «Read more» (leer más) al final del div con la clase .card-link, que lleva al mismo destino que el enlace del encabezado.
Pruebas
Procedimiento
Para cada enlace del contenido que utilice esta técnica:
- Localizar el elemento de encabezado que precede al enlace.
- Comprobar que el texto del enlace, combinado con el texto de ese encabezado, describe el propósito del enlace.
Resultados esperados
- La comprobación n.º 2 es verdadera.
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.
Basado en la técnica H80 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.