Building Accessible Web Components

on YouTube ↗47m

" summary

Covers concrete fixes: avoid redundant or copied ARIA that points to missing IDs, prefer native semantics, and test across NVDA/VoiceOver/JAWS and browsers; for extra link/button context the hidden off-screen span or aria-label work best (title and aria-labelledby are unreliable in many combos); dynamic updates use aria-live polite or role=alert carefully and set aria-relevant to limit noise; form errors read inline by wrapping error text in the label or expose a role=alert container (tabindex -1→0, links to fields); modals hide page with aria-hidden, set role=dialog, trap tab focus, and return focus to trigger or updated content.

AI-written summary · about

" chapters (24)

1. 0:00Introduction
2. 0:23Who is Russ
3. 0:59Aria Misuse
4. 1:25Redundancy
5. 2:41Over verbose
6. 3:27Copy pasting
7. 4:30Testing
8. 6:45Context
9. 10:16Buttons
10. 11:34Hidden Content
11. 11:56Adding Information
12. 14:26Button Labels
13. 14:55Test Cases
14. 15:31Dynamic Content
15. 17:25Live Values
16. 19:17Aria Relevant
17. 20:29Alert
18. 21:02Error Messages
19. 25:32Form Validation
20. 26:43Form Markup
21. 28:15Modals
22. 35:11Additional Meaning
23. 39:24Quick Tips
24. 41:36Questions

" related talks

• 28mBuilding Accessible React ComponentsManjula Dube · React Summit Remote Edition 2021
• 41mBuilding Accessible Vue ComponentsHomer Gaines · Vueconf.US 2022
• 33mAccessibility Done RightMichelle Sanver · PHP UK Conference 2015
• 01h 07mA web for anyone, anywhere, anytimeRowdy Rabouw · NDC Melbourne 2022
• 27mMaking Interactions Accessible to All UsersAnuradha Kumari · DevReach 2023
• 28mDeveloper's Guide to Accessibility MechanicsLéonie Watson · You Gotta Love Frontend 2016
• 01h 01mA web for anyone, anywhere, anytimeRowdy Rabouw · NDC Oslo 2022
• 15mPatterns for Making Accessible ComponentsChris Cormier · React Alicante 2023