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">

main Main content of the document

banner The main header of the page

navigation Navigation elements

contentinfo copyright information usually applied to an element within the footer tag

complementary Content which is related to the main element

presentation Applied to elements which are used only for presentation

search to be used on search elements

alert to be used on elements which are shown as an alert

button 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

combobox, checkbox, listbox and option to be used to create faux form elements

tooltip to be used to specify an element as a tooltip

dialog 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.

States are likely to change to be updated following an interaction from the user.

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

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

aria-controls="ID" aria controls specify an element by ID of which the current element controls

aria-expanded="false" 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

aria-labelledby 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>

aria-describedby="ID"

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.

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

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