ARIA Cheatsheet
Tags: webdev, html, w3tsadev, letsbuild
Published: 2021-06-26 18:42:08

#*ARIA*
## Cheatsheet for the most common ARIA Roles and Attributes

HTML elements can only have one role or attribute. Elements which are already semantic do not require additional aria attributes e.g `<nav> <button> <header> <footer> <main>`

##ARIA Roles

Aria roles are applied using the `role` attribute. e.g. `<div role="complementary">`

<b>main</b> Main content of the document

<b>banner</b> The main header of the page

<b>navigation</b> Navigation elements

<b>contentinfo</b> copyright information usually applied to an element within the footer tag

<b>complementary</b> Content which is related to the main element

<b>presentation</b> Applied to elements which are used only for presentation

<b>search</b> to be used on search elements

<b>alert</b> to be used on elements which are shown as an alert

<b>button</b> to be used on elements to make them behave like a button. This should be avoided and the button element should be used as extra markup and javascript is required to make a normal link act like a button

<b>combobox, checkbox, listbox and option</b> to be used to create faux form elements

<b>tooltip</b> to be used to specify an element as a tooltip

<b>dialog</b> Used for elements which update the user about an event or action that has occurred for example; `<div role="dialog" aria-labelledby="dialogTitle" aria-describedby="dialogDescription"> <h2 id="dialogTitle">Your personal details were successfully updated</h2> <p id="dialogDescription">You can change your details at any time in the user account section.</p> <button>Close</button> </div>`

##ARIA Attributes

Aria attributes are applied to elements directly (inline) or added to an element using javascript following interaction. These attributes fall into one of two categories; states and properties.

<b>States</b> are likely to change to be updated following an interaction from the user.

<b>Properties</b> are less likely to change such as aria-labelledby and provide additional information to user using assistive technologies.

<b>aria-label</b> to be added to label elements which aren't shown on the page.

<b>aria-controls="ID"</b> aria controls specify an element by ID of which the current element controls

<b>aria-expanded="false"</b> this element can be either true or false and should be updated using javascript when the elements state has changed, example usage would be accordions

<b>aria-labelledby</b> used to provide a label for elements which don't have a native label; `<figure aria-labelledby="operahouse_1" role="group"> <img src="operahousesteps.jpg" alt="The Sydney Opera House"> <figcaption id="operahouse_1">We saw the opera <cite>Barber of Seville</cite> here!</figcaption> </figure>`

<b>aria-describedby="ID"</b>

aria described by requires an ID to be specified this could be linked to a tooltip for a example when a button has an icon but no text.

<b>aria-checked</b> used to create a faux radio button or checkbox `<span role="checkbox" aria-checked="true" tabindex="0" id="simulatedcheckbox"> </span>`

<b>aria-hidden</b> used to provide information to the browser about the state of the current element can be set to true or false.