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 Unqork IDE. 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. |
Note: 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. |
Changelog
| Date | Change |
|---|---|
| — | Initial publication. |