This content originally appeared on Scott O’Hara UX developer, designer & accessibility engineer and was authored by Scott O'Hara
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.
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
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).
This content originally appeared on Scott O’Hara UX developer, designer & accessibility engineer and was authored by Scott O'Hara
Scott O'Hara | Sciencx (2021-07-23T00:00:00+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/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.