Focus Trap - Bad Example

This example demonstrates a modal dialog without proper focus management, creating accessibility barriers for keyboard and screen reader users.

Main Page Content

This is the main page content. When the modal opens, keyboard users can still tab to these elements behind the modal.

Accessibility Issues

  • No focus trap prevents keyboard users from tabbing to elements behind the modal
  • Focus does not automatically move to the modal when it opens
  • No ARIA roles or attributes indicate that a modal dialog has opened
  • Escape key does not close the modal
  • Screen readers cannot identify this as a modal dialog

How to Test for the Issue

  • Click "Open Settings" to open the modal
  • Use the Tab key to navigate - you can tab to background elements behind the modal
  • Try using a screen reader - it won't announce that a modal has opened
  • Press Escape key - the modal will not close
  • Notice that focus doesn't automatically move to the modal when it opens

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