View source for SCR26: DraftSept2015

=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==
#[http://output.jsbin.com/qafomo/3/ Dialog]
#[http://accessibility.oit.ncsu.edu/training/aria/modal-window/version-3/ Modal window]
#[https://dequeuniversity.com/library/aria/tabpanels-accordions/tabbed-accordion Accordion]

==Test==
#Check that the newly added content or UI control is  available, either: 
## 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
## 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