  Branch Link Name for id=uniqueId0-1

  Leaf Link Name for id=uniqueId0-1-1

  Leaf Link Name for id=uniqueId0-2

Required XML attributes
- id : The unique ID of the node. This will automatically be converted into the ID attribute of the relevant tree item link when rendered. (All IDs must be unique)
- name : The textual name of the node, which will automatically be converted into the textual label for the tree item link when rendered.
(All name attribute values at the same logical node level must be unique to ensure accessibility for screen reader users)
The following attributes are handled automatically by the ARIA Tree Module:
-
aria-label
-
role="tree"
-
role="group"
-
aria-owns
-
tabindex
-
role="treeitem"
-
aria-setsize
-
aria-posinset
-
aria-selected
-
aria-expanded
JavaScript
var treeId = $A.setTree({ // Configuration key / value map });
Parameters
-
The first parameter is used to configure ARIA Tree functionality using a key / value map.
Example:
{ // Set the XML file to parse path: 'files/tree.xml', // Set the label that will be announced to screen reader users title: 'Informative Field Name', // Specify the container element where the tree nodes will be inserted container: 'div#myTree', // Set the class name shared by all tree AccDC Objects when rendered topClass: 'TreeView', // Set the container tree node type treeTag: 'ul', // Set the divider node type that will be appended to the treeTag node dividerTag: 'li', // Set the focusable tree item node type that will be inserted within dividerTag node treeItemTag: 'a', // Set the shared class name for all tree items that expand into subfolders treeClass: 'branch', // Set the shared class name for all tree items that do not expand into subfolders treeItemClass: 'leaf', // Set the class name that is only set on the tree item node that has focus selectClass: 'selected', // Set the handler type that will trigger the callback bind: 'click', // Declare a callback function callback: function(ev, dc){ // Get the XML node that matches the ID attribute of the currently triggered element var xmlNode = $A.query('#' + this.id, dc.top.xmlDocument)[0]; // To learn more about the XML DOM and supported properties and methods, // and how to access custom attributes on each node, visit // http://www.w3schools.com/dom/default.asp }, overrides: { // Set optional AccDC API overrides for every AccDC Object that is rendered in the tree } }
Programmatic Control
The invocation statement returns the top level ID of the newly instantiated ARIA Tree control, which is now registered as an AccDC Object.
You can use this ID to programmatically change or invoke AccDC API properties and methods within the ARIA Tree structure, and to traverse the parent / child relationship of tree node objects.
Example:
// Get the Tree AccDC Object using the ID stored in the variable treeId var dc = $A.reg[treeId];
Now, you can traverse the expandable branches in the tree using
dc.siblings, dc.children, dc.parent
, and dc.top
,
and apply changes, store and retrieve data, or invoke AccDC API commands as desired.
Example:
// Close the Tree AccDC Object and remove it from the DOM. dc.top.close(); // All other AccDC API properties and methods are similarly available.
Styling
The sample trees in the Coding Arena are styled to look a certain way for the demo, but it doesn't actually matter what they look like. This is demonstrated within the "Shell" folders, where there is no CSS styling for the tree. This is also useful as a practice template for trying out different styling designs with custom content.
When applying new styles, simply ensure that sufficient color contrast is observed for low vision users, and a focus outline clearly shows which elements have focus, and your newly styled tree will be accessible.
A Banner is a simple control type, which can easily be made accessible.
Expected behaviors: Ensure that the content of the banner appears at the top of the page, ensure that the beginning and ending boundaries are conveyed to screen reader users, and make sure the banner can be closed from the keyboard (if applicable).
The Banner Module automates these processes by instantiating banner content as an AccDC Object.
- Basic Banner control with offscreen boundary text:
Coding Arena/Banners/Banner (Internal Content)/demo.htm
HTML Syntax

 Banner content goes here.

JavaScript
var bannerId = $A.setBanner({ // Configure functionality key / value map });
Parameters
-
The first parameter configures banner functionality using a key / value map.
Example:
{ // Set a unique ID for the Banner AccDC Object id: 'myBannerId', // Set the boundary text for screen reader users role: 'Banner', // Set the Banner AccDC Object to render literal content // (Only if pulling content from within the same page, remove otherwise) mode: 0, // Set the content to be rendered by pulling it from within the same page // 'removeChild' is important here, so no duplicate ID conflicts can occur when the object is opened and closed // (Only if pulling content from within the same page, remove otherwise) source: $A.getEl('bannerContainerElementId').parentNode.removeChild($A.getEl('bannerContainerElementId')), // Specify the path and ID of the banner content to be loaded // (Only if pulling content from an external page, remove otherwise) source: 'files/overlays.html #bannerContainerElementId', // Disable automatic positioning if wishing to use a Style Sheet instead autoFix: 0, // Specify that the banner should open as soon as the page loads autoStart: true, // Set a class name for the banner top level container element className: 'banner', // Specify that the textual content of the banner should automatically be announced to screen reader users when opened announce: true, // Choose the container element where the banner will be inserted isStatic: 'body', // Choose to prepend the banner instead of replacing the content within the container element // (This places the banner content at the top of the page in the reading order for screen readers) prepend: true, // Set a hidden close link to appear for screen reader users showHiddenClose: true, // Remove the hidden close link from the tab order so it doesn't appear when tabbing displayHiddenClose: false, // Set the heading level that will be accessible for screen reader users ariaLevel: 2, // Run a script after the banner finishes loading runAfter: function(dc){ // Optionally do stuff // 'dc' is the Banner AccDC Object // dc.containerDiv is the DOM node where all banner content is rendered } // Other AccDC API properties and methods can go here as well if desired. }
Programmatic Control
The invocation statement returns the ID of the newly instantiated Banner AccDC Object, which can be used to programmatically control each banner using JavaScript if desired.
Example:
// Get a reference to the Banner AccDC Object var dc = $A.reg[bannerId]; // Which you can then open dc.open(); // Or close dc.close(); // All other AccDC API properties and methods can be applied here as well.
Styling
The sample banners in the Coding Arena are styled to look a certain way for the demo, but it doesn't actually matter what they look like. This is demonstrated within the "Shell" folders, where there is no CSS styling for the banner. This is also useful as a practice template for trying out different styling designs with custom content.
When applying new styles, simply ensure that sufficient color contrast is observed for low vision users, and a focus outline clearly shows which elements have focus, and your newly styled banner will be accessible.
Bootstrapping
Bootstrapping is designed to handle common control types that span multiple pages with similar setup configurations.
The banners within the Bootstrap folders are configured using HTML5 "data-"
attributes within the HTML
markup.
When the Bootstrap Module ("accdc_bootstrap.js") is executed, it parses the newly loaded DOM, recognizes the
class "accBanner"
, then configures the same module declaration as previously described using these HTML5 attributes.
Available HTML5 attributes:
- data-src : The resource path and pointer to the ID attribute of the banner container element.
- data-role : The role name that is conveyed to screen reader users as beginning and ending boundary text for the new content. "Banner" is set by default if no value is specified.
Additional HTML5 attributes can be added to enhance functionality by editing the file "accdc_bootstrap.js".
Required attributes:
- class="accBanner" : The bootstrap class name that specifies a banner insertion point container.
- id : The unique ID of the element. This value is also registered as the ID of the banner AccDC Object,
making it possible to invoke the object programmatically.
E.G $A.reg.uniqueID.open();
// All other AccDC API properties and methods are similarly available.
A Carousel is a complex control type that is easy to make accessible.
Expected behaviors: The beginning and ending boundaries should be conveyed to screen reader users, content changes should be announced to screen reader users only when a navigation button is manually activated, all navigation buttons should be keyboard accessible and include unique accesskeys for screen reader users, auto cycling should pause when an element within the carousel receives focus or when the mouse is moved into the region, auto cycling should resume when focus moves out of the carousel or when the mouse moves out of the region, and auto cycling should be stoppable from anywhere on the page using the keyboard.
The Carousel Module automates these processes by adding all related event handlers and managing all related rendering procedures using an external XML file for configuration.
- Customized Carousel control with named region text, and
aria-live=polite
:
Coding Arena/Carousels, Slideshows, and Wizards/Carousel (Flat from XML with Overrides)/demo.htm - Basic Carousel control with named region text, and
aria-live=polite
:
Coding Arena/Carousels, Slideshows, and Wizards/Carousel (Flat from XML)/demo.htm - Bottom grouped Carousel control with named region text, and
aria-live=polite
:
Coding Arena/Carousels, Slideshows, and Wizards/Carousel (Grouped from XML, with Group Name on Bottom)/demo.htm - Top grouped Carousel control with named region text, and
aria-live=polite
:
Coding Arena/Carousels, Slideshows, and Wizards/Carousel (Grouped from XML, with Group Name on Top)/demo.htm - Bottom captioned Carousel control with named region text, and
aria-live=polite
:
Coding Arena/Carousels, Slideshows, and Wizards/Carousel (Grouped from XML, with Group Names as Captions)/demo.htm - Basic Slideshow control with named region text, and
aria-live=polite
:
Coding Arena/Carousels, Slideshows, and Wizards/Slideshow (Flat from XML)/demo.htm - Wizard Slideshow control with named region text, and
aria-live=polite
:
Coding Arena/Carousels, Slideshows, and Wizards/Wizard (Grouped from XML)/demo.htm
HTML Syntax

XML Syntax
An external XML file is used to configure and populate each slide of the carousel.
Flat:
<?xml version="1.0" encoding="UTF-8" ?> <carousel role="Slideshow" height="auto" width="auto" className="carouselCls" prevTitle="Previous" nextTitle="Next" slideName="Slide" groupName="" showGroup="" groupPosTop="" btnPText="↑" btnNText="↓" btnPGText="" btnNGText="" isGrouped="no" btnPAccesskey="1" btnNAccesskey="2" btnPGAccesskey="" btnNGAccesskey="" direction="tb" cycle="yes" timer="0" animDelay="1250" forward="yes" hiddenMsg="" > <slide announce="Unique Slide Name" ><![CDATA[ HTML content to render goes here ]]></slide> <slide announce="Unique Slide Name" ><![CDATA[ HTML content to render goes here ]]></slide> </carousel>
Grouped:
<?xml version="1.0" encoding="UTF-8" ?> <carousel role="Carousel" height="auto" width="auto" className="carouselCls" prevTitle="Previous" nextTitle="Next" slideName="Slide" groupName="Group" showGroup="yes" groupPosTop="yes" btnPText="←" btnNText="→" btnPGText="⇐" btnNGText="⇒" isGrouped="yes" btnPAccesskey="1" btnNAccesskey="2" btnPGAccesskey="3" btnNGAccesskey="4" direction="lr" cycle="yes" timer="5000" animDelay="2000" forward="yes" hiddenMsg="Press Escape to stop automatic cycling" > <group name="Unique Group Name" > <slide announce="Unique Slide Name" ><![CDATA[ HTML content to render goes here ]]></slide> <slide announce="Unique Slide Name" ><![CDATA[ HTML content to render goes here ]]></slide> </group> <group name="Unique Group Name" > <slide announce="Unique Slide Name" ><![CDATA[ HTML content to render goes here ]]></slide> <slide announce="Unique Slide Name" ><![CDATA[ HTML content to render goes here ]]></slide> </group> </carousel>
Important: All attributes must remain within the XML markup.
Attributes that are not required may be set to null. E.G. attributeName=""
.
Carousel attribute definitions
- role : Hidden text role for screen reader users
- className : The class name for styling the top level AccDC Object container
- prevTitle : Title and screen reader text for the previous button (Must be unique)
- nextTitle : Title and screen reader text for the next button (Must be unique)
- slideName : Shared name for a slide, appended to prevTitle and nextTitle for Next Slide and Previous Slide button labeling
- isGrouped : Must be 'yes' or 'no': Must match the syntax of the XML markup (whether or not the group tag is present)
- groupName : Shared name for a group, appended to prevTitle and nextTitle for Next Group and Previous Group button labeling
- showGroup : If 'yes', group names will be displayed above or below the carousel (depending on the value of groupPosTop)
- groupPosTop : If 'yes', group names are displayed above the carousel, if not, then they are displayed below (only if showGroup='yes')
- btnPText : Visible textual label for the Previous Slide button; uses innerHTML to insert
- btnNText : Visible textual label for the Next Slide button; uses innerHTML to insert
- btnPGText : Visible textual label for the Previous Group button; uses innerHTML to insert
- btnNGText : Visible textual label for the Next Group button; uses innerHTML to insert
- btnPAccesskey : AccessKey for the Previous Slide button (for screen reader users)
- btnNAccesskey : AccessKey for the Next Slide button (for screen reader users)
- btnPGAccesskey : AccessKey for the Previous Group button (for screen reader users)
- btnNGAccesskey : AccessKey for the Next Group button (for screen reader users)
- direction : Must be either 'lr' (left to right), or 'tb' (top to bottom)
- cycle : Must be either 'yes' or 'no' to set the behavior of infinite looping
- timer : Set to '0' to disable auto rotation, or set a positive integer for N milliseconds
- animDelay : Slide animation length in N milliseconds; set to '0' for instant rendering
- forward : Set to 'yes' or 'no' to configure auto rotation to move backwards or forwards (relative to direction)
- hiddenMsg : Hidden text message for screen reader users to convey supplementary information
Group attribute definitions:
- name : The shared name of the group, which will be displayed visually if showGroup='yes'
Slide attribute definitions:
- announce : The text that will be announced to screen reader users when a slide is manually changed using the navigation buttons.
If the group tag 'name' attribute value matches the slide tag 'announce' attribute value, then set announce to "" to prevent redundancy for screen reader users.
JavaScript
$A.setCarousel( $A.getEl('myCarousel') , 'path/file.xml' , defaultIndexValue , { // Configure optional key / value mapping overrides });
Parameters
-
The first parameter is the DOM node container element where the carousel will be inserted.
-
The second parameter is the file path for the associated XML file.
-
The third parameter is the default slide index value when the carousel is rendered.
When using a flat carousel, this should be of type 'number', such as 0; when using a grouped carousel, this should be of type 'string', such as '0,0'
-
The fourth parameter is a key / value map of optional overrides to customize functionality.
Example:
{ // Pause rotation automatically when carousel is first loaded. (Added in R2.9 for use with a Play/Pause button) pauseRotation: false, // Set the classes for the three floating Div panels that comprise the carousel // The left Div where the Prev Slide and Prev Group buttons are rendered lNavCls: 'lNav', // The center Div where the slides are cycled within a relatively positioned container contentCls: 'centerContent', // The right Div where the Next Slide and Next Group buttons are rendered rNavCls: 'rNav', // Set the nav button element type // ('button' is recommended so that the action is automatically triggered when accesskeys are pressed, which doesn't happen for other element types btnTag: 'button', // Override the default inner span tag inserted within the nav button element, which is inserted using innerHTML prevBtnInsertedTag: '', nextBtnInsertedTag: '', prevGroupBtnInsertedTag: '', nextGroupBtnInsertedTag: '', // Set the shared class name for all nav buttons btnCls: 'navButton', // Set the class name for the Next and Previous Slide buttons btnSlideCls: 'navSlideButton', // Set the class name for the Next and Previous Group buttons (if applicable) btnGroupCls: 'navGroupButton', // Set the class name for the Group Name container element (Div tag), which is optionally rendered above or below the center slide container groupNameCls: 'groupName', // Set the hidden heading level for screen reader users (defaults to 3 if omitted) ariaLevel: 2, // Set optional callbacks for the slide rendering action handlers: { // Runs every time a new slide completes rendering complete: function(dc){ // 'this' is the Carousel AccDC Object, and is the same as the 'dc' argument // The content of the new slide is contained within the DOM node dc.containerDiv // E.G alert(dc.containerDiv.innerHTML); // dc.top is the top level AccDC Object for the carousel, which can be used to share data between handler functions. // Other DOM node properties that are available here // dc.top.btn.P : The Prev Button DOM node // dc.top.btn.N : The Next Button DOM node // dc.top.btn.PG : The Prev Group Button DOM node // dc.top.btn.NG : The Next Group Button DOM node // Available state and index values // dc.groupVal : the current index value of the currently active Group (if applicable) // dc.groupMax : the maximum number of Groups within the carousel // dc.slideVal : the current index value of the newly loaded slide (relative to siblings if contained within a Group) // dc.slideMax : the maximum number of Slides within the Group or carousel (if contained within a flat list) }, // Runs every time the auto rotation of a carousel stops or resumes rotating stopStateChange: function(isStopped, dc){ // isStopped or paused = true or false // Or for granular detection // dc.isStopped = true or false // dc.isPaused = true or false }, // Runs every time the Previous Slide button is clicked btnPrev: function(ev, dc){ // 'this' is the button element DOM node // 'dc' is the Carousel AccDC Object // dc.top is the top level AccDC Object for the carousel, which can be used to share data between handler functions. // Other DOM node properties that are available here // dc.btn.P : The Prev Button DOM node // dc.btn.N : The Next Button DOM node // dc.btn.PG : The Prev Group Button DOM node // dc.btn.NG : The Next Group Button DOM node // Available state and index values // dc.groupVal : the current index value of the currently active Group (if applicable) // dc.slideVal : the current index value of the newly loaded slide (relative to siblings if contained within a Group) // Return false to prevent the previous slide from rendering }, // Runs every time the Next Slide button is clicked btnNext: function(ev, dc){ // 'this' is the button element DOM node // 'dc' is the Carousel AccDC Object // dc.top is the top level AccDC Object for the carousel, which can be used to share data between handler functions. // Other DOM node properties that are available here // dc.btn.P : The Prev Button DOM node // dc.btn.N : The Next Button DOM node // dc.btn.PG : The Prev Group Button DOM node // dc.btn.NG : The Next Group Button DOM node // Available state and index values // dc.groupVal : the current index value of the currently active Group (if applicable) // dc.slideVal : the current index value of the newly loaded slide (relative to siblings if contained within a Group) // Return false to prevent the next slide from rendering }, // Runs every time the Previous Group button is clicked btnPrevG: function(ev, dc){ // 'this' is the button element DOM node // 'dc' is the Carousel AccDC Object // dc.top is the top level AccDC Object for the carousel, which can be used to share data between handler functions. // Other DOM node properties that are available here // dc.btn.P : The Prev Button DOM node // dc.btn.N : The Next Button DOM node // dc.btn.PG : The Prev Group Button DOM node // dc.btn.NG : The Next Group Button DOM node // Available state and index values // dc.groupVal : the current index value of the currently active Group (if applicable) // dc.slideVal : the current index value of the newly loaded slide (relative to siblings if contained within a Group) // Return false to prevent the previous group from rendering }, // Runs every time the Next Group button is clicked btnNextG: function(ev, dc){ // 'this' is the button element DOM node // 'dc' is the Carousel AccDC Object // dc.top is the top level AccDC Object for the carousel, which can be used to share data between handler functions. // Other DOM node properties that are available here // dc.btn.P : The Prev Button DOM node // dc.btn.N : The Next Button DOM node // dc.btn.PG : The Prev Group Button DOM node // dc.btn.NG : The Next Group Button DOM node // Available state and index values // dc.groupVal : the current index value of the currently active Group (if applicable) // dc.slideVal : the current index value of the newly loaded slide (relative to siblings if contained within a Group) // Return false to prevent the next group from rendering } }, // Customize the DOM rendering order or add additional controls to the DOM when rendered within the carousel renderFn: function(parentDiv, leftDiv, centerDiv, bufferDiv, rightDiv, btnPrev, btnNext, isGrouped, btnPrevGroup, btnNextGroup){ parentDiv.appendChild(leftDiv); parentDiv.appendChild(centerDiv); centerDiv.appendChild(bufferDiv); parentDiv.appendChild(rightDiv); leftDiv.appendChild(btnPrev); rightDiv.appendChild(btnNext); if (isGrouped){ leftDiv.appendChild(btnPrevGroup); rightDiv.appendChild(btnNextGroup); } } }
Programmatic Control
When the carousel is instantiated, it includes many nested AccDC Objects that are bound using parent / child relationships.
The top level ID for the carousel matches the ID attribute value of the insertion point container element, making it possible to control the carousel programmatically if desired.
Example:
// If the insertion point DIV tag includes id="myCarousel": // Get a reference to the Carousel AccDC Object var dc = $A.reg['myCarousel']; // Which you can then use to access stored data var data = serialize(dc.form); // Or close the carousel and remove it from the DOM dc.close(); // All other AccDC API properties and methods are similarly available if desired. // Also, the following Carousel specific properties and methods are available here too // Set the carousel to a specific slide number, which must be equal to or greater than 0 to match the array index value dc.setSlide(slideNumber); // Or the same when using a grouped carousel dc.setSlide(slideNumber, groupNumber); // Programmatically stop auto cycling of a carousel dc.enableAuto(false); // Programmatically restart auto cycling of a carousel dc.enableAuto(true); // Return the current stopped state of an auto rotating carousel var isStopped = dc.isStopped();
Important: The Carousel AccDC Object consists of many nested AccDC Objects which act as moving parts, similar to cogwheels within the construct.
So when dc.close()
is used to close the carousel, it, including all of its nested objects, are destroyed completely
(This means that stored data will no longer be available programmatically after a carousel is closed).
This is done to ensure that duplication and scheduling conflicts don't arise when dynamic content panels are swapped, causing the same carousel structure to be reloaded.
Styling
The sample carousels in the Coding Arena are styled to look a certain way for the demo, but it doesn't actually matter what they look like.
When applying new styles, simply ensure that sufficient color contrast is observed for low vision users, and a focus outline clearly shows which elements have focus, and your newly styled carousel will be accessible.
Drag and Drop isn't called for much as part of a general feature set, but it's good to know how to make this functionality accessible for both screen reader and keyboard only users.
Expected behaviors: All draggable objects must be accessible from the keyboard with or without a screen reader running, and hidden links should be used to identify draggable objects and the location of drop zones.
The Drag and Drop Module automates these processes by adding all related event handlers and managing all related rendering procedures.
- Drag and Drop controls with offscreen drag links, and
aria-live=polite
:
Coding Arena/Drag and Drop/demo.htm
JavaScript
$A.setDragAndDrop({ // Configure functionality using a key / value map });
Parameters
-
The first parameter configures drag and drop functionality using a key / value map.
Example:
{ // Specify the draggable objects using a CSS Selector setDrag: 'ul#options li > img', // Specify the initial drop zone setDrop: 'div.chosenBooks', // CSS Selector or DOM node that specifies an optional strategic focus point where programmatic focus will return after a drop action completes returnFocusTo: 'div.chosenBooks h3', // Set the context node root: document, // Now, since the hidden links need custom link text for each draggable item, // we're going to recursively query the data-label attribute for every image and return it setName: function(obj){ // 'obj' is the object that matches the CSS Selector above in 'setDrag' return $A.getAttr(obj, 'data-label'); }, // Set the initial styles for the morphed AccDC Object, which will need absolute positioning cssObj: { position: 'absolute', zIndex: 1 }, // Prevent block formatting when surrounding divs are added displayInline: true, // Run script before the AccDC Object opens runBefore: function(dc){ // Do stuff }, // Run script after the AccDC Object opens runAfter: function(dc){ // Do stuff }, // Configure drag and drop event handlers on: { // Fire when the mouse moves a minimum distance. dragStart: function(ev, dd, dc){ // 'ev' is the event object // 'dd' is the Drag and Drop custom event object // 'dc' is the AccDC Object for the draggable object }, // Fire every time the mouse moves when dragging. drag: function(ev, dd, dc){ // 'ev' is the event object // 'dd' is the Drag and Drop custom event object // 'dc' is the AccDC Object for the draggable object }, // Fire when the dragged element moves within the tolerance of a drop target element. dropStart: function(ev, dd, dc){ // 'ev' is the event object // 'dd' is the Drag and Drop custom event object // 'dc' is the AccDC Object for the draggable object }, // Fire when the dragged element is dropped within the tolerance of a drop target element. drop: function(ev, dd, dc){ // 'ev' is the event object // 'dd' is the Drag and Drop custom event object // 'dc' is the AccDC Object for the draggable object }, // Fire when the dragged element moves out of the tolerance of a drop target element. dropEnd: function(ev, dd, dc){ // 'ev' is the event object // 'dd' is the Drag and Drop custom event object // 'dc' is the AccDC Object for the draggable object }, // Fire after all other drag and drop handlers have fired. dragEnd: function(ev, dd, dc){ // 'ev' is the event object // 'dd' is the Drag and Drop custom event object // 'dc' is the AccDC Object for the draggable object } }, // Restrict draggability, since there's no point in having stuff wiz around everywhere... confineTo: 'div.booksWrapper', // Set the drop animation time length for keyboard users in milliseconds duration: 2000, // Set keywords for screen reader and keyboard only users dragText: 'Move', toText: 'to', // IMPORTANT: All dropTarget elements must include a data-label attribute to specify a unique name for the drop region for screen reader and keyboard only users. // View the Coding Arena HTML markup for examples. actionText: 'Dragging', // Override default relative positioning to use absolute instead // Effects only the hidden drag links when they receive focus ddCSS: { position: 'absolute', zIndex: 10 }, // Set class names for the drag links dragClassName: 'ddLink' }
DD Object Properties
The properties and methods of the 'dd'
drag and drop custom event object are as follows:
For drag events:
- target (DOM Node) : The drag element to which the event handler has been bound. (Always the same as "this" within a drag event handler)
- drag (DOM Node) : The dragged element to which the drag event has been bound.
- proxy (DOM Node) : The dragged element which determines the drop target tolerance.
- drop (Array) : An array of all active drop targets for the current drag instance.
- available (Array) : An array of all available drop targets for the current instance.
- update (Method) : Helper function that updates the locations of all available drop targets in the current drag instance.
- startX (Number) : The horizontal location of the "mousedown" event.
- startY (Number) : The vertical location of the "mousedown" event.
- deltaX (Number) : The horizontal distance moved from "startX".
- deltaY (Number) : The vertical distance moved from "startX".
- originalX (Number) : The starting horizontal position of the dragged element.
- originalY (Number) : The starting vertical position of the dragged element.
- offsetX (Number) : The moved horizontal position of the dragged element.
- offsetY (Number) : The moved vertical position of the dragged element.
For drop events:
- target (DOM Node) : The drop element to which the event handler has been bound. (Always the same as "this" within an event handler)
- drag (DOM Node) : The dragged element to which the drag event has been bound.
- proxy (DOM Node) : The dragged element, which determines the drop target tolerance.
- drop (Array) : Array of all active drop targets for the current drag instance.
- available (Array) : Array of all available drop targets for the current drag instance.
- update (Method) : Helper function that updates the locations of all available drop targets in the current drag instance.
- startX (Number) : The horizontal location of the "mousedown" event.
- startY (Number) : The vertical location of the "mousedown" event.
- deltaX (Number) : The horizontal distance moved from "startX".
- deltaY (Number) : The vertical distance moved from "startX".
- originalX (Number) : The starting horizontal position of the dragged element.
- originalY (Number) : The starting vertical position of the dragged element.
- offsetX (Number) : The moved horizontal position of the dragged element.
- offsetY (Number) : The moved vertical position of the dragged element.
Footnotes are simple control types that are easy to make accessible.
Expected behaviors: Provide a link as the footnote that jumps to the footnote text, provide a link at the footnote text that returns focus back to the triggering element (and account for multiple footnote links that lead to the same footnote text), and provide meaningful textual equivalents for screen reader users.
The Footnotes Module automates these processes by creating all necessary anchor elements, adding all related event handlers, and managing keyboard focus appropriately.
- Footnote controls with
aria-label
, andaria-hidden
:
Coding Arena/Footnotes/Footnotes (Internal)/demo.htm
HTML Syntax
Footnote text in the body:
My body text
A SPAN tag should be used to surround the word or phrase that you want to designate as a footnote within the body content.
Required attributes for Footnote SPANs in the body:
- class="accFootnote" : The class name that specifies a footnote link section to be bound. (All footnote tags should share the same class name.)
- data-footnote : Contains the ID attribute value that points to the specified footnote text at the bottom of the page. (More than one footnote may point to the same footnote text by using the same ID value if multiple footnotes reference the same text)
Important: When the footnotes are parsed using the class name, a numerical index link is generated and appended to the footnote SPAN tag.
Footnote Text nodes in the footer:

An empty SPAN tag should be used to set the focus point of the Footnote Text node in the footer, which is where focus will be moved to when the footnote link in the body is activated.
The Footnote Text SPAN tag must be placed just before the footnote text in the source code order, since this is where the Footnote Back Link will be inserted.
(This is also where focus is moved to when a footnote link in the body is activated, which must be before the relevant footnote text, and not after.)
The Footnote Text SPAN tag must be empty, and must not surround the footnote text. Doing so will cause the inserted Back Link to appear after the footnote text, instead of before it, as expected.
Required attributes for Footnote Text SPANs in the footer:
- id="uniqueId" : The unique ID of the Footnote Text node.
(This must match the value of data-footnote so that each associated footnote link in the body will be properly bound to this focusable node in the footer.)
The following attributes are handled automatically by the Footnotes Module:
-
aria-label
JavaScript
$A.setFootnotes('.accFootnote', document, { // Configure functionality key / value mappings });
Parameters
-
The first parameter is a CSS Selector that specifies all footnote SPAN tags in the body.
-
The second parameter is the context DOM node where footnote SPANs will be queried using the CSS Selector declared in parameter one. (This makes it possible to query footnotes contained within iFrame documents)
-
The third parameter configures footnote functionality using a key / value map.
Example:
{ // Set the tooltip text for the footnote (this will also be the accessible name for screen reader users) fnText: 'Footnote', // Set the footnote character or text that will comprise the visual link text for returning footnotes fnChar: '†', // Set the tooltip text for the footnote back links (this will also be the accessible name for screen reader users) backText: 'Back to Footnote' }
Styling
The sample footnotes in the Coding Arena are styled to look a certain way for the demo, but it doesn't actually matter what they look like.
When applying new styles, simply ensure that sufficient color contrast is observed for low vision users, and a focus outline clearly shows which elements have focus, and your newly styled footnotes will be accessible.
Bootstrapping
Bootstrapping is designed to handle common control types that span multiple pages with similar setup configurations.
The footnotes within the Bootstrap folders are configured using HTML5 "data-"
attributes within the HTML markup.
When the Bootstrap Module ("accdc_bootstrap.js") is executed, it parses the newly loaded DOM, recognizes the class "accFootnote"
,
then configures the same module declaration as previously described using these HTML5 attributes.
Available HTML5 attributes for footnote SPANs in the body:
- data-footnote : The ID attribute value of the matching footnote text anchor tag elsewhere in the document (Focus will be moved to this anchor tag when the footnote link is activated)
- data-fntext : The tooltip text for the footnote (this will also be the accessible name for screen reader users)
- data-fnchar : The footnote character or text that will comprise the visual link text for returning footnotes
- data-backtext : The tooltip text for the footnote back links (this will also be the accessible name for screen reader users)
Additional HTML5 attributes can be added to enhance functionality by editing the file "accdc_bootstrap.js".
Required attributes:
- class="accFootnote" : The bootstrap class name that specifies a footnote link to be bound. (Must only be on footnote links in the body, and not upon footnote text anchors in the footer)
- id : The unique ID of the footnote text anchor tag. (Must only be on footnote text anchors, and must match the data-footnote attribute values for associated footnote links within the body)
Error Tooltips provide a simple way to validate user input prior to server side interaction.
Dynamic Help Tooltips work in a similar fashion, by suggesting responses that must also pass validation.
Both fulfill the same role, but on opposite spectrums.
Error Tooltips occur after a form field loses focus, which is when validation occurs.
Dynamic Help Tooltips validate user input as the interaction occurs, so that responses can be adjusted before focus is moved to the next field.
The Form Field Validation Module automates these processes by adding all related event handlers and managing all related rendering procedures.
- Simple Help Tooltip control with a named region, and
aria-live=polite
:
Coding Arena/Inline Form Field Validation and Dynamic Help Tooltips/Dynamic Help Tooltip/demo.htm - Simple Error Tooltip control with a named region,
aria-required
, andaria-live=polite
:
Coding Arena/Inline Form Field Validation and Dynamic Help Tooltips/Inline Form Field Validation (Simple)/demo.htm - Complex Error Tooltip control with a named region,
aria-required
, andaria-live=polite
:
Coding Arena/Inline Form Field Validation and Dynamic Help Tooltips/Inline Form Field Validation (Complex)/demo.htm - Mixed Error and Help Tooltip controls with a named region,
aria-required
, andaria-live=polite
:
Coding Arena/Inline Form Field Validation and Dynamic Help Tooltips/Inline Form Field Validation with Dynamic Help Tooltip (Simple)/demo.htm
HTML Syntax
Any standard form field.
Examples:
 My Text Field:  <input type="text" id="field1" name="whatever1" />  My Select :  <select id="field2" name="whatever2"> <option value="v0"> Option One </option> <option value="v1"> Option Two </option> </select> <input type="checkbox" id="field3" name="whatever3" />  My Checkbox  <input type="radio" id="field4" name="whatever4" />  My Radio Button
The following attributes are handled automatically by the Form Field Validation Module:
-
aria-required
JavaScript
$A.setFormFields( FormElementDOM-Node , { 'formFieldId1': { // Configure error handling for the form field with id="formFieldId1" }, 'formFieldId2': { // Configure error handling for the form field with id="formFieldId2" } }, function(ev){ // 'ev' is the onSubmit event object for the form element passed in parameter one // 'this' is the form element // Optionally do stuff before the form is submitted // use ev.preventDefault() to cancel if desired });
Parameters
-
The first parameter is the form element where the onSubmit event is attached.
-
The second parameter configures form field bindings using a key / value map.
Example:
{ // Configure an error handling tooltip for a form field with a specific ID attribute value 'formFieldId1': { errorText: 'Initial error text to be displayed', // Fire every time the field loses focus validate: function(ev, dc){ // 'this' is the form field to be validated // 'dc' is the Tooltip AccDC Object // All other AccDC API properties and methods apply to the 'dc' object as well // return true to pass validation, or false to fail }, // Optionally choose to hide or show the tooltip visually // false is set by default if omitted hideError: false, // Set a class to be toggled when an error is detected // This will be bound to the dc.triggerObj DOM node, or optionally to the dc.targetObj or dc.classObj DOM node instead if declared. // 'validateError' is set by default if omitted toggleClass: 'validateError', overrides: { // Change the beginning and ending boundary role text for screen reader users role: 'error', // Set a class for the tooltip container className: 'errorTooltip', // Change the DOM insertion point to another DOM node by setting targetObj. // The triggering Input field is used by default if omitted targetObj: DOM-Node, // Set a node where the toggleClass property value will be toggled when validation fails // The triggering Input field or targetObj element is used by default if omitted classObj: DOM-Node, // Optionally set the element where visual positioning calculations will be bound to posAnchor: DOM-Node // Additional AccDC API properties and methods to set as functionality and behavior overrides go here as well } }, // Configure a dynamic help tooltip for a form field with a specific ID attribute value 'formFieldId2': { helpText: 'Initial help text to be displayed', // Fire every time the value changes validate: function(ev, dc){ // 'this' is the form field to be validated // 'dc' is the Tooltip AccDC Object // dc.source can be used to dynamically change the tooltip content (HTML markup is accepted) // dc.open() will reopen the tooltip and display the updated content // dc.close() will close the tooltip if desired // All other AccDC API properties and methods apply to the 'dc' object as well // return true to pass validation, or false to fail }, // Assign a class to be toggled toggleClass: 'passedValidation', // Set the above class to be toggled only when validation is true, and not when false togglePassed: true, overrides: { // Change the beginning and ending boundary role text for screen reader users role: 'help', // Set a class for the tooltip container className: 'helpTooltip', // Change the DOM insertion point to another DOM node by setting targetObj. // The triggering Input field is used by default if omitted targetObj: DOM-Node, // Set a node where the toggleClass property value will be toggled when validation passes or fails // (Depends whether 'togglePassed' is set to true or false) // The triggering Input field or targetObj element is used by default if omitted classObj: DOM-Node, // Optionally set the element where visual positioning calculations will be bound to posAnchor: DOM-Node // Additional AccDC API properties and methods to set as functionality and behavior overrides go here as well } } }
-
The third parameter is an optional onSubmit handler that will run just before the form is submitted after validation passes.
Styling
The sample tooltips in the Coding Arena are styled to look a certain way for the demo, but it doesn't actually matter what they look like.
When applying new styles, simply ensure that sufficient color contrast is observed for low vision users, and a focus outline clearly shows which elements have focus, and your newly styled tooltips will be accessible.
Implementation Notes
All form fields must be explicitly labeled to ensure accessibility for the highest percentage of people.
Explicit labelling can be achieved using the LABEL and INPUT elements, by matching the LABEL tag's For attribute with the INPUT tag's Id attribute,
or by setting the Title
attribute on the INPUT tag with an informative label,
or by setting the aria-label
attribute on the INPUT tag with an informative label,
or by setting the aria-labelledby
attribute on the INPUT tag that references the ID of an informative label.
The advantage of using an explicitly associated LABEL element and INPUT tag, is that mouse users can click the label text and automatically activate the form field that it applies to. Voice navigation software also uses explicit LABEL/INPUT tag associations to aid navigation.
This type of functionality does not occur when using the Title
attribute or ARIA to explicitly associate a label.
When an INPUT element has an explicitly associated LABEL tag, a Title
attribute should not be included. Screen readers often use an
order of precedence when reading form field labels, and will often announce one or the other, but not both.
When a form field has an explicit LABEL, additional information can also be associated with the form field using aria-describedby
,
which will automatically be announced to screen reader users when focus is set to that field.
Example:
 My Text Field:  <input type="text" id="field1" aria-describedby="additional1" name="whatever" />  Supplementary Text
Important: When implementing supplementary text to be announced for screen reader users, never
use "display:none"
or "visibility:hidden"
to hide the text that is being announced.
Doing so will make it impossible for screen reader users to browse the supplementary text using the arrow keys if clarification is needed.
If you wish to hide the supplementary text from sighted users, use offscreenText instead.
A Modal is a relatively simple control type, and can easily be made accessible.
Expected behaviors: Ensure that the background content is hidden from screen reader users, ensure that the beginning and ending boundaries are conveyed to screen reader users, make sure the modal can be closed from the keyboard, and ensure that circular tabbing confines keyboard focus within the modal content.
The Modal Module automates these processes by instantiating the content as a Modal AccDC Object, which can be configured and controlled programmatically if desired to enhance functionality.
- Basic Modal control with
role=region
plusaria-label
, andaria-hidden
:
Coding Arena/Modals/Modal (Internal Content)/demo.htm - Basic Modal control with
role=dialog
plusaria-label
plusaria-describedby
plusaria-modal
, andaria-hidden
:
Coding Arena/Modals/Modal (Internal Content With role=dialog)/demo.htm
HTML Syntax
For the triggering element:
 Triggering Element
(A triggering element is not actually required)
For the modal container element:

 Modal content goes here.

Required HTML5 attributes for the modal container element:
- data-first="true" : Must be added to the first focusable active element within the modal to control circular tabbing and shift+tabbing.
- data-last="true" : Must be added to the last focusable active element within the modal to control circular tabbing and shift+tabbing.
Also, when Implementing a Close link or button, the className must match the "closeClassName"
property within the JavaScript invocation statement.
(If not explicitly set, the default value "lbClose" will be set by default, and should be used for all Close links or buttons)
Doing so will automatically bind the AccDC Close Methods with this element, and return keyboard focus properly when the AccDC Object is closed.
The following attributes are handled automatically by the Modal Module:
-
aria-hidden
JavaScript
var modalId = $A.setModal({ // Configure functionality key / value mappings });
Parameters
-
The first parameter configures modal functionality using a key / value map.
Example:
{ // Set a unique ID for the modal AccDC Object, which can be referenced through $A.reg['uniqueId'] id: 'uniqueId', // Set the screen reader accessible boundary text values role: 'Modal', // Set a triggering element using either the DOM node or a CSS Selector // (Only if a triggering element is present, remove otherwise) trigger: '#modalTrigger', // Prevent focus from returning to a triggering element // (Only if a triggering element is not present, remove otherwise) returnFocus: false, // Specify that literal content is to be rendered // (Only if pulling content from within the same page, remove otherwise) mode: 0, // Use removeChild to grab the desired modal content from within the document // This is important to prevent ID attribute conflicts later // (Only if pulling content from within the same page, remove otherwise) source: $A.getEl('modalContainerId').parentNode.removeChild($A.getEl('modalContainerId')), // Specify the file path and ID attribute of the modal container element // (Only if pulling content from an external page, remove otherwise) source: 'files/modal.html #modalContainerId', // Set the class name for the top level container element className: 'modal', // Set the class name for the screen reader accessible close link // This must match the class name for any close links or buttons within the modal content, which will cause Close Method Binding to automatically occur when the content is rendered. closeClassName: 'lbClose', // Enable the ARIA modal dialog design pattern as documented at // http://whatsock.com/training/matrices/#dialog ariaDialog: false, // Enable role=alert to announce the Dialog content no matter which window is currently active. alertDialog: false, // Run script after the Modal AccDC Object finishes loading runAfter: function(dc){ // 'dc' is the Modal AccDC Object // Set a background Div for the modal, so it will appear as a lightbox dc.backdrop = $A.createEl('div', null, null, 'modalBackdrop', document.createTextNode(' ')); // Now insert the backdrop Div before the Modal AccDC Object top level container dc.accDCObj.parentNode.insertBefore(dc.backdrop, dc.accDCObj); // Now configure content bindings within the modal // dc.containerDiv is the DOM node where the newly rendered modal content is contained // All other AccDC API properties and methods are similarly available for the 'dc' object }, // Run script after the Modal AccDC Object finishes closing runAfterClose: function(dc){ // Remove the backdrop Div if (dc.backdrop) dc.backdrop.parentNode.removeChild(dc.backdrop); } // (Other AccDC API properties and methods can be declared here also to customize functionality and behavior) }
Programmatic Control
Every modal is registered as an AccDC Object, the ID of which is returned by the JavaScript invocation statement.
This means that you can programmatically control each modal using JavaScript.
Example:
// Get a reference to the Modal AccDC Object using the ID stored in the modalId variable var dc = $A.reg[modalId]; // Now invoke the modal dc.open(); // Or close the modal dc.close(); // All other AccDC API properties and methods can be applied here as well.
Triggering Element Requirements
A triggering element for a modal is not required, but when one is present, you should always use an active element for this purpose to ensure accessibility for both screen reader and keyboard only users.
Within the Coding Arena samples, these are standard links (A tags with an Href attribute). However, you can use whatever type of triggering element you wish, a standard link, button, or image link, with any type of styling.
Styling
The sample modals in the Coding Arena are styled to look a certain way for the demo, but it doesn't actually matter what they look like. This is demonstrated within the "Shell" folders, where there is no CSS styling for the modal. This is also useful as a practice template for trying out different styling designs with custom content.
When applying new styles, simply ensure that sufficient color contrast is observed for low vision users, and a focus outline clearly shows which elements have focus, and your newly styled modal will be accessible.
Bootstrapping
Bootstrapping is designed to handle common control types that span multiple pages with similar setup configurations.
The modals within the Bootstrap folders are configured using HTML5 "data-"
attributes within the HTML markup.
When the Bootstrap Module ("accdc_bootstrap.js") is executed, it parses the newly loaded DOM, recognizes the class "accModal"
,
then configures the same module declaration as previously described using these HTML5 attributes.
Available HTML5 attributes for the triggering element:
- data-src : The resource path and pointer to the ID attribute of the modal container element.
If set,
data-internal
should be blank or not included. - data-internal : The ID attribute of the modal container element within the same document.
If
data-internal
is set,data-src
should be blank or not included. - data-role : The role name that is conveyed to screen reader users as beginning and ending boundary text for the new content. "Modal" is set by default if no value is specified.
Additional HTML5 attributes can be added to enhance functionality by editing the file "accdc_bootstrap.js".
Required attributes for the triggering element:
- class="accModal" : The bootstrap class name that specifies an accessible modal.
- id : The unique ID of the element. This value is also registered as the ID of the modal AccDC Object, making it possible to invoke the object programmatically.
E.G $A.reg.uniqueID.open();
// All other AccDC API properties and methods are similarly available.
Implementation Notes
Do not use aria-haspopup
. It might sound like a good idea to notify screen reader users that a 'Popup' is attached by adding
the attribute aria-haspopup="true"
to the triggering element, but this is not a good idea.
Screen readers announce different feedback based on the various combinations of element types and ARIA roles in the markup, which can lead to confusion and misrepresent the purpose of the feature altogether.
Examples:
  Triggering Element One    Triggering Element Two   <button aria-haspopup="true"> Triggering Element Three </button>
In short, don't use aria-haspopup
unless you are triggering a menu.
A Popup is a relatively simple control type, and can easily be made accessible.
Expected behaviors: Ensure that the beginning and ending boundaries are conveyed to screen reader users, make sure the popup can be closed from the keyboard, and ensure that focus moves appropriately when the popup opens and closes.
The Popup Module automates these processes by instantiating the content as a Popup AccDC Object, which can be configured and controlled programmatically if desired to enhance functionality.
- Basic Popup control with offscreen boundary text, and
aria-live=polite
:
Coding Arena/Popups/Popup (Internal Content)/demo.htm - Shell basic Popup control with no CSS, offscreen boundary text, and
aria-live=polite
:
Coding Arena/Popups/Popup (Internal Content Shell)/demo.htm - Basic popup simulated Listbox control with offscreen boundary text, ARIA
role=listbox, role=option, aria-posinset, aria-setsize, aria-selected, aria-label
, andaria-owns
:
Coding Arena/Popups/Popup Listbox (Internal Content)/demo.htm - Basic Popup Scrollable Div control with offscreen boundary text, and
aria-live=polite
:
Coding Arena/Popups/Scrollable Div Popup (External Content)/demo.htm
HTML Syntax
For the triggering element:
 Triggering Element
For the popup container element:

 Popup content goes here.

When Implementing a Close link or button, the className must match the "closeClassName"
property within the JavaScript invocation statement.
(If not explicitly set, the default value "popupClose"
will be set by default, and should be used for all Close links or buttons)
Doing so will automatically bind the AccDC Close Methods with this element, and return keyboard focus properly when the AccDC Object is closed.
JavaScript
var popupId = $A.setPopup({ // Configure functionality key / value mappings });
Parameters
- The first parameter configures popup functionality using a key / value map.
Example:
{ // Set a unique ID for the Popup AccDC Object, which can be referenced through $A.reg['uniqueId'] id: 'uniqueId', // Set the screen reader accessible boundary text values role: 'Popup', // Set a triggering element using either the DOM node or a CSS Selector trigger: '#popupTrigger', // Specify that literal content is to be rendered // (Only if pulling content from within the same page, remove otherwise) mode: 0, // Use removeChild to grab the desired popup content from within the document // This is important to prevent ID attribute conflicts later // (Only if pulling content from within the same page, remove otherwise) source: $A.getEl('popupContainerId').parentNode.removeChild($A.getEl('popupContainerId')), // Specify the file path and ID attribute of the popup container element // (Only if pulling content from an external page, remove otherwise) source: 'files/popup.html #popupContainerId', // Position the popup on the right of the triggering element autoPosition: 3, // Move the Popup AccDC Object 10px to the right, and 20px up when opened offsetLeft: 10, offsetTop: -20, // Set the class name for the top level container element className: 'popup', // Set the class name for the screen reader accessible close link // This must match the class name for any close links or buttons within the popup content, which will cause Close Method Binding to automatically occur when the content is rendered. closeClassName: 'popupClose', // Set a visually hidden close link for screen reader users to appear at the end of the popup content showHiddenClose: true, // Set the visually hidden close link to appear onFocus (required for 508 compliance if no other keyboard accessible close method is available) displayHiddenClose: true, // Set the heading level that will be accessible for screen reader users ariaLevel: 2, // Run script after the Popup AccDC Object finishes loading runAfter: function(dc){ // 'dc' is the Popup AccDC Object // dc.containerDiv is the DOM node where the newly rendered popup content is contained // All other AccDC API properties and methods are similarly available for the 'dc' object }, // Run script after the Popup AccDC Object finishes closing runAfterClose: function(dc){ // Optionally do stuff } // (Other AccDC API properties and methods can be declared here also to customize functionality and behavior) }
Programmatic Control
Every popup is registered as an AccDC Object, the ID of which is returned by the JavaScript invocation statement.
This means that you can programmatically control each popup using JavaScript.
Example:
// Get a reference to the Popup AccDC Object using the ID stored in the popupId variable var dc = $A.reg[popupId]; // Now invoke the popup dc.open(); // Or close the popup dc.close(); // All other AccDC API properties and methods can be applied here as well.
Triggering Element Requirements
Regarding the triggering element, you should always use an active element for this purpose to ensure accessibility for both screen reader and keyboard only users.
Within the samples, these are standard links (A tags with an Href attribute). However, you can use whatever type of triggering element you wish, a standard link, button, or image link, with any type of styling. There must be an active element as a triggering element though, to ensure accessibility.
Styling
The sample popups in the Coding Arena are styled to look a certain way for the demo, but it doesn't actually matter what they look like. This is demonstrated within the "Shell" folders, where there is no CSS styling for the popup. This is also useful as a practice template for trying out different styling designs with custom content.
When applying new styles, simply ensure that sufficient color contrast is observed for low vision users, and a focus outline clearly shows which elements have focus, and your newly styled popup will be accessible.
Bootstrapping
Bootstrapping is designed to handle common control types that span multiple pages with similar setup configurations.
The popups within the Bootstrap folders are configured using HTML5 "data-"
attributes within the HTML markup.
When the Bootstrap Module ("accdc_bootstrap.js") is executed, it parses the newly loaded DOM, recognizes the class "accPopup"
, then
configures the same module declaration as previously described using these HTML5 attributes.
Available HTML5 attributes for the triggering element:
- data-src : The resource path and pointer to the ID attribute of the popup container element.
If set,
data-internal
should be blank or not included. - data-internal : The ID attribute of the popup container element within the same document.
If
data-internal
is set,data-src
should be blank or not included. - data-role : The role name that is conveyed to screen reader users as beginning and ending boundary text for the new content. "Popup" is set by default if no value is specified.
- data-autoposition : The autoPosition override, which dynamically positions the new content relative to the triggering element. This reflects the autoPosition property documented within AccDC, and may be a value between 0 and 12. The default is 3 if left blank or not included.
- data-offsetleft : The offsetLeft override, which dynamically positions the new content relative to the triggering element. The default is 10 if left blank or not included.
- data-offsettop : The offsetTop override, which dynamically positions the new content relative to the triggering element. The default is -20 if left blank or not included.
Additional HTML5 attributes can be added to enhance functionality by editing the file "accdc_bootstrap.js".
Required attributes for the triggering element:
- class="accPopup" : The bootstrap class name that specifies an accessible popup.
- id : The unique ID of the element. This value is also registered as the ID of the Popup AccDC Object, making it possible to invoke the object programmatically.
E.G $A.reg.uniqueID.open();
// All other AccDC API properties and methods are similarly available.
Implementation Notes
Do not use aria-haspopup
.
It might sound like a good idea to notify screen reader users that a 'Popup' is attached by adding the attribute aria-haspopup="true"
to the triggering element,
but this is not a good idea.
Screen readers announce different feedback based on the various combinations of element types and ARIA roles in the markup, which can lead to confusion and misrepresent the purpose of the feature altogether.
Examples:
  Triggering Element One    Triggering Element Two   <button aria-haspopup="true"> Triggering Element Three </button>
In short, don't use aria-haspopup
unless you are triggering a menu.
A Progress Bar control is a relatively simple HTML5 control that, nevertheless, does require a specific implementation in order to work correctly in a backwards compatible manner with Internet Explorer 8.
The Progress Bar module automates this process by instantiating a Progress Bar control that can be programmatically set at runtime as values change.
- Basic Popup Progress control with polyfill:
Coding Arena/Progress Bars/Progress Bar (Dynamic Fixed Container with Trigger)/demo.htm - Basic Insert Progress control with polyfill:
Coding Arena/Progress Bars/Progress Bar (Static Container Insertion with AutoStart)/demo.htm
HTML Syntax
Unobtrusive:
(No HTML markup is needed)
Inline:

The following attributes are handled automatically by the Progress Bar Module:
-
value
-
aria-valuetext
JavaScript
var myProgressBar = $A.setProgressBar({ // Configure functionality using a key / value map });
Parameters
-
The first parameter configures Progress Bar functionality using a key / value map.
Example:
{ // Set a unique ID, which will also be the ID attribute value for the 'progress' element when rendered id: 'progressbar1', // Set the boundary text for screen reader users role: 'Download', // Set initial values for the progress bar, values may be of type Int or Float config: { value: 0, max: 100 }, // Specify the container element where the Progress Bar AccDC Object will be inserted // (Only if pointing to the ID of a target zone container element, remove otherwise) isStatic: '#pbTargetZone', // Specify the container element where the unobtrusive Progress Bar AccDC Object will be inserted // (Only if no target zone container tag is present, remove otherwise) isStatic: 'body', // Also, prepend the progress bar content to the content already contained within the body element // This also places it at the top of the page for screen reader users prepend: true, // Set the class name for the top level container Div that surrounds the 'progress' element className: 'progressBar', // Load the Progress Polyfill script after the progress bar is rendered for cross-browser compatibility // (The accompanying CSS file must also be included in the header of the page) runJSAfter: ['js/progress-polyfill.min.js'], // Run script after the progress bar finishes rendering runAfter: function(dc){ // Optionally do something // dc.source is the DOM node for the rendered 'progress' element }, // Run script after the progress bar finishes closing runAfterClose: function(dc){ // Optionally do something } // Other AccDC API properties and methods can be applied here as well if desired }
Programmatic Control
The function "$A.setProgressBar"
returns the instantiated AccDC Object for the progress bar, which can then be controlled as follows:
// Render the Progress Bar myProgressBar.open(); // Update the Progress Bar with a new value myProgressBar.set(50); // Then close the Progress Bar after the process has completed myProgressBar.close();
Styling
The sample Progress Bars in the Coding Arena are styled to look a certain way for the demo, but it doesn't actually matter what they look like.
Instructions for changing the visual appearance of the 'progress'
element are discussed in the
article "Cross Browser HTML5 Progress Bars In Depth".
Implementation Notes
To ensure proper rendering across various browsers, the Progress Bar Module requires the following dependencies:
A Scrollable Div is a very simple control type, which can easily be made accessible.
Expected behaviors: Ensure that the scrollable container element receives keyboard focus, and ensure that the Up/Down/Left/Right arrow keys and the PageUp/PageDown and the Home/End keys scroll content appropriately.
The Scrollable Div Module automates these processes by making the scrollable container keyboard accessible.
- Basic Scrollable Div control:
Coding Arena/Scrollable Divs/Scrollable Div (Internal Content)/demo.htm - Basic Popup Scrollable Div control with offscreen boundary text, and
aria-live=polite
:
Coding Arena/Scrollable Divs/Scrollable Div Popup (External Content)/demo.htm
HTML Syntax

 Scrollable content goes here.

The following attributes are handled automatically by the Scrollable Div Module:
-
tabindex
JavaScript
$A.makeScrollable(scrollableDivDOM_Node, 'textMessageForScreenReaderUsers');
Parameters
-
The first parameter is the DOM node of the scrollable div container (with
'overflow:auto'
in the CSS). -
The second parameter is the text string that will be announced to screen reader users the first time that focus moves into the Scrollable Div. (This message alerts VoiceOver users that the region is scrollable.)
Scrollable Region
is set by default if no value is specified.
Styling
The sample Scrollable Divs in the Coding Arena are styled to look a certain way for the demo, but it doesn't actually matter what they look like.
When applying new styles, simply ensure that sufficient color contrast is observed for low vision users, and a focus outline clearly shows which elements have focus, and your newly styled Scrollable Div will be accessible.
Bootstrapping
Bootstrapping is designed to handle common control types that span multiple pages with similar setup configurations.
The Scrollable Divs within the Bootstrap folders are configured using HTML5 "data-"
attributes within the HTML markup.
When the Bootstrap Module ("accdc_bootstrap.js") is executed, it parses the newly loaded DOM, recognizes the class "accScrollable"
,
then configures the same module declaration as previously described using these HTML5 attributes.
Additional HTML5 attributes can be added to enhance functionality by editing the file "accdc_bootstrap.js".
Required attributes:
- class="accScrollable" : The bootstrap class name that specifies an accessible Scrollable Div.
Implementation Notes
Do not use aria-haspopup
.
It might sound like a good idea to notify screen reader users that a 'popup' is attached by adding the attribute aria-haspopup="true"
to the triggering element (if applicable),
but this is not a good idea.
Screen readers announce different feedback based on the various combinations of element types and ARIA roles in the markup, which can lead to confusion and misrepresent the purpose of the feature altogether.
Examples:
  Triggering Element One    Triggering Element Two   <button aria-haspopup="true"> Triggering Element Three </button>
In short, don't use aria-haspopup
unless you are triggering a menu.
Additionally, no ARIA attributes are necessary to make a Scrollable Div accessible for screen reader users.
VoiceOver instructions for use on iOS touch screen devices:
To navigate the content of a Scrollable Div using VoiceOver, use the Rotator (turn three fingers like turning a knob) to select Line Mode, then use one finger to swipe up and down within the scrollable content to navigate.
Credit goes to David Hilbert Poehlman for providing VoiceOver rotator navigation technique instructions.
A Tooltip is a relatively simple control type, which can easily be made accessible.
Expected behaviors: Ensure that the beginning and ending boundaries are conveyed to screen reader users, and make sure the Tooltip is accessible from the keyboard.
The Tooltip Module automates these processes by instantiating the content as a Tooltip AccDC Object, which can be configured and controlled programmatically if desired to enhance functionality.
- Simple Tooltip control with a named region,
role=tooltip
, andaria-describedby
:
Coding Arena/Tooltips/Tooltip (Internal Content)/demo.htm
HTML Syntax
For the triggering element:
 Triggering Element
Or
<input type="..." id="tooltipTrigger2" title="Field name if no Label tag is associated" />
Or
<select id="tooltipTrigger3" title="Field name if no Label tag is associated"> <option value="0"> Option One </option> <option value="1"> Option Two </option> </select>
For the tooltip container element:

 Tooltip content goes here.

JavaScript
var tooltipId = $A.setTooltip({ // Configure functionality key / value mappings });
Parameters
-
The first parameter configures tooltip functionality using a key / value map.
Example:
{ // Set a unique ID for the Tooltip AccDC Object, which can be referenced through $A.reg['uniqueId'] id: 'uniqueId', // Set the role name for the container role: 'tooltip', // Set the triggering element using a DOM node or a CSS Selector trigger: '#tooltipTrigger1', // Set an optional time delay in milliseconds wait: 1500, // Specify that literal content is to be rendered // (Only if pulling content from within the same page, remove otherwise) mode: 0, // Use removeChild to grab the desired Tooltip content from within the document // This is important to prevent ID attribute conflicts later // (Only if pulling content from within the same page, remove otherwise) source: $A.getEl('tooltipContainerId').parentNode.removeChild($A.getEl('tooltipContainerId')), // Set a file path to pull the Tooltip content from and reference the container element ID // (Only if pulling content from an external page, remove otherwise) source: 'files/tooltip.html #tooltipContainerId', // Position the Tooltip on the right of the triggering element autoPosition: 3, // Move the Tooltip AccDC Object 10px to the right when opened offsetLeft: 10, // Set the class name for the top level container element className: 'tooltip' // (Other AccDC API properties and methods can be declared here also to customize functionality and behavior) }
Programmatic Control
Every tooltip is registered as an AccDC Object, the ID of which is returned by the JavaScript invocation statement.
This means that you can programmatically control each tooltip using JavaScript.
Example:
// Get a reference to the Tooltip AccDC Object using the ID stored in the tooltipId variable var dc = $A.reg[tooltipId]; // Now change the content of the tooltip dc.source = 'Hello World'; // All other AccDC API properties and methods can be applied here as well.
Styling
The sample tooltips in the Coding Arena are styled to look a certain way for the demo, but it doesn't actually matter what they look like.
When applying new styles, simply ensure that sufficient color contrast is observed for low vision users, and a focus outline clearly shows which elements have focus, and your newly styled tooltip will be accessible.
Bootstrapping
Bootstrapping is designed to handle common control types that span multiple pages with similar setup configurations.
The tooltips within the Bootstrap folders are configured using HTML5 "data-"
attributes within the HTML markup.
When the Bootstrap Module ("accdc_bootstrap.js") is executed, it parses the newly loaded DOM,
recognizes the class "accTooltip"
, then configures the same module declaration as previously described using these HTML5 attributes.
Available HTML5 attributes:
- data-src : The resource path and pointer to the ID attribute of the tooltip container element.
If set,
data-internal
should be blank or not included. - data-internal : The ID attribute of the tooltip container element within the same document.
If
data-internal
is set,data-src
should be blank or not included. - data-role : The role name that is conveyed to screen reader users as beginning and ending boundary text for the new content.
"Tooltip"
is set by default if no value is specified. - data-autoposition : The
autoPosition
override, which dynamically positions the new content relative to the triggering element. This reflects the autoPosition property documented within AccDC, and may be a value between 0 and 12. The default is 3 if left blank or not included. - data-offsetleft : The offsetLeft override, which dynamically positions the new content relative to the triggering element. The default is 10 if left blank or not included.
- data-offsettop : The offsetTop override, which dynamically positions the new content relative to the triggering element. The default is 0 if left blank or not included.
Additional HTML5 attributes can be added to enhance functionality by editing the file "accdc_bootstrap.js".
Required attributes:
- class="accTooltip" : The bootstrap class name that specifies an accessible tooltip.
- id : The unique ID of the element. This value is also registered as the ID of the Tooltip AccDC Object,
making it possible to invoke the object programmatically.
E.G $A.reg.uniqueID.open();
// All other AccDC API properties and methods are similarly available.
Implementation Notes
When an A tag is used as the triggering element, it must adhere to the following:
- If the element contains no link text and no Img element, then the link should include an informative
Title
attribute. (This is only valid if there is no link text at all) - If the element contains an Img tag and no link text, then the Img tag should include an informative
Alt
attribute andTitle
attribute, both of which should match. - The A tag must include an
href
attribute, to ensure keyboard accessibility.
Do not use aria-haspopup
.
It might sound like a good idea to notify screen reader users that a 'Popup' is attached by adding the attribute aria-haspopup="true"
to the triggering element,
but this is not a good idea.
Screen readers announce different feedback based on the various combinations of element types and ARIA roles in the markup, which can lead to confusion and misrepresent the purpose of the feature altogether.
Examples:
  Triggering Element One    Triggering Element Two   <button aria-haspopup="true"> Triggering Element Three </button>
In short, don't use aria-haspopup
unless you are triggering a menu.
The concept of Web Chat seems complicated, but it's actually quite easy to make accessible for screen reader and keyboard only users.
- Simple Web Chat control with offscreen boundary text,
role=application
, andaria-live=polite
:
Coding Arena/Web Chat and Dynamic Message Announcement/Web Chat (Static)/demo.htm - Simple Checkbox controls with
aria-live=polite
:
Coding Arena/Web Chat and Dynamic Message Announcement/Dynamic Message Announcement/demo.htm
This may not be readily apparent by reading the JavaScript code for the chat demo in the Coding Arena however, so I'll outline the concepts that make it accessible here, to simplify things.
- When the chat popup loads in the DOM, the content is appended to the 'BODY' element, so that it appears at the bottom of the page for screen reader users. This is important, because as new messages are received, the Virtual Buffer line numbers within the body content won't change. This is often what causes focus reading issues when trying to navigate within body content if nodes higher up in the DOM tree continually update themselves, which quickly becomes an accessibility issue.
- After the chat popup is rendered, focus is automatically moved into the message field. To aid with this,
the surrounding DIV tag for the message field, includes the ARIA attribute
role="application"
. This forces JAWS 14 to automatically enter Applications Mode when the field receives focus in both IE and Firefox. - The message field consists of a Textarea element. This is important, since this allows screen reader users to press Enter to submit new messages without automatically exiting Forms Mode, which would occur if an Input element was used instead.
- The scrollable chat window is keyboard accessible, so that keyboard only users can simply Shift+Tab into the message field and use the Up/Down arrow keys and the PageUp/PageDown/Home/End keys to read through previously posted messages.
- The Close icon is keyboard accessible, and pressing Escape will alternately close the Chat Popup.
-
Now, here is where the magic is for screen reader users. Whenever new messages arrive, they are automatically announced. This is accomplished using the
$A.announce()
method, which automatically queues incoming messages using Unobtrusive Announcement to prevent speech interruption. It also can be set to ignore repetitive messages by passing true as the second parameter.Example:
$A.announce(LastMSG-DOM-Node, true);
The $A.announce()
method is also prototyped to the String object, so it can be invoked by returning strings as well for storage if desired.
Example:
var msgHistory = [], msgTextString = 'Howdy!'; msgHistory.push( msgTextString.announce() );
Which will both store the string contained in the variable msgTextString
and announce it to screen reader users at the same time.
When a chat dialog is closed, the following method may be invoked:
String.announce.clear();
This will clear the queue so that message announcement does not continue to occur after the chat dialog is closed.
Announce Method Details
The AccDC Announce method has been tested successfully using JAWS 11-14, NVDA, and VoiceOver, in Internet Explorer 8-9, Firefox, Chrome, and Safari with applicable screen readers.
JavaScript
$A.announce( StringOrDOMNode , SuppressRepeat?<true/false> , isAggressive?<true/false> );
Or
var myString = anotherString.announce();
$A.announce() Parameters
-
The first parameter is a DOM node or text string to be announced. (Repetitive messages will automatically be queued for announcement.)
-
The second parameter is a Boolean value that specifies whether the announcement of repeat message text is automatically suppressed. If set to true, repetitive text will not be announced to screen reader users. False is set by default if no value is specified.
-
The third parameter is a Boolean value that specifies whether aggressive announcement will be used to announce text. If set to true, prior speech output will be interrupted and the latest text message will be forcibly announced. This will occur regardless which window currently has focus, and is not desirable in most cases. False is set by default if no value is specified.
Programmatic Control
Manually clear the message queue
String.announce.clear();
Access the last message that was announced
var last = String.announce.lastMsg;
Adjust the initial delay in milliseconds when the $A.announce()
method queues messages to be announced sequentially
String.announce.baseDelay = 2000;
Adjust the delay in milliseconds when a message using $A.announce()
contains two or more words including punctuation.
String.announce.charMultiplier = 160;
Implementation Notes
Important: Unobtrusive Announcement should only be used sparingly, and not for everything.
When too many things are announced on the same page, it is difficult for screen reader users to differentiate between what is being announced, and what is being navigated using the arrow keys. This is because the same voice is used for both, with no distinction.
ARIA Warnings
Even though ARIA stands for Accessible Rich Internet Applications, the improper use of ARIA will actually cause accessibility issues for screen reader users.
Important things to be aware of:
- Strict care and comprehensive screen reader testing must always be applied whenever implementing ARIA within HTML markup.
- Don't ever assume, just because it's documented in the ARIA specification, that it will be accessible.
- If the component or feature is not accessible to screen reader users, it is not accessible, no matter what the specification says.
- Adherence to the ARIA specification cannot be used as an excuse for components and features that are not accessible to screen reader users.
Improper use of ARIA examples
Example 1: Phantom form fields
<form>
 Contact Details

 <input type="text" name="full_name" />

 <input type="text" name="email_address" />
 </form>
Since the use of role="textbox"
is used to surround a native form field, JAWS sees two form fields when using
the Arrow keys to navigate up and down the page, causing confusion for screen reader users.
Similarly, since all supporting attributes such as aria-label
, aria-describedby
, and aria-required
are applied
to the wrong elements, they are not accessible as a result.
Example 2: Unreadable content

  Name: 	  Bryan Garaventa

  Title: 	  Bryan Garaventa - Resume

  File Type: 	  PDF

The use of role="tree"
and role="treeitem"
on this table, literally makes it impossible to read the table content using JAWS.
Example 3: Mixing roles

  Link One

  Link Two

  Link Three

Since screen readers convey certain role types (such as Tabs) as form controls, the nesting of additional active elements confuses screen reader output.
Example 4: Confusing feedback
<textarea title="Status" aria-haspopup="true"></textarea> <textarea title="Comment" aria-expanded="true"></textarea>
In the case of aria-haspopup
on the edit field, only "Has Popup" is announced by JAWS, which is confusing. "Has Popup" does
not convey what the purpose of the popup is, nor does it indicate how to invoke it. NVDA announces "Edit SubMenu", which is even more confusing.
In the case of aria-expanded
on the edit field, "Edit Expanded" is announced by screen readers, which is superfluous.
The content of all edit fields, even when scrolled off screen visually, is always visible to screen reader users, so announcing
expanded means nothing to screen reader users.
Care must be taken with incorrect assumptions, such as the assumption that applying aria-disabled="true" to an element will remove it from the focus order or that doing so will prevent JavaScript events such as onFocus or onClick from firing on that element. These are incorrect assumptions, because ARIA does not change the behavior in the browser, only what type of information is conveyed to assistive technologies.
Also great care must be taken when applying global attributes, such as aria-hidden. The aria-hidden attribute when set to 'true' will hide that element and all child elements from assistive technology users, regardless that the content is still visible. Moreover, if the container also includes focusable elements, these will remain in the tab order regardless. When aria-hidden is set to "false", even on an element that is hidden using the HTML5 'hidden' attribute or CSS display:none, it will be exposed to assistive technology users regardless, which can be extremely problematic if misapplied on elements that are meant to be hidden from all users.
For a comprehensive guide of how ARIA works from beginning to end, please read the Accessibility Tree Training Guide.
Also, use the Visual ARIA Bookmarklet to examine ARIA usage within live web technologies to better understand which ARIA attributes are present and when they are being applied incorrectly.
Conclusion
Whenever ARIA is applied, it must be thoroughly tested using JAWS in Internet Explorer and using NVDA in Firefox. These are the two most widely used Windows based screen readers in the world. JAWS is hard coded to work best in Internet Explorer, and NVDA is hard coded to work best in Firefox.
If mobile support is needed, VoiceOver on iOS devices is the most widely used screen reader that should be used for testing. TalkBack on the Android is the second most widely used.
Important: Even when ARIA is implemented correctly and precisely according to the specification, if adding certain ARIA attributes causes accessibility issues for screen reader users to occur, then they should not be used.
The attribute aria-haspopup
should only be used on triggering elements that open menus. Otherwise, the presence of the attribute will
only misrepresent the popup type to screen reader users.
Examples:
  Triggering Element One    Triggering Element Two   <button aria-haspopup="true"> Triggering Element Three </button>
The attribute role="presentation"
should only be used in very limited circumstances, and only when it is desirable to suppress the role of an element for screen reader users.
Many element types have particular roles that are automatically conveyed to screen reader users.
Examples include headings, links, buttons, images, lists, frames, tables, form fields, and many others. All of which have specific relevance for screen reader users, who depend on the identification of these roles to navigate reliably within web pages.
When role="presentation"
is added to the markup of such an element, it manually overrides this role mapping in the browser,
and prevents the screen reader from identifying or even interacting with the element in the expected manner.
Example 1: Headings

 Key Section Heading

It is now impossible for screen reader users to navigate to the heading using the H and Shift+H key commands, nor is the text identified as a heading while browsing down the page using the arrow keys.
Example 2: Links and Buttons
 Triggering Element  <button role="presentation"> Triggering Element </button>
It is now impossible for screen reader users to identify these elements as actionable elements during navigation.
Example 3: Tables

  Product 	  Quantity

  Doorknob 	  2000

It is now impossible for screen reader users to navigate the data table using table navigation commands.
Whenever role="presentation"
is added to HTML markup, it must always be tested using JAWS, NVDA, and VoiceOver
(if applicable) to ensure that the element type remains accessible for screen reader users.
Event Model Differences
When JAWS interacts with the Virtual Buffer, making it possible for screen reader users to navigate from the top of the page to the bottom using the Down arrow key, it will not automatically trigger the onFocus handler.
When you do the same using NVDA however, it will automatically trigger the onFocus
handler.
This means that, any elements that cause specific actions to occur, such as simulated Tab controls, simulated Radio Button controls, or any other control type that uses onFocus to invoke selection, will automatically be triggered by NVDA in both IE and Firefox when using the arrow keys to navigate page content.
Example 1: Tabs

 Label One

 Label Two

 Label Three

In JAWS, you can use the arrow keys to navigate between tabs and press Enter on the announced tab to activate it.
In NVDA however, using the arrow keys to announce each tab will automatically activate it.
Example 2: Implied form field labels
<input type="text" value="Street Address 1" onfocus="this.value=''" />
 <input type="text" value="Street Address 2" onfocus="this.value=''" />
 <input type="text" value="City" onfocus="this.value=''" />
 <input type="text" value="State" onfocus="this.value=''" />
In JAWS, setting focus to the Input field will cause the value to be cleared.
In NVDA however, using the arrow keys to navigate down the page will cause the form fields to be cleared.
Important: This method of form field labeling should never be used.
The events that are triggered for certain elements depend on the type of element that is being activated.
For example, adding an onClick
handler to a natively active element such as an A tag with an href
attribute,
or a BUTTON element, will be accessible for both mouse and keyboard users, regardless whether a screen reader is running or not.
However, if you do the same for a natively non-active element, such as a DIV or SPAN tag, it will not be accessible from the keyboard without a screen reader running.
Example 1: Standard link
 Triggering Element
This link is actionable from the keyboard with or without a screen reader running, and can be activated using the mouse.
Example 2: Simulated link with no onKeypress
 Triggering Element
This simulated link is actionable from the mouse, and for screen reader users in Virtual Buffer Mode. However, it is not actionable for keyboard only users that have no screen reader running, nor is it actionable for screen reader users in Applications Mode.
Example 3: Simulated link with both onClick and onKeypress
 Triggering Element
This simulated link is actionable from the mouse and from the keyboard with or without a screen reader running.
However, the onKeypress
is only activated for screen reader users in Applications Mode, and for keyboard only users,
and the onClick
is only activated for mouse users, and for screen reader users in Virtual Buffer Mode.
Many accessibility issues arise when nesting active elements, which directly effects event propagation.
Example: Nested active elements

This simulated image link performs different actions depending on the action mode (mouse or keyboard), and also depending on the browse mode for screen reader users.
- Mouse users will trigger the
onClick
for both the IMG and DIV, but not theonKeypress
. - Keyboard only users without a screen reader will trigger the DIV
onKeypress
, but neither of theonClicks
. - Screen reader users in Virtual Buffer Mode will trigger the
onClick
for both the IMG and DIV, but not the onKeypress. - Screen reader users in Applications Mode will trigger the DIV
onKeypress
, but neither of theonClicks
.
It is, therefore, very important to ensure that nested active elements are not used to perform different actions.


Which answer best describes what the
printString method below does?
It prints s in reverse order.
- It prints s.
- It prints only the first character of s.
- It prints only the first two characters of s.
- It prints only the last character of string s.
Note that the print command is exectued after the base case
is reached when unwinding the recursion.


Although I've recently griped quite a bit about political issues in my journal, I'm not really political. I'm a tech-geek. My knowledge of world culture and history is poor, and I have no stomach for the rhetoric of the American political system. I am still a human being though and the events of the past several years has really bothered me. Anyway, I took a test to see where my political mindset is:
My Political Compass:
Economic Left/Right: -6.12
Social Libertarian/Authoritarian: -4.62
This site has a lot of interesting facts about famous people. You should take the test. Does it jibe with your own mind's eye of your political slant?


--- layout: example categories: example/v1.0.0 version: v1.0.0 title: Live collaborative editing with Firebase description: Using Firebase as a database for multiple contributors at the same time. Uses Leaflet.label to display text associated with markers. tags: - zoompan - plugins ---


This example is using twitter bootstrap, you can have any library/css to build the dropdown component.
Note: This code uses Vanilla JS methods and doesn't have any Polyfills for cross browser compatibility. Methods that would require a Polyfill are document.querySelectorAll, addEventListener, addEventListener.


Add your first configuration snapshot using the button on the toolbar.
Find out more in the User guide`KEEP_ORIGINAL`.


---
layout: post
authors: ["Anelda van der Walt"]
title: "April 28 - May 5, 2015: GSoC Projects, Nightly Rebuilds, Katy Huff, and a PhD Starter Kit."
date: 2015-05-05
time: "06:00:00"
tags: ["Community"]
---
Highlights
People
-
Meet Katy Huff - chair of the Steering Committee and a member of the finance subcommittee.
Resources
-
Achintya Rao wrote a fascinating PhD Starter Kit
listing some best practices and useful tools postgraduate students
could find useful on their journey towards graduation.
Events
Details
-
Three workshops were run this week: Simon Fraser University, Content Korea Lab Gyeonggi, and Washington State University.
-
Several workshops have been confirmed for the next few months.
Upcoming workshops can be viewed on our website.
Newly added workshops are indicated with "*".
-
May:
Lawrence Berkeley Lab*,
University of Melbourne,
Swinburne University of Technology,
University of South Florida - College of Marine Science,
University of New Mexico,
Western University,
Stellenbosch University,
University of Oklahoma Libraries*,
University of Melbourne,
Oklahoma State Universtiy*
-
June:
University of Cambridge,
Materials Physics Center - University of the Basque Country
-
July:
The University of Queensland,
SciPy 2015,
The University of Queensland - AMOS sciences,
SAP Offices in Feltham
Other events
-
womENcourage 2015 will be held in Uppsala in September 2015.
Scholarship applications close on 20 May.
Repository Activity
| Project | Issues | Pull Requests |
| Opened | Closed | Comments | Opened | Closed | Comments |
| shell-novice | 1 | 1 | 6 | 4 | 5 | |
| git-novice | | | 4 | 3 | 3 | |
| hg-novice | | | 1 | 1 | 1 | |
| sql-novice-survey | | 2 | 5 | 4 | 16 | |
| python-novice-inflammation | 1 | 1 | 24 | 4 | 6 | 6 |
| r-novice-inflammation | 3 | 2 | 13 | 5 | 6 | 2 |
| matlab-novice-inflammation | 1 | | 10 | 1 | 1 | |
| slideshows | | | 1 | 1 | | |
| instructor-training | | | 6 | 1 | 2 | |
| amy | | 3 | 9 | 1 | | |
| site | 2 | 1 | 4 | 1 | 3 | 9 |
| Total | 8 | 10 | 83 | 26 | 43 | 17 |
|---|


This blog post is served as a pre-built static file since it was located in the static/one.html file.
static/one.html


Q1) Living away from home, on other side of the world by your own.  How did you feel experiencing the independence?
Q2) Before coming to india as exchange student, you might have thought about India, and had some pre notions about living here .Is it like how you thought of it to be?
I spent 6 months already in the south of India so I had a pretty good idea about what to expect when I came here. However, there are obviously still some differences and surprises here: I am very happy that people are very open-minded and interested in communication with me and the other internation students as communication was my main problem in the south. Also the academic system is very different from what I am used (rather personal and like school here) which I found positive and negative in different aspects but I'm getting used to it. In general, reality matched with my expectations in most matters which made it easier to feel comfortable here.
Q3)You’re new to a country with diverse cultures. You’re going to live with total strangers. You don’t know the language. You don’t know what will happen when the plane lands. Still, you can only smile and nervously await your new adventure. For the first time in your life you have the chance to do things for yourself, by yourself. What was the first thought you entered the campus? Or landed?
Exchange isn’t a year in your life; it’s a life in a year. What do you think about this?
I partly relate to that: As I said before, going to a place where you don't know anyone and anything makes you start from the very beginning again, forming new social relationships, finding your place in both the academics and recreational activities and coping with most issues on your own. In my opinion, an important part of this process is also to come back home, where you reflect all your experiences once again by telling people about it and getting back to your former routine. My two last stays abroad have changed my opinions, behaviour and values severly but only in a positive way as far as I can estimate that. The stay here will also make you appreciate your family, friends and all treasures at home much more.
Q5) If you were asked to extend the duration of your stay here, would you be willing to? What has interested you the most particularly in IIT delhi?
Q6)How would you sum up you experience as an exchange student here in one line.
Q7)The college atmosphere might have been different here, what was the thing you liked the most and the thing you liked the least? Your college would also be hosting students as exchange students. What according to you must be improvised here to make the exchange more memorable?


CLick here for more updates
Click here
HTML is the standard markup language for Web pages
With HTML you can create your own Website
HTML is easy to learn - You will enjoy it!
START LEARNING LEARN HTML
CSS is the language we use to style an HTML document
CSS describes how HTML elements should be displayed
This tutorial will teach you CSS from basic to advanced
START LEARNING LEARN CSS
JavaScript is the world's most popular programming language.
JavaScript is the programming language of the Web.
JavaScript is easy to learn.
START LEARNING LEARN JAVASCRIPT
HAVE SOME QUESTIONS ABOUT OUR WORK?
MORE ABOUT US