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 #6

Escape Key Dismissal: WCAG 1.4.13 & 2.1.2

Any transient overlay, dropdown menu, modal dialogue, or tooltip triggered by user interaction must be dismissible via the Escape key without moving the pointer.

Why?

  • Users using screen magnification (zoomed in to 400%) often see only a tiny corner of an overlay. They cannot see or reach the visual 'X' close button in the opposite corner.
  • Keyboard users trapped in an accidental dropdown must have a reliable, standardized escape hatch.

Implementation Checklist: Listen for keydown where e.key === 'Escape'. Close the active overlay, clean up event listeners, and return focus cleanly.

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