Ensure users always know how to navigate away from components.
-
Why it's important
People who rely on the keyboard often have no other means to navigate.
-
-
-
-
-
-
Intent of No Keyboard Trap
-
-
-
The intent of this success criterion is to ensure that that content does not "trap"
- keyboard focus within subsections of content on a web page. This is a common problem
- when multiple formats are combined within a page and rendered using plug-ins or embedded
- applications.
-
-
-
There may be times when the functionality of the web page restricts the focus to a
- subsection of the content, as long as the user knows how to leave that state and "untrap"
- the focus.
-
-
-
-
-
-
Benefits of No Keyboard Trap
-
-
-
-
-
People who rely on a keyboard or keyboard interface to use the Web including people
- who are blind and people with physical disabilities.
-
-
-
-
-
-
-
-
Examples of No Keyboard Trap
-
-
-
A calendar widget
-
A calendar widget allows users to add, remove or update items in their calendar using
- the keyboard. The controls in the widget are part of the tab order within the Web
- page, allowing users to tab through the controls in the widget as well as to any links
- or controls that follow.
-
A puzzle applet
-
Once a user tabs into an applet, further tabs and other keystrokes are handled by
- the applet. Instructions describing the keystroke used to exit the applet are provided
- prior to the applet as well as within the applet itself.
-
A modal dialog box
-
A web application brings up a dialog box. At the bottom of the dialog are two buttons,
- Cancel and OK. When the dialog has been opened, focus is trapped within the dialog;
- tabbing from the last control in the dialog takes focus to the first control in the
- dialog. The dialog is dismissed by activating the Cancel button or the OK button.
Ensure users always know how to navigate away from components.
+
Why it's important
+
People who rely on the keyboard often have no other means to navigate.
+
+
+
+
+
+
Intent of No Keyboard Trap
+
+
+
The intent of this success criterion is to ensure that that content does not “trap” the
+ keyboard focus within subsections of content on a web page or app. It is common to restrict
+ the focus to a specific dialog or popover. It can also occur if content is rendered using
+ plug-ins or when content is embedded.
+
+
+
As long as the user knows how to leave a subsection of content (and “untrap” the focus),
+ a web page can restrict the focus to a subsection of the content. In some cases, temporarily
+ restricting the focus to a specific component is useful to help users understand where they
+ are on the page and what interactions are possible. It also prevents the focus from being
+ obscured, for example behind a dialog.
+
+
+
The keyboard focus is not considered as trapped when the user can navigate away from a UI
+ component using the unmodified tab or arrow keys or when another “standard exit method” exists.
+ What is a “standard exit method” depends on the user’s hardware and software. A press
+ of the ESC key is such a “standard exit method”. When the press of the hardware back
+ button on certain mobile operating systems “untraps” the keyboard focus is also sufficient.
+ In addition, some screen readers have other ways, like swipe gestures, that result in a
+ pressed ESC key.
+
+
+
+
+
+
Benefits of No Keyboard Trap
+
+
+
+
+
People who rely on a keyboard or keyboard interface to use the Web including people
+ who are blind and people with physical disabilities.
+
+
+
+
+
+
+
+
Examples of No Keyboard Trap
+
+
+
A modal dialog box
+
A web application brings up a dialog box. At the bottom of the dialog are two buttons,
+ Cancel and OK. When the dialog has been opened, focus is trapped within the dialog;
+ tabbing from the last control in the dialog takes focus to the first control in the
+ dialog. The dialog is dismissed by activating the Cancel button, the OK button, or the
+ ESC key.
+
A calendar widget
+
A calendar widget allows users to add, remove or update items in their calendar using
+ the keyboard. The controls in the widget are part of the tab order within the Web
+ page, allowing users to tab through the controls in the widget as well as to any links
+ or controls that follow.
+
A puzzle applet
+
Once a user tabs into an applet, further tabs and other keystrokes are handled by
+ the applet. Instructions describing the keystroke used to exit the applet are provided
+ prior to the applet as well as within the applet itself.