Style Is Substance
summary
Demonstrates how visual motifs become accessible semantics by mapping design elements to HTML and ARIA: uses DOM order over visual-only layouts, annotates templates with a reading order, marks unique content as main element, groups headers/footers/nav as landmarks, and assigns semantic roles and names to every component. Shows concrete cases — a CBC news multi-column layout, an SVG circle‑packing diagram and a login form with social buttons — and recommends aria attributes like aria-owns and aria-labelledby and pattern‑library annotations.
AI-written summary · about
chapters (36)
- 0:00Intro
- 2:13About Amelia
- 3:22Disclaimer
- 3:57Accessibility
- 4:39Good Design
- 5:13Style is Substance
- 5:35What does Substance mean
- 6:21Semantics
- 6:36Style
- 6:59Visual Designers
- 7:54UX
- 8:29Markup
- 8:55Layout
- 9:43Motion
- 9:56Unreliable
- 10:59Redundancy
- 11:33Design Markup
- 13:09Semantic Markup
- 14:05Accessibility Markup
- 16:44Checklist
- 18:02Reading Order
- 18:30Internal Reading Order
- 20:53Complex Layouts
- 23:52Complex Reading Order
- 25:42Implementing Reading Order
- 29:24Main Element
- 29:46Why Identify Main Element
- 30:01What in the Design
- 32:05HTML Main Element
- 33:30HTML Landmark Elements
- 35:22Give them a role
- 35:36Every component needs a role
- 36:24Anything interactive needs a role
- 40:52Everything needs a role
- 42:59Labels
- 43:46Wrapup
related talks
31mMaintainable Styles- That's a Thing?
35mBetween Accessibility and Style: Semantics and CSS Architecture
18mCrafting Stateful Styles
11mAccessibility and why everything old is new again
01h 06m“Full-Featured Art Direction for the Web”
46mSemantics and How to Get Them Right
01h 11mCSS is Rad
11mIt's the Markup that Matters