Writing CSS with Accessibility in Mind
summary
Shows concrete CSS fixes and real regressions: use larger fonts and 1.5 line-height, enforce 45–75 characters per line via max-width using the ch unit, measure contrast ratio 4.5:1 (ideal 7:1) with Lighthouse or the color picker, print hrefs using ::after, simulate vision with NoCoffee, avoid outline: none; which excludes keyboard users and instead use :focus-within or the :focus-ring approach, beware grid-auto-flow: dense reordering DOM order and breaking keyboard navigation, and prefer semantic elements not visual hacks.
AI-written summary · about
chapters (16)
- 0:00Start
- 1:26Custom Javascript
- 4:00Font Size
- 4:53Line Height
- 7:09Character Unit
- 7:32Pseudo Elements
- 10:21Color Contrast
- 10:51Contest Contrast Ratio
- 14:02Add Default Borders for the Input Fields
- 14:28Browser Plugin
- 16:16Absolute Units
- 22:03Permanent Temporary and Situational Impairments
- 22:22Grids
- 23:37Grid Auto Flow
- 27:59Display Sub Grids
- 30:11Inclusive Design Patterns
related talks
51mWriting even more CSS with Accessibility in Mind
45mTypography and accessibility
09mAccessible CSS in Everyday Life
22mWeb Accessibility - a better user experience for everyone!
23mNot a designer? You can make your website more accessible
05mMake your website accessible for everyone
22mCan you see that OK? CSS tips for low-vision accessibility
35mBetween Accessibility and Style: Semantics and CSS Architecture