Between Accessibility and Style: Semantics and CSS Architecture
summary
Argues that focusing on accessibility reduces maintenance and improves developer experience by enforcing semantic HTML and consistent CSS architecture. Recommends concrete tactics: use methodologies (ITCSS, OOCSS, BEM, SMACSS, Atomic), order selectors by specificity, prefer element selectors, avoid IDs, !important and inline styles, always set text and background together and show visible focus, and gives five architecture models plus 12+1 rules. Demonstrations include a Firefox "no stylesheet" check, an AI-generated selector specificity test, and ISTAT statistics estimating about 9.5 million people affected by moderate-to-severe accessibility needs.
AI-written summary · about
chapters (8)
- 0:00Introduction
- 3:10Invisible disability
- 6:04Semantics and accessibility
- 9:39CSS cascade
- 15:39CSS architecture models
- 25:50Accessibility CSS rules
- 32:06Accessibility best practices
- 33:53Conclusion
related talks
52mCommon Accessibility Pitfalls
42mCSS, JavaScript and Accessibility
51mWriting even more CSS with Accessibility in Mind
59mImproving Accessibility Through Design Systems
31mMaintainable Styles- That's a Thing?
38mWeb accessibility - it's not just about HTML
30mWriting CSS with Accessibility in Mind
31mWeb Accessibility: From Design to Code, How to Move Toward Greater Inclusion