This article, aria-mistakes is written with my own experiences. While teaching, writing code or reviewing some one else’s code I often see interesting aria-mistakes. I just want to show of them to you now. I have categorized them into 4 types and hence the article is titled 4 aria-mistakes. For mistakes specific to ARIA roles may be a different article.
No ARIA is better than bad ARIA. This is one of the core rules of WAI ARIA. Learning how to write good ARIA roles, states and properties is important to create accessible and inclusive experiences. One of the ways to make it better is to avoid common aria-mistakes.
Using aria-wrong attribute : ARIA-MISTAKES #1
Few months back during the peak stage of #covid-19 second wave in India, I was reading about stress management. Towards the evening I was writing some code. I accidently used this attribute aria-stressed=”on” on a button. Below is the sample.
Example
Note that aria-stressed is not a WAI ARIA specified state or a property.
Using aria-correct attribute on unsupported role ARIA-MISTAKES #2
While reviewing some code I found the following snippet.
Example
At first glance I dint catch any mistake in this code. Have you? On running this through the automation tool, I realized that aria-label is not a valid property on span element. Check the table valid ARIA attributes while using ARIA states and properties.
Using aria-correct=”wrong” ARIA-MISTAKES #3
See the table valid ARIA attributes specifically the third column ‘value’. Observe 3 types of options.
- String: You can specify any string value here. This is purely an editorial information announced to screen readers. Only manual inspection can identify any concerns with the content.
- Id reference: check the next section
- Predefined attributes: Using values outside of predefined keywords isan aria-mistake
Content authors are expected to only use the predefined values that are available in the 3rd column for such ARIA states or properties. Anything outside of these values will cause improper responses to the controls. Assistive technologies such as screen readers do not establish the right response to the users. Many times these aria-mistakes are caught with automation tools.
In the example below a checkbox that is partially checked is provided a button role and aria-pressed attribute.
Example
Using aria-correct=”wrong reference” ARIA-MISTAKES #4
As you observe in the table below, values for few properties is an id or ids reference. Common use of id reference is for aria-describedby and aria-labelledby. It is possible that the referred id dont exist inn the page leading to the losss of expected behaviour. The incorrect id reference is not usuallly identified in the automation validation. Only a manual code inspection can identify such problems.
In the below button example, we used the aria-describedby refering to id that do not exist on the page. Observe that the same is not caught over in automation validation.
Example
Valid ARIA attributes
The following table may help the content authors in easily and quickly correcting aria-mistakes. Instead of navigating through the lengthy WAI ARIA states and properties page or our own ARIA blogs, this table helps in referring. The primary and most up to date document will still be the W3C WAI latest documents.
ARIA State Property | Used in roles | Value |
---|---|---|
aria-activedescendant property |
|
ID reference |
aria-atomic property | All elements of the base markup | true/false |
aria-autocomplete property |
|
|
aria-busy state | All elements of the base markup | true/false |
aria-checked state |
|
|
aria-colcount property |
|
integer |
aria-colindex property |
|
integer |
aria-colspan property |
|
integer |
aria-controls property | All elements of the base markup | ID reference list |
aria-current state | All elements of the base markup |
|
aria-describedby property | All elements of the base markup | ID reference list |
aria-details property | All elements of the base markup | ID reference |
aria-disabled state |
|
true/false |
aria-expanded state |
|
true/false/undefined |
aria-flowto property | All elements of the base markup | ID reference list |
aria-haspopup property |
|
|
aria-hidden state | All elements of the base markup | true/false/undefined |
aria-invalid state |
|
|
aria-keyshortcuts property | All elements of the base markup | string |
aria-label property | All elements of the base markup except for some roles or elements that prohibit its use | string |
aria-labelledby property | All elements of the base markup except for some roles or elements that prohibit its use | ID reference list |
aria-level property |
|
integer |
aria-live property | All elements of the base markup |
|
aria-modal property |
|
true/false |
aria-multiline property |
|
true/false |
aria-multiselectable property |
|
true/false |
aria-orientation property |
|
|
aria-owns property | All elements of the base markup | ID reference list |
aria-placeholder property |
|
string |
aria-posinset property |
|
integer |
aria-pressed state |
|
|
aria-readonly property |
|
true/false |
aria-relevant property | All elements of the base markup |
|
aria-required property |
|
true/false |
aria-roledescription property | All elements of the base markup | string |
aria-rowcount property | table | integer |
aria-rowindex property |
|
integer |
aria-rowspan property | cell | integer |
aria-selected state |
|
true/false/undefined |
aria-setsize property |
|
integer |
aria-sort property |
|
|
aria-valuemax property |
|
number |
aria-valuemin property |
|
number |
aria-valuenow property |
|
number |
aria-valuetext property |
|
string |