Accessible SVGs: Inclusiveness Beyond Patterns

A presentation at BADCamp 2020 by Carie Fisher

Accessible SVGs: Inclusiveness Beyond Patterns

Accessible SVGs: Inclusiveness Beyond Patterns

Hello!

Hello!

Agenda

Agenda

1. SVG Color + Contrast

1. SVG Color + Contrast

Accessible SVG Color + Contrast

Accessible SVG Color + Contrast

Light Mode

Light Mode

Dark Mode

Dark Mode

Demo time!

Demo time!

SVG Animation

SVG Animation

Accessible SVG Animation

Accessible SVG Animation

Default Motion - visual

Default Motion - visual

Default Motion - code

Default Motion - code

Reduced Motion - visual

Reduced Motion - visual

Reduced Motion - code

Reduced Motion - code

Demo Time!

Demo Time!

3. Wrap-up + Questions

3. Wrap-up + Questions

Quote

Quote

Thanks!

Thanks!

Scalable Vector Graphics (SVGs) became a W3C open standard in 1999 — back when the new tech hotness was the Blackberry phone, Napster first invaded college dorms, and the Y2K bug sparked fear in us all. Fast forward to our modern digital world and you’ll notice that while the other tech trends have waned, SVGs are still around and thriving. This is partly due to SVGs having a small footprint for such high visual fidelity, in a world where bandwidth and performance matter more than ever — especially on mobile devices and situations/locations where data is at a premium. But also because SVGs are so flexible with their integrated styles, interactivity, and animation options. What we can do with SVGs today goes way beyond the basic shapes of yesteryear.

If we focus on the accessibility aspect of SVGs, we have come a long way as well. Today, we have many robust patterns and techniques to help us optimize inclusiveness. This is true regardless if you are creating icons, simple images, or more complex infographics. While the specific pattern you decide to use might vary depending on your particular situation and targeted WCAG conformance level — the reality is, most people stop there, focusing on code compliance and not actual end-users and their needs. If true inclusiveness lies beyond patterns — what other factors should we consider when designing and developing accessible SVGs?

Join me to learn more about:

SVG Color + Contrast

  • WCAG color contrast ratio guidelines/tools
  • Color blindness simulators/filters
  • Media query: @prefers-color-scheme - what it is and how to use it?


SVG Animation

  • WCAG motion guidelines for animations
  • Animation pause/stop/hide options
  • Media query: @prefers-reduced-motion - what it is and how to use it?

Resources

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