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.
Resources
- CodeItLive Twitch stream (opens in new tab)
- Happy V-day - Accessible SVG example: step 1 (opens in new tab)
- Happy V-day - Accessible SVG example: step 2 (opens in new tab)
- Happy V-day - Accessible SVG example: step 3 (opens in new tab)
- Happy V-day - Accessible SVG example: step 4 (opens in new tab)
- Happy V-day - Accessible SVG example: step 5 (opens in new tab)
- Accessible SVG Pattern Comparison: updated for 2022 (opens in new tab)