Accessible SVGs: Pattern, Color Contrast, and Motion Considerations

Accessible SVGs: Pattern, Color Contrast, & Motion Considerations

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