Failure of Success Criterion 2.4.3 due to using dialogs or menus that are not adjacent to their trigger control in the sequential navigation order

Important Information about Techniques

See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.1 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.1.

Applicability

All technologies.

This technique relates to Success Criterion 2.4.3: Focus Order (Failure).

Description

This describes the failure condition that results when a Web page opens a dialog or menu interface component embedded on the page in a way that makes it difficult for a keyboard user to operate because of its position in the sequential navigation order. When the user opens the dialog or menu embedded on the page by activating a button or link, his next action will be to interact with the dialog or menu. If focus is not set to the dialog or menu, and it is not adjacent to the trigger control in the sequential navigation order, it will be difficult for the keyboard user to operate the dialog or menu.

Examples

Example 1: Adding a dialog or menu embedded on the page to the end of the sequential navigation order

When a DHTML menu or dialog is activated, it is created dynamically, positioned visually near the trigger, and appended to the end of the DOM. Because it is appended to the end of the DOM, it is at the end of the sequential navigation order. The user must tab through the rest of the web page before he can interact with the dialog or menu.

Example 2: Setting focus to the document after dismissing a menu embedded on the page

When a menu is dismissed, it is removed or hidden from the web page and focus is set to the document. The user must tab from the beginning of the navigation sequence to reach the point from which the menu was opened.

Tests

Procedure

For each menu or dialog embedded on a Web page that is opened via a trigger control:

  1. Activate the trigger control via the keyboard.

    • Check whether focus is in the menu or dialog.
    • Check whether advancing the focus in the sequential navigation order puts focus in the menu or dialog.
  2. Dismiss the menu or dialog.

    • Check whether focus is on the trigger control.
    • Check whether advancing the focus backwards in the sequential navigation order puts focus in the trigger control.

Expected Results

  • If both points under step 1 are false, then this failure condition applies and the content fails this success criterion.
  • If both points under step 2 are false, then this failure condition applies and the content fails this success criterion.