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.
Top comments (0)