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 are applied using the
role attribute. e.g.
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
combobox, checkbox, listbox and option to be used to create faux form elements
tooltip to be used to specify an element as a tooltip
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>
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
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>
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.
used to create a faux radio button or checkbox
aria-hidden used to provide information to the browser about the state of the current element can be set to true or false.