How To Create Accessible Images

In the midst of the COVID-19 pandemic - timing is everything. The information you consume today could quite literally save your life tomorrow. And with more than 65 percent of the population being visual learners - meaning they learn and remember best through visual communication - the job of creating and sharing accessible images has never been more critical. This is especially true for government-issued public service announcements (PSAs) aimed at providing critical and urgent information to the public.

Creating accessible images seems like a simple topic at first glance - you just need to add alt text to an image, right? However, the topic is much more nuanced than people think. In this webinar, we will review the different types of images, dive into some real-world examples, and discuss which elements matter most when our message needs to reach everyone.

Carie Fisher, Senior Accessibility Consultant at Deque, will review:

The different types of images - decorative vs informative (plus actionable, emotional, simple, and complex)
Accessibility of informational images created during the COVID-19 pandemic
Which image elements we need to incorporate in our designs to make our images more inclusive to all

Watch below:

Jump to specific parts of the video using our chapters list:

Webinar Resources

AT device - https://www.nichd.nih.gov/health/topics/rehabtech/conditioninfo/device
An alt Decision Tree - https://www.w3.org/WAI/tutorials/images/decision-tree
ARIA specs - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
WCAG non-text content - https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html
Creating Accessible SVGs - https://www.deque.com/blog/creating-accessible-svgs
WCAG - https://www.w3.org/WAI/standards-guidelines/wcag
Color and contrast PSA examples - http://coronavirus.adcouncilkit.org/share-on-social
ChromeLens simulator - https://chrome.google.com/webstore/detail/chromelens/idikgljglpfilbhaboonnpnnincjhjkd?hl=en
NoCoffee simulator - https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl
WCAG color and contrast - https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html
A11y Color Palette - http://a11yrocks.com/colorPalette
Typography and Layout PSA examples:
- http://www.longbeach.gov/globalassets/airport/media-library/images/covid-2019-flyer-english2.jpg
- https://content.govdelivery.com/attachments/fancy_images/MDPGC/2020/03/3197829/2994306/infographic-illness-prevention_crop.jpg
- https://preventionactionalliance.org/wp-content/uploads/2020/03/StopSpreadOfGerms_8.5x11_CPHFCPH_3.9.2020-791x1024.png
Which Are More Legible: Serif or Sans Serif Typefaces - http://alexpoole.info/blog/which-are-more-legible-serif-or-sans-serif-typefaces
WCAG visual presentation - https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html
Readability terminology - https://en.wikipedia.org/wiki/Readability
Readable tool - https://app.readable.com/text
Reliability test tool - https://www.webfx.com/tools/read-able
Hemingway app - http://www.hemingwayapp.com
Grammarly - https://www.grammarly.com
Flesch–Kincaid readability tests - https://en.wikipedia.org/wiki/Flesch%E2%80%93Kincaid_readability_tests
Copy and Icon PSA examples:
- https://www.cdc.gov/coronavirus/2019-ncov/downloads/2019-ncov-factsheet.pdf
- https://www.cdc.gov/coronavirus/2019-ncov/downloads/stop-the-spread-of-germs.pdf (they just updated their flyer, so slightly different than in my talk)
- https://ecf.com/sites/ecf.com/files/Cycling_COVID19_infographics_1b.png
- https://www.health.pa.gov/topics/disease/PublishingImages/tw%201%20doh%20corona.png
- https://www.canva.com/design/DAD8o6GD6CA/J32v_uNH0mhcsvohdLFRFw/edit
- https://www.washingtonpost.com/graphics/world/2020/03/26/watch-how-countries-are-promoting-coronavirus-safety (Tapir example)
- https://www.health.state.mn.us/diseases/coronavirus/materials/lawnsign6ft.pdf

Deque has helped hundreds of organizations achieve compliance. Schedule a free, confidential consultation with one of our accessibility experts