ARIA Roles
Roles are set on elements, using the role attribute. There are 6 categories of roles:
Abstract roles
These are used for the ontology. Authors must not use them.
Widget roles
Widget roles are divided into standalone and composite roles.
Standalone Widget Roles
These can be used by themselves or as part of a composite role.
| ARIA Widget Roles | HTML Landmarks | Supported States and Properties |
|---|---|---|
| button | <button> | aria-disabled aria-expanded aria-disabled |
| checkbox | <input type="checkbox"> | aria-checked |
| gridcell | <td> | |
| link | <a> | aria-disabled aria-expanded aria-haspopup |
| option | <option> | aria-selected (required) aria-checked |
| progressbar | none | aria-valuemin aria-valuemax aria-valuenow |
| radio | <input type="radio"> | aria-checked (required) |
| scrollbar | aria-controls (required) aria-valuenow (required) aria-valuemin aria-valuemax |
|
| searchbox | <input type="search"> | |
| slider | aria-valuenow (required) aria-valuemin aria-valuemax |
|
| spinbutton | aria-valuenow aria-valuemin aria-valuemax |
|
| switch | aria-checked (required) | |
| tab | aria-selected aria-expanded aria-controls |
|
| tabpanel | aria-labelledby | |
| textbox | <input type="text"> <textarea> |
aria-multiline aria-required aria-autocomplete |
| treeitem | aria-expanded |
Composite Widget Roles
Composite widgets are usually containers that contain other widget roles.
| ARIA Widget Roles | HTML Landmarks | Information |
|---|---|---|
| combobox | <select> | |
| grid | <table> | |
| listbox | <select> | |
| menu | ||
| menubar | ||
| radiogroup | ||
| tablist | ||
| tree | ||
| treegrid |
Document structure roles
Document roles define the structures that organise content in a page. There are many document roles, but some of them are listed here.
- application
- Contains one or more focussable elements that require user interaction
- article
- Contains content that forms an independent part of a document, page or site
- document
- Contains content that assistive software users may want to browse in reading mode.
- figure
- Contains content such as images, code snippets, or example text
- presentation
- Contains content that is not to be read out by assistive software; similar to decorative
- tooltip
- A popup, usually in response to mouse hover, that gives additional support
Landmark roles
There are 8 landmark roles. These generally correspond to native HTML elements. The table below shows how landmark roles are used.
| ARIA Landmark Roles | HTML Landmarks | Information |
|---|---|---|
| banner | <header> | Usually appears at the top of the page, spanning the full width. It contains site-specific content such as the logo and company name. |
| complementary | <aside> | Content is related to the main content but remains meaningful when read separately to it. |
| contentinfo | <footer> | Contains information about the parent document, such as: copyright information and links to privacy and accessibility statements. |
| form | <form> | Contains a collection of items and objects that combine to create a form. |
| main | <main> | Contains the main content of the page. Often used as the destination for a skip link. |
| navigation | <nav> | Usually contains a collection of links that enable users to navigate to other pages in the website. |
| region | <section> | This should only be used for content that is not accurately defined by one of the other landmarks. |
| search | <search> | Contains a collection of items and objects that combine to create a search feature. |
Live region roles
Live regions are parts of a web page that may be updated due to an external event, whilst the user focus is elsewhere on the page. These updates often occur without direct user interaction, but the user needs to be made aware of them.
- alert
- Contains important and usually time sensitive information, e.g. timeout notification
- log
- Contains information which is in a meaningful order. New information may be added and old information removed.
- marquee
- Contains non-essential information, which changes frequently, e.g. advertisements
- status
- Contains advisory information, which is not important enough to justify an alert
- timer
- Contains numerical information, which tells the user how much time has elapsed since a start point or the time remaining
Window roles
These roles act as windows within the webpage or application.
- alertdialog
- Contains an alert message where the initial focus goes to an element inside the dialog; often used to convey alert messages
- dialog
- Contains information to prompt the user to enter information or respond in some way