accDC

From Wikipedia, the free encyclopedia
Jump to: navigation, search
AccDC API
Developer(s) Bryan Garaventa FRSA
Initial release November 25, 2010 (2010-11-25)
Stable release 3.1 / March 16, 2014 (2014-03-16)
Development status Active
Written in JavaScript
Type Web application framework
License MIT License
Website whatsock.com

AccDC is an Accessibility API for the Web, and is the first of its kind to quantify accessible dynamic processes for web technologies.

It was released in November 2010 by Bryan Garaventa as a jQuery plug-in, and was released as a standalone API compatible with all JavaScript libraries and frameworks in June 2011.

In March 2011, AccDC was featured as a finalist in the W4A 2011 Microsoft Accessibility Challenge,[1] which included the abstract publication "The AccDC Enterprise API for Advanced UI Automation".

In June 2012, AccDC was presented at UC Berkley,[2] and was publicly released as a free download in July 2012.

In August 2012, AccDC was awarded the "Above and Beyond Accessibility Award"[3] from the United States Department of Labor.[4]

In March 2014, AccDC was presented at CSUN, the 29th Annual International Technology and Persons with Disabilities Conference.[5][6]

Etymology[edit]

The name, AccDC, stands for Accelerated Dynamic Content, and refers to the development of performance enhanced, accessible web technologies.

Features[edit]

AccDC includes the following features:

  • AccDC Object traversal
  • Behavior modifiers
  • AJAX processing and literal code rendering
  • Screen reader and keyboard accessible drag and drop
  • Flow control methods and conditional script parsing
  • CSS target zones
  • Event handling
  • Automatic accessibility framework for screen reader and keyboard only user support
  • Dynamic extendibility
  • Flexible namespaces
  • Automatic DOM maintenance routines
  • Mobile platform support
  • Cross-browser compatibility

Initializing AccDC[edit]

Typically an array of one or more setup scripts is declared prior to initializing AccDC, which is automatically parsed when AccDC loads. This is useful for programmatically assigning an array of load scripts, but isn't necessary if sequential Script declarations are added to the page itself.

The following code will declare two setup scripts to be executed, then initialize AccDC:

<script type="text/javascript">
InitAccDC = [
'js/init.js',
'http://connect.facebook.net/en_US/all.js'
];
</script>
<script type="text/javascript" src="Acc.DC.API.js"></script>

Usage and functionality[edit]

AccDC does not operate in the same manner as a typical JavaScript library, having only a small percentage of public standalone methods. Instead, most AccDC methods are invoked from within object constructs, called AccDC Objects. AccDC Objects embody any type of UI component. The methods within AccDC Objects can also be externally invoked by referencing the constructs directly. This allows AccDC Objects to dynamically communicate between each other at runtime.

The process starts with an array of AccDC Object declarations, which are passed to the $A() function to be instantiated as AccDC Objects:

$A([
{
id: 'myObj1',
role: 'Login',
...
},
{
id: 'myObj2',
role: 'Confirm',
...
}
]);

After which, each AccDC Object can be directly referenced using the ID of the construct:

$A.reg.myObj1.role = 'Logout';
// or
$A.reg['myObj2'].close();

All AccDC Object functions support method chaining, so that the following syntax is permitted:

$A.reg.myObj1.open()
.css({
position: 'absolute', zIndex: 1
})
.setDrag();

Standard DOM nodes can also be converted into AccDC Objects.

$A.morph(document.getElementById('planetImg'), {
id: 'planet',
role: 'Earth',
// Disable hidden boundary text for screen reader users
showHiddenBounds: false,
// Make the AccDC Object draggable
isDraggable: true,
// Enable reopening
allowReopen: true
});

After which, morphed AccDC Objects can be directly referenced using their ID.

var dc = $A.reg.planet;
// Set the AccDC Object to pull content from an external resource
dc.mode = 1;
// Set the resource locale
dc.source = 'mysql/parse.php?a=g';
// Change the internal styling for the AccDC Object
dc.cssObj = {
backgroundColor: '#000', color: '#fff', padding: '5px', zIndex: 1
};
// Set the position to be fixed in the middle of the viewport
dc.autoFix = 9;
// Now reopen the AccDC Object with new functionality applied
dc.open();

AccDC Objects can also be nested to preserve parent/child relationships, which can be traversed from within each AccDC Object in the tree. To set the association, the parent AccDC Object needs to be passed to the $A() function as the first parameter.

var myParent = $A.reg.myObj1;
$A(myParent, [
{
id: 'myObj2',
role: 'Confirm',
runBeforeClose: function(dc){
// Show the ID property of the parent AccDC Object
alert(dc.parent.id); // Displays "myObj1"
}
}
]);
 
// Similarly, the children array can be used to access all child AccDC Objects
 
// Close myObj2 through myObj1
$A.reg.myObj1.children[0].close();
// This is useful when close methods within child AccDC Objects need to be executed before the parent AccDC Object is closed.

Alternatively, when morphing a standard DOM node into an AccDC Object, the parent AccDC Object can be declared by passing it as the first parameter.

$A.morph($A.reg.myObj1, document.getElementById('planetImg'), {
id: 'planet',
role: 'Earth',
showHiddenBounds: false,
isDraggable: true
});
// Now the planet AccDC Object has been added to the myObj1 children array.
alert($A.reg.myObj1.children[0].role); // Displays "Earth"
// and
alert($A.reg.planet.role); // Displays "Earth"

This is a powerful feature that allows methods and properties to be invoked and modified from dynamically generated parent and child AccDC Object tree structures.

All AccDC Objects can render HTML/XHTML/HTML5 markup, DOM nodes, or remotely hosted data using internal AJAX methods, and limitless numbers of AccDC Objects can be instantiated simultaneously without conflict. AccDC Objects can also post data to server side scripts.

The Core API tab at WhatSock.com includes a full index of API commands.

AccDC extensions and plug-ins[edit]

The architecture of AccDC allows developers to extend AccDC Objects individually, or globally using prototyped methods and properties.

There are three ways to do this.

  1. Add methods and properties to object literals passed to the $A() function as AccDC Object declarations.
  2. Add properties and methods to instantiated AccDC Objects using their IDs.
  3. Add global properties and methods to propagate out to all instantiated AccDC Objects.

Method1: Using object literals:

$A([
{
id: 'myObj1',
role: 'File Menu',
extendedFn: function(){
var dc = this;
alert(dc.role); // Displays "File Menu"
return dc; // To preserve method chaining
},
...
}
]);
 
// Or localized extensions can be added to all AccDC Objects declared in the same array
 
$A([
{
id: 'myObj1',
role: 'File Menu',
...
},
{
id: 'myObj2',
role: 'Help Menu',
...
}
], {
extendedFn: function(){
var dc = this;
// dc.extendedFn() will now be available within myObj1 and myObj2
return dc;
},
forceFocus: true // Adds the forceFocus flag to myObj1 and myObj2
});

Method2: Using object references:

$A.reg.myObj1.extendedFn = function(){
var dc = this;
alert(dc.id); // Displays "myObj1"
return dc;
};

Method3: Using global propagation:

$A.fn.globalDC.extendedFn = function(){
var dc = this;
// dc.extendedFn() will now be available within all future AccDC Objects, but not those that were previously instantiated.
return dc;
};
 
// Then force the globalDC object to be merged with all previously instantiated AccDC Objects
 
$A.globalDCMerge();

Release history[edit]

Version number Release date Additional notes
1.0 November 25, 2010 First stable release as jQuery plug-in
2.0 June 30, 2011 (Rewrite) First stable release as standalone API
2.0.1 September 2, 2012 Added Section-508 compliant processes, bug fixes, and additional features.
2.0.2 September 16, 2012 Added touch drag and drop for mobile device support, traversal methods, and additional styling properties.
2.0.3 January 24, 2013 Added Function Cascading for in-built scripting and flow control methods.
3.0 September 23, 2013 Added support for the Dojo and MooTools frameworks, fixed deprecated attribute properties such as attribute.nodeName and attribute.nodeValue, removed Drag and Drop functionality in place of an external module to increase API speed when loading, added $A.internal to provide access to the core object for importing prototyped plugins.
3.1 March 16, 2014 Fixed outstanding drag and drop bugs and added better support for iOS touch screen devices.

See also[edit]

References[edit]

External links[edit]