Skip to content

Vienna CallingJul 29, 2020

Accessible SVGs: Inclusiveness beyond patterns (short version)

A lightning talk on moving beyond code patterns to consider color, contrast, motion, and real user needs in accessible SVG decisions.

talkAccessibilityARIAAT testingComponent/patternCSSHTMLJavaScriptSVG/image
1 / 6

Hello! Today I’m going to talk to you about SVGs and how to make them more inclusive and challenge you all to think a bit more about real users and their needs — all in roughly 10 minutes!

Scalable Vector Graphics (SVGs) have been a W3C open standard since 1999, and they remain popular because they offer a small footprint, high visual fidelity, integrated styling, interactivity, and animation. Accessible SVG techniques have also matured, but most guidance stops at code compliance and screen reader patterns. This short talk challenges designers and developers to consider real users and broader inclusive needs when creating SVGs. The session covers SVG color and contrast, including WCAG contrast guidance, color blindness simulators and filters, and the @prefers-color-scheme media query. It also covers SVG animation, including WCAG motion guidance, pause/stop/hide options, and the @prefers-reduced-motion media query.