Don't write HTML the way George Lucas wrote Star Wars
summary
Claims that reordering visible content with CSS breaks actual reading order and interactive navigation. Builds a Star Wars poster page and uses CSS grid-area and grid-template-areas to place episodes in chronological vs release order, then changes only the CSS so DOM order no longer matches visual order. Finds keyboard focus via the tab key and assistive tech like screen readers follow DOM order and the layout therefore fails accessibility.
AI-written summary · about
related talks
51mLayout and Reading Order
32mThe Dark Side of the Grid
35mOn CSS accessibility and drinking tea
30mWriting CSS with Accessibility in Mind
43mA solution for the visual and source order disconnect
51mWriting even more CSS with Accessibility in Mind
56mI'm Going To Make You Stop Hating CSS
27mRefactoring (the way we talk about) CSS