Accessible SVGs

Pattern, Color Contrast, & Motion Considerations

Today’s Agenda

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

SVG Exporting Demo

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

01 - Patterns

SVG Pattern Considerations

  • 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/QWMgzLv

02 - Color + Contrast

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

SVG Prefers-Color-Scheme Demo

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

03 - Animation

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

SVG Adding Animation Demo

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

SVG Prefers-Reduced-Motion Demo

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

04 - Wrap-up + Q&A

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!

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

Thanks!

@cariefisher cariefisher.com