CSS Accessibility and Design-Structure Separation

Explore the intersection of CSS and accessibility in this 35-minute conference talk from CSS Day 2016. Dive into the evolving relationship between design and structure in web development, and learn how CSS impacts accessibility mechanics in browsers. Discover code examples and design patterns for solving common accessibility problems, including the use of pseudo-selectors, FlexBox, and ARIA. Examine the challenges posed by generated content, keyboard navigation, and the CSS speech module. Gain insights into accessibility tools, icon fonts, and SVG alternatives. Leave with practical knowledge to create more inclusive web experiences, all while enjoying the speaker's playful references to tea-drinking throughout the presentation.

Introduction
Space Jam
Tablebased layouts
Font elements
Accessibility problems
CSS 1 introduction
Drinking tea
Platform accessibility APIs
Checkbox example
DOM accessibility tree
Example
Pseudo selectors
After example
Before example
Generated content
Maybe you might be surprised
Tequila makes me happy
All current browsers
Accessibility tree
CSS accessibility disaster
CSS flexbox
Keyboard sequence
Buttons
Flexbox
The inevitable happens
If youre a sighted keyboard user
If the order of content is important
Using tabindex
Demo
Tabindex
AriaFlow
Screen reader support
A terrible experience
One possible solution
A bug in Firefox
Tea time
CSS speech module
Speak property
Voice volume property
Speech demo
Visual Aria
Tea
Accessibility tools
Accessibility audit
Other accessibility tools
Icon fonts
SVG alternatives
If we adopt the Firefox bug
So use it
in the second row
focusable content