Addaw, ir a inicio Donar

Técnica HTML WCAG 2.2

H2Unir en un solo enlace el icono y el texto que llevan al mismo sitio

Nombre oficial en el W3C: Combinar en un solo enlace la imagen y el texto adyacentes que llevan al mismo recurso

En pocas palabras

Es habitual ver un icono y un texto, uno junto al otro, que llevan a la misma página, pero en dos enlaces separados. La solución es meterlos en un único enlace. El icono queda con texto alternativo vacío, porque el texto del enlace ya dice adónde lleva.

Por qué es importante

Con dos enlaces separados, quien navega con teclado tiene que pulsar Tab dos veces para llegar a lo mismo. El lector de pantalla (programa que lee en voz alta la pantalla) anuncia dos enlaces idénticos seguidos. La lista de enlaces sale duplicada.

Si el icono lleva el mismo texto que el enlace, el lector lo lee dos veces. Si el icono separado no lleva texto alternativo, ese enlace se queda sin nombre. Unirlos evita los dos problemas.

Cómo se hace

  1. Ponga el icono y el texto dentro del mismo elemento <a>.
  2. Dé al icono alt="" (texto alternativo vacío) si el texto del enlace ya lo explica todo.
  3. Use un alt con contenido solo si añade algo al texto. Por ejemplo, el nombre con el que la ayuda del sitio se refiere a ese icono.
  4. Si una tabla coloca el icono y el texto en celdas distintas, maquete con CSS para poder unirlos.

Cómo comprobarlo

  1. Recorra la página con Tab: cada icono con su texto debe recibir el foco una sola vez.
  2. Revise el código: el icono y el texto deben estar en el mismo <a>.
  3. Compruebe que el alt del icono está vacío o completa el texto, sin repetirlo.
  4. Con un lector de pantalla, abra la lista de enlaces y confirme que no hay duplicados.

Ejemplo

Enlace al carrito de una tienda en línea, antes y después.

<!-- Antes: dos enlaces al mismo sitio -->
<a href="/carrito"><img src="carrito.svg" alt="Carrito"></a>
<a href="/carrito">Carrito</a>

<!-- Después: un solo enlace -->
<a href="/carrito">
  <img src="carrito.svg" alt="">
  Carrito
</a>

Para saber más, en nuestro blog

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 H2 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

Documentos HTML que contienen enlaces.

Descripción

El objetivo de esta técnica es proporcionar a la vez una representación textual y una representación icónica de los enlaces sin hacer la página web más confusa o difícil para los usuarios de teclado o de tecnologías de asistencia. Dado que a unos usuarios les resulta más útil el texto y a otros los iconos, ofrecer ambos puede mejorar la accesibilidad del enlace.

Muchos enlaces tienen una representación textual y otra icónica adyacentes, pero presentadas en elementos a distintos. Visualmente parecen un único enlace, pero muchos usuarios los encuentran como enlaces idénticos adyacentes. Para un usuario de teclado, resulta tedioso navegar por enlaces redundantes. Para los usuarios de tecnologías de asistencia, puede ser confuso encontrarse enlaces idénticos sucesivos. Cuando la alternativa textual del icono duplica el texto del enlace, resulta repetitivo, porque los lectores de pantalla leen la descripción dos veces.

Si el autor omitiera la alternativa textual de la imagen del enlace, se incumpliría el criterio de conformidad 1.1.1 Contenido no textual, porque la alternativa textual no cumpliría el mismo propósito que el enlace gráfico.

Esta técnica proporciona dichos enlaces agrupando el texto y la imagen en un único elemento a y dando a la imagen una alternativa textual nula para eliminar la duplicación del texto. De este modo se ofrecen ambas representaciones del enlace, pero los usuarios de teclado solo encuentran un enlace y las tecnologías de asistencia que presentan a los usuarios listas de enlaces de una página web no incluyen enlaces duplicados.

A veces el enlace de texto y el de icono se presentan en celdas de tabla distintas y adyacentes para facilitar la maquetación de la página. Aunque las WCAG 2 no prohíben el uso de tablas de maquetación, se recomiendan las maquetaciones basadas en CSS para conservar el significado semántico definido de los elementos de tabla de HTML y para ajustarse a la buena práctica de separar la presentación del contenido. Si se usa CSS, esta técnica puede aplicarse para combinar los enlaces.

Ejemplos

El icono y el texto están contenidos en el mismo elemento a.

<a href="products.html">
  <img src="icon.gif" alt="">Products page
</a>

Un enlace contiene un icono y un texto, y la ayuda del sitio hace referencia al icono. El img tiene una alternativa textual que es el nombre que se usa para el icono en la ayuda del sitio, la cual describe cómo hacer clic en el icono de la página de inicio.

<a href="home.html">
  <img src="house.gif" alt="home page icon">Go to the home page
</a>

Pruebas

Procedimiento

Para cada a que aplique esta técnica:

  1. Comprobar que todos los elementos img contenidos en el elemento a tienen un valor nulo en su atributo alt.
  2. Comprobar que el elemento a contiene un elemento img cuyo atributo alt tiene un valor nulo o bien un valor que complementa el texto del enlace y describe la imagen

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