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:
<divclass="chk">Accept my terms!</div><script>constchk=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:
constchk=document.querySelector('.chk');chk.role='checkbox';chk.ariaChecked=false;// ...or even:
constchk=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 exceptariaInvalid. 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.
You should probably make it clear that we don't have support for any of the attributes that take one or more IDREFs yet.
— James Nurthen (@jnurthen) July 24, 2021
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-activedescendantaria-controlsaria-describedbyaria-detailsaria-errormessagearia-flowtoaria-labelledbyaria-ownsaria-relevant
And the following two attributes will likely not receive IDL attributes, as they have been marked as deprecated in the ARIA specification:
aria-dropeffectaria-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.