AccessibleJS

on YouTube ↗26m

" summary

Shows concrete fixes: uses aria-live to announce a five‑second countdown, toggles aria-hidden when showing/hiding panels, and sets custom controls with role + tabindex so divs act like buttons. Demonstrates using tabindex="-1" to remove offscreen modals from tab order and programmatically focusing the opened dialog. Tests include Lighthouse, WAVE, ChromeVox/VoiceOver, ally.js and a VS Code accessibility extension. Gives links to source code, slides and the WAI‑ARIA Authoring Practices for widget mappings.

AI-written summary · about

" chapters (9)

1. 0:00Intro
2. 1:13What is accessibility (a11y)?
3. 8:05Accessibility & JavaScript
4. 9:15Writing accessible JavaScript
5. 13:162. Navigation
6. 18:333. Interaction
7. 19:45Testing for accessibility
8. 24:34Resources & further reading
9. 25:27Outro

" related talks

• 30mAccessible.JSJemima Abu · CityJS Conference 2020
• 24mReusable Widgets that Work!Maria Lamardo · VueConf US 2024
• 29mJavaScript for EverybodyMarcy Sutton Todd · JSConf EU 2014
• 28mDeveloper's Guide to Accessibility MechanicsLéonie Watson · You Gotta Love Frontend 2016
• 47mBuilding Accessible Web ComponentsRuss Weakley · Inclusive Design 24 (#id24) 2016
• 33mAccessibility and JS: side-by-sideFelipe de Albuquerque · JSConf US 2015
• 27mMaking Interactions Accessible to All UsersAnuradha Kumari · DevReach 2023
• 32mBetter Accessibility with JavaScriptMelanie Thewlis · Reject.JS 2015