Mega Accessible – Mega Menus
summary
Walks through concrete implementations: uses WAI-ARIA APG patterns, implements aria-expanded, aria-controls (JAWS note) and aria-current, and compares three patterns including the complex menu bar pattern. Finds 60% of production hover menus suffer “hover tunnels.” Builds a double‑disclosure mega menu (CodePen) with keyboard support (Tab, arrows, Escape) and runs usability testing with Fable, reporting iterative fixes for ARIA, focus return, and link vs button semantics.
AI-written summary · about
chapters (8)
- 0:00Introduction to Mega Menus
- 4:43What is a Mega Menu?
- 10:01Menu Design Patterns Overview
- 19:28Disclosure Navigation Bar Pattern
- 24:07Building Accessible Mega Menus
- 33:04Double Disclosure Pattern Demo
- 36:27Key Takeaways and Resources
- 37:53Q&A Session
related talks
22mAccessible JavaScript patterns
53mUsability useful for everyone
15mPatterns for Making Accessible Components
28mDeveloper's Guide to Accessibility Mechanics
38mHow To Make Your Website More Accessible with WAI-ARIA
43mI really have to do this mega-menu, I have no choice...
26mAccessibleJS
23mBuilding Accessible Components: Best Practices and Business Buy-In