Skip to content

CodeItLive - We ❤ A11yFeb 14, 2022

Accessible SVGs: Pattern, color contrast, and motion considerations

Inclusive SVG techniques that go beyond code patterns to address color contrast and the motion preferences of real-world audiences.

talkAccessibilityARIAComponent/patternCSSHTMLJavaScriptSVG/imageUI/UX
1 / 19

Accessible SVGs involve more than choosing a screen-reader pattern. This session looks at the visual and motion needs that can make an SVG inclusive for more people.

While the specific pattern you decide to use for creating SVGs might vary depending on your particular situation and targeted WCAG conformance level, the reality is that most people stop there, focusing on code compliance and not actual end users and their needs. If true inclusiveness lies beyond patterns, what other factors should we consider when designing and developing accessible SVGs? This talk covers inclusive SVG patterns for web and mobile, SVG color and contrast guidelines, tools, prefers-color-scheme, SVG animation guidelines, tools, and prefers-reduced-motion.