Writing even more CSS with Accessibility in Mind
summary
Covers practical rules and failures: use relative units like rem to respect browser font-size settings; add progressive enhancement with js class via type="module" so legacy browsers skip extra JS; prefer defensive motion by enabling animations only under prefers-reduced-motion: no-preference; use attribute selectors to mark downloads and externals and aria-describedby or a hidden “screen‑reader sprite” for announcements; keep an accessibility debug CSS (grayscale, cursorless, tabindex checks); avoid display:contents bug and beware display:flex breaking table semantics and unreliable speak-as behavior.
AI-written summary · about
chapters (20)
- 0:00Start
- 0:48Manuel Matusovich
- 1:13Manuel Matuzovic
- 2:27Progressive Enhancement
- 6:16Shape Margin To Add a Custom Shape on Top of the Image
- 10:32Respecting User Preferences
- 11:20Font Size
- 13:09Pixels To Ram
- 14:05Motion and Animation
- 16:19Keyframe Animation in Css
- 18:18Summary
- 22:14Attribute Selectors
- 26:03Sub String Matching Attribute Selectors
- 26:31Testing
- 28:23Debugging Accessibility
- 33:54Testing User Interfaces and Debugging
- 34:23Css and Semantics
- 38:51Table Css Display Properties and Aria
- 39:26Unordered List
- 43:23Debugging Snippets
related talks
30mWriting CSS with Accessibility in Mind
09mAccessible CSS in Everyday Life
42mCSS, JavaScript and Accessibility
45mTypography and accessibility
35mBetween Accessibility and Style: Semantics and CSS Architecture
38mWeb accessibility - it's not just about HTML
37mFuture-Proof CSS
39mWhat about CSS? Progressive Enhancement and CSS