On CSS accessibility and drinking tea

on YouTube ↗35m

" summary

Claim: CSS generated content is exposed to assistive tech — ::before/::after text gets inserted into the accessibility tree in most browsers, surprising screen readers. Evidence: demos and browser testing; caveat about IE. Problem: FlexBox visual order can break keyboard navigation — order changes layout but not DOM tab sequence, making tabbing confusing. Fixes tried: tabindex and ARIA flowto both fail at scale; Firefox bug currently makes tab order match visual order provides a practical workaround. Demos include a web speech polyfill and the visualAria bookmarklet; CSS Speech module is speculative with poor support.

AI-written summary · about

" chapters (49)

1. 0:00Introduction
2. 0:45Space Jam
3. 1:43Tablebased layouts
4. 2:15Font elements
5. 2:50Accessibility problems
6. 3:33CSS 1 introduction
7. 4:16Drinking tea
8. 4:27Platform accessibility APIs
9. 5:00Checkbox example
10. 6:07DOM accessibility tree
11. 7:32Example
12. 9:22Pseudo selectors
13. 9:44After example
14. 9:54Before example
15. 10:06Generated content
16. 10:21Maybe you might be surprised
17. 10:36Tequila makes me happy
18. 10:58All current browsers
19. 11:21Accessibility tree
20. 12:04CSS accessibility disaster
21. 12:47Keyboard sequence
22. 12:59Buttons
23. 13:10Flexbox
24. 13:38The inevitable happens
25. 14:08If youre a sighted keyboard user
26. 14:21If the order of content is important
27. 14:50Using tabindex
28. 15:49Demo
29. 16:01Tabindex
30. 16:36AriaFlow
31. 17:14Screen reader support
32. 17:34A terrible experience
33. 18:22One possible solution
34. 18:41A bug in Firefox
35. 19:49Tea time
36. 20:48Speak property
37. 21:21Voice volume property
38. 22:42Speech demo
39. 23:46Visual Aria
40. 24:59Tea
41. 25:55Accessibility tools
42. 26:32Accessibility audit
43. 27:05Other accessibility tools
44. 27:56Icon fonts
45. 29:17SVG alternatives
46. 29:49If we adopt the Firefox bug
47. 31:46So use it
48. 32:02in the second row
49. 32:41focusable content

" related talks

• 50mHijacking Screenreaders with CSSBen Myers · axe-con 2023
• 09mAccessible CSS in Everyday LifeLaura Ballini · cssday 2025
• 51mWriting even more CSS with Accessibility in MindManuel Matuzović · Inclusive Design 24 (#id24) 2020
• 30mWriting CSS with Accessibility in MindManuel Matuzović · CSSConf Budapest 2017
• 38mWeb accessibility - it's not just about HTMLIre Aderinokun · ffconf 2023
• 42mCSS, JavaScript and AccessibilityIre Aderinokun · Pixel Pioneers 2023
• 46mSemantics and How to Get Them RightHidde de Vries · beyond tellerrand Düsseldorf 2021
• 41mTechnologic (Human After All): Accessibility remixLéonie Watson · ffconf 2016