---
title: "ARIA (Accessible Rich Internet Applications) Accessibility Settings Reference"
slug: "aria-accessible-rich-internet-applications-accessibility-settings-reference"
updated: 2025-09-26T08:42:18Z
published: 2025-09-26T08:42:18Z
canonical: "docs.unqork.io/aria-accessible-rich-internet-applications-accessibility-settings-reference"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# ARIA (Accessible Rich Internet Applications) Accessibility Settings Reference

**ARIA (Accessible Rich Internet Applications) accessibility settings** improve web accessibility by giving screen readers and other assistive technologies more information about user interface elements. Some components in Unqork support the **ARIA Role** (`role`) and **Aria Label** (`aria-label`) settings.

Creators can customize a component’s **ARIA Role** (`role`) setting using predefined values to provide semantic meaning to content. While the **Aria Label** (`aria_label`) setting lets Creators enter a semantic description of their choosing:

- **ARIA Role** (`role`): Identifies the purpose of an element when its function is not clear from the HTML alone. For example, a webpage might contain a custom button using a **<div>** for styling purposes. By default, a **<div>** has no semantic meaning, so screen readers will not know it’s meant to act like a button. So, assign the `role` attribute with a value of `button` to define the element’s purpose as a button.
- **Aria Label** (`aria_label`): Provides a readable name for elements that might not have visible text. For example, a **<button>** element labeled **Next** is announced by a screen reader as "Next". Adding an `aria_label` attribute with the value `go to next page` announces the **<button>** element as "Go to next page" instead.

Used together or separately, these attributes help end-users understand and interact with web content. For best results, use them only when native HTML does not meet accessibility needs.

> Discover how to audit a page's accessibility in Chrome with Google's Accessibility Features article: [https://developer.chrome.com/docs/devtools/accessibility/reference](https://developer.chrome.com/docs/devtools/accessibility/reference).

## ARIA Supported Components

The following components support either the **ARIA Role** (role) or **Aria Label** (aria_label) attributes, or both:

### [Button Component](/v1/docs/button-component)

Learn how to create interactive buttons for your end-users.

### [Columns Component](/v1/docs/columns-component)

Learn how to create interactive dashboard modals for your end-users to add, edit, and delete entries.

### [Field Group Component](/v1/docs/field-group-component)

Learn how to group and organize components in the Module Builder.

### [Panel Component](/v1/docs/panel-component)

Learn how to create pop-up modals and import modules into other modules in the Module Builder.

## Unqork ARIA Roles

The **ARIA Role** (`role`) setting uses predefined values that are assigned under an Unqork component's Accessibility settings. It's important to assign the correct ARIA role during development; otherwise, an application might affect its SEO rating and become less accessible.

> To get an in-depth overview of ARIA roles, visit the Mozilla WAI-ARIA Roles reference guide: [https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles).

The list below contains the available role attributes in Unqork and a description of each role.

| ARIA Role | Description |
| --- | --- |
| alert | Notifies the end-user with an important or time-sensitive message. Use this role for information that requires the end-user's immediate attention. Examples include: - An invalid value was entered in a field. - The login session is about to expire. - A lost connection to the server is preventing local changes from being saved. |
| alertdialog | Notifies end-user with an important message. For example, error messages that require confirmation. Use the `alertdialog` role for alert messages that have interactive confirmation elements. If an alert dialog only contains static content and has no interactive elements, use the `alert` role. |
| application | Communicates to the screen reader that an element and its children should be treated as a desktop application, and not to use traditional HTML interpretation techniques. Use this role to define dynamic and desktop-like web applications. Most mobile and desktop web applications are not considered applications. |
| article | Represents a section of a document, page, or site that can be viewed as a complete document. Use this role for content items like comments, forum posts, or other articles grouped on a single page. |
| banner | Defines a website header. Website headers might include a logo, company name, search field, and navigation bar. Unlike the `heading` role, the `banner` role is for repeating site-wide content located at the top of every page. |
| columnheader | Identifies an element nested as a cell in a row of a grid or table that contains header information for a column. |
| complementary | Defines a supporting section that relates to the main content. Use this role when your application contains side navigation or callout boxes. |
| contentinfo | Defines a website footer. Website footers might include copyright information, navigation links, and privacy statements. |
| definition | Indicates the element is a term or concept definition. |
| dialog | Identifies a modal separate from the rest of the page. |
| directory | Identifies a list of references in a static table of contents, including nested lists. > [!CAUTION] > The directory role is deprecated in ARIA 1.2. For more information on ARIA 1.2, view the following W3C article: [https://www.w3.org/TR/wai-aria-1.2/](https://www.w3.org/TR/wai-aria-1.2/). |
| document | Identifies widget and application content where screen readers can switch from reading page context to reading mode. It notifies the screen reader to use document mode to read the content contained in the element. |
| figure | Identifies any grouped content that must be consumed together. Figures include images, video, audio, code snippets, or other content. |
| form | Identifies content that includes a collection of items and objects that are combined to create a form. > [!WARNING] > Ensure you have unique labels for each form in a document. This label should be visible to all end-users, not just those using screen readers. |
| group | Identifies a set of UI objects not included in a page summary or table of contents. Use this role to group logical collections of items with related functionality. |
| heading | Indicates that this element is a heading. Screen readers will read the text and notify the end-user that it is formatted as a heading. |
| img | Identifies any set of content that must be consumed as a single image. This content can include images, video, audio, code snippets, emojis, or other content. |
| list | Identifies any content that is part of an outer container with a list of elements inside. > [!TIP] > The `list` role is typically used in conjunction with the listitem role, which identifies a `list item` contained inside the list. |
| listitem | Identifies any content inside a list of items. > [!TIP] > The `listitem` role is typically used in conjunction with the `list` role, which identifies any content that is part of an outer container with a list of elements inside. |
| log | Identifies real-time data where new information is added and old information disappears. For example, chat logs, messaging history, or an error log. A log is ordered sequentially with new information added to the end of the log. When used, the browser notifies the end-user of the log event. |
| main | Indicates the primary document content. Primary content is directly related to or expands on the main topic of a document or application. |
| marquee | Identifies real-time information that changes on the page. The difference is that end-user do not necessarily require this information in their experience. Examples include advertisement banners and other nonessential content. |
| menu | Identifies a group of actions or functions that the end-user can take action on. The menu role is best used for a list of menu items presented like a menu. You can also use this role for modal menus. |
| menubar | Identifies menus that are always visible and display in a horizontal bar. This menu type behaves like drop-down menus commonly found at the top of an application page. |
| meter | Identifies a graphical display of numeric values for a defined range. For example, displaying the percent completion of a task. > [!NOTE] > Do no use the `meter` role for values that do not have a maximum limit or as a way to track a progress bar. |
| navigation | Identifies major groups of links used when navigating page or website content. |
| none | Identifies elements that do not contain ARIA semantics for screen readers. While ARIA is primarily used to promote accessibility, there are situations where hiding an element's semantics is helpful. Doing so defines that an element is used only for presentation purposes. |
| note | Identifies that a section of content is included in parentheses or provides necessary support to the main content. |
| presentation | Identifies elements that do not contain ARIA semantics for screen readers. While ARIA is primarily used to promote accessibility, there are situations where hiding an element's semantics is helpful. Doing so defines that an element is used only for presentation purposes. |
| region | Identifies areas of the page that Creators consider significant. This role is a generic one available to aid in navigation. |
| row | Identifies a row in a grid or table. |
| rowgroup | Identifies a group of rows in a grid or table. |
| rowheader | Identifies a cell containing header information in a grid or table. |
| search | Identifies the search functionality of a page or application. |
| separator | Identifies the element as a divider that separates sections of content or groups of menus. |
| status | Notifies end-users with a message. Use this role instead of `alert` when the notification represents information that is not urgent. |
| switch | Identifies elements that can be set to `ON` or `OFF` |
| tab | Indicates an interactive element inside a list that, when triggered, displays its associated tab panel. This role is associated with the `tablist` and `tabpanel` roles. |
| tablist | Identifies the element that serves as the container for a set of tabs, referred to as tab panels. This role is associated with the `tab` and `tabpanel` roles. |
| tabpanel | Represents a container for the resources of layered content associated with a tab. This role is associated with the `tab` and `tablist` roles. |
| toolbar | Identifies the element as a collection of commonly used buttons or controls represented visually. This role can be used to communicate the purpose of the grouping of these elements and tabbing for keyboard end-users |
| tree | Identifies a hierarchical list with parent and children that can expand and collapse. Typically represented as a widget, it lets end-users select one or more items from the list.This role is associated with the `treegrid` and `treeitem` roles |
| treegrid | Identifies an element as a grid or table row that can be expanded and collapsed in the same manner as a tree. This role is associated with the `tree` and `treeitem` roles |
| treeitem | Identifies an element in a tree. This role is associated with the `tree` and `treegrid` roles. |

## Resources

- [Building Accessible Applications in Unqork](/v1/docs/accessibility-in-unqork)

Assistive technology that reads digital text aloud for users with visual impairments or reading disabilities.

Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform.

HTML (Hyper Text Markup Language) is the standard markup language for for achieving font, color, graphic, and hyperlink effects when creating web pages.

Semantic HTML uses HTML elements to clearly describe their meaning, rather than just their appearance, to structure web content for better readability and accessibility for both humans and machines.

A screen reader is a browser accessibility tool that plays an audio description of the text and alternate text on a website.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

ARIA (Accessible Rich Internet Applications) is a set of attributes used in HTML to enhance the accessibility of web content, particularly dynamic or interactive web pages, for users who rely on assistive technologies like screen readers.

Search Engine Optimization (SEO) is the process used to improve a website's content relevance and techical configuration. Search Engines rank public websites based on their SEO performance and popularity.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

A modal is a window that appears on top of the content you are currently viewing.

The World Wide Web Consortium (W3C), founded in 1994, is an international community that develops open standards to ensure the long-term growth and evolution of the web, focusing on accessibility, internationalization, privacy, and security.

The UI (user interface) is a device's end-user interaction and communication point. It can include display screens, keyboards, and mouse. It is also how a user interacts with your application.