The Universal Access Panel provides the semantic layer required by screen readers (like VoiceOver and TalkBack) to describe your application's visual components to users with visual impairment.

By correctly configuring these properties, you replace visual cues (like an arrow icon) with clear, verbal descriptions and structural context.

Definition of Role Categories

The Role property is the most powerful tool in this panel, defining a component's structural function. The roles fall into six functional categories:

1. Structural Landmarks: Define major organizational areas of the application, allowing screen reader users to jump quickly between key sections (Main, Banner).
2. Interactive Widgets: Describe standard controls that facilitate user input or action (Button, Slider, Checkbox).
3. Live Region & Status: Describe content that is likely to change dynamically, ensuring the screen reader announces updates without interrupting the user (Alert, Timer, Log).
4. Document Structure: Define the organization and meaning of non-interactive content (Heading, List, Article).
5. Table and Grid Roles: Define data organized in a two-dimensional grid (Table, Row, Columnheader).
6. Utility/Bypass Roles: Control how the screen reader interprets or ignores certain components (Presentation, Separator).

Universal Access Roles: Full Alphabetical Reference

The following is the complete list of available Role attributes.

A

• Alert
• • Type: Live Region/Status
  • Definition: A time-sensitive, important message that requires immediate user attention.
  • Use Case: Set this on a banner that dynamically appears to warn the user of a critical, non-modal condition (e.g., "Out of Stock").
• Alertdialog
• • Type: Live Region/Status
  • Definition: A modal dialog box that contains an alert, requiring the user to take action before proceeding.
  • Use Case: Set this on the root View of a modal that delivers a severe warning and forces the user to confirm or cancel (e.g., "Are you sure you want to delete?").
• Application
• • Type: Structural Landmark
  • Definition: A region treated as a complex, programmatic application. Screen readers often switch behavior in this mode.
  • Use Case: Use sparingly. Reserved for layouts that mimic desktop applications or highly interactive dashboards where standard document navigation is insufficient.
• Article
• • Type: Document Structure
  • Definition: A self-contained, independent unit of content (e.g., a blog post).
  • Use Case: Set this on a View component containing a single blog post or news story within a feed.
  • ✨ Bonus Optimization: Provides strong semantic context, which is beneficial for SEO and LLM comprehension.

B

• Banner
• • Type: Structural Landmark
  • Definition: Content that provides general site-oriented information, typically located at the top of the page (a header).
  • Use Case: Set this on the component used to build the fixed global header or main application title bar.
  • ✨ Bonus Optimization: Provides a key landmark for crawlers and LLMs to identify the page header.
• Button
• • Type: Interactive/Widget
  • Definition: A control that triggers a simple, immediate action.
  • Use Case: Apply this to any component that executes a Flow like "Increment Counter" or "Close Modal."

C

• Cell
• • Type: Table/Grid
  • Definition: A data cell within a row in a table or grid structure.
  • Use Case: Set this on the component that displays the raw data (the value) within a data row.
• Checkbox
• • Type: Interactive/Widget
  • Definition: A tri-state selection input that allows the user to choose zero or more items from a set.
  • Use Case: Set this on a custom Toggle component built to function as a multi-select checkbox.
• Columnheader
• • Type: Table/Grid
  • Definition: A cell containing header information for a column within a table or grid.
  • Use Case: Set this on the component that labels the content of the entire column in a data table (e.g., the "Price" label).
• Combobox
• • Type: Interactive/Widget
  • Definition: A composite widget combining a text input with an associated pop-up list of suggested values.
  • Use Case: Set this on a TextInput component that has an attached dropdown list for autocomplete search.
• Complementary
• • Type: Structural Landmark
  • Definition: A supporting section whose content is relevant but not essential to the main focus (an "aside" or sidebar).
  • Use Case: Set this on a container component for supporting content like "related items" or advertisements.
• Contentinfo
• • Type: Structural Landmark
  • Definition: A large section containing information about the parent document, such as copyrights or privacy links (a footer).
  • Use Case: Set this on the component used to build the fixed global footer.
  • ✨ Bonus Optimization: Provides a key landmark for crawlers and LLMs to identify the page footer.

D

• Definition
• • Type: Document Structure
  • Definition: The explanation or meaning of a term.
  • Use Case: Set this on the Text component holding the explanation in a glossary or list of terms.
• Dialog
• • Type: Live Region/Status
  • Definition: An application window that interrupts the user's flow and requires a response before the user can resume.
  • Use Case: Set this on the root View component that comprises a standard confirmation or input modal overlay.
• Directory
• • Type: Document Structure
  • Definition: A list of references to members of a group, such as a table of contents or phone book listing.
  • Use Case: Use this on a complex list component that serves as an index or large table of contents.
• Document
• • Type: Document Structure
  • Definition: Defines the root of the document structure.
  • Use Case: Typically used only as a semantic container for the highest-level content structure.

F

• Feed
• • Type: Document Structure
  • Definition: A dynamically updating list of articles or content that streams continuously.
  • Use Case: Set this on a container for a social media timeline, activity log, or news feed where new items are periodically loaded.
• Figure
• • Type: Document Structure
  • Definition: A container for illustrative content (like a diagram or photo), often with an optional caption.
  • Use Case: Set this on a View that groups a media component (Image or Video) and its descriptive Text caption.
• Form
• • Type: Structural Landmark
  • Definition: A region that contains a collection of form elements intended to collect user input.
  • Use Case: Set this on the parent View that contains a login form, survey, or any data collection wizard.
  • ✨ Bonus Optimization: Provides clear semantic identification of input fields for LLMs and form-filling tools.

G

• Grid
• • Type: Table/Grid
  • Definition: A composite widget used for interactive, editable data organized in rows and columns.
  • Use Case: Use this for components that display complex, interactive, editable data sets (e.g., a custom spreadsheet-like UI).
• Group
• • Type: Document Structure
  • Definition: A container used to group related widgets or document elements (equivalent to a <fieldset> without the label).
  • Use Case: Use this on a View to semantically group a set of related form fields, such as "Billing Information" fields.

H

• Heading
• • Type: Document Structure
  • Definition: A section header. Used in conjunction with Aria-level (1-6) to define the heading hierarchy.
  • Use Case: Set this on any Text component that functions as a structural header for a section. Must use the Aria-level property.
  • ✨ Bonus Optimization: Crucial for SEO/LLMs. Defines the content hierarchy, boosting content discovery and summarization.

I

• Img
• • Type: Document Structure
  • Definition: An image element used to present visual information.
  • Use Case: Set this on the Image component. Use the Aria-label to describe its content. If purely decorative, use the Presentation role.

L

• Link
• • Type: Interactive/Widget
  • Definition: An interactive reference to an internal page (Route) or external resource (URI).
  • Use Case: Set this on any component that performs navigation to another location or external URL.
• List
• • Type: Document Structure
  • Definition: Defines a container for a list structure.
  • Use Case: Set this on the parent container (e.g., a View) that holds a collection of list items.
• Listitem
• • Type: Document Structure
  • Definition: An individual item within a list.
  • Use Case: Set this on each repeated item component within a List container.
• Log
• • Type: Live Region/Status
  • Definition: A record of recent events or activities in a chronological order.
  • Use Case: Set this on the container component for a chat window, terminal output, or a transaction history list.

M

• Main
• • Type: Structural Landmark
  • Definition: The dominant, unique content of the document.
  • Use Case: Set this on the single View that contains the core content area of the layout (e.g., product details).
  • ✨ Bonus Optimization: The single most important SEO/LLM landmark. Identifies the primary content block.
• Marquee
• • Type: Live Region/Status
  • Definition: A content region that displays text that scrolls horizontally or vertically.
  • Use Case: Set this on a component used for scrolling stock ticker data or news headlines.
• Math
• • Type: Document Structure
  • Definition: Content that represents a mathematical expression.
  • Use Case: Set this on components that display equations or complex scientific notation.
• Menu
• • Type: Interactive/Widget
  • Definition: A collection of menu items or command links, typically displayed as a popup.
  • Use Case: Set this on a context menu or a dropdown component that presents a list of options.
• Menubar
• • Type: Interactive/Widget
  • Definition: A horizontal, typically static, Menu bar containing command links.
  • Use Case: Set this on a horizontal View component containing the application's primary menu commands (e.g., a File/Edit/View bar).
• Menuitem
• • Type: Interactive/Widget
  • Definition: An individual, selectable option within a Menu or Menubar.
  • Use Case: Set this on each individual clickable option component within a menu structure.
• Meter
• • Type: Document Structure
  • Definition: A static display of a quantity within a known range (like a fuel gauge).
  • Use Case: Set this on a component that displays a non-interactive score or quantity within a defined range.

N

• Navigation
• • Type: Structural Landmark
  • Definition: A collection of links or controls intended for navigating the document or application.
  • Use Case: Set this on containers for sidebars, global menus, or the bottom tab bar.
  • ✨ Bonus Optimization: Provides context for crawlers to understand site structure.
• None
• • Type: Utility/Bypass
  • Definition: Indicates the element has no semantic meaning and should be ignored by the screen reader.
  • Use Case: Set this on decorative icons or visual elements that are not necessary for understanding the content. (Same as Presentation).
• Note
• • Type: Live Region/Status
  • Definition: A section that contains supplementary, non-critical information to the main content.
  • Use Case: Set this on a small text box that contains a legal disclaimer or an important piece of contextual information.

O

• Option
• • Type: Interactive/Widget
  • Definition: A selectable choice item within a widget (like a listbox or select).
  • Use Case: Set this on the individual elements that represent choices within a custom list or dropdown selector.

P

• Presentation
• • Type: Utility/Bypass
  • Definition: Indicates the element is purely decorative and has no semantic meaning. The screen reader should ignore it.
  • Use Case: Set this on any component that is purely for visual styling or layout structure without functional meaning. (Same as None).
• Progressbar
• • Type: Interactive/Widget
  • Definition: An element used to convey the current status of a process.
  • Use Case: Set this on the Progress Bar component to announce the current completion status (e.g., "50% complete").

R

• Radio
• • Type: Interactive/Widget
  • Definition: An item within a set where only one item can be selected at a time.
  • Use Case: Set this on each individual option component within a custom radio button group.
• Radiogroup
• • Type: Interactive/Widget
  • Definition: A grouping container for a set of related Radio buttons.
  • Use Case: Set this on the parent View that contains all the individual radio options.
• Region
• • Type: Structural Landmark
  • Definition: A generic, perceivable section of content that serves no specific landmark purpose but groups related information.
  • Use Case: Use this for major content blocks that you still want the user to be able to navigate to (e.g., a "Trending Items" component).
• Row
• • Type: Table/Grid
  • Definition: A row within a table or grid structure.
  • Use Case: Set this on the component used to build a single row of data.
• Rowgroup
• • Type: Table/Grid
  • Definition: A grouping of one or more rows (e.g., a header group or a footer group).
  • Use Case: Set this on a component used to define the fixed header row(s) or footer row(s) of a long list or table.
• Rowheader
• • Type: Table/Grid
  • Definition: A cell containing header information for a row.
  • Use Case: Set this on the cell that labels the content of the entire row (e.g., the product name in a product list).

S

• Scrollbar
• • Type: Interactive/Widget
  • Definition: A visual mechanism for navigating the content of a scrollable region.
  • Use Case: Use this on the component that serves as a custom vertical or horizontal scroll indicator.
• Searchbox
• • Type: Structural Landmark
  • Definition: A text input dedicated to searching the site or application content.
  • Use Case: Set this on the primary TextInput component used for search functionality.
• Separator
• • Type: Utility/Bypass
  • Definition: A dividing line or character that visually separates content or menu items.
  • Use Case: Set this on a View component used purely for visual separation.
• Slider
• • Type: Interactive/Widget
  • Definition: An input that allows users to select a value from a continuous range.
  • Use Case: Set this on the Price Slider component or a custom component built to adjust volume or size.
• Spinbutton
• • Type: Interactive/Widget
  • Definition: An input that allows users to select a single value from a sequential range via increment/decrement buttons.
  • Use Case: Set this on a custom quantity selector component that uses "plus" and "minus" buttons.
• Status
• • Type: Live Region/Status
  • Definition: A message that presents advisory information that is important but not critical or time-sensitive.
  • Use Case: Set this on a small success notification after an action, such as "Saving complete."
• Summary
• • Type: Document Structure
  • Definition: A short, static text summary of a section or condition.
  • Use Case: Use this for a component that provides a quick overview of a larger collapsed section (e.g., the title of an accordion).
• Switch
• • Type: Interactive/Widget
  • Definition: A two-state toggle button (on or off) used for immediate setting changes.
  • Use Case: Set this on a custom Toggle component built to control an application setting (e.g., "Enable dark mode").

T

• Tab
• • Type: Interactive/Widget
  • Definition: An individual element that displays content when activated, typically part of a Tablist.
  • Use Case: Set this on the individual button component that switches between different tab views.
• Table
• • Type: Table/Grid
  • Definition: A container for data arranged in rows and columns.
  • Use Case: Set this on the outer View that holds all the row and column components.
• Tablist
• • Type: Interactive/Widget
  • Definition: The container for a set of Tab elements.
  • Use Case: Set this on the component that holds all the tab buttons (the tab bar itself).
• Tabpanel
• • Type: Interactive/Widget
  • Definition: A container for the content associated with a Tab.
  • Use Case: Set this on the content View that is conditionally rendered when a specific tab is selected.
• Term
• • Type: Document Structure
  • Definition: The word or phrase being defined in a glossary or list.
  • Use Case: Set this on the component containing the word or phrase being defined.
• Timer
• • Type: Live Region/Status
  • Definition: A numerical counter indicating the amount of elapsed or remaining time.
  • Use Case: Set this on a Text component that displays a dynamic countdown for a limited-time offer.
• Toolbar
• • Type: Interactive/Widget
  • Definition: A collection of commonly used command buttons or controls.
  • Use Case: Set this on a horizontal View component that contains a row of editor controls (e.g., Bold, Italic, Link buttons).
• Tooltip
• • Type: Live Region/Status
  • Definition: A context-sensitive, non-interactive popup that provides descriptive information for an element.
  • Use Case: Set this on a small component that appears when a user hovers over an interactive element.
• Tree
• • Type: Interactive/Widget
  • Definition: A view that presents a hierarchical list of items, such as a file structure or directory.
  • Use Case: Set this on the container component for an expandable, hierarchical navigation structure.
• Treegrid
• • Type: Interactive/Widget
  • Definition: A view that presents a hierarchical list of items in a tabular grid structure.
  • Use Case: Set this on a complex data table where rows can be expanded to reveal nested child rows.
• Treeitem
• • Type: Interactive/Widget
  • Definition: An individual node or item within a Tree or Treegrid.
  • Use Case: Set this on each individual item within a hierarchical list structure.