SVG Accessibility (with Carie Fisher) | Some Antics

From icons to larger graphics, SVG images are everywhere — and with them come their own accessibility challenges! Join us today as Carie Fisher shows us how we can make our SVGs accessible and inclusive!

Carie Fisher is an author, speaker, and developer with over 15 years of tech experience who is passionate about the intersection of front-end code and UX, digital accessibility, and diversity in technology. Carie works as a Senior Accessibility Consultant and Trainer at Deque Systems while also pursuing her PhD in Human-Computer Interactions at Iowa State University.

Source code: https://codepen.io/bendmyers-the-typescripter/pen/gOxvwLB?editors=1100

Broadcasted live on Twitch on November 4, 2021. Watch future streams live at https://www.twitch.tv/someanticsdev.

#WebDev #A11y

---

Mentioned Links:

- Accessible SVGs on Smashing Magazine: https://www.smashingmagazine.com/2021/05/accessible-svg-patterns-comparison/

- Carie's SVG compatibility matrix: https://codepen.io/cariefisher/pen/QWpjded

- https://a11ysupport.io

- A11yNYC: https://www.meetup.com/A11yNYC/events/280927915/

- Tatiana Mac on reduced motion: https://www.tatianamac.com/posts/prefers-reduced-motion/

- Cassie Evans: https://www.cassie.codes/

- Eric Bailey on reduced motion: https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/

- Web Content Accessibility Guidelines: https://www.w3.org/TR/WCAG21/

- Good, Better, Best: Untangling The Complex World Of Accessible Patterns: https://www.smashingmagazine.com/2021/03/good-better-best-untangling-complex-world-accessible-patterns/

---

00:00 Introductions

07:12 Describing SVGs

20:14 SVG Cleanup

25:00 Respecting Light and Dark Modes

32:31 Animating SVGs and Respecting Motion Preferences

43:09 Further Resources

44:42 A Brief Aside About SVGs in Internet Explorer

46:10 Good, Better, Best

54:48 Wrapping Up