ACCESSIBLE IMAGES: How to Describe Complex Images

Complex mathematical formulas and graphs illustration

The WCAG 2.1 Guideline 1.1.1 Non-text Content (Level A) calls for all images to contain descriptive, meaningful alt text.

It is recommended that ALT attribute values be kept to no more than 125 characters. Yet complex images (such as charts and graphs) may require a longer description within a LONGDESC attribute or via a link to a separate HTML document that holds a full description accessible to screen readers.

Need to see examples of how to create long descriptions of complex images?

Visit the DIAGRAM Center.

Established in 2010, the DIAGRAM Center is a research and development center whose goal is to dramatically change the way digital content for Accessible Educational Materials (AEM) is produced and accessed, so that students with disabilities are provided equal access to the general education curriculum, especially science, technology, engineering, and math (STEM).

You will find specific image description guidelines for:

  • Art, Photos & Cartoons
  • Photographs
  • Cartoons & Comics
  • Chemical Elements
  • Illustrated Diagrams
  • Object Comparison
  • Comparing Events Over Time
  • Relational Diagrams
  • Venn Diagrams
  • Radial/Web Diagrams
  • Hierarchy/Tree Diagrams
  • Flow Charts
  • Cycles
  • Bar Graphs
  • Line Graphs
  • Pie Graphs
  • Scatter Plots
  • Maps
  • Math Graphs and Diagrams
  • Geometry
  • Equations & Expressions
  • Simple and Complex Tables
  • Timelines

Visit the DIAGRAM Center now.

===

WEBSITE ACCESSIBILITY TESTING & REMEDIATION SERVICES: Mary Gillen is an experienced Website Accessibility Compliance Auditor and Remediator. She can test your website to determine if it meets accessibility standards:

WCAG 2.1: 312 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 59 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===

ACCESSIBLE IMAGES: Don’t Stutter

Different Color Buttons

Problem

Did you know that using the same ALT text on adjacent images on a web page causes screen readers to stutter when the same text is read out twice?

Solution

If a subsequent adjacent image is “decorative”, use the ALT=” attribute. For other non-decorative images, change the redundant ALT text to a unique phrase.

===

WEBSITE ACCESSIBILITY TESTING & REMEDIATION SERVICES: Mary Gillen is an experienced Website Accessibility Compliance Auditor and Remediator. She can test your website to determine if it meets accessibility standards:

WCAG 2.1: 312 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 59 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===

ACCESSIBLE IMAGES: How to Handle ALT Text Acronyms

How to code ALT text acroymns

IMG ALT text with acronyms can cause problems when read by screenreaders.

FAIL: <img src=”mit-it-logo.jpg” alt=”ITS at MIT” />
(read by a screen reader as “It’s at Mit”).

SOLUTION: Include spaces in between acronym letters in the IMG ALT attribute

PASS: <img src=”mit-it-logo.jpg” alt=”I T S at M I T” />
(read by a screen reader as “ITS at EM EYE TEE”).

===

WEBSITE ACCESSIBILITY TESTING & REMEDIATION SERVICES: Mary Gillen is an experienced Website Accessibility Compliance Auditor and Remediator. She can test your website to determine if it meets accessibility standards:

WCAG 2.1: 312 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 59 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===