Standard Dynamic Control Templates

The templates for accessible Lightbox, Banner, Tooltip, and Popup controls provide scalable AccDC Object declarations to automate accessibility for screen reader and keyboard only users.
Module files:

1. setup.js : The AccDC Object configuration script.

The packaged file for this demo can be downloaded from WhatSock.com under Downloads.

Instructions:

• Press the above button to open the lightbox AccDC Object.
• The lightbox will load,
  flow control methods will configure the display, handlers, and accessibility markup,
  focus will automatically be moved to the beginning of the new content when opened,
  and focus will return to the triggering element when closed.

Instructions:

• Close the banner by moving the mouse in and out of the display area.
• Screen reader and keyboard only users can close the banner using a dynamically generated close link.
• The above button will reopen the banner AccDC Object.
• When opened, the textual content within the banner is announced to screen reader users.
• The element for the banner is placed at the top of the page as the first content to be encountered during navigation.

Instructions:

• Mouse over the above icon to display the extended tooltip AccDC Object.
• Screen reader and keyboard only users can activate the icon using the Enter key.
• The extended tooltip object will be inserted inline relative to the triggering element,
  positioned visually using the autoPosition property,
  and its content will be announced to screen reader users.
• The extended tooltip can be closed by mousing out of the display area,
  or by tabbing to and activating the automatically generated accessible close link.

Instructions:

• The popup AccDC Object can be opened by clicking the above link.
• The popup object will be inserted inline with the triggering element,
  the visual display will be set using the autoPosition property,
  and the popup content will be announced to screen reader users.
• The popup can be closed by activating the Close icon.

1. All of the above demos are included as template AccDC Objects within the file setup.js,
   so that the AccDC Object properties can be modified to fit any functionality or layout requirements for similar implementations.
2. All of the above AccDC Object types can be controlled programmatically, such as to open or close an object like so:
   // Using the ID property of each AccDC Object, such as 'lightbox'
$A.reg.lightbox.open();
// Or using the ID 'popup'
$A.reg.popup.close();
3. Similarly, the functionality of AccDC Objects can be changed on the fly while maintaining the same level of accessibility, like so:
   // Change the functionality of the Login lightbox to show a Registration lightbox instead
// First, change the role for screen reader users
$A.reg.lightbox.role = 'Register';
// Change the resource locator to point to another form container
$A.reg.lightbox.source = 'files/overlays.html #register1';
// Change the size and width to match the dimensions of the new lightbox
$A.reg.lightbox.cssObj.height = '400px';
$A.reg.lightbox.cssObj.width = '750px';
// Lastly, swap the runAfter function with another function so that event handlers can be properly registered when it opens
$A.reg.lightbox.runAfter = someOtherFunction;
// Now open the newly configured lightbox AccDC Object
$A.reg.lightbox.open();
4. Also, the accessible hidden text can be modified for localization in any language by modifying the accStart, accEnd, and accClose properties,
   by directly modifying the AccDC Object declarations within 'setup.js',
   or by dynamically changing the property values at runtime using the object ID as shown above.