Técnica HTML WCAG 2.2

H2Combinar en un solo enlace la imagen y el texto adyacentes que llevan al mismo recurso

En resumen

Cuando un icono y un texto enlazan al mismo destino pero están en dos elementos a distintos, los usuarios de teclado y de lector de pantalla encuentran dos enlaces idénticos seguidos. Esta técnica propone agruparlos en un único elemento a, con alt vacío en la imagen (o un alt que complemente el texto), para que solo haya un enlace que tabular y anunciar. Úsela siempre que repita enlaces gráficos y textuales adyacentes.

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:

Comprobar que todos los elementos img contenidos en el elemento a tienen un valor nulo en su atributo alt.
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

HTML - Requirements for providing text to act as an alternative for images (requisitos para proporcionar texto que sirva de alternativa a las imágenes)

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