Inclusive clicks in JS apps

on YouTube ↗11m

" summary

Advocates using semantics and small concrete rules: use a real button for actions and a real link for navigation, or build a component that renders an <a> when href is given; add aria attributes like aria-current="page" for nav and aria-pressed for toggles, toggle them with the router or state; prefer built libraries (react Ali dialogue Rich UI react area) for complex widgets; sometimes use HTML only (details/summary) to avoid JavaScript.

AI-written summary · about

" chapters (10)

1. 0:00Introduction to inclusive clicks in JavaScript
2. 0:52Buttons for keyboard users
3. 1:37Links vs buttons in nav
4. 2:39Valid HTML with styled components
5. 3:40Screen reader nav links
6. 5:45Toggle buttons and ARIA
7. 6:47ARIA styling
8. 7:31Complex components like dialogs require careful work
9. 8:57Accessible libraries and tools
10. 9:38HTML solves accessibility

" related talks

• 47mThe Links vs. Buttons ShowdownMarcy Sutton Todd · Inclusive Design 24 (#id24) 2017
• 27mMaking Interactions Accessible to All UsersAnuradha Kumari · DevReach 2023
• 52mMaking Single Page Apps Accessible: It's easier than you thinkJess Budd · NDC Sydney 2024
• 52mA11y with React ComponentsRussell Skaggs · JavaScript and Friends Conference 2020
• 34mBuilding Accessible Components in ReactJemima Abu · Build Stuff 2020
• 28mDeveloper's Guide to Accessibility MechanicsLéonie Watson · You Gotta Love Frontend 2016
• 39mBuilding Webapps for everyone - a11y with ReactManjula Dube · React Day Berlin 2019
• 16mDemystifying accessibility in React appsKateryna Porshnieva · React Conf 2024