Home
Bookmarks
Leagues
LEARN
Courses
Career Paths
Assessments
Tutorials
Arcade
Glossary
GROW
Certifications
Log in
Glossary
Log inSign up
Courses/Accessible Interface Foundations/Keyboard paths and visible focus/
Exercise #10

Master Challenge: Auditing a Broken Modal Dialogue

Put all keyboard and focus principles into practice in a real-world debugging audit:

A QA tester files a Critical P0 Accessibility bug for your team's newsletter subscription popup:

  1. When the modal opens, keyboard focus stays on the page background.
  2. When tabbing inside the modal, focus leaks out into the footer links behind the dark backdrop.
  3. Pressing the Escape key does nothing; users must use a mouse to find a tiny 12px 'X' button.
  4. When the modal is finally closed via mouse, focus jumps to the top of the body, disorienting the user.

How do you architect the complete, robust remediation?

Topics

Sequential Focus Navigation & DOM Order
The Crime of 'outline: none'
The Three Tabindex Rules: 0, -1, and Never > 0
Skip Links: Bypassing Blocks (WCAG 2.4.1)
Modal Dialogues: The Sacred Focus Trap
Escape Key Dismissal: WCAG 1.4.13 & 2.1.2
Composite Widgets: Arrow Keys vs Tab Key
Single-Page App (SPA) Route Transitions
Target Size & Spacing (WCAG 2.5.5 / 2.5.8)
Master Challenge: Auditing a Broken Modal Dialogue

From lesson

2

Keyboard paths and visible focus

Level 1 · Accessible interaction basics

Top contributors

Community contribution details will appear here once real learner activity is available.

Share