Inclusively Responsive UIs with CSS and SVG
summary
Shows how to wire prefers-reduced-motion to a single root CSS variable to cancel hundreds of animations, uses CSS custom properties plus the range input and localStorage to let users tune base font size, demos variable fonts (weight/width/optical-size/grade axes) and animates axes, replaces SVG backgrounds with masks or inline SVG so icons recolor correctly, advises ms-high-contrast-aware styles and focus-visible polyfill, and treats most techniques as progressive enhancements with some browser gaps.
AI-written summary · about
chapters (10)
- 0:00Introduction to accessibility
- 2:31CSS for motion sensitivity
- 6:16Managing CSS variables
- 10:21Flexible font scaling
- 17:25Variable fonts for accessibility
- 25:51Interactive font adaptations
- 29:05Color themes and HSL
- 35:35SVG icons and masks
- 40:34Windows high contrast mode
- 44:46Focus styles and conclusion
related talks
31mSurprise and delight: CSS + SVG
52mCSS and SVG — The Dynamic Duo!
43mCSS is Awesome!
01h 09mEven More CSS Secrets
39mStyling and Animating Scalable Vector Graphics with CSS
29mStyling and Animating Scalable Vector Graphics with CSS
57mDo It With Style: Rethinking CSS
24mBreaking the norm with creative CSS