F85: 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

From WCAG WG


Status

  • Added to XML by AWK Dec 20, 2013

This is an edited version of F85: 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.

Applicability

All technologies.

This failure relates to:

  • Success Criterion 2.4.3 (Focus Order)
    • How to Meet 2.4.3 (Focus Order)
    • Understanding Success Criterion 2.4.3 (Focus Order)

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

Failure Example 1: Adding a dialog or menu embedded on the page is added 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. Focus is not changed, so it is still on the element that triggered the menu or dialog. Because it the menu or dialog is appended to the end of the DOM, it is at the end of the sequential navigation order. Users The user must tab through the rest of the web page before he they can interact with the dialog or menu. This is often difficult as the background of the dialog may be darkened or focus points obliterated/covered by the dialogue on top. Also, the page (including the dialog) may have no or insufficient focus visibility for users to determine when they could interact with the dialogue.

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

When a DHTML 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.

Related Techniques

  • SCR26: Inserting dynamic content into the Document Object Model immediately following its trigger element

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.