Accessible JavaScript | Accessibility

Standards Based Development

JavaScript Accessibility Links

Accessible JavaScript Widget Libraries

Axs

AXS (access)

Axs is a small Javascript library which provides methods which make it easier for web developers to implement modern Web 2.0 sites with accessible features. These methods are categorized into primary and secondary methods. Included in the library are:

Demos

AxsJAX - Access-Enabling AJAX AJAX techniques have helped Web developers create live applications within Web browsers. The AxsJAX framework helps inject accessibility features into these applications so that users of adaptive technologies such as screen readers and self-voicing browsers experience the same level of interactivity that is now taken for granted by users of Web 2.0 applications. For more details, please read the AxsJAX FAQ.

AxsJAX injects accessibility enhancements as defined by W3C ARIA. The prerequisites for experiencing its benefits include:

A modern Web browser like Firefox 2.0 or later that supports W3C ARIA.

Adaptive technologies that respond correctly to the accessibility enhancements introduced by W3C ARIA.

In particular, many of the enhancements injected by AxsJAX depend on support for live regions a feature that enables adaptive technologies like screen readers and self-voicing browsers deal correctly with asynchronous updates to portions of a Web page.

AxsJAX (Access-Enabling AJAX) is an open source JavaScript library for enhancing the accessibility of Web 2.0 applications.

One of the key abstractions that AxsJAX provides to web developers is the ability to cause assistive technology (AT) to speak. Although AT do not provide such an interface to web developers, they do respond in predictable ways to events. By using WAI-ARIA, AxsJAX is able to manipulate the DOM such that an ARIA-aware browser + AT combination will generate and receive the necessary events which cause the AT to speak what the web developer wishes to be spoken.

Another abstraction is a content navigation rules system built around the idea of multiple trails through a page. Users can select which trail they wish to be on and then navigate through just the items in that trail. For example, on a news site, the trails may be the different sections (Politics, Entertainment, Tech, Health, etc.) and the items in each trail would the stories in their respective sections.

AxsJAX scripts can be included by the web application developer (as in the case of Google Reader), automatically applied on behalf of the user by their AT (e.g., Fire Vox), or manually inserted by the end users themselves via a bookmarklet or Greasemonkey script.

Applications of AxsJAX include using it to create a talking translator and mashing up the xkcd web comic with its transcripts

The AxsJAX framework can inject accessibility enhancements into existing Web 2.0 applications using any of several standard Web techniques:

AxsJAX AxsJAX - Access-Enabling AJAX/a>

accessifyhtml5.js

accessifyhtml5.js is a polyfill for a more accessible html5.

While most browsers work all right with the new semantic elements of html5, they don't add the aria accessibility attributes that the specification demands. This small JavaScript adds those attributes to enhance accessibility of web sites.

AccDC (Accelerated Dynamic Content)

AccDC is a scalable, cross-browser and cross-platform compatible Dynamic Content Management System that automates the rendering of dynamic content to ensure accessibility for screen reader and keyboard only users.

AccDC Component Library

The AccDC Component Library is a collection of accessible control types that automate the structural and functional accessibility of each control according to relevant accessibility best practices. The controls can be populated with any type of content, and can be styled to fit any type of user interface layout, in any language, without negatively impacting accessibility. The controls tap into the accessibility features of the AccDC API to render content in an accessible manner, then apply supporting markup and scripting to automatically ensure accessibility for screen reader and keyboard only users. This makes it possible for developers to add fully customizable components, that look and feel exactly as they desire, while ensuring functional accessibility at the same time without the risk of coding misinterpretation by those who are unfamiliar with ats.

The following modules are included:

  • Accessible Modal controls.
  • Accessible Banner controls.
  • Accessible Tooltip controls.
  • Accessible Popup controls.
  • ARIA Tab controls.
  • ARIA context sensitive dropdown Menu controls.
  • ARIA Tree controls.
  • Screen reader accessible Drag and Drop controls.
  • Auto Suggestion Search Field controls.
  • ARIA Listbox controls that support optional sortability, list item deletion, and dynamic addition of list items.
  • ARIA Footnote controls.
  • Accessible Live Chat controls.
  • Horizontal and vertical ARIA Slider controls.
  • ARIA Date Picker controls.
  • Accessible Accordion controls.
  • Accessible Carousel, Slideshow, and Wizard controls.
  • Accessible Dynamic Help Tooltips and Form Field Validation.
  • ARIA Radio Button controls.
  • ARIA Toggle and Checkbox controls.
  • Keyboard accessible Scrollable Div controls.
  • Screen reader accessible Progress Bar controls.

AccDC api for jQuery

The AccDC api for jQuery is a an api that interfaces with jQuery as an extension. All of the toolkit component modules plug into this interface.

AccDC Bootstrap

AccDC Bootstrap is an html parser that renders advanced, accessible interactive controls using semantic html markup.

Bootstrapping refers to the use of semantic html markup to configure advanced controls, which are then magically converted into dynamic interactive components when the content finishes loading.

This allows developers to include complex functionality that is fully configurable across thousands of web pages, without having to program individual components using JavaScript.

AccDC Bootstrap for jQuery

AccDC Bootstrap for jQuery is an extension of AccDC Bootstrap, with an api that interfaces with jQuery. All of the toolkit component modules plug into this interface.

AccDc Bootstrap

AccDC Bootstrap is an html parser that renders advanced, accessible interactive controls using semantic html markup.

Accessible JavaScript Techniques

JavaScript Event Handlers

There are two types of JavaScript event handlers - device dependent and device independent. When implementing event handlers, you must either use a device independent event handler or use multiple device dependent event handlers to accommodate all users. Below is a list of common event handlers and their associated accessibility issues.

onMouseOver and onMouseOut
Device dependent (require the use of a mouse)
Ensure important content or functionality is not introduced with these event handlers
Use in conjunction with the onFocus and onBlur event handlers to allow keyboard accessibility
Provide an accessible alternative if the content or functionality cannot be made natively accessible
onFocus and onBlur
Device independent (work with both keyboard and mouse)
Test to ensure that accessibility is not affected
onClick and onDblClick
Device dependent (require the use of a mouse)
onClick is activated by keyboard input when used with links and form elements
There are no device independent or keyboard accessible equivalents to these event handlers
Functionality and content provide by the onClick event handler must also be made accessible
onChange and onSelect
Device independent (work with both keyboard and mouse)
Functionality and content provide by the onChange and onSelect event handlers must also be made accessible
Drop-down menu navigation items that are triggered with onChange are not fully keyboard accessible

Accessible JavaScript Summary

Accessible JavaScript Summary

JavaScript Event Handlers

There are two types of JavaScript event handlers - device dependent and device independent. When implementing event handlers, you must either use a device independent event handler or use multiple device dependent event handlers to accommodate all users. Below is a list of common event handlers and their associated accessibility issues.

onMouseOver and onMouseOut
Device dependent (require the use of a mouse)
Ensure important content or functionality is not introduced with these event handlers
Use in conjunction with the onFocus and onBlur event handlers to allow keyboard accessibility
Provide an accessible alternative if the content or functionality cannot be made natively accessible
onFocus and onBlur
Device independent (work with both keyboard and mouse)
Test to ensure that accessibility is not affected
onClick and onDblClick
Device dependent (require the use of a mouse)
onClick is activated by keyboard input when used with links and form elements
There are no device independent or keyboard accessible equivalents to these event handlers
Functionality and content provide by the onClick event handler must also be made accessible
onChange and onSelect
Device independent (work with both keyboard and mouse)
Functionality and content provide by the onChange and onSelect event handlers must also be made accessible
Drop-down menu navigation items that are triggered with onChange are not fully keyboard accessible

References and Resources

Accessibility In JavaScript