2.D: Notification of Auto-Updating Content (WCAG 4.1.2)
Ensure users are programmatically or textually notified when page content updates automatically without a page refresh.
- Requirement: Users must be alerted to dynamic content changes. Acceptable methods include:
- Dialog Boxes: Must be accessible and navigable via keyboard (e.g., using Tab, Enter, Esc).
- Focus Shift: Automatically moving keyboard focus to the changed content, provided the new content clearly describes the change that occurred.
- ARIA Live Regions: Using
aria-liveattributes to define regions that inform assistive technologies of updates.- Scope: This test strictly covers the notification of the change, not the accessibility of the content itself (which is verified in other tests).
- Tooling: Use the “Structures” module in ANDI to identify and verify ARIA Live Regions.
Test Requirement
The purpose of this test is to ensure that when there is an automatic change to content (without a page refresh or user activation), the user receives notification of that change with equivalent programmatic or textual information.One of several methods may be used to notify the user: dialog boxes, shift of focus, or ARIA live regions.
ARIA stands for Accessible Rich Internet Applications. It is a set of roles and attributes that can be added to web page code to make web content and web applications more accessible to people with disabilities. An ARIA live region can be used to define a part of the page where content may be dynamically updated without reloading the entire page.
The results from this test are used to determine if WCAG SC 4.1.2 Name, Role, Value is met.
Note
In this and other tests, when the page content changes, you will need to refresh ANDI to update the information ANDI displays. To do this, select the “Refresh ANDI” button.
Method
- Manual inspection of the page
Tool
- ANDI: Structures > Live Regions
| Test ID | Test Name | Test Condition |
|---|---|---|
| 2.D | 4.1.2-change-notify-auto | The page provides notification of each automatic update/change in content. |
Identifying Content
Identify content that changes automatically on the page as part of an auto-update.
Note: Do not include any user-initiated changes, such as opening or closing a menu.
Does Not Apply
This Test Condition DOES NOT APPLY (DNA) if the page content does not automatically update or change.
How to Test 2.D Change Notification: Auto-Updating
From the TT Process:
- Identify how the user is notified of the change in content.
a. Identify any dialogs that alert the user to changes in content.
i. Determine whether the dialogs provide sufficient programmatic notification of content changes.
You will need to determine if the dialog provides adequate information about the change.
The dialog box itself must also be accessible via keyboard. To verify this, use only the keyboard to access and interact with the content. (Tab, Enter, and Esc are common keys for dialog box interaction. Topic 4: Keyboard Access has more details.)
From the TT Process:
b. Identify content changes that result in focus moving to the content that has changed.
Examples of focus moving to the content that has changed could be:
- When a new message appears on the page, focus moves to the message.
- When a stock ticker updates, the stock that changed receives keyboard focus.
From the TT Process:
i. Determine whether moving the focus to the content that has changed is sufficient to notify the user of the change event (e.g., by describing the change directly in the content to which the focus moved).c. Identify content changes occurring in an ARIA Live Region:
i. Launch ANDI: Structures.
If some of the page content is hidden behind ANDI, you can use the Refresh ANDI button to refresh the display. If available, the Inspect Next Element button also reveals content hidden under the ANDI display area.
From the TT Process:
ii. Click the “live regions” link, then use the mouse to hover over any identified live region (alternatively, use ANDI’s previous/next element buttons to navigate to identified Live Regions).
The live region(s) will be outlined in purple dots:
When you use the Previous/Next buttons, the live region content is highlighted in pink:
From the TT Process:
iii. Determine whether the changing content is contained within the Live Region.
Evaluating Content
From the TT Process:
If any of the following is TRUE, the content PASSES:
- The page notifies the user about a change via a keyboard-accessible dialog, OR
- The page moves focus to the content that has changed AND the content that has changed provides sufficient description about the change, OR
- The content that has changed is contained in an ARIA Live Region.
Note:
This is a test for notification of automatic changes to content. The testing of the content before and after the change are to be performed in other tests. For example, form elements that changed during this test are to be tested per Test ID 5.B.