Textos alt, etiquetas y botones: pequeños fallos, grandes barreras
Muchos problemas son pequeños en código pero importantes para el usuario. Una imagen sin alternativa, un campo de checkout sin etiqueta o un botón de icono sin nombre puede ocultar información o funciones a lectores de pantalla.
El texto alt necesita propósito
Debe comunicar la función o significado de la imagen en contexto. Las imágenes decorativas suelen llevar alt vacío; las imágenes de producto pueden ser informativas.
La automatización detecta la ausencia del atributo, pero no siempre puede juzgar si el texto es adecuado.
- Describir lo relevante.
- Usar alt="" en imágenes decorativas.
- Evitar nombres de archivo y textos genéricos.
Etiquetas y nombres accesibles
Los campos y botones solo con icono necesitan un nombre programáticamente determinable.
Prefiere etiquetas visibles. ARIA ayuda cuando el HTML nativo no basta, pero no debe ocultar interfaces confusas.
- Asociar label e input.
- Nombrar botones de icono.
- Verificar referencias ARIA a IDs existentes.
FAQ
¿Cualquier texto alt es suficiente?
No. Debe ser apropiado para la función y contexto de la imagen.
¿aria-label debe sustituir las etiquetas visibles?
Normalmente no. Las etiquetas visibles son robustas y ayudan a más usuarios.
Fuentes oficiales: European Accessibility Act y W3C WCAG
W3C WCAG 2.2
Información general, no asesoramiento jurídico ni declaración formal de conformidad WCAG. Los controles automáticos no cubren todos los criterios.
Mapea primero los riesgos técnicos de accesibilidad
El Quick Scan gratuito revisa hasta 5 páginas representativas. El Risk Report de pago analiza en segundo plano hasta 1.000 páginas públicas y se envía automáticamente por correo al terminar.