Freak'n Keyboard Traps

on YouTube ↗34m

" summary

Claims that keyboard users get stuck in live components, cites WebAIM data showing a 20.9% accessibility issue increase in Vue sites, and points to WCAG 2.1 success criterion no keyboard traps as the fix. Demonstrates a Vue modal with a keyboard-trap directive that inventories focusable elements, traps focus and respects Escape, showing the solution works. Notes common causes: clickable divs, wrong tabindex/roles, Autofocus, custom dropdowns and calendars, and recommends testing with JAWS NVDA or VoiceOver.

AI-written summary · about

" chapters (5)

1. 0:00Intro
2. 3:02Tenji Blocks
3. 8:43Keyboard Traps
4. 13:32WCAG 2.1
5. 22:01Semantic Markup

" related talks

• 25mStuck in a Focustrap: Mastering Keyboard AccessibilityTim Damen · Øredev 2025
• 25mLove Thy KeyboardSarbbottam Bandyopadhyay · EmpireJS 2018
• 45mIs Your Site Keyboard Accessible?Glafira Zhur · Я ❤ Фронтенд 2022
• 35mInaccessible websites? - it's you, not JavaScriptAnuradha Kumari · JSConf Korea 2020 Home Edition
• 42mReusable Widgets That Work!Maria Lamardo · JSWorld Conference 2022
• 31mThree Cheers for Keyboard AccessibilityMarcy Sutton Todd · CSSConf US 2014
• 38mStuck in a Focus TrapTim Damen · Frontend Nation 2025
• 28mYou're only supposed to blow the bloody doors off!Léonie Watson · Nordic.js 2017