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
Columns Component
Field Group Component
Learn how to group and organize components 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:
|
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. |