Home

aria.js

A helper library for working with WAI-ARIA attributes, designed to make manipulating them as simple as possible.

How to use the library

• Set attributes quickly and logically.

  // <div id="set-1">
  var set1 = document.getElementById("set-1");
  set1.aria = new ARIA.Element(set1);
  set1.aria.label = "Just testing";
  // <div id="set-1" aria-label="Just testing">
  
  // <div id="set-2">
  var set2 = document.getElementById("set-2");
  set2.aria = new ARIA.Element(set2);
  set2.aria.checked = true;
  // <div id="set-2" aria-checked="true">
  
  // <div id="set-3">
  // <div id="set-4">
  var set3 = document.getElementById("set-3");
  var set4 = document.getElementById("set-4");
  set3.aria = new ARIA.Element(set3);
  set3.aria.controls = set4;
  // <div id="set-3" aria-controls="set-4">
  // <div id="set-4">

• Get sensible values from the properties.

  // <div id="get-1" aria-placeholder="Hello world">
  var get1 = document.getElementById("get-1");
  get1.aria = new ARIA.Element(get1);
  get1.aria.placeholder;
  // -> "Hello world"
  
  // <div id="get-2" aria-busy="true">
  var get2 = document.getElementById("get-2");
  get2.aria = new ARIA.Element(get2);
  get2.aria.busy;
  // -> true
  
  // <div id="get-3">
  // <div id="get-4" aria-activedescendant="get-3">
  var get4 = document.getElementById("get-4");
  get4.aria = new ARIA.Element(get4);
  get4.aria.activedescendant;
  // -> <div id="get-3">
  
  // <div id="get-5" aria-flowto="get-6">
  // <div id="get-6">
  var get5 = document.getElementById("get-5");
  get5.aria = new ARIA.Element(get5);
  get5.aria.flowto;
  // -> [<div id="get-6">]

• Remove the attributes easily.

  // <div id="remove-1" aria-modal="true">
  var remove1 = document.getElementById("remove-1");
  remove1.aria = new ARIA.Element(remove1);
  remove1.aria.modal = "";
  // <div id="remove-1">
  
  // <div id="remove-2" aria-pressed="mixed">
  var remove2 = document.getElementById("remove-2");
  remove2.aria = new ARIA.Element(remove2);
  delete remove2.aria.pressed;
  // <div id="remove-2">

  aria.js uses the ES6 Proxy function to listen for the delete operator and adds a setTimeout-based fallback for browsers that don't understand Proxy. As a result, older browsers will asynchronously remove properties with the delete operator. In all browsers, setting the property to an empty string ("") will remove the attribute instantly.

• Enjoy some utility functions added to a global ARIA variable.

  // <div id="util-1">
  // <div class="util-2">
  ARIA.identify(document.getElementById("util-1"));
  // -> "util-1"
  ARIA.identify(document.querySelector(".util-2"));
  // -> "anonymous-element-0"
  // <div class="util-2" id="anonymous-element-0">
  
  ARIA.addPrefix("selected");
  // -> "aria-selected"
  ARIA.addPrefix("aria-haspopup");
  // -> "aria-haspopup"

  See the Utility Functions page for more details and functions.

• Listen for changes and even prevent them.

  // <div id="allow-everything">
  // <div id="deny-everything">
  
  ARIA.on(ARIA.EVENT_PRE_SET, function (e) {
  
      if (e.element.id === "deny-everything") {
          e.preventDefault();
      }
      
  });
  
  var allow = document.getElementById("allow-everything");
  allow.aria = new ARIA.Element(allow);
  var deny = document.getElementById("deny-everything");
  deny.aria = new ARIA.Element(deny);
  
  allow.aria.label = "A normal element";
  // <div id="allow-everything" aria-label="A normal element">
  deny.aria.label = "An abnormal element";
  // <div id="deny-everything">

Supported attributes

Here is a list of all currently supported WAI-ARIA attributes, the property of ARIA.Element that works with that attribute and the constructor used for the attribute. The link to the constructor will tell you the type of values that can be assigned and returned, as well as the value when the attribute isn't on the element.

Attribute	ARIA.Element property	Constructor
aria-activedescendant	activedescendant	ARIA.Reference
aria-atomic	atomic	ARIA.State
aria-autocomplete	autocomplete	ARIA.Property
aria-busy	busy	ARIA.State
aria-checked	checked	ARIA.Tristate
aria-colcount	colcount	ARIA.Integer
aria-colindex	colindex	ARIA.Integer
aria-colspan	colspan	ARIA.Integer
aria-controls	controls	ARIA.ReferenceList
aria-current	current	ARIA.Property
aria-describedby	describedby	ARIA.ReferenceList
aria-details	details	ARIA.Reference
aria-disabled	disabled	ARIA.State
aria-dropeffect	dropeffect	ARIA.List
aria-errormessage	errormessage	ARIA.Reference
aria-expanded	expanded	ARIA.UndefinedState
aria-flowto	flowto	ARIA.ReferenceList
aria-grabbed	grabbed	ARIA.UndefinedState
aria-haspopup	haspopup	ARIA.Property
aria-hidden	hidden	ARIA.UndefinedState
aria-invalid	invalid	ARIA.Property
aria-keyshortcuts	keyshortcuts	ARIA.Property
aria-label	label	ARIA.Property
aria-labelledby	labelledby or labeledby	ARIA.ReferenceList
aria-level	level	ARIA.Integer
aria-live	live	ARIA.Property
aria-modal	modal	ARIA.State
aria-multiline	multiline	ARIA.State
aria-multiselectable	multiselectable	ARIA.State
aria-orientation	orientation	ARIA.Property
aria-owns	owns	ARIA.ReferenceList
aria-placeholder	placeholder	ARIA.Property
aria-posinset	posinset	ARIA.Integer
aria-pressed	pressed	ARIA.Tristate
aria-readonly	readonly	ARIA.State
aria-relevant	relevant	ARIA.List
aria-required	required	ARIA.State
aria-roledescription	roledescription	ARIA.Property
aria-rowcount	rowcount	ARIA.Integer
aria-rowindex	rowindex	ARIA.Integer
aria-rowspan	rowspan	ARIA.Integer
aria-selected	selected	ARIA.UndefinedState
aria-setsize	setsize	ARIA.Integer
aria-sort	sort	ARIA.Property
aria-valuemax	valuemax	ARIA.Number
aria-valuemin	valuemin	ARIA.Number
aria-valuenow	valuenow	ARIA.Number
aria-valuetext	valuetext	ARIA.Property
role	role	ARIA.List

Plugins

Almost every part of aria.js can be upgraded or modified - see the Plugins page for more details.