- Success Criterion 2.1.2
- Conformance level A
Rich Text Editor That Captures Tab With No Documented Escape
2.1.2 — No Keyboard Trap
Scenario
Setting
A grocery delivery app's shopping cart
What’s wrong
Rich-text editors capturing Tab for indentation with no documented/standard escape (and no advisory of the exit method).
Example
Consider a grocery delivery app's shopping cart: rich-text editors capturing Tab for indentation with no documented/standard escape (and no advisory of the exit method).
Why it matters
All keyboard and screen-reader users who can become stuck inside a component. On a grocery delivery app's shopping cart, that means they can't operate the feature without a mouse.
How to test
Tab into a rich-text editor and press Tab: if it's captured for indentation with no documented alternate exit key (and none is advised on screen), it fails.
How to fix
Focus must always be able to leave the component using Tab/Shift+Tab or Esc (or a standard method the user is told about).
Outcome
With the fix in place on a grocery delivery app's shopping cart, they keep track of where they are on the page.
Who is affected
All keyboard and screen-reader users who can become stuck inside a component.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Keyboard Focus Stuck Inside an Embedded Plugin or Widget
- Modal Focus Trap With No Escape Key or Close Button
- Widget Where Tab Cycles Internally With No Way Out
- Third-Party Embed That Captures and Never Releases Tab Focus
- Script That Yanks Focus Back Every Time the User Tabs Away
- Autocomplete List That Keeps Recapturing Focus on Every Blur