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

Slide 1

Accessible SVGs

Pattern, Color Contrast, & Motion Considerations

Slide 2

Slide 2

Today’s Agenda

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

Slide 3

Slide 3

SVG Exporting Demo

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

Slide 4

Slide 4

01 - Patterns

Slide 5

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

Slide 6

SVG Pattern Matrix

codepen.io/cariefisher/pen/QWpjded

Slide 7

Slide 7

SVG Pattern Choice Demo

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

Slide 8

Slide 8

02 - Color + Contrast

Slide 9

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

Slide 10

SVG Prefers-Color-Scheme Demo

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

Slide 11

Slide 11

03 - Animation

Slide 12

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

Slide 13

SVG Adding Animation Demo

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

Slide 14

Slide 14

SVG Prefers-Reduced-Motion Demo

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

Slide 15

Slide 15

04 - Wrap-up + Q&A

Slide 16

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

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

Slide 18

Thanks!

@cariefisher cariefisher.com