Control solo con icono

Silktide busca botones y enlaces que estén etiquetados únicamente mediante un icono —como un aspa de cierre, un menú hamburguesa o una lupa de búsqueda— sin un nombre de texto adjunto para las personas que no pueden ver el icono.

<!-- Problema: nada anuncia qué hace este botón -->
<button><svg>…</svg></button>

<!-- Solución: pon nombre al control -->
<button aria-label="Abrir menú"><svg>…</svg></button>

Por qué es importante

Las personas videntes deducen qué hace un botón de icono por su forma y el contexto. Las personas que usan no tienen un equivalente: sin un , su software anuncia un "botón" o "enlace" sin nombre, o lee código residual como el nombre de la clase CSS del icono. Cada control solo con icono sin nombre es un control que esos usuarios deben activar a ciegas o saltarse por completo, y a menudo son los controles más importantes de la página: menús, búsqueda, cerrar, siguiente.

Cómo solucionarlo

Añade una etiqueta que describa lo que hace el control, no cómo es el icono: aria-label="Buscar", no aria-label="Lupa".
Si el mismo texto ya existe como texto visible cercano, haz referencia a él con aria-labelledby en lugar de duplicarlo.
Si el icono es una <img>, darle un alt significativo también pone nombre al control.
Si el control no hace nada útil y existe solo como decoración, hazlo no interactivo en lugar de nombrarlo.

Cómo lo prueba Silktide

Encuentra los botones, enlaces y controles de despliegue visibles en cada página, incluidos los elementos con role="button" o role="link".
Omite cualquier control que ya tenga un nombre: texto visible de 2 o más caracteres, un aria-label, un aria-labelledby o un atributo title.
Comprueba si los controles restantes contienen un icono: un SVG en línea, una imagen con alt vacío, o texto dibujado en una fuente de iconos reconocida.
Informa de los controles que muestran un icono pero no tienen nombre.

Solución de problemas

El control está etiquetado de otra forma

Silktide tiene en cuenta aria-label, aria-labelledby, title, texto visible y el alt de las imágenes. Si tu control se nombra mediante otro mecanismo —lo cual es raro—, verifica con un lector de pantalla que el nombre realmente se anuncia y el hallazgo si es así.

El icono es decorativo y está junto a texto

No se informan los controles con texto visible significativo, incluso cuando un icono aparece junto al texto. Si se informó un control, su texto no alcanzaba 2 caracteres significativos: el texto de un solo glifo como "×" no cuenta como etiqueta.