Hijacking Screenreaders with CSS
summary
CSS changes what assistive tech sees: browsers build and curate an accessibility tree and can display:none hides from AT, ::before gets announced as real content and text-transform uppercase can trigger spelling/pronunciation changes (VoiceOver spells ADD). Removing list bullets made a four-item list stop being exposed as a list in WebKit; zebra‑striping a minimally semantic table restored navigable table behavior for a 10‑row dataset. Test across browsers, OSes and ARIA to override or restore semantics.
AI-written summary · about
chapters (28)
- 0:00Introduction to talk
- 1:26Speaker introduction
- 2:10Talk overview and mental models
- 3:15Separation of content and presentation
- 4:45Screen readers and semantics assumption
- 5:25First CSS impact demo: display none
- 7:09Screen reader exposure to CSS
- 7:33Pseudo-elements and screen readers
- 8:38CSS altering pronunciation
- 11:08WebKit list semantics removal
- 13:41Broken table semantics demo
- 15:47Zebra striping restores table semantics
- 17:17Why screen readers behave this way
- 18:00History of screen readers
- 21:53Operating system primitives and accessibility tree
- 24:06Browsers curate accessibility tree
- 26:56How CSS impacts screen readers
- 28:50Browsers curate accessibility tree examples
- 32:52Life lessons and takeaways
- 33:15Test early and often
- 33:56Concept of paving the cowpath
- 35:29Legacy patterns and future impact
- 36:13Q&A: Automated screenreader testing
- 38:25Q&A: ARIA vs browser heuristics
- 39:27Q&A: CSS property for aria-hidden
- 41:22Q&A: Unicode fonts in CSS
- 43:30Q&A: Tools for new designers
- 46:26Closing remarks
related talks
46mSemantics and How to Get Them Right
09mAccessible CSS in Everyday Life
35mOn CSS accessibility and drinking tea
31mBringing the Web Back to the Blind
40mWebsite Accessibility Examples That Hinder Accessibility
33mAccessibility Done Right
45mYou're only supposed to blow the bloody doors off!
28mYou're only supposed to blow the bloody doors off!