Alt Text Complex Images Jennifer Parker for Art Dept

Alt Text Complex Images for All Learners

Jennifer Parker, Accessibility Specialist

• Instructional Designer & Trainer
• Learning Content Developer
• Multimedia Project Manager
• Diversity Advocate

Certified in:

• Section 508
• Quality Matters (QM) Accessibility & Usability
• Project Management

What are Alt Text and Complex Image Descriptions?

AGENDA

Why does Alt Text Matter?

Best Practices

References

Alt Text Alternative text is used to describe the content & function of an image. Why is this important to an educational institution? The U.S. Department of Education's National Center for Education Statistics (NCES) reported that 20.5% of undergraduate students had a disability in the 2019–2020 academic year - Only roughly 1/3 of those students reported this disability to their institutions. Pedagogy: Learners using screen readers may miss essential elements that are pedagogically tied to your learning objectives. Accurate descriptions ensure all learners can fully engage in your course content.

A work by Pablo Picasso was painted in 1937. It represents the horror of the bombing of Guernica during the Spanish Civil War, with distorted and expressive figures in a palette of white, black, and gray. Its cubist style and chaotic composition convey a powerful anti-war message.

Guernica

Pablo Picasso (Reina Sofía Museum, Madrid)

Tips for Alt Text for Complex Images

• Purpose matters: Write alt text based on how the image is used (art course, art exhibit, research article). Context-specific descriptions: customize alt text to the learning or teaching goal.

• Structure & Clarity: Describe from general to specific in logical order. Describe images top → bottom, left → right; use nested lists for charts, diagrams, or structured visuals; add supplemental text nearby if needed.

• Collapsible tabs for Supplemental text: Provide long descriptions in nearby text blocks or downloadable files. These give equivalent access to the content for learners with low or no vision in an online course; or if possible, consider tactile graphics.

• Describe distinct elements: Explain key figures, shapes, parts or features; explain relationships clearly. Avoid starting alt text with phrases like, "this image of or this picture of."

• Decorative images: Do not require descriptive alt text; use an empty alt attribute (alt="") so screen readers skip them.

• Detailed descriptions: Be as succinct as possible, but as detailed as needed: Alt text is limited for user experience.

The Creation of Adam (1511) by Michelangelo is a fresco in the Sistine Chapel in the Vatican. It depicts God giving life to Adam with the tip of his finger, in an iconic composition of the Renaissance. It stands out for its dynamism and symbolism regarding the divine and human connection.

The Creationof Adam

Michelangelo (The Sistine Chapel, Vatican Museums, Vatican City.)

Thank you Contra Costa Community College District!

References

Picasso, Pablo. Guernica. 1937, Museo Nacional Centro de Arte Reina Sofía, Madrid. © Estate of Pablo Picasso / Artists Rights Society (ARS), New York.

Works Cited in the public domain: Botticelli, Sandro. The Birth of Venus. c. 1485, Uffizi Gallery, Florence. Dalí, Salvador. The Persistence of Memory. 1931, The Museum of Modern Art, New York. di Lodovico Buonarroti Simoni, Michelango. The Creation of Adam. 1512, Sistine Chapel, Vatican City. Munch, Edvard. The Scream. 1893, National Gallery and Munch Museum, Oslo.

National Center for Education Statistics (NCES)

WebAIM: Alternative Text

W3C: Image Concepts W3C breaks down each type of image requiring alt text.

W3C: An Alt Decision Tree Not sure if you should use alt text or not? Use this decision tree from W3C.

W3C: Complex Images

Complex Image Guidelines

5. Detailed descriptions: Be as succinct as possible, but as detailed as needed: Canvas limits alt text to 120 characters for user experience. Provide fuller context, key elements, relationships, and symbolism; useful for instructional or analytical purposes. Do not start alt text with "this image or picture of."6. Context-specific descriptions: Tailor alt text to the learning or teaching goal (e.g., historical context, symbolism, artistic style).7. Concise descriptions: Summarize main elements for quick understanding; preferred unless the image contains critical information not available elsewhere.8. Decorative images: Do not require descriptive alt text; use an empty alt attribute (alt="") so screen readers skip them.

1. Purpose matters: Write alt text based on how the image is used (art course, art exhibit, research article).
2. Structure & Clarity: Describe from general to specific in logical order. Describe images top → bottom, left → right; use nested lists for charts, diagrams, or structured visuals; add supplemental text nearby if needed.
3. Collabsible tabs for Supplemental text: Provide long descriptions in nearby text blocks or downloadable files. These give equivalent access to the content for learners with low or no vision in an online course; or if possible, consider tactile graphics.
4. Describe distinct elements: Explain key figures, shapes, parts or features; explain relationships clearly

Guidelines

Purpose matters: Write alt text based on how the image is used (art course, art exhibit, research article). Concise descriptions: Summarize main elements for quick understanding; preferred unless the image contains critical information not available elsewhere. Detailed descriptions: Provide fuller context, key elements, relationships, and symbolism; useful for instructional or analytical purposes. Context-specific: Tailor alt text to the learning or teaching goal (e.g., historical context, symbolism, artistic style). Structure and clarity: Describe images top → bottom, left → right; use nested lists for charts, diagrams, or structured visuals; add supplemental text nearby if needed.

• Describe distinct elements: Explain key figures, shapes, parts or features; explain relationships clearly. Supplemental or tactile options: For highly complex images, provide long descriptions in nearby text blocks; consider tactile graphics (raised-line, 3D models, embossed diagrams) for low or no vision learners.
• Decorative images: Do not require descriptive alt text; use an empty alt attribute (alt="") so screen readers skip them.

Complex Image Guidelines

5. Detailed descriptions: Be as succinct as possible, but as detailed as needed: Canvas limits alt text to 120 characters for user experience. Provide fuller context, key elements, relationships, and symbolism; useful for instructional or analytical purposes. Do not start alt text with "this image or picture of."6. Context-specific descriptions: Tailor alt text to the learning or teaching goal (e.g., historical context, symbolism, artistic style).7. Concise descriptions: Summarize main elements for quick understanding; preferred unless the image contains critical information not available elsewhere.8. Decorative images: Do not require descriptive alt text; use an empty alt attribute (alt="") so screen readers skip them.

1. Purpose matters: Write alt text based on how the image is used (art course, art exhibit, research article).
2. Structure & Clarity: Describe from general to specific in logical order. Describe images top → bottom, left → right; use nested lists for charts, diagrams, or structured visuals; add supplemental text nearby if needed.
3. Collabsible tabs for Supplemental text: Provide long descriptions in nearby text blocks or downloadable files. These give equivalent access to the content for learners with low or no vision in an online course; or if possible, consider tactile graphics.
4. Describe distinct elements: Explain key figures, shapes, parts or features; explain relationships clearly

Guidelines

Purpose matters: Write alt text based on how the image is used (art course, art exhibit, research article). Concise descriptions: Summarize main elements for quick understanding; preferred unless the image contains critical information not available elsewhere. Detailed descriptions: Provide fuller context, key elements, relationships, and symbolism; useful for instructional or analytical purposes. Context-specific: Tailor alt text to the learning or teaching goal (e.g., historical context, symbolism, artistic style). Structure and clarity: Describe images top → bottom, left → right; use nested lists for charts, diagrams, or structured visuals; add supplemental text nearby if needed.

• Describe distinct elements: Explain key figures, shapes, parts or features; explain relationships clearly. Supplemental or tactile options: For highly complex images, provide long descriptions in nearby text blocks; consider tactile graphics (raised-line, 3D models, embossed diagrams) for low or no vision learners.
• Decorative images: Do not require descriptive alt text; use an empty alt attribute (alt="") so screen readers skip them.

Guidelines

Purpose matters: Write alt text based on how the image is used (art course, art exhibit, research article). Concise descriptions: Summarize main elements for quick understanding; preferred unless the image contains critical information not available elsewhere. Detailed descriptions: Provide fuller context, key elements, relationships, and symbolism; useful for instructional or analytical purposes. Context-specific: Tailor alt text to the learning or teaching goal (e.g., historical context, symbolism, artistic style). Structure and clarity: Describe images top → bottom, left → right; use nested lists for charts, diagrams, or structured visuals; add supplemental text nearby if needed.

• Describe distinct elements: Explain key figures, shapes, parts or features; explain relationships clearly. Supplemental or tactile options: For highly complex images, provide long descriptions in nearby text blocks; consider tactile graphics (raised-line, 3D models, embossed diagrams) for low or no vision learners.
• Decorative images: Do not require descriptive alt text; use an empty alt attribute (alt="") so screen readers skip them.