ARIA (Accessible Rich Internet Applications) Accessibility Settings Reference

Overview

ARIA (Accessible Rich Internet Applications) accessibility settings improve web accessibility by giving screen readers Screen Readers are a browser accessbility tool used to produce an audio description of a webpage. Screen readers speak the text and alternate text of a webpage. 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 Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. 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 HTML (Hyper Text Markup Language) is the standard markup language for for achieving font, color, graphic, and hyperlink effects when creating web pages. alone. For example, a webpage might contain a custom button using a <div> for styling purposes. By default, a <div> has no semantic 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. 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 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 A screen reader is a browser accessibility tool that plays an audio description of the text and alternate text on a website. 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 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. understand and interact with web content. For best results, use them only when native HTML HTML (Hyper Text Markup Language) is the standard markup language for for achieving font, color, graphic, and hyperlink effects when creating web pages. 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 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. role during development, otherwise an application might affect its SEO 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. 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 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. 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 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. 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 A modal is a window that appears on top of the content you are currently viewing. 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 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. 1.2. For more information on ARIA 1.2, view the following W3C 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. 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 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. 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 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. 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 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. 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 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. 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 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. 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 A modal is a window that appears on top of the content you are currently viewing. 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 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. 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 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. 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 Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. 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 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. 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 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..
tree	Identifies a hierarchical list with parent and children that can expand and collapse. Typically represented as a widget, it lets end-users 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. 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