ARIA role and state
HyperText Markup Language (HTML) semantics describe the accessibility information about an element's name, role and state in the website code. If you're developing a website, native HTML semantics should always be used when available. But if they're not, Accessible Rich Internet Applications (ARIA) can be used to add semantics.
Role
An element's role describes its purpose. It's announced by screen readers and is used to indicate the type of element something is.
The role attribute in ARIA can explicitly give an element a role if it doesn't have one or override the element's implicit role.
For example, the <main> role tells screen readers that the <div> element represents the main region of the document. A screen reader will therefore announce 'main region' or 'main landmark', as it does for the <main> element.
Example code that uses the <main> role:
<div role='main'>…</div>
The button role informs screen readers that this element is a button. A screen reader will announce 'button', as it does with the <button> element. A screen reader user will therefore expect it to behave like a button.
Example code that uses the button role:
<span id='button' role='button' tabindex='0'>Submit</span>
One of the strengths of HTML is the built-in keyboard accessibility of features such as buttons, form controls and links. If you're using ARIA to add a role to an element that does not have built-in keyboard behaviour, you have to add keyboard accessibility [internal link to fix later] in separately.
There are over 70 role values in ARIA 1.1, including:
- button, radio, checkbox
- table, row, cell
- menu and menubar
- tablist, tab, tabpanel
The role attribute should be used with caution when overriding an element's implicit role. This is because informing screen reader users that one kind of HTML element is another can cause confusion.
State
An element's state is its current condition. The state is announced by screen readers so that people know if a checkbox is selected or unselected, a button is pressed or not pressed, or a menu is open or closed. Find out more about HTML states.
ARIA states are especially useful when there is no equivalent in HTML. The aria-pressed attribute indicates to screen readers if the <button> element is pressed or not.
A screen reader will announce 'Show toggle button pressed' if the value is 'true' and 'Show toggle button' if it's 'false'.
Example code for an unpressed button, using aria-pressed='false':
<button aria-pressed='false'>Show</button>
The aria-expanded attribute indicates to screen readers when a component is open or closed (expanded or collapsed). A screen reader will announce 'expanded' when the value is 'true', and 'collapsed' when the value is 'false'.
Example code of a pressed button showing its expanded content, using aria-expanded='true':
<button aria-expanded='true'>…</button>
[Expanded menu to be added]
Tips
Follow these tips to improve user experience:
- always use semantic HTML over ARIA when it's available
- don't change native semantics unless you really have to
- use Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) Authoring Practices 1.1 as a reference for how to apply role, name, description, state and keyboard behaviour for accessible custom components
There is a problem
Thanks for your feedback