Accessible SVGs: Pattern, Color Contrast, and Motion Considerations

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

Slide 1

Accessible SVGs

Pattern, Color Contrast, & Motion Considerations

Slide 2

Today’s Agenda

01 - Patterns 02 - Color + Contrast 03 - Animation 04 - Wrap-up + Q&A

Slide 3

SVG Exporting Demo

Step 1: codepen.io/cariefisher/pen/ExvXOrp

Slide 4

01 - Patterns

Slide 5

SVG Pattern Considerations

What image information needs to be conveyed?
Which AT devices & tools need supporting?
Are there any framework or user limitations?

Slide 6

SVG Pattern Matrix

codepen.io/cariefisher/pen/QWpjded

Slide 7

SVG Pattern Choice Demo

Step 2: codepen.io/cariefisher/pen/QWMgzLv

Slide 8

02 - Color + Contrast

Slide 9

SVG Color + Contrast Considerations

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

Slide 10

SVG Prefers-Color-Scheme Demo

Step 3: codepen.io/cariefisher/pen/dyzzogV

Slide 11

03 - Animation

Slide 12

SVG Animation Considerations

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

Slide 13

SVG Adding Animation Demo

Step 4: codepen.io/cariefisher/pen/qBXXOJM

Slide 14

SVG Prefers-Reduced-Motion Demo

Step 5: codepen.io/cariefisher/pen/YzxxEEJ

Slide 15

04 - Wrap-up + Q&A

Slide 16

SVG Animation Considerations

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!

Slide 17

Quote

“The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.” — Tim Berners-Lee

Slide 18

Thanks!

@cariefisher cariefisher.com