Developer's Guide to Accessibility Mechanics
summary
Shows concrete mechanics: use semantic HTML for free accessibility, or when using div/span add focusability with tabindex="0", expose role and state with aria-expanded and aria-describedby, and publish relationships with aria-controls; demonstrates three built widgets (a custom link, a toggle tip, and tab panels), each implemented with JS event handlers and ARIA, and verified working with screen readers; notes a custom link costs about 80% more code than a native anchor and explains when hidden and aria-live are necessary.
AI-written summary · about
chapters (35)
- 0:00Introduction
- 0:45Platform Accessibility API
- 1:24Platform Accessibility Control
- 2:16HTML Mapping Guide
- 4:12Exceptions
- 4:43DOM Tree
- 4:55Accessibility Tree
- 5:58HTML
- 7:44Pseudolinks
- 8:20Tabindex
- 8:57Focus Styles
- 9:23Roll
- 10:24Link
- 11:38Toggle
- 11:58Basic HTML
- 12:47Tab Index
- 13:03Focus Tiles
- 13:44Expanded
- 14:13ARIA
- 14:43Hidden
- 15:13Live
- 15:57Event listeners
- 16:22Escape key
- 16:43Reversed
- 17:06Collapsed
- 17:43Button Element
- 18:02Tab Panels
- 18:31List Items
- 20:43Roll Tab Panel
- 21:00Aria Controls
- 23:10hiding tabs
- 23:33keyboard interaction
- 24:06screen reader interaction
- 25:41focus
- 27:03design patterns
related talks
27mTime Traveller's Guide to Accessibility Mechanics
47mBuilding Accessible Web Components
26mAccessibleJS
52mCommon Accessibility Pitfalls
41mTechnologic (Human After All): Accessibility remix
44mWeb accessibility for Artisans
01h 07mA web for anyone, anywhere, anytime
35mAccelerating accessibility in web