Practical Tips for Building More Accessible Front-Ends by Sara Soueidan
summary
Practical, concrete rules and fixes: use semantic HTML and landmarks so screen readers get a page skeleton, add missing headings (sometimes visually hidden) and use 80% use regions as a rationale; prefer native buttons over div hacks, use aria-describedby for SVG fallback when embedding charts with object, and give object tabindex="-1" to avoid trapped focus; hide interactive inputs so they remain touchable and keyboardable; test focus with focus-visible or a polyfill and follow Scott O'Hara’s patterns.
AI-written summary · about
chapters (40)
- 0:00Introduction
- 2:30Semantic Markup
- 3:48The Rotor
- 5:00Using Headings Landmarks
- 11:38Semantic Headings
- 12:38Simple Example
- 13:28Basic Structure
- 14:35Adding Titles
- 18:58Marking up Headings
- 20:15Using Headings and Landmarks
- 20:42Main Takeaways
- 22:02The Accessibility Tree
- 23:41Native HTML Elements
- 24:13Accessibility Tree
- 24:59Accessibility Tools
- 25:31Live Coding
- 30:15Icon Buttons
- 30:29Modal Overlays
- 32:53Hiding Content
- 33:12Visibility
- 33:32Hidden
- 34:20Aria Hidden
- 34:48Focusable False
- 36:37Icon Button
- 37:06Menu Button
- 37:21Using AriaLabel
- 38:19Using AriaLabelBy
- 40:17AccessibilityTree
- 41:09Data Visualizations
- 41:44SVG
- 43:44SVG Accessibility Support
- 44:22Khan Academy
- 45:24Embedding Techniques
- 50:42Takeaways
- 51:50Focus Tiles
- 54:36Focus Visible
- 56:06Focus Visible with Buttons
- 57:02Focus Visible with Polyfill
- 58:40Focus Tiles Dont Need to Be Ugly
- 59:33Focus Tiles and Hover Styles
related talks
52mCommon Accessibility Pitfalls
35mAccelerating accessibility in web
28mMaking Single Page Apps accessible
01h 07mInclusive Design Series: How to stop worrying and love accessible forms
22mBetter accessibility with a user-centric view
52mMaking Single Page Apps Accessible: It's easier than you think
28mDeveloper's Guide to Accessibility Mechanics
44mWeb accessibility for Artisans