This is an unpublished editor’s draft that might include content that is not finalized. View the published version

Skip to content

Technique 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

About this Technique

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

This failure applies to all technologies.

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, their next action will be to interact with the dialog or menu. If focus is not set to the dialog or menu, or a logical focusable descendent of these widgets, and the widget or a focusable descendent is not next in the sequential navigation order, it will be difficult for the keyboard user to operate the dialog or menu.

Note

Dismissing a dialog or menu means to close it without taking any action on it. For example: a modal dialog opens on a web page and displays a sign-up form for a mailing list. A user dismisses the dialog by either pressing a "close" button or using the Escape key.

Note

Sometimes it's not possible to return focus to the control the user activated to open a dialog. For example: a blog post has a list of tags, each tag containing a delete button. Pressing a delete button opens a modal dialog that asks the user to confirm the deletion. On confirming the deletion, the tag is deleted, the modal dialog closes, and focus is placed on the next tag in the list of tags. Placing focus onto a different, but logical, control is not a failure of Success Criterion 2.4.3.

Examples

Example 1: Adding a dialog to the page at the end of the sequential navigation order

A non-native HTML dialog is created, with it being marked up at the end of the DOM (Document Object Model). Script was created to reveal the dialog, but no script was added to move focus to it. The dialog is visually positioned above the content of the page and the user's focus isn't moved to the dialog. Since the dialog is found at the end of the DOM, it is at the end of the keyboard navigation order. Because a user's focus isn't managed, or a keyboard mechanism isn't provided to allow them to immediately move to the invoked dialog, the user will need to tab through the rest of the web page before they can interact with the dialog.

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 on a web page that is opened via a trigger control:

  1. Activate the trigger control via the keyboard.

    • Check whether focus has been set to the menu, dialog, or a logical focusable descendent of the widget.
    • If not, check whether moving the focus forward once in the sequential navigation order puts focus in the menu or dialog.

  2. Activate a control in the menu or dialog that causes it to close. This could be a cancel or delete button or another action that causes changes to the page and at the same time closes the menu or dialog.

    • Check whether keyboard focus is put back on the trigger control

    • If the control itself is being removed as a result of the activation, check if the focus is put on the element immediately prior or following the removed 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.
Back to Top