Accessibility for Developers


Kelly Hutchins
Paul Pederson
Blake Stearman
Tao Zhang

ARIA doesn't augment any of the element's inherent behavior:

  • Focusable
  • Keyboard event listeners

Custom behaviors still need to be implemented

3. Do not use `role="presentation"` or `aria-hidden="true"` on a visible and focusable element.

  • This will result in focusing on "nothing".
  • Don't do these:



4. All interactive elements must have an accessible label or name.

Do this:



ARIA Design Patterns

A11Y module usage

a11y(URL, callback) accepts a string as input and takes a callback providing a reports object with the accessibility audit for the supplied URL.


var a11y = require('a11y');
a11y('esri.com', function (err, reports) {
	var output = JSON.parse(reports);
	var audit = output.audit; //a11y formatted report
	var report = output.report;
	//Chrome devtools accessibility audit formatted report
	reports.audit.forEach(function (el) {
		// result will be PASS, FAIL or NA
		if (el.result === 'FAIL') {
		// el.heading
		// el.severity
		// el.elements
		}
	});
});

axe-core

Accessibility engine for automated Web UI testing by dequelabs:


npm install axe-core --save-dev