Building Accessible Vue Components
summary
Web accessibility hinges on specifics: follow WCAG 2.1 and semantic HTML first, not ARIA, because WebAIM finds 96.8% of homepages have issues and 74.6% of ARIA errors stem from incorrect use; one site even reports 68,826 errors. Prefer links when URLs change and buttons for actions, use explicit <label for=> (Dragon dislikes implicit labels), provide meaningful alt or alt="" with role=presentation for decorative images, keep tabindex ≤0 or -1, and test with AXE/Lighthouse/Accessibility Insights plus VoiceOver NVDA or JAWS — semantic-first development and automated testing catches 20–57% of issues.
AI-written summary · about
chapters (8)
- 0:00Introduction
- 2:19Where to start with accessibility?
- 5:28Invisabilities
- 10:04Coding Best Practices
- 13:26Common Issues and how to correct them
- 30:20Testing has 2 sides
- 35:33Thank you!
- 36:03Q&A
related talks
47mBuilding Accessible Web Components
22mAccessible Components with Homer Gaines
30mWeb Accessibility with VueJS
01h 07mA web for anyone, anywhere, anytime
45mA Web for Anyone, Anywhere, Anytime
01h 01mA web for anyone, anywhere, anytime
52mCommon Accessibility Pitfalls
25mPrevent, Catch and Fix Accessibility Issues