Accessibility

Overview

FlowX.AI provides WCAG 2.1 Level AA accessibility compliance for applications built with the platform. Accessibility features are configured in the UI Designer and automatically applied by the renderers at runtime across web (Angular, React), iOS, and Android platforms.

Screen readers

ARIA labels, hints, roles, and live regions automatically mapped to UI components

Keyboard navigation

Full keyboard support with visible focus indicators and logical tab order

Cross-platform

Web, iOS (VoiceOver), and Android (TalkBack) support from a single configuration

Configuring accessibility in UI Designer

Accessibility properties are configured in the Settings tab of the component configuration panel. Properties are saved in platformDisplayOptions.flowxProps.accessibility for the generic platform and apply across all renderers.

{
  "platformsDisplayOptions": [
    {
      "flowxProps": {
        "accessibility": {
          "label": "",
          "decorative": false,
          "altText": "",
          "role": ""
        }
      },
      "platform": "generic"
    }
  ]
}

Available properties

Property	Description
label	Accessibility label announced by screen readers. Use when the component has no visible label or needs a different label for assistive technologies.
decorative	Marks the element as decorative so it is ignored by assistive technologies.
altText	Short descriptive text alternative for images, announced by screen readers.
role	Landmark role for navigation areas. Options: `main`, `navigation`, `search`, `form`, `header`, `footer`, `aside`, `region`, `dialogue`, `alertdialogue`, `section`.

Accessibility properties by component

Not all components expose the same accessibility properties. The SDK automatically reads certain existing properties (like label and placeholder text) and exposes them to assistive technologies. Additional properties can be configured where needed.

Form elements

Component	Auto-read by SDK	Configurable in Designer
Input	label, text, placeholder, helper, error	accessibility label
Single select	label, text, placeholder, helper, error	accessibility label
Multi select	label, text, placeholder, helper, error	accessibility label
Date picker	label, text, placeholder, helper, error	accessibility label
Text area	label, text, placeholder, helper, error	accessibility label
Slider	label, value, helper, error	accessibility label
Checkbox	label, text, helper, error	accessibility label
Radio button	label, text, helper, error	accessibility label
Switch	label, text, helper, error	accessibility label
Segmented button	label, text, helper, error	accessibility label

Use the accessibility label when the component has no visible label or text, or when you need a different label for assistive technologies.

Interactive elements

Component	Auto-read by SDK	Configurable in Designer
Button	label	accessibility label (icon-only)
File upload	label	accessibility label (icon-only)

For icon-only buttons, always set an accessibility label so screen readers can announce the button’s purpose.

Display elements

Component	Auto-read by SDK	Configurable in Designer
Text	text	decorative
Link	text	decorative
Image	—	alt text, decorative
Message	text	decorative
Card	title, subtitle	—
Form	title	—
File preview	title, subtitle	—

Component	Auto-read by SDK	Configurable in Designer
Step	title	accessibility label
Tab	title	accessibility label
Modal	title	accessibility label

Use the accessibility label for navigation areas when the area has no visible label or text, or when a different label is needed for assistive technologies.

Landmark roles

Navigation areas are assigned landmark roles that help screen reader users understand the page structure and navigate between regions.

Default roles

Navigation area	Default role	Configurable
Page	`main`	No
Stepper	`navigation`	No
Step	`navigation`	No
Tabbar	`navigation`	No
Tab	`navigation`	No
Modal	`dialogue`	No
Zone	`section`	Yes

Zone roles

Zones can be configured with a landmark role to convey their purpose to assistive technologies:

main — primary content area
section — generic section (default)
nav — navigation region
header — page or section header
footer — page or section footer
aside — complementary content

FlowX.AI applications support full keyboard navigation with visible focus indicators. Focus is indicated by an outline around the active element.

General patterns

Key	Action
`Tab`	Move focus to the next interactive element
`Shift + Tab`	Move focus to the previous interactive element
`Enter` / `Space`	Activate the focused element (button, link, toggle)
`Escape`	Close modal or dismiss popup
Arrow keys	Navigate within a component (radio options, slider, select list, tabs)

Component-specific behavior

Button / File upload

Tab focuses the element (skipped if disabled)
Space / Enter executes the action

Input / Text area

Tab focuses the element and enables typing (skipped if disabled)
Arrow keys move within the text
If the element has a clear button, Tab navigates to it; Space / Enter clears the value

Checkbox

Tab focuses the first option, then subsequent options
Space / Enter selects or deselects the focused option
After the last option, Tab moves to the next element

Radio / Segmented button

Tab focuses the selected option (or the first option if none selected)
Down / Right arrow moves focus forward and selects
Up / Left arrow moves focus backward and selects
Navigation wraps cyclically through options

Switch

Tab focuses the element (skipped if disabled)
Space / Enter toggles the value

Slider

Tab focuses the slider knob
Up / Right arrow increases by one step
Down / Left arrow decreases by one step

Select

Tab focuses the element and enables typing (skipped if disabled)
Up / Down arrow opens the listbox
In the listbox: arrows navigate options, Enter selects and closes, Escape closes
Focus remains on the input while the listbox is open
If the element has a clear button, Tab navigates to it

Multi select

Tab focuses the element and enables typing (skipped if disabled)
In the listbox: arrows navigate options, Enter selects (without closing), Escape closes
Focus remains on the input while the listbox is open

Tabs

Tab moves focus to the active tab header
Left / Right arrow navigates between tab headers cyclically
Space / Enter activates the focused tab
Tab from the active tab header moves focus to the first focusable element in the tab content

Modal

Accordion

Tab focuses the accordion trigger
Enter / Space expands or collapses the section
When expanded, Tab moves to the first focusable element in the content
When collapsed, Tab moves to the next accordion header cyclically

FlowX.AI renderers automatically apply ARIA attributes to components based on their type and configuration. Many attributes are auto-bound — no manual configuration needed.

Auto-bound ARIA attributes

Form elements

Attribute	Applied to
`aria-describedby`	Helper text, error messages
`aria-required`	Required fields
`aria-invalid`	Fields with validation errors
`aria-checked`	Checkbox, radio, switch state
`aria-selected`	Select option state
`aria-expanded`	Select/multiselect dropdown state
`aria-autocomplete`	Select search input
`aria-valuemin`, `aria-valuemax`, `aria-valuenow`	Slider

Navigation and containers

Attribute	Applied to
`role="tablist"`	Tab container, stepper
`role="tab"`, `aria-controls`, `aria-selected`	Individual tabs
`role="tabpanel"`, `aria-describedby`	Tab content panels
`role="dialog"`, `aria-modal`	Modals
`aria-labelledby`	Modal (references title)
`aria-current`	Active step in stepper
`aria-expanded`	Accordion headers
`role="radiogroup"`	Radio/segmented button container

Interactive elements

Attribute	Applied to
`aria-label`	Buttons, links (from label/text)
`aria-disabled`	Disabled buttons and inputs
`aria-pressed`	Toggle buttons
`role="button"` / `role="link"`	Buttons and links
`aria-live="polite"`	Message components

Display elements

Attribute	Applied to
`alt`	Images (from alt text property)
`aria-hidden="true"`	Decorative images, text, links, messages

Platform support

Implementation status

Feature	Web (Angular/React)	iOS (VoiceOver)	Android (TalkBack)
Accessibility labels	✅	✅	✅
Decorative elements	✅	✅	✅
Image alt text	✅	✅	✅
Landmark roles	✅	—	—
Keyboard navigation	✅	N/A	N/A
ARIA auto-binding	✅	N/A	N/A
Form elements (screen reader)	✅	✅	✅
Date picker (screen reader)	🚧	🚧	🚧
Single select (screen reader)	🚧	🚧	🚧
Multi select (screen reader)	🚧	🚧	🚧

🚧 indicates components with partial screen reader support that is actively being improved.

Version availability

Platform	Accessibility feature	Available since
Web (Angular/React)	WCAG 2.1 Level AA compliance	FlowX.AI 5.1.1
Android	Accessibility properties from UI Designer	FlowX.AI 5.1.2
iOS	VoiceOver support	FlowX.AI 5.1.3

Client responsibilities

FlowX.AI handles accessibility for platform-rendered components automatically. However, some accessibility aspects depend on the container application and content authored by the client.

What FlowX.AI handles

ARIA attributes on all rendered components
Keyboard navigation and focus management
Screen reader announcements for form states (errors, required fields)
Focus trapping in modals
Landmark roles for navigation areas

What clients are responsible for

HTML and page structure

Set the lang attribute on the html element for correct screen reader pronunciation
Provide a unique title for each page
Ensure viewport zoom is not disabled (user-scalable=yes)
Use logical heading hierarchy (h1 → h2 → h3, no skipping levels)

Content authoring

Write descriptive button and link labels (avoid “click here”, “read more”)
Provide meaningful alt text for images
Mark decorative elements appropriately
Use plain language (8th grade reading level)
Use left-aligned text for LTR languages, right-aligned for RTL

Color and contrast

Normal text: minimum 4.5:1 contrast ratio
Large text: minimum 3:1 contrast ratio
Icons and UI elements: minimum 3:1 contrast ratio
Do not use color as the only way to convey information
Ensure error, warning, and success states are distinguishable without color

Media and animation

Avoid autoplaying media
Provide captions for video content
Avoid strobing or flashing animations (seizure triggers)
Respect prefers-reduced-motion for custom animations

Mobile considerations

Support both portrait and landscape orientation
Ensure touch targets are large enough for easy activation
Provide sufficient space between interactive elements for scrolling
Avoid horizontal scrolling

Testing recommendations

Keyboard testing

Navigate your application using only the keyboard. Verify that all interactive elements are reachable via Tab, that focus is visible, and that focus order matches the visual layout.

Screen reader testing

Test with VoiceOver (macOS/iOS), TalkBack (Android), or NVDA/JAWS (Windows). Verify labels are announced correctly and form states are communicated.

Automated testing

Use axe-core or similar tools in your CI pipeline to catch common accessibility issues. Storybook’s addon-a11y plugin provides real-time feedback during development.

High contrast modes

Activate Windows High Contrast mode or inverted colors. Verify content is still legible and interactive elements are distinguishable.

Platform considerations

Platform-specific configuration for web, iOS, and Android renderers

UI Designer

Overview of the UI Designer and component configuration

Localization and i18n

Language, region, and formatting configuration

WCAG 2.1 Guidelines

Official W3C quick reference for WCAG 2.1 success criteria

Getting Started

Concepts

FlowX.AI Designer

Building projects

Building blocks

Platform deep dive

API reference

​Overview

Screen readers

Keyboard navigation

Cross-platform

​Configuring accessibility in UI Designer

​Available properties

​Accessibility properties by component

​Form elements

​Interactive elements

​Display elements

​Navigation areas

​Landmark roles

​Default roles

​Zone roles

​Keyboard navigation

​General patterns

​Component-specific behavior

​Screen reader support

​Auto-bound ARIA attributes

​Platform support

​Implementation status

​Version availability

​Client responsibilities

​What FlowX.AI handles

​What clients are responsible for

​Testing recommendations

Keyboard testing

Screen reader testing

Automated testing

High contrast modes

​Related resources

Platform considerations

UI Designer

Localization and i18n

WCAG 2.1 Guidelines

Overview

Configuring accessibility in UI Designer

Available properties

Accessibility properties by component

Form elements

Interactive elements

Display elements

Navigation areas

Landmark roles

Default roles

Zone roles

Keyboard navigation

General patterns

Component-specific behavior

Screen reader support

Auto-bound ARIA attributes

Platform support

Implementation status

Version availability

Client responsibilities

What FlowX.AI handles

What clients are responsible for

Testing recommendations

Related resources