A presentation at CodeItLive Twitch Stream - We ❤ A11y by Carie Fisher
Carie Fisher Sr. Accessibility Consultant & Trainer @ Deque HCI Ph.D. student @ Iowa State University
Today’s Agenda 01 Patterns 03 Animation 02 Color + Contrast 04 Wrap-up + Q&A
SVG Exporting Demo Step 1: codepen.io/cariefisher/pen/podrvxr
Patterns 01
SVG Pattern Considerations 01 02 03 Options AT Support Environment What image information needs to be conveyed? Which AT devices & tools need supporting? Are there any framework or user limitations?
SVG Pattern Matrix codepen.io/cariefisher/pen/QWpjded
SVG Pattern Choice Demo Step 2: codepen.io/cariefisher/pen/KKyvwjX
Color + Contrast 02
SVG Color + Contrast Considerations 01 02 03 WCAG Rules Tools Media Queries Essential images must meet a color contrast ratio of 3:1 Color contrast is a formula = many, many tool options @prefers-colorscheme supported by 92-93% of all browsers
SVG Prefers-Color-Scheme Demo Step 3: codepen.io/cariefisher/pen/NWwvqYy
Animation 03
SVG Animation Considerations 01 02 03 Be Selective WCAG Rules Media Queries First consider why the movement is needed at all You may need to include pause, stop, or hide options for users @prefers-reducedmotion supported by 94% of all browsers
SVG Adding Animation Demo Step 4: codepen.io/cariefisher/pen/abVyvOd
SVG Prefers-Reduced-Motion Demo Step 5: codepen.io/cariefisher/pen/ZEaJbpz
Wrap-up + Q&A 04
SVG Animation Considerations 01 02 03 Patterns Color + Contrast Animation There are a lot of pattern options regardless of platform/AT support you need! With a few more lines of code you can accommodate more of your users’ visual needs! With a few more lines of code you can accommodate more of your users’ motion needs!
“How many opportunities do we have to dramatically improve people’s lives just by doing our job a little better?” Steve Krug
Thanks! @cariefisher cariefisher.com
While the specific pattern you decide to use for creating SVGs 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:
The following resources were mentioned during the presentation or are useful additional information.
The following code examples from the presentation can be tried out live.
for free. You
can too.