Lección 4 de 12 · Lectura y práctica
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.
Del concepto a la práctica
Taller de esta lección
Ejemplo resuelto
La fotografía de Sala Norte acompaña una ficha que ya indica «seis plazas, mesa rectangular y acceso en planta baja». Si la foto solo ilustra el espacio, repetir toda la ficha en su alternativa añade ruido. Si muestra que la mesa tiene una toma eléctrica que no aparece en el texto, esa información sí puede importar para la reserva. Decide según la función de la imagen en esta página, no según su nombre de archivo.
Pruébalo
Lista tres imágenes y la información que cada una aporta al recorrido.
Escribe alternativas breves para las informativas y trata las decorativas como tales.
Revisa por separado el contraste de texto, enlace y estado de error con una herramienta.
Comprueba que un error también tenga texto, además del cambio de color.
El error habitual es describir cada píxel o usar «imagen de» en todas las alternativas. Tampoco conviene afirmar que dos colores cumplen un requisito sin medir su combinación.
Comprueba tu resultado
Entrega una ficha por imagen con función y decisión. Anota colores y medición del aviso de error. Su significado debe conservarse cuando se presenta sin color.
Mapa de prácticaEl texto alternativo comunica el propósito de una imagen. La navegación por teclado necesita un foco visible; los campos necesitan etiquetas y la página una estructura semántica. Estas comprobaciones ayudan a detectar barreras y no sustituyen una auditoría completa.
Ver la infografía en tamaño completo ↗Contraste y texto alternativo accesible
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.
Sigue con Accesibilidad Web (WCAG)
Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.
Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.