Criterios de Perceptible
PerceptiblePauta 1.1 Alternativas textuales
1.1.1Contenido no textual
Nivel ALo exige la normativa (EN 301 549).
Qué pide
Toda imagen, icono o gráfico que transmite información tiene un texto alternativo equivalente. Las imágenes decorativas se marcan para que se ignoren.
A quién ayuda: Personas ciegas que usan lector de pantalla y quienes navegan con imágenes desactivadas.
Un caso real
Una tienda online muestra la foto de unas zapatillas y un icono de carrito sin texto.
BienLa foto tiene alt «Zapatillas de running azules, vista lateral» y el botón del carrito se anuncia como «Añadir al carrito».
MalEl lector de pantalla dice «imagen IMG_2034.jpg» o «botón» sin nombre.
Cómo aplicarlo en código
Imágenes informativas, decorativas y botones con icono
El alt describe lo que la imagen aporta, no el archivo. Si es decorativa, alt vacío. Si un botón solo tiene un icono, el nombre va en el botón y el icono se oculta.
<img src="zapatillas.jpg" alt="Zapatillas de running azules, vista lateral">
<!-- Decorativa: alt vacío para que el lector de pantalla la ignore -->
<img src="adorno.svg" alt="">
<button type="button" aria-label="Añadir al carrito">
<svg aria-hidden="true" focusable="false">…</svg>
</button><img src="IMG_2034.jpg">
<img src="adorno.svg" alt="imagen decorativa">
<button type="button">
<svg>…</svg>
</button>Cómo comprobarlo
Revisa cada imagen: ¿el alt dice lo mismo que la imagen aporta? Prueba con un lector de pantalla los botones de solo icono.