Web Accessibility Academy · Lección

Informativa frente a decorativa: la primera decisión

Decida si una imagen necesita texto o no.

Lección 1 de 413 pasos

Informativa frente a decorativa: la primera decisión es una lección gratuita de Web Accessibility Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Web Accessibility Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Web Accessibility Academy incluye 4 lecciones en total.

La primera pregunta

Antes de escribir una sola palabra de texto alternativo, pregúntese algo: ¿esta imagen aporta significado o solo está ahí para verse bien?

Dos categorías

Toda imagen pertenece a una de dos categorías: imágenes informativas que transmiten contenido o imágenes decorativas que solo aportan un acabado visual.

Qué significa informativa

Una imagen informativa comunica algo que el usuario se perdería sin ella, como un gráfico, una foto de producto o un logotipo con el nombre de la empresa.

Qué significa decorativa

Una imagen decorativa no aporta información. Piense en adornos de fondo, líneas separadoras o una foto de archivo que solo crea un ambiente.

Por qué importa la decisión

Acertar importa porque una decisión incorrecta oculta contenido real o inunda a quienes usan lectores de pantalla con ruido inútil.

Las imágenes informativas llevan texto

Si una imagen es informativa, proporciónele un texto alt real que transmita su significado en contexto.

<img src="sales-up.png" alt="Sales rose 40 percent in March">

Las decorativas llevan silencio

Si una imagen es decorativa, asígnele un alt vacío para que los lectores de pantalla la omitan.

<img src="divider.png" alt="">

La misma imagen, dos funciones

La misma foto puede ser informativa en una página y decorativa en otra. El contexto decide, no el archivo.

Una prueba útil

Pruebe esto: si quitara la imagen, ¿la página perdería significado? Sí significa informativa. No significa decorativa.

No omita nunca alt

Omitir por completo el atributo alt es la peor opción: muchos lectores de pantalla leerán entonces el nombre del archivo.

Decida primero

Por tanto, su flujo de trabajo empieza aquí: clasifique cada imagen como informativa o decorativa antes de preocuparse por la redacción.

Comprobación rápida

Es hora de comprobar la decisión fundamental.

Repaso

¡Buen trabajo! Toda imagen es informativa o decorativa, el contexto decide y esa decisión determina si escribe texto alt o lo deja vacío.

Gratis para empezar

Aprende HTML con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos
30
Lecciones
120

Preguntas frecuentes

¿La lección «Informativa frente a decorativa: la primera decisión» es gratis?

Sí — el texto completo de «Informativa frente a decorativa: la primera decisión» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Web Accessibility Academy, actualiza a CoddyKit PRO. El curso de Web Accessibility Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Informativa frente a decorativa: la primera decisión»?

Decida si una imagen necesita texto o no. Practicas Web Accessibility Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Web Accessibility Academy?

No se requiere experiencia previa. Web Accessibility Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Informativa frente a decorativa: la primera decisión»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Web Accessibility Academy?

Sí. Cada lección de Web Accessibility Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Informativa frente a decorativa: la primera decisión
  2. Escriba un alt que transmita la finalidad, no los píxeles
  3. alt vacío e imagen decorativa oculta
  4. Imágenes complejas: gráficos, mapas y descripciones largas
← Volver a Web Accessibility Academy