Enlaces con destinos diferentes
Silktide encuentra enlaces en una página que comparten el mismo texto pero apuntan a destinos diferentes. Cuando dos enlaces con el mismo aspecto llevan a lugares distintos, las personas no pueden distinguirlos sin seguir cada uno.
<!-- Dos enlaces de "Noticias" que van a páginas diferentes -->
<p>Conoce lo último sobre nuestros productos: <a href="\/products\/news">Noticias</a></p>
<p>Conoce lo último sobre nuestros servicios: <a href="\/company\/news">Noticias</a></p>
Por qué es importante
Las personas que usan un suelen abrir una lista con todos los enlaces de la página, fuera de contexto. Dos enlaces que se anuncian ambos como "Noticias" pero que llevan a páginas diferentes son indistinguibles en esa lista, por lo que la persona usuaria debe abrir cada uno para saber adónde conduce. La misma ambigüedad afecta a quienes usan reconocimiento de voz, que seleccionan los enlaces diciendo su nombre en voz alta.
Cómo solucionarlo
- Da a cada enlace un texto visible distinto que describa su destino, como "Noticias de productos" y "Noticias de la empresa".
- Si el diseño no puede cambiar, añade una etiqueta para diferenciar los enlaces sin alterar lo que ven las personas con visión:
<!-- El aria-label se convierte en el nombre que anuncian los lectores de pantalla -->
<a href="\/products\/news" aria-label="Noticias de productos">Noticias</a>
<a href="\/company\/news" aria-label="Noticias de la empresa">Noticias</a>
- De forma alternativa, incluye texto adicional dentro del enlace que esté oculto visualmente pero que los lectores de pantalla lean (por ejemplo, un
<span>con una clase CSS solo para lectores de pantalla). - Si los enlaces son funcionalmente equivalentes para la persona usuaria (por ejemplo, si redirigen a la misma página), el hallazgo.
Cómo lo comprueba Silktide
- Encuentra todos los enlaces de la página, omitiendo los elementos que hayas excluido de la comprobación.
- Determina el de cada enlace: el texto que anuncia la , que incluye etiquetas ARIA y de imágenes, no solo el texto visible.
- Normaliza el destino de cada enlace para la comparación: se ignoran los fragmentos (la parte después de
#), las cadenas de consulta (la parte después de?), el esquema de la URL y las barras diagonales finales. - Cuando enlaces con el mismo nombre accesible apuntan a más de un destino distinto, se marcan todos.
Solución de problemas
Los enlaces a secciones diferentes de la misma página no se marcan
Como se ignoran los fragmentos al comparar destinos, enlaces como \/guide#intro y \/guide#pricing cuentan como el mismo destino. Es intencional: ambos llevan a la misma página.
Los enlaces que solo difieren por parámetros de seguimiento no se marcan
Se ignoran las cadenas de consulta al comparar destinos, por lo que \/offers?src=header y \/offers?src=footer cuentan como la misma página en lugar de destinos diferentes.