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.
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.
Aplicación práctica en un caso real
Aplicar Contraste y texto alternativo accesible dentro del contexto de Accesibilidad Web (WCAG) con criterio práctico, evitando quedarse en una definición aislada. Para que esta lección sea útil, imagina un escenario concreto: tienes que usar este tema para mejorar un proceso, tomar una decisión, crear un entregable o explicar una recomendación a otra persona. La pregunta no es solo “qué significa”, sino “qué haría diferente después de entenderlo”.
Un buen uso empieza por delimitar el problema. Define qué resultado quieres lograr, qué información tienes disponible, qué restricciones existen y cómo sabrás si la decisión fue correcta. Esta forma de pensar evita respuestas genéricas y convierte el aprendizaje en una herramienta de trabajo.
Marco de decisión
Antes de avanzar, revisa tres niveles: primero, el objetivo operativo; segundo, los recursos disponibles; tercero, el riesgo de equivocarte. En Accesibilidad Web (WCAG), muchas decisiones fallan porque se copia una táctica sin entender el contexto. El marco correcto te obliga a adaptar, no solo repetir.
- Objetivo: qué resultado medible o visible quieres conseguir.
- Contexto: quién usará esto, con qué nivel de experiencia y bajo qué restricciones.
- Acción: cuál es el siguiente paso mínimo que puedes ejecutar hoy.
- Señal: qué evidencia vas a observar para decidir si funcionó.
Ejemplo guiado
Supón que debes implementar esta idea en una pequeña empresa o proyecto personal. En vez de intentar una versión perfecta, prepara una versión mínima: una plantilla, una prueba, una lista de control, una automatización simple, una página, un mensaje o una medición inicial. Luego pide feedback o compara el resultado contra una métrica.
Si el resultado mejora, documenta el proceso. Si no mejora, identifica si falló la hipótesis, la ejecución o la medición. Esta distinción es clave: muchas personas abandonan una buena idea por una mala primera ejecución, o escalan una mala idea porque miraron la métrica equivocada.
Errores frecuentes
- Confundir actividad con avance: hacer muchas tareas sin saber qué resultado persiguen.
- Copiar ejemplos sin adaptarlos al cliente, audiencia, equipo o nivel técnico real.
- No dejar evidencia: si no registras decisiones y resultados, no aprendes del proceso.
- Querer automatizar o escalar antes de validar que el enfoque básico funciona.
Ejercicio práctico
- Escribe el objetivo de esta lección en una frase aplicada a tu caso.
- Define un entregable pequeño que puedas crear en menos de una hora.
- Lista tres criterios para evaluar si ese entregable está bien hecho.
- Ejecuta una versión inicial y anota qué cambiarías en una segunda iteración.
Checklist de salida
- Puedo explicar el concepto con mis propias palabras.
- Tengo un ejemplo aplicado, no solo una definición.
- Sé qué error debo evitar primero.
- Tengo una acción concreta para practicar esta semana.