4 aria-mistakes Worth Solving

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
  • application
  • combobox
  • composite
  • group
  • textbox
ID reference
aria-atomic property All elements of the base markup true/false
aria-autocomplete property
  • combobox
  • textbox
  • Inline
  • List
  • Both
  • None
aria-busy state All elements of the base markup true/false
aria-checked state
  • checkbox
  • menuitemcheckbox
  • option
  • radio
  • Switch
  • True
  • mixed
  • false
  • undefined
aria-colcount property
  • table
integer
aria-colindex property
  • cell
  • Row
integer
aria-colspan property
  • cell
integer
aria-controls property All elements of the base markup ID reference list
aria-current state All elements of the base markup
  • Page
  • Step
  • Location
  • Date
  • Time
  • True
  • False
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
  • application
  • button
  • composite
  • gridcell
  • group
  • input
  • link
  • menuitem
  • scrollbar
  • separator
  • tab
true/false
aria-expanded state
  • application
  • button
  • checkbox
  • combobox
  • gridcell
  • link
  • listbox
  • menuitem
  • row
  • rowheader
  • Tab
  • treeitem
true/false/undefined
aria-flowto property All elements of the base markup ID reference list
aria-haspopup property
  • application
  • button
  • combobox
  • gridcell
  • link
  • menuitem
  • slider
  • tab
  • textbox
  • treeitem
  • False
  • True
  • Menu
  • Listbox
  • Tree
  • Grid
  • Dialog
aria-hidden state All elements of the base markup true/false/undefined
aria-invalid state
  • application
  • checkbox
  • combobox
  • gridcell
  • listbox
  • radiogroup
  • slider
  • spinbutton
  • textbox
  • tree
  • Grammar
  • Spelling
  • True
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
  • heading
  • listitem
  • row
integer
aria-live property All elements of the base markup
  • Assertive
  • Off
  • Polite
aria-modal property
  • window
true/false
aria-multiline property
  • textbox
true/false
aria-multiselectable property
  • grid
  • listbox
  • tablist
  • tree
true/false
aria-orientation property
  • scrollbar
  • select
  • separator
  • slider
  • tablist
  • toolbar
  • Horizontal
  • Undefined
  • Vertical
aria-owns property All elements of the base markup ID reference list
aria-placeholder property
  • textbox
string
aria-posinset property
  • article
  • listitem
  • menuitem
  • option
  • radio
  • row
  • tab
integer
aria-pressed state
  • Button
  • False
  • Mixed
  • True
  • Undefined
aria-readonly property
  • checkbox
  • combobox
  • grid
  • gridcell
  • listbox
  • radiogroup
  • slider
  • spinbutton
  • textbox
true/false
aria-relevant property All elements of the base markup
  • Additions
  • Additions text
  • All
  • Removals
  • Text
aria-required property
  • checkbox
  • combobox
  • gridcell
  • listbox
  • radiogroup
  • spinbutton
  • textbox
  • tree
true/false
aria-roledescription property All elements of the base markup string
aria-rowcount property table integer
aria-rowindex property
  • cell
  • row
integer
aria-rowspan property cell integer
aria-selected state
  • gridcell
  • option
  • row
  • tab
true/false/undefined
aria-setsize property
  • article
  • listitem
  • menuitem
  • option
  • radio
  • row
  • tab
integer
aria-sort property
  • columnheader
  • rowheader
  • Ascending
  • Descending
  • None
  • Other
aria-valuemax property
  • range
  • scrollbar
  • separator
  • slider
  • spinbutton
number
aria-valuemin property
  • range
  • scrollbar
  • separator
  • slider
  • spinbutton
number
aria-valuenow property
  • meter
  • range
  • scrollbar
  • separator
  • slider
  • spinbutton
number
aria-valuetext property
  • range
  • separator
  • spinbutton
string