New in ARIA 1.2: ARIA IDL attributes

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.

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 has implemented all the ARIA IDL attributes.

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.

So, if you wanted to specify aria-labelledby="id1 id2 id3" then you best stick with current practices and/or rethink the way in which you’re naming your element.

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.

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
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 the implementation (and Chromium implements role – which is kind of a big deal and ariaInvalid), we should generally wait to use these IDL attributes. Even when implemented, it’d likely be best to wait a few version releases thereafter. You know, just for those few browser updating stragglers.

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 these IDL attributes today (again, sans role and ariaInvalid).


Print Share Comment Cite Upload Translate
APA
Scott O'Hara | Sciencx (2024-03-28T14:10:17+00:00) » New in ARIA 1.2: ARIA IDL attributes. Retrieved from https://www.scien.cx/2021/07/23/new-in-aria-1-2-aria-idl-attributes/.
MLA
" » New in ARIA 1.2: ARIA IDL attributes." Scott O'Hara | Sciencx - Friday July 23, 2021, https://www.scien.cx/2021/07/23/new-in-aria-1-2-aria-idl-attributes/
HARVARD
Scott O'Hara | Sciencx Friday July 23, 2021 » New in ARIA 1.2: ARIA IDL attributes., viewed 2024-03-28T14:10:17+00:00,<https://www.scien.cx/2021/07/23/new-in-aria-1-2-aria-idl-attributes/>
VANCOUVER
Scott O'Hara | Sciencx - » New in ARIA 1.2: ARIA IDL attributes. [Internet]. [Accessed 2024-03-28T14:10:17+00:00]. Available from: https://www.scien.cx/2021/07/23/new-in-aria-1-2-aria-idl-attributes/
CHICAGO
" » New in ARIA 1.2: ARIA IDL attributes." Scott O'Hara | Sciencx - Accessed 2024-03-28T14:10:17+00:00. https://www.scien.cx/2021/07/23/new-in-aria-1-2-aria-idl-attributes/
IEEE
" » New in ARIA 1.2: ARIA IDL attributes." Scott O'Hara | Sciencx [Online]. Available: https://www.scien.cx/2021/07/23/new-in-aria-1-2-aria-idl-attributes/. [Accessed: 2024-03-28T14:10:17+00:00]
rf:citation
» New in ARIA 1.2: ARIA IDL attributes | Scott O'Hara | Sciencx | https://www.scien.cx/2021/07/23/new-in-aria-1-2-aria-idl-attributes/ | 2024-03-28T14:10:17+00:00
https://github.com/addpipe/simple-recorderjs-demo