Category: Accessible Images

ACCESSIBLE IMAGES: Use a Nested List to Describe a Simple Flow Chart

Posted on by Mary Gillen

Flow Chart illustration

When it comes to accessibility, flow chart images can be difficult to describe.

SOLUTION: Convert the simple flow chart info to a nested list so the content is available to assistive technology.

The “boxes” are presented as the initial list numbers and the possible transitions are coded as nested sub-bullets within the list.

I coded this simple flow chart:

Flow chart example

as a nested list:

Flow Chart Nested List Code - Download it from the link below
Click here for accessible description of this basic flow chart

BEST PRACTICE: Create the nested link description as an HTML file and publish the link underneath the flow chart image on your website page so it can be accessed by screen reader users.

FOR YOU – DOWNLOAD THIS NESTED LIST CODE NOW: Download this code set (HTML5 and CSS files) via a .zip file to take it for a spin.

===
[ORIGINAL RESOURCE]
===

Instant Download!

PDF Accessibility Remediation How to Fix 40 Common Errors

Whether you have limited experience with the PDF remediation process, are expanding your knowledge on how to remediate PDFs, or simply need a resource that can help remind you how to fix a frustrating error, the info provided in this e-book can help.

Download now.

===

ACCESSIBLE IMAGES: How to Describe Complex Images

Posted on by Mary Gillen

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

Posted on by Mary Gillen

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

Posted on by Mary Gillen

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

===