Accesibilidad Web (WCAG)
Texto Leccion
Contraste y texto alternativo accesible
Contraste y texto alternativo accesible Respuesta rápida: el contraste permite que el texto sea legible y el texto alternativo permite que imágenes importantes sean entendidas por lectores de pantalla, búsquedas internas y usuarios con conexiones lentas o imágenes bloqueadas. Dentro de POUR, contraste y alt text pertenecen al principio Perceptible. El objetivo no es decorar el HTML, sino asegurar que la información importante no dependa solo de visión perfecta, color, imagen o contexto visual. C
Tiempo de estudio
18 Min
Contraste y texto alternativo accesible
Respuesta rápida: el contraste permite que el texto sea legible y el texto alternativo permite que imágenes importantes sean entendidas por lectores de pantalla, búsquedas internas y usuarios con conexiones lentas o imágenes bloqueadas.
Dentro de POUR, contraste y alt text pertenecen al principio Perceptible. El objetivo no es decorar el HTML, sino asegurar que la información importante no dependa solo de visión perfecta, color, imagen o contexto visual.
Checklist de contraste
- Texto normal: apuntá a contraste suficiente entre texto y fondo; para WCAG AA suele usarse 4.5:1 como referencia práctica.
- Texto grande: puede admitir menor contraste, pero no uses gris claro por estética si afecta lectura.
- Estados interactivos: hover, focus, disabled, error y success también necesitan contraste entendible.
- No depender solo del color: un error en rojo debe incluir texto, icono o instrucción.
Cómo escribir alt text útil
Un buen texto alternativo describe la función de la imagen en esa página. Si una imagen es decorativa, puede tener alt vacío; si transmite información, debe explicar lo que el usuario necesita saber para continuar.
| Imagen | Alt débil | Alt útil |
|---|---|---|
| Gráfico de ventas | gráfico | Ventas suben 18% en marzo y caen 6% en abril. |
| Botón con icono | ícono | Si el botón ya tiene texto visible, no dupliques el alt. |
| Foto decorativa | persona trabajando | alt vacío si no aporta información nueva. |
Ejercicio: auditoría rápida
Elegí una landing o página de curso y revisá 10 imágenes y 10 combinaciones de color. Entregable: una tabla con problema, impacto, solución y prioridad. Si el problema bloquea compra, registro o aprendizaje, marcá prioridad alta.
Referencia oficial: WCAG 2 at a Glance.
Texto Lessons
#1
¿Por Qué Importa la Accesibilidad?
#2
HTML Semántico para Accesibilidad
#3
Principios POUR de accesibilidad web
#4
ARIA roles, states y properties
#5
Herramientas de Auditoría de Accesibilidad
#6
Navegación por Teclado y Focus Management
#7
Contraste y texto alternativo accesible
#8
Formularios accesibles y mensajes de error
Ver full lessons
Revisar curso learning pagina
