SCR26: Inserting dynamic content into the Document Object Model (DOM) in a manner that preserves meaning and operability

Applicability

SC 1.3.2
2.4.3

Description

This technique demonstrates a device independent manner of programmatically inserting content including user interface controls into the Documents Object Module (DOM) so that the newly introduced content is available in an order that preserves meaning and operability. This technique may be employed in a variety of situations, such as:

dialogs - both modal and non-modal, also referred to as popups
menus
tabbed interfaces
Accordion
UI controls that expand (reveal) / collapse (hide) content
content including UI controls that are displayed conditionally when a selection is made or the state of a control is changed

In order to accomplish this the following needs to be ensured with respect to the element that triggers content insertion :

That it is a native link or a form control such as a SELECT control, radio button, checkbox or button
That it is a custom element with a suitable role and accessible name with its state (if applicable) available to assistive technologies
For natively focusable elements like links or buttons, the script is called from its onclick event. Keyboard accessibility is implemented using suitable scripting events for other trigger elements.

Depending on the situation one or more of the following needs to be done for the newly inserted content including UI control(s) :

place it immediately after the trigger element in the Document Object Model (DOM)
absolutely position it elsewhere on the page and control its visibility using CSS; aria-hidden may need to be employed on other portions of the page.

Examples

Test

Check that the newly added content or UI control is available, either:
1. right after the trigger element using the tab key, arrow key (down or right) or suitable gesture on a touch screen device to navigate forward, or
2. the user is notified about the newly added content and is provided with a mechanism to navigate to that content (Note: a meaningfully worded link, for instance, will satisfy both i.e. notification and navigation)
Check that upon activating the trigger element, the focus remains either on the trigger element updated for its new state or at a logical place within the newly added content
Check that the keyboard focus remains at a logical place within the content (such as the trigger element or the next element in the reading / navigation sequence) when the newly added content is no longer perceivable

Expected Results

Tests 1, 2 and 3 are true