Enlaces para lectores de pantalla

Silktide encuentra elementos de enlace que están mal formados de maneras que los rompen para la tecnología de asistencia: enlaces sin texto legible, enlaces sin destino, y etiquetas de enlace vacías sueltas que han quedado en la página.

Para que un enlace funcione con la tecnología de asistencia necesita tanto un destino (un atributo href) como algo legible en su interior:

<!-- Funciona: destino y texto legible -->
<a href="\/about">Sobre nosotros</a>

<!-- Funciona: un enlace de imagen con texto alternativo -->
<a href="\/apple"><img src="apple.png" alt="Apple"></a>

Por qué es importante

Un lector de pantalla anuncia cada enlace por su texto. Un enlace con destino pero sin texto se anuncia simplemente como "enlace": el usuario puede activarlo pero no tiene idea de a dónde lleva. Un enlace con texto pero sin destino parece clicable pero no lleva a ninguna parte. Ambos patrones rompen el contrato básico que permite a las personas que usan tecnología de asistencia navegar una página por sus enlaces.

Cómo solucionarlo

1. Para un enlace con destino pero sin texto legible: añade texto dentro del enlace, o texto alternativo si contiene solo una imagen.
2. Para un enlace con texto pero sin destino: añade el href que falta o, si el elemento en realidad es un objetivo al que saltan otros enlaces, mueve su id a un elemento que no sea un enlace:

<!-- Ancla de destino heredada, desaconsejada en HTML5 -->
<a name="example"></a>

<!-- Preferible: un id en un elemento normal -->
<div id="example">...</div>

3. Para etiquetas <a></a> vacías sin ningún atributo: elimínalas; no cumplen ninguna función. A menudo quedan como restos de editores o scripts.
4. Si el elemento en realidad es un botón — desencadena una acción en lugar de navegar — usa un elemento <button>, o añade role="button" a la etiqueta existente.

Cómo lo prueba Silktide

1. Busca cada elemento <a> en la página y lee su texto (incluido el texto alternativo de imágenes y el texto añadido por CSS), su href, y cualquier atributo id o name.
2. Señala tres patrones problemáticos:
   • Un enlace con un href pero sin texto legible.
   • Un elemento con texto y un id o name pero sin href: un objetivo que se hace pasar por enlace, o un enlace al que le falta su destino.
   • Un ancla completamente vacía, sin texto, href, id ni name.
3. Hay dos patrones que deliberadamente no se señalan:
   • <a> con texto pero sin href, id ni name: HTML5 permite esto como un "enlace provisional", comúnmente completado más tarde mediante JavaScript.
   • Anclas vacías con un id o name pero sin href: son destinos de salto heredados, no enlaces.

Más información

• Understanding Success Criterion 4.1.2: Name, Role, Value (WCAG 2.2)
• H91: Using HTML form controls and links (WCAG technique)
• Propósito del enlace
• Enlace vacío