One of the new features coming in the ARIA 1.2 specification is the ability to specify ARIA attributes using the new ARIA IDL interfaces.

Prior to ARIA 1.2, if you needed to specify an ARIA attribute (role or any aria-* attribute) on an element, you would have to use the setAttribute method. For instance:

<div class="chk">Accept my terms!</div>

<script>
  const chk = document.querySelector('.chk');
  chk.setAttribute('role', 'checkbox');
  chk.setAttribute('aria-checked', 'false');
  chk.tabIndex = 0;
  // ...
</script>

With the new ARIA IDL interfaces the above JavaScript can be more succinctly written as:

const chk = document.querySelector('.chk');
chk.role = 'checkbox';
chk.ariaChecked = false;
// ...

or even:

const chk = document.querySelector('.chk');
Object.assign(chk, {
  role: 'checkbox',
  ariaChecked: false,
  // ...
});

Presently Firefox lacks support for the role and all the aria-* IDL attributes. Chromium browsers support all the aria-* IDL attributes except ariaInvalid. They lack support for the role IDL attribute as well. Safari is missing support for ariaDescription.

EDIT: James Nurthen, one of ARIA’s editors also wants you (me. he means me.) all to know that support for the aria-* attributes that can take multiple IDRefs is non-existant at the time of writing this post.

Essentially, if you wanted to specify aria-labelledby="id1 id2 id3", or any other aria-* attribute that can list a series of IDrefs, then that’s not possible at this time. The following is a list of attributes that do not have a corresponding IDL attribute, yet:

  • aria-activedescendant
  • aria-controls
  • aria-describedby
  • aria-details
  • aria-errormessage
  • aria-flowto
  • aria-labelledby
  • aria-owns
  • aria-relevant

And the following two attributes will likely not receive IDL attributes, as they have been marked as deprecated in the ARIA specification:

  • aria-dropeffect
  • aria-grabbed

The following table will populate the “support result” column with a “pass” or “fail” depending on the browser you are using. So if any of the above information changes, the table will call me out on my outdated information.

Note: aria-description is not acutally part of ARIA 1.2, but rather ARIA 1.3. I fogot this, but don’t want to remove it from the below table. So there it stays.

IDL Attribute Reflected ARIA Attribute
& tested value		 Support result
role role
ariaAtomic aria-atomic
ariaAutoComplete aria-autocomplete
ariaBusy aria-busy
ariaChecked aria-checked
ariaColCount aria-colcount
ariaColIndex aria-colindex
ariaColSpan aria-colspan
ariaCurrent aria-current
ariaDescription aria-description
ariaDisabled aria-disabled
ariaExpanded aria-expanded
ariaHasPopup aria-haspopup
ariaHidden aria-hidden
ariaInvalid aria-invalid
ariaKeyShortcuts aria-keyshortcuts
ariaLabel aria-label
ariaLevel aria-level
ariaLive aria-live
ariaModal aria-modal
ariaMultiLine aria-multiline
ariaMultiSelectable aria-multiselectable
ariaOrientation aria-orientation
ariaPlaceholder aria-placeholder
ariaPosInSet aria-posinset
ariaPressed aria-pressed
ariaReadOnly aria-readonly
ariaRequired aria-required
ariaRoleDescription aria-roledescription
ariaRowCount aria-rowcount
ariaRowIndex aria-rowindex
ariaRowSpan aria-rowspan
ariaSelected aria-selected
ariaSetSize aria-setsize
ariaSort aria-sort
ariaValueMax aria-valuemax
ariaValueMin aria-valuemin
ariaValueNow aria-valuenow
ariaValueText aria-valuetext

Until Firefox gets cracking on implementing these (and Chromium implements role – which is kind of a big deal and ariaInvalid), we should generally wait to use these IDL attributes. Even when fully implemented, it’d likely be best to wait a few version releases thereafter. You know, just for those few browser updating stragglers (whether it be due to their own inability to update when prompted – I will raise my hand here, or because their system is locked down and they can’t update freely).

But hey, you working on a project that is sure to be viewed by Webkit only (e.g., a webview in an iOS application). Or are you working on an Electron desktop app, which uses Chromium under the hood? Then you might be able to use the supported IDL attributes today.