Roles

ARIA (Accessible Rich Internet Applications) roles define the purpose of an element. They provide meaning to screen readers and other assistive technologies, helping users understand the function and structure of a page.

A key principle of accessibility is to use native semantic HTML elements whenever possible. These elements have implicit roles built-in, meaning you don't need to add the role attribute manually. For example, a <nav> element automatically has the role="navigation". You should only add a role attribute when using a non-semantic element (like a <div>) to build a custom component.

Landmark Roles (Section Structure)

Landmark roles identify major sections of a page, making it easier for users to navigate.

🔝 <header>: role="banner" Identifies the header content of a page or section, typically containing branding and primary navigation.

🔆 <main>: role="main" Specifies the primary content of the document. There should only be one <main> element per page.

🚤 <nav>: role="navigation" Represents a section with navigation links.

🦶🏽 <footer>: role="contentinfo" Contains supplementary information for a page or section, such as copyright details or contact information.

↔️ <aside>: role="complementary" Identifies content tangentially related to the main content, often displayed as a sidebar.

🗃️ <article>: role="article" Designates a self-contained piece of content that could be independently reused, like a blog post.

📑 <section>: role="region" Defines a generic, thematically-grouped section of a document. It should have a heading to be useful.

Content Roles

These roles describe the structure of content.

Ⓜ️ <h1> to <h6>: role="heading" Defines a heading for a page or section. The level (1-6) indicates its rank in the document structure.

🔗 <a> with href: role="link" Designates a hyperlink to another resource.

🖼️ <img>: role="img" Identifies an element as an image.

📊 <figure>: role="figure" Identifies a self-contained piece of content, like an image, chart, or code snippet, that is referenced from the main text.

🗂️ <table>: role="table" Represents tabular data in rows and columns.

• <ul> or <ol>: role="list"
• <li>: role="listitem" Represents a list and its individual items.

Form Roles

These roles define native HTML form controls. Use these elements directly whenever possible.

▶️ <button>: role='button': Indicates an interactive element that can be triggered by the user, like a button. This role makes it clear to assistive technologies that the element is meant for user interaction.

⌨️ <input type="button">: role='button': Similar to the <button> element, this input type specifically denotes a button, telling assistive technologies that it's an interactive element.

✅ <input type="checkbox">: role='checkbox': Represents an option that can be checked or unchecked. It is used for selections and toggles in forms.

🔘 <input type="radio">: role='radio': Used for radio buttons that allow users to select one option from a group. This role helps users understand that only one selection is allowed in the group.

〰️ <input type="range">: role='slider': For input elements that let users select a value from within a specified range. This could be a slider for adjusting volume, brightness, or any range-based input.

🔍 <input type="search">: role='searchbox': Specifically designed for search fields, this role informs assistive technologies that the text input is intended for search queries.

📕 <input type="text"> and <textarea>: role='textbox': Used for text inputs where users can enter free-form text. It's essential for assistive devices to recognize these as editable text fields.

⌨️ <form>: role='form': This role is used to group related form controls, enhancing the navigation and understanding of the form structure for users with assistive technologies.

👉🏽 <select>: role='listbox': Used for dropdown lists where users can select one or more options from a list. This role is vital for conveying the functionality of dropdown menus to assistive technologies.

Widget and Live Region Roles

These roles are used for dynamic, interactive components, often built with JavaScript.

💬 dialog: A window or panel that separates content from the rest of the page.

Use Case: A modal window that requires user interaction before they can return to the main content.

📦 combobox: An input that combines a text field with a dropdown list of suggestions.

Use Case: A search field that provides autocomplete suggestions as the user types.

🛣️ tab, tablist, tabpanel: A set of layered content sections, where only one section is visible at a time. tablist contains the tab controls, and each tab corresponds to a tabpanel.

Use Case: Settings menus or content organized into categories.

ℹ️ tooltip: A popup that displays contextual information for an element.

Use Case: Displaying a definition or hint when a user hovers over an icon.

🚧 progressbar: An element that shows the progress of a long-running task.

Use Case: Indicating the status of a file upload or a multi-step form. Note: The native <progress> element has this role implicitly.

Live Regions (Dynamic Content)

These roles inform assistive technologies that an area of the page will be updated dynamically.

⚠️ alert: An urgent message that requires the user's immediate attention.

Use Case: An error message like "Your password is incorrect."

📊 status: An advisory message that is not urgent enough to be an alert.

Use Case: A confirmation message like "Your changes have been saved." or "Loading results..."

🕠 timer: A section that contains a numerical counter that changes over time.

Use Case: A countdown to the start of an event or the remaining time in a quiz.

Other Roles

🚫 presentation or none: Removes the semantic meaning of an element and its children.

Use Case: Using a <table> for layout purposes (an outdated practice). This hides the table semantics from screen readers.

➖ separator: A visual divider that separates content or groups of menu items.

Use Case: A horizontal line between sections or a vertical bar between toolbar icons.