From 67809fed3e75f3f075f3e1e6670de6e4d3a643c8 Mon Sep 17 00:00:00 2001 From: Alastair Campbell Date: Wed, 22 Jan 2025 19:56:48 +0000 Subject: [PATCH] update to focus placement for modal dialogs (#3214) Closes #518 by adding some more details around focus handling, both inside dialogs and where the triggers for a dialog no longer exist with the dialog closes. See a [preview diff](https://services.w3.org/htmldiff?doc1=https%3A%2F%2Fwww.w3.org%2FWAI%2FWCAG22%2FTechniques%2Ffailures%2FF85&doc2=https%3A%2F%2Fdeploy-preview-3214--wcag2.netlify.app%2Ftechniques%2Ffailures%2Ff85) --------- Co-authored-by: Patrick H. Lauke Co-authored-by: Francis Storr Co-authored-by: Mike Gower Co-authored-by: Kenneth G. Franqueiro Co-authored-by: Scott O'Hara Co-authored-by: Bruce Bailey --- techniques/failures/F85.html | 110 ++++++++++++++++++++++------------- 1 file changed, 71 insertions(+), 39 deletions(-) diff --git a/techniques/failures/F85.html b/techniques/failures/F85.html index f3545df239..de4fc361ac 100644 --- a/techniques/failures/F85.html +++ b/techniques/failures/F85.html @@ -1,46 +1,78 @@ -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

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

ID: F85

Technology: failures

Type: Failure

When to Use

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

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

+
+

ID: F85

+

Technology: failures

+

Type: Failure

+
+
+

When to Use

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

+
+
+

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.

+ +
+

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.

+
+ +
+

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

-

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 they can interact with the dialog or menu.

- +

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.

-

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.

- +

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

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

    Dismiss the menu or dialog

    +
      +
    • Check whether focus is on the trigger control.
      • +
    • If focus needs to be placed on a different control, check whether that different control is logical.
      • +
    +
    3. +
-

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

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