But…Why?
summary
Integration cards with a plus-icon “Add” link all announce as just “add” when navigated by VoiceOver’s rotor, making links indistinguishable; fix by concatenating the product name into the accessible name (use aria-label vs aria-labelledby to either supply "Add GitHub actions" or reference an ID for the product name). The Accessible Name and Description computation spec guides browser behavior but has exceptions (whitespace strings, aria-hidden edge cases), so test across browser + screen reader combos. Mentions include a11yautomation.dev, the Helios design system and matching Figma↔code APIs with automated tests.
AI-written summary · about
chapters (7)
- 0:00Introduction and context
- 7:40Accessible names
- 15:36AccName computation detour
- 25:25Headings, labels, and input
- 35:17Instructional design patterns
- 40:58Reflow, resize, and spacing
- 45:58Conclusion and call to action
related talks
25mBuilding Accessible UI using GitHub Copilot
47mBuilding Accessible Web Components
27mMaking Interactions Accessible to All Users
40mAccessibility-flavored React components make your design system delicious
40mWebsite Accessibility Examples That Hinder Accessibility
40mBuilding Accessible Reusable Components
21mAccessibility 101: Getting started with assistive technology and product inclusion
41mTechnologic (Human After All): Accessibility remix