Alt Text Complex Images 2Jennifer Parker Published

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

Click the page # to move ahead

What are Alt Text and Complex Image Descriptions?

pg. 3

AGENDA

Why does Alt Text Matter?

Accessibility Foundations in Practice (UDL 4.2) Alt Text for Complex Images: Illustrations

pg. 4

Alt Text for Complex Images: Data Alt Text Format Options

pg. 5 - 9

pg. 10

References

Alt Text for Complex Images

Alt Text: Alternative text is used to describe the content & function of an image. Complex Images: Images that contain substantial information that can not be conveyed in short phrases. 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)

Guidelines 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.

• Keep it Simple: Too much information can be a barrier to learning.
• 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: Alt text is limited for user experience,

so be as succinct as possible, but as detailed as needed.

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.)

Complex Image Types

Pie Charts

Bar Charts

When to use complex images to convert into data tables? Types of Complex Images that can be converted to accessible data tables: • Pie charts are good when showing percentage or proportional data. • Bar charts are used to compare data among categories. • Line graphs are used to compare changes over the period of time. • Complex tables can be broken into separate tables.

Line Graphs

Flow Charts

Diagram Charts

Illustrations

Event Name 5

Maps

Math & Graphs

Event Name 6

Alt Text Format Options

ALTERNATIVE FORMAT OPTIONS 1. Text Desciption Text description is the most common format that benefits learners broadly. Describe concisely, clearly, and meaningfully. Unnecessary words may confuse learners. 2. Convert Images to Data Tables: Present in correct reading order: from left to right and top to bottom. Include table caption and column/row headers. Yearly expenses and profits. 3. Lists: Convert flowcharts and bar graph data into lists: numbered lists for procedures & bulleted lists for items without a sequence. 4. Tactile Data: Tactile graphics are designed to deliver image content through touch.They associate tactile symbols & braille.

Best Practices for Images of Data

• Avoid alt tex phrases like “graphic of…,” or be redundant (use the same description as the body text).

• Not necessary to describe the visual attributes of the charts (i.e., orange wedge, gray lines) unless connected to assessment, for example, an exam question that refers to these attributes.

• List numbers from largest to smallest regardless of how they are presented in the image.

Event Name 5

Language Map

Top 10 Most Commonly Spoken Languages

English

Spanish

Mandarin Chinese

Language Map

Top 10 Most Commonly Spoken Languages

Russian

French

English

Hindi

Spanish

Bengali

Mandarin Chinese

Arabic

Indonesian

Portuguese

Alt Text Options: Pie Charts

Pie Charts show how a whole is divided into its parts. List numbers from largest to smallest, regardless of how they are presented in the image.

Alternative Format Option: DATA TABLES The pie chart can also be presented in a table data format:

Alternative Format Option: Data Table This pie chart represents the distribution of the top 10 most spoken languages in the world, (as percentages within this top 10 group).

Event Name 4

Event Name 5

Alt Text Options: Line Graphs

Alternative Format Option: BULLETED LISTThis line graph can also be presented as a bulleted list.

Line graphs are used to compare changes over the period of time. List the numbers from earliest to latest. Provide title and axis labels. The growth of human population from the 1800s: • 1800 - 1 billion • 1930 - 2 billion • 1970 - 3 billion • 2000 - 6 billion • 2007 - 7 billion • 2025 - 8.2 billion

Event Name 4

Event Name 5

Alt Text Guidelines for flow Charts

Alternative Format Option 2. Flow Charts Flowcharts can be used to diagram a process or sequence of steps.

Alternative Format Option: TEXT DESCRIPTION this flow chart can also be presented in a longer text description:

How to order food: 1. Start order. 2. Order a sandwich. 3. Do you want fries? • If yes, order fries. 4. Do you want a drink? • If yes, order a drink. 5. Pay cashier.

Event Name 4

Event Name 5

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

Contact me for your accessibility needs! jenniferparkerdesigner@gmail.com

https://jenniferparkerdesi.wixsite.com/instructionaldesign

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.