Accessible Images When It Matters Most

A presentation at DrupalCon Europe 2020 by Carie Fisher

Accessible Images When It Matters Most

Accessible Images When It Matters Most

Carie Fisher, MS, CPWA

Carie Fisher, MS, CPWA

VISUAL LEARNERS - 65%

VISUAL LEARNERS - 65%

Outline

Outline

IMAGE TYPES + ALTS

IMAGE TYPES + ALTS

VISUAL IMPAIRMENTS - 285M

VISUAL IMPAIRMENTS - 285M

Image alt workflow

Image alt workflow

What is the message?

What is the message?

Decorative image example

Decorative image example

Decorative image code example

Decorative image code example

Decorative image take-aways

Decorative image take-aways

Image categorization is part art + part skill

Image categorization is part art + part skill

Informative image example

Informative image example

Informative image code example

Informative image code example

Informative image take-aways <img>

Informative image take-aways <img>

Informative image take-aways &lt;svg&gt;

Informative image take-aways <svg>

What is meaningful alt text?

What is meaningful alt text?

There is a world beyond image alts

There is a world beyond image alts

PSA examples

PSA examples

COLOR + CONSTRAST

COLOR + CONSTRAST

COLOR BLINDNESS - 300M

COLOR BLINDNESS - 300M

PSA Color review

PSA Color review

PSA Color review

PSA Color review

PSA Color review

PSA Color review

PSA Contrast review

PSA Contrast review

PSA Contrast review

PSA Contrast review

Color/contrast ratio breakdowns

Color/contrast ratio breakdowns

Color/contrast ratio breakdowns

Color/contrast ratio breakdowns

Color/contrast ratio breakdowns

Color/contrast ratio breakdowns

Color/contrast ratio breakdowns

Color/contrast ratio breakdowns

Color/contrast ratio breakdowns

Color/contrast ratio breakdowns

Color/contrast ratio breakdowns

Color/contrast ratio breakdowns

Accessible Color and Contrast take-aways

Accessible Color and Contrast take-aways

TYPOGRAPHY + LAYOUT

TYPOGRAPHY + LAYOUT

DYSLEXIA - +15%

DYSLEXIA - +15%

PSA Typography and Layout Review

PSA Typography and Layout Review

PSA Typography and Layout Review

PSA Typography and Layout Review

PSA Typography and Layout Review

PSA Typography and Layout Review

Accessible Typography and Layout take-aways

Accessible Typography and Layout take-aways

COPY + ICONS

COPY + ICONS

ATTENTION DISORDERS - 129M

ATTENTION DISORDERS - 129M

PSA Copy Review

PSA Copy Review

PSA Copy Review

PSA Copy Review

PSA Copy Review

PSA Copy Review

PSA Icon Review

PSA Icon Review

PSA Icon Review

PSA Icon Review

PSA Icon Review

PSA Icon Review

PSA Icon Review

PSA Icon Review

PSA Icon Review

PSA Icon Review

PSA Icon Review

PSA Icon Review

PSA Icon Review

PSA Icon Review

PSA Icon Review

PSA Icon Review

PSA Icon Review

PSA Icon Review

PSA Icon Review

PSA Icon Review

PSA Icon Review

PSA Icon Review

Next Steps for Accessible Copy and Icons

Next Steps for Accessible Copy and Icons

End Quote

End Quote

CONTACT

CONTACT

Questions?

Questions?

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.

We 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

Resources

The following resources were mentioned during the presentation or are useful additional information.