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.

For specific coding guidance, view the AccDC Technical Style Guide

Accessible Lightbox

Instructions:

Accessible Banner

The banner is loaded from an external page using it's ID.

Activate the Load button to render the banner content.
Activate the Submit button to close the banner.

Accessible Tooltip

What is the greatest secret known to man?

Instructions:

Accessible Popup

Show me the Shakespeare Quote of the Day!

Instructions:

Tips and Tricks

  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.