Accessible SVGs: Pattern, Color Contrast, and Motion Considerations

A presentation at A11yNYC - Accessibility New York City by Carie Fisher

Accessible SVGs

Accessible SVGs

Today’s Agenda

Today’s Agenda

SVG Exporting Demo

SVG Exporting Demo

01 - Patterns

01 - Patterns

SVG Pattern Considerations

SVG Pattern Considerations

SVG Pattern Matrix

SVG Pattern Matrix

SVG Pattern Choice Demo

SVG Pattern Choice Demo

02 - Color + Contrast

02 - Color + Contrast

SVG Color + Contrast Considerations

SVG Color + Contrast Considerations

SVG Prefers-Color-Scheme Demo

SVG Prefers-Color-Scheme Demo

03 - Animation

03 - Animation

SVG Animation Considerations

SVG Animation Considerations

SVG Adding Animation Demo

SVG Adding Animation Demo

SVG Prefers-Reduced-Motion Demo

SVG Prefers-Reduced-Motion Demo

04 - Wrap-up + Q&A

04 - Wrap-up + Q&A

SVG Animation Considerations

SVG Animation Considerations

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 Carie to learn more about:

  • Inclusive SVG patterns for web and mobile
  • SVG color and contrast guidelines, tools, and @prefers-color-scheme
  • SVG animation guidelines, tools, and @prefers-reduced-motion

And there will be time for your questions.

Video

Resources

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