Common Accessibility Pitfalls
summary
Argues that accessibility is practical not theoretical: stop using nonsemantic divs, prefer use semantic HTML, add meaningful alt attributes and aria only after semantics fail, and ditch overlays. Calls out specific tools and targets: test with Axe/Wave/Lighthouse and screen readers (VoiceOver, NVDA, Orca). Gives concrete rules — 4.5:1 contrast for AA (7:1 for AAA), buttons for actions, anchors for navigation, preserve focus (use :focus-visible, avoid outline:none) and trap/fix modal focus so keyboard users can interact.
AI-written summary · about
chapters (16)
- 0:00Accessibility introduction
- 3:40Why accessibility matters
- 8:18Personal motivation
- 14:17Common pitfalls overview
- 25:34Stop using divs for everything
- 27:23JavaScript frameworks and accessibility
- 29:51Screen readers and content
- 33:19Alt attributes best practices
- 37:11Color contrast issues
- 39:57Buttons vs links differences
- 41:21Dangers of removing focus outlines
- 43:24Modern CSS focus management
- 45:53Focus traps in modals
- 46:37ARIA for custom components
- 48:01Accessible social media icons
- 50:48Summary and resources
related talks
31mHow to Program with Accessibility in Mind
36mThe Human Side of Accessibility
01h 07mA web for anyone, anywhere, anytime
22mAccessible Components with Homer Gaines
22mWeb Accessibility - a better user experience for everyone!
26mAccessibility Is a Marathon, not a Sprint
19mAccessibility isn't hard; getting people to see it's easy can be with Sarrah Vesselov
01h 05mAccessibility Testing 101