Suggest an editImprove this articleRefine the answer for “What are the main types of ARIA attributes?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**ARIA attributes** fall into three types: **roles** (`role`, defining the type of an element), **states** (`aria-checked`, `aria-expanded`, and so on, showing the current state), and **properties** (`aria-label`, `aria-describedby`, and so on, adding descriptions and relationships). **Key point:** together they make an interface understandable for screen readers and compliant with WCAG standards.Shown above the full answer for quick recall.Answer (EN)ImageThe **WAI-ARIA (Accessible Rich Internet Applications)** specification defines three main types of attributes, each responsible for its own role in making an interface accessible. They help screen readers and other assistive technologies **understand the meaning, state, and relationships of elements**. --- ### 1. **Roles** - define *what kind of element this is* A role tells you **what function an element performs**: a button, a tab, a dialog, a menu, a list, and so on. This matters especially when custom markup uses `<div>` or `<span>` instead of native HTML tags. **Examples:** ```html <div role="button">Submit</div> <div role="dialog">...</div> <ul role="listbox"> <li role="option">Warsaw</li> </ul> ``` Examples of common roles: - `role="button"`: a button - `role="link"`: a link - `role="checkbox"`: a checkbox - `role="dialog"`: a modal window - `role="menu"` / `role="menuitem"`: a navigation menu - `role="alert"`: an important notification --- ### 2. **States** - describe *the element's current state* These attributes are dynamic: **their values can change as the interface is used**. They tell the user what is happening right now: whether an element is active, expanded, selected, and so on. **Examples:** ```html <button aria-pressed="true">Favorite</button> <div aria-expanded="false">Menu</div> <li aria-selected="true">Warsaw</li> <input type="checkbox" aria-checked="false"> ``` Commonly used states: - `aria-checked`: whether a checkbox is checked - `aria-expanded`: whether an element is expanded (accordion, menu) - `aria-pressed`: whether a toggle button is pressed - `aria-selected`: whether an item is selected - `aria-hidden`: whether an element is hidden from screen readers --- ### 3. **Properties** - describe *the characteristics and relationships of elements* These attributes **do not depend on state**; they provide additional information: descriptions, relationships, roles, groups. They can be used to "link" elements to each other, add text explanations, and provide context. **Examples:** ```html <div role="dialog" aria-labelledby="dialog-title" aria-describedby="dialog-text"> <h2 id="dialog-title">Confirmation</h2> <p id="dialog-text">Are you sure you want to delete the file?</p> </div> ``` Commonly used properties: - `aria-label`: a short text description of an element - `aria-labelledby`: links an element to a heading (by `id`) - `aria-describedby`: links an element to a description - `aria-controls`: indicates which element this one controls - `aria-live`: announces that the content inside updates dynamically (for example, chat messages) --- ### 4. (bonus) **ARIA Live Region attributes** Used for **dynamic updates** to content, when the user needs to be notified of new changes without reloading the page. Example: ```html <div aria-live="polite">Loading complete</div> ``` Values: - `off`: the screen reader does not announce changes; - `polite`: it announces once the user finishes the current action; - `assertive`: it announces immediately (for errors and warnings). --- ### Summary table: | Type | What it does | Examples | |---|---|---| | **role** | Defines the type of the element | `role="button"`, `role="dialog"` | | **state** | Shows the element's current state | `aria-checked`, `aria-expanded`, `aria-selected` | | **property** | Adds description, context, and relationships | `aria-label`, `aria-labelledby`, `aria-describedby`, `aria-controls` | --- ### Conclusion: ARIA attributes come in **three types**: 1. **Roles (**`role`**)**: who this is; 2. **States (**`aria-*` **state)**: what is happening right now; 3. **Properties (**`aria-*` **property)**: what relationships and descriptions exist. Together, they make an interface **understandable for screen readers, accessible by keyboard**, and compliant with **WCAG** standards.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.