Several Module Builder components include an Accessibility tab with settings that map to WAI-ARIA attributes. This reference explains each setting, its available options, and guidance on when to use each.
The following components include Accessibility Settings: Button, Columns, Field Group, HTML Element, Image, Panel.
How to read settings tables
The tables below describe each configurable option as it displays in the UnqorkAI platform. Values are formatted as follows:
inline code— a value to type exactly as shown | Bold — a value selected from a drop-down, radio button, tab, or choice chip | ON/OFF — toggle state | ✓ — checkbox checked | ☐ — checkbox unchecked
ARIA Label
Field: ariaLabelOption | Type: Drop-down | Default: None
Sets how to label this element for screen readers. Use a label when the element has no visible text that conveys its purpose.
| Option | Description |
|---|---|
| None | No label is applied. Use when the element already has a visible, descriptive text label. |
| Custom Label | Enter a custom text label applied as aria-label. Use when no existing on-screen text can serve as the label. |
| Reference Label(s) | Reference one or more existing module fields whose text serves as the label, applied as aria-labelledby. Use when visible text already describes the element. |
Custom Label
Visible when ARIA Label is Custom Label.
Field: ariaLabel | Type: Text input
Enter a concise, action-oriented label that describes the element's purpose or function (for example, Submit application form).
Label(s) to Reference
Visible when ARIA Label is Reference Label(s).
Field: ariaLabelledBy | Type: Property ID (multi-select)
Select one or more module fields whose visible text labels this element. The selected field IDs are applied as aria-labelledby.
ARIA Description
Field: ariaDescriptionOption | Type: Drop-down | Default: None
Sets how to provide additional context about this element for screen readers. Use a description when the label alone is not sufficient to explain the element's function or expected input.
| Option | Description |
|---|---|
| None | No description is applied. |
| Custom Description | Enter a custom description applied as aria-describedby. Creates a hidden DOM element—this might affect styles. |
| Reference Description(s) | Reference one or more existing module fields whose text provides the description, applied as aria-describedby. |
Custom Description
Visible when ARIA Description is Custom Description.
Field: ariaDescription | Type: Text area
Enter supplementary information that gives screen reader users more context about the element's function or expected input.
Description(s) to Reference
Visible when ARIA Description is Reference Description(s).
Field: ariaDescribedBy | Type: Property ID (multi-select)
Select one or more module fields whose visible text describes this element. The selected field IDs are applied as aria-describedby.
ARIA Role
Field: ariaRole | Type: Drop-down (searchable, clearable)
Defines the semantic role of the element for assistive technologies. Use a role when the rendered HTML element does not convey its intended purpose on its own. The field is searchable—type to filter the list.
| Role | Description |
|---|---|
alert |
A live region that communicates important, time-sensitive information. |
alertdialog |
A dialog that contains an alert message requiring user acknowledgment. |
application |
A region treated as a desktop application by assistive technologies. |
article |
A self-contained composition (for example, a post or entry). |
banner |
The primary header of a page, typically containing branding and navigation. |
columnheader |
A header cell of a table column. |
complementary |
A section that supports the main content but is independently meaningful. |
contentinfo |
A region containing metadata about the page (for example, footer with copyright). |
definition |
A definition of a term. |
dialog |
A popup window that prompts for user input or a decision. |
directory |
A list of references to members of a group. |
document |
A region containing document-like content for reading. |
figure |
A self-contained graphic or illustration with an optional caption. |
form |
A landmark region containing a collection of form elements. |
group |
A set of related elements not large enough to be a landmark. |
heading |
A heading that labels a section of content. |
img |
A container for a collection of elements forming an image. |
list |
An ordered or unordered collection of items. |
listitem |
A single item in a list. |
log |
A live region where new information is added in meaningful order. |
main |
The primary content of the document. |
marquee |
A live region with non-essential, frequently changing information. |
menu |
A list of choices or commands. |
menubar |
A horizontal menu bar containing menu items. |
meter |
A scalar measurement in a known range (for example, disk usage). |
navigation |
A landmark containing links for navigating the site or page. |
none |
Removes the semantic meaning of the element. |
note |
A section with supplementary, parenthetical content. |
presentation |
Removes the element's native semantics without hiding it from the accessibility tree. |
region |
A landmark region of sufficient importance to be included in a summary. |
row |
A row of cells in a table, grid, or treegrid. |
rowgroup |
A group of rows in a table. |
rowheader |
A header cell for a row in a table. |
search |
A landmark region providing search functionality. |
separator |
A divider that separates sections of content. |
status |
A live region conveying status or advisory information. |
switch |
A type of checkbox representing an on/off control. |
tab |
An interactive tab element in a tab list. |
tablist |
A container for a set of tab elements. |
tabpanel |
The content area associated with a tab. |
toolbar |
A collection of commonly used controls or buttons. |
tree |
A hierarchical list that can be expanded or collapsed. |
treegrid |
A grid with rows that can be expanded or collapsed like a tree. |
treeitem |
An item in a tree or treegrid. |
Announce Live Changes
Field: ariaLive | Type: Drop-down | Default: Off
Controls how screen readers announce dynamic content updates. Use this setting for regions that update without a page reload, like status messages, validation errors, or loading states. Applied as aria-live.
| Option | Description |
|---|---|
| Off | Updates are not announced. Use when the content is not important to communicate at the time of change. |
| Polite | Updates are announced when the end-user is idle, without interrupting the current reading. Use for non-urgent information like search results or form hints. |
| Assertive | Updates are announced immediately, interrupting any current speech. Use only for critical, time-sensitive information like error alerts. |
If the element uses
role="alert", screen readers treat it as assertive automatically. The Announce Live Changes setting is not needed in that case.
Hide From Screen Readers
Field: ariaHidden | Type: Toggle | Default: OFF
Hides the element from assistive technologies without removing it from the DOM, applied as aria-hidden="true". Use for purely decorative content that adds no meaningful information (for example, decorative icons or divider lines). Do not apply aria-hidden to interactive or meaningful elements.
Custom ARIA Attributes
Field: ariaCustom | Type: Table
Adds custom ARIA attributes beyond the built-in settings above. Each row defines one attribute as a key-value pair.
| Column | Description |
|---|---|
| ARIA Attribute | The ARIA attribute name selected from a searchable list of valid attributes (for example, aria-expanded, aria-controls). |
| Value | The value to assign to the attribute. |
Accessibility in Smart Components and UnqorkAI
The Accessibility tab settings on this page apply only to the Module Builder components listed at the top of this article. Smart Components are not on that list. Instead, Accessibility Check scans Smart Components for accessibility issues.
- Scan scope: Accessibility Check scans only the markup that Smart Components render. Other components and the surrounding page are not scanned, and a module with no Smart Components returns no results.
- Standards checked: The scan tests against WCAG 2.0 and 2.1 at levels A and AA, and WCAG 2.2 at level AA.
- Issues reported: Results include critical and serious issues only. Lower-severity issues are not reported.
- Build Agent: When the scan finds issues, select Remediate to send the findings to the Build Agent, which responds with a fix plan. The Build Agent can also run the check when asked in chat.
- Availability: The issues alert, including its Remediate action, and the Build Agent require UnqorkAI to be enabled in the environment.
- Keyboard indicators: Smart Component themes set the color of the ring that marks the active element during keyboard navigation. See Borders & Inputs in the Theme Editor reference.
For the menu actions that run the check, see Module Actions and Smart Component Editor.
Changelog
| Date | Change |
|---|---|
| 2026-10-14 | Added Accessibility in Smart Components and UnqorkAI section covering Accessibility Check scope, standards, and Build Agent remediation. |
| — | Initial publication. |