ARIA (Accessible Rich Internet Applications) accessibility settings Reference

ARIA (Accessible Rich Internet Applications) accessibility settings improve web accessibility by giving Screen Reader 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 roleattribute with a value of buttonto define the element’s purpose as 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.

ARIA Supported Components

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

Button Component

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

Columns Component

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

Field Group Component

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

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.

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 entered in a field. The login session is about to expire. A lost connection to the server preventing local changes from being saved.
alertdialog	Notifies end-users 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. 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/.
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. 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. 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. 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 realtime 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 realtime information that changes on the page. The difference being that end-users 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. 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 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 grid or table rows 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