diff --git a/understanding/20/no-keyboard-trap.html b/understanding/20/no-keyboard-trap.html index 541938c8b9..74b7009b44 100644 --- a/understanding/20/no-keyboard-trap.html +++ b/understanding/20/no-keyboard-trap.html @@ -1,127 +1,147 @@ - - - Understanding No Keyboard Trap - - - -

Understanding No Keyboard Trap

- -
-

In brief

-
-
Goal
Keyboard users don't get stuck.
-
What to do
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

- - - - -
- -
-

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.
-
- -
- -
-

Resources for No Keyboard Trap

- - -
- -
-

Techniques for No Keyboard Trap

- - -
-

Sufficient Techniques for No Keyboard Trap

- - - - -
- -
-

Additional Techniques (Advisory) for No Keyboard Trap

- - -
- -
-

Failures for No Keyboard Trap

- - - - -
- -
- - - + + + + + Understanding No Keyboard Trap + + + + +

Understanding No Keyboard Trap

+ +
+

In brief

+
+
Goal
+
Keyboard users don't get stuck.
+
What to do
+
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

+ + + + +
+ +
+

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.
+ +
+ +
+ +
+

Resources for No Keyboard Trap

+ + +
+ +
+

Techniques for No Keyboard Trap

+ + +
+

Sufficient Techniques for No Keyboard Trap

+ + + + +
+ +
+

Additional Techniques (Advisory) for No Keyboard Trap

+ + +
+ +
+

Failures for No Keyboard Trap

+ + + + +
+ +
+ + + + \ No newline at end of file