Focus Trap - Good Example

This example demonstrates a modal dialog with proper focus management, ensuring accessibility for keyboard and screen reader users.

Main Page Content

This is the main page content. When the modal opens, keyboard users are properly trapped within the modal.

Accessibility Features

  • Focus trap prevents keyboard users from tabbing to elements behind the modal
  • Focus automatically moves to the first focusable element in the modal when it opens
  • Proper ARIA roles and attributes indicate that a modal dialog has opened
  • Escape key closes the modal and returns focus to the trigger button
  • Screen readers announce the modal and its purpose when it opens

How to Test for Accessibility

  • Click "Open Settings" to open the modal - focus should move to the first input
  • Use the Tab key to navigate - focus should cycle only through modal elements
  • Use a screen reader - it should announce that a modal has opened
  • Press Escape key - the modal should close and focus return to "Open Settings"
  • Notice that you cannot tab to background elements while the modal is open

WCAG Related Criteria

  • 2.1.2 No Keyboard Trap: All functionality is available from a keyboard
  • 2.4.3 Focus Order: If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability
  • 4.1.2 Name, Role, Value: For all user interface components, the name and role can be programmatically determined