Fundamentos de accesibilidad (alt y aria-label)

En esta lección aprenderás a que tu página también funcione para quien no puede ver la pantalla, algo que es a la vez un requisito legal en muchos países y simplemente lo correcto.

El atributo alt de una imagen describe en palabras lo que muestra; los lectores de pantalla lo leen en voz alta y también se muestra si la imagen no carga. aria-label hace algo parecido para elementos cuyo contenido visible no es texto comprensible, como un botón que solo tiene un icono.

El código de ejemplo pone un texto alternativo a la imagen del logotipo y una etiqueta accesible al botón de menú, que a la vista solo es el símbolo ☰. Sin ella, un lector de pantalla anunciaría algo tan inútil como «botón».

Un matiz importante: una imagen puramente decorativa debe llevar alt="" (vacío), no quedarse sin atributo. Así el lector de pantalla la salta en lugar de leer el nombre del archivo. Y describir de más («imagen de…») tampoco ayuda: basta con decir qué se ve.

En el desarrollo profesional la accesibilidad se comprueba con herramientas como Lighthouse o axe, y en muchos sectores forma parte de los requisitos del contrato. Además, un HTML accesible suele estar mejor estructurado y posicionar mejor.