Accessibility

Built-in WCAG AAA contrast ratios, intentional screen reader semantics, predictable focus choreography, and generous touch ergonomics ensuring software without barriers.

WCAG AAA Standards

11-Step Palette Contrast

Screen Reader Semantics

Z & F Focus Traversal

48px Touch Ergonomics

W3C ARIA Laws

Contrast & Color Architecture

Accessibility starts at the optical foundation. Elementa pairs its five distinctive accent colors against the 11-step neutral surface ramps of Amber White (light base) and Gun Metal (dark base) to strictly enforce approved AA and AAA contrast tiers.

Select Elementa Accent Color:

Target Surface Ramp:

Live Component Preview · Terracotta Rust on Amber White Base

Terracotta Rust Tag

System Neutral Badge

Surface Step	Visual Render Preview	Contrast Ratio	Compliance Mark	Architectural Guidance
amber-white-100	Elementa UI Text	5.2:1	Approved AA	Approved AA for standard body text
amber-white-200	Elementa UI Text	5.0:1	Approved AA	Approved AA for UI components
amber-white-300	Elementa UI Text	4.8:1	Approved AA	Approved AA for cards
amber-white-400	Elementa UI Text	4.5:1	Approved AA	Approved AA boundary
amber-white-500	Elementa UI Text	4.1:1	Cancelled	Borderline: use rust-700 instead
amber-white-600	Elementa UI Text	3.6:1	Cancelled	Large headings only
amber-white-700	Elementa UI Text	2.6:1	Cancelled	Insufficient
amber-white-800	Elementa UI Text	1.8:1	Cancelled	Inversion threshold
amber-white-900	Elementa UI Text	2.2:1	Cancelled	Insufficient
amber-white-1000	Elementa UI Text	3.6:1	Cancelled	Requires rust-200 tint
amber-white-1100	Elementa UI Text	5.8:1	Approved AA	Approved AA for dark contrast

Screen Reader Architecture

Screen readers translate visual user interfaces into a sequential audio stream. Elementa enforces semantic landmarks, programmatic label binding, and intentional live region announcements across all components.

Semantic Landmarks

Native Tags Over Divs

Screen readers provide rotor navigation menus enabling assistive users to jump directly between <header>, <nav>, <main>, and <h1>–<h3> landmarks. Never replace semantic buttons or landmarks with generic divs.

Label Association

Programmatic Binding

Input elements must link unambiguously with their textual labels via htmlFor/id binding or aria-labelledby. Placeholder text is never an acceptable substitute for a permanent programmatic label.

Live Regions

Asynchronous Audio Telemetry

When asynchronous background jobs finish, tables reload, or toast alerts appear, users cannot observe peripheral shifts without intentional aria-live="polite" announcements.

Live Screen Reader Speech Output Simulator

Interact with the Elementa Form Field below to inspect the verbatim speech synthesizer stream generated for assistive technologies.

Live UI Surface

Interactive

VoiceOver Audio Stream

aria-live: polite

Synthesizer Speaking:

“Cluster Identifier, required edit text. Specifies the Kubernetes cluster routing target. Current value: us-east-cluster.”

Assistant announces role, accessible name, current state, and description in chronological sequence.

Canonical Code Implementation:

TYPESCRIPT

cluster-config-form.tsx

1<Field id="cluster-identifier">
2    <FieldLabel>
3        Cluster Identifier <Text className="text-text-destructive" variant={TextVariant.Caption}>*</Text>
4    </FieldLabel>
5    <Input
6        aria-describedby="cluster-hint"
7        aria-required="true"
8        aria-invalid={hasError}
9    />
10    <FieldDescription id="cluster-hint">
11        Specifies the Kubernetes cluster routing target. Must be lowercase.
12    </FieldDescription>
13</Field>

Focus Traversal & Tab Orders

Power users and assistive keyboard operators navigate exclusively through the Tab sequence. Elementa standardizes keyboard traversal around three predictable spatial trajectories: F-Pattern, Z-Pattern, and Line-Based models.

F-Pattern Focus Traversal

Traverses horizontally across the global header, drops down the navigation spine, sweeps across the action bar, and anchors on primary data rows.

Recommended Context:

Data Dashboards, Split-Pane Consoles, Analytical Workspaces

⌘K

Workspaces

us-east-cluster-primary

99.98% Uptime

Touch Targets & Hit Cushions

Visual compactness must never compromise tactile usability. On touchscreen workstations, tablets, and phones, fat finger pad variance and jitter make clicking small buttons frustrating. Elementa guarantees that even if a visual component is compact (32px or 24px), its physical click target expands to at least 48px × 48px with compliant cushions.

Interactive Touch Target Visualizer

Toggle touch envelope bounds to reveal the invisible 48px hit areas wrapping compact visual primitives.

Standard Button

space-10

Visual: 40px · Touch Target: 48px

Compact Icon Trigger

space-8

Visual: 32px · Touch Target: 48px

Data Table Dismiss

space-6

Visual: 24px · Touch Target: 48px

Form Boolean Switch

space-6

Visual: 24px · Touch Target: 48px

Component Profile	Visual Dimension	Physical Hit Area	Safety Separation	Architectural Role
Primary Button	40px height	48px minimum	8px margin	Master forms, dialog actions, major conversion paths
Icon Button (Toolbar)	32px × 32px	48px × 48px	12px margin	Header bars, floating utility panels, table actions
List Item / Table Row	36px height	48px height	0px (Border boundary)	Dense navigation drawers, settings records, telemetry
Checkbox / Radio Input	16px × 16px	44px × 44px	8px margin	Filter multi-select lists, permission matrix grids
Form Field Input	40px height	48px height	16px margin	Text inputs, select triggers, date pickers

Core ARIA Principles & Operational Rules

W3C Accessible Rich Internet Applications (WAI-ARIA) specifies how to bridge gaps where standard HTML semantics fall short. Adhere strictly to the five foundational rules below when authoring custom components in Elementa.

The 5 Foundational Laws of ARIA in Elementa

Native HTML elements (<button>, <input>, <select>, <dialog>) provide keyboard event listeners (Enter, Space), accessibility tree roles, and platform focus rings out of the box. ARIA markup only describes semantics—it adds zero native keyboard behavior or focus trapping by itself.

Prohibited Pattern

<div role="button" tabindex="0" onclick="submit()">Submit</div>

Elementa Canonical

<Button type="submit">Submit</Button>

UI Elements

Design System

License

Changelog

Accessibility

Built-in WCAG AAA contrast ratios, intentional screen reader semantics, predictable focus choreography, and generous touch ergonomics ensuring software without barriers.

Contrast & Color Architecture

Accessibility starts at the optical foundation. Elementa pairs its five distinctive accent colors against the 11-step neutral surface ramps of Amber White (light base) and Gun Metal (dark base) to strictly enforce approved AA and AAA contrast tiers.

Select Elementa Accent Color:

Target Surface Ramp:

Surface Step

Visual Render Preview

Contrast Ratio

Compliance Mark

Architectural Guidance

Screen Reader Architecture

Screen readers translate visual user interfaces into a sequential audio stream. Elementa enforces semantic landmarks, programmatic label binding, and intentional live region announcements across all components.

Native Tags Over Divs

Programmatic Binding

Asynchronous Audio Telemetry

Live Screen Reader Speech Output Simulator

Canonical Code Implementation:

Focus Traversal & Tab Orders

Power users and assistive keyboard operators navigate exclusively through the Tab sequence. Elementa standardizes keyboard traversal around three predictable spatial trajectories: F-Pattern, Z-Pattern, and Line-Based models.

F-Pattern Focus Traversal

Touch Targets & Hit Cushions

Interactive Touch Target Visualizer

Component Profile

Visual Dimension

Physical Hit Area

Safety Separation

Architectural Role

Core ARIA Principles & Operational Rules

W3C Accessible Rich Internet Applications (WAI-ARIA) specifies how to bridge gaps where standard HTML semantics fall short. Adhere strictly to the five foundational rules below when authoring custom components in Elementa.

The 5 Foundational Laws of ARIA in Elementa

Contrast & Color Architecture

Accessibility starts at the optical foundation. Elementa pairs its five distinctive accent colors against the 11-step neutral surface ramps of Amber White (light base) and Gun Metal (dark base) to strictly enforce approved AA and AAA contrast tiers.

Select Elementa Accent Color:

Target Surface Ramp:

Surface Step

Visual Render Preview

Contrast Ratio

Compliance Mark

Architectural Guidance

Screen Reader Architecture

Screen readers translate visual user interfaces into a sequential audio stream. Elementa enforces semantic landmarks, programmatic label binding, and intentional live region announcements across all components.

Native Tags Over Divs

Programmatic Binding

Asynchronous Audio Telemetry

Live Screen Reader Speech Output Simulator

Canonical Code Implementation:

Focus Traversal & Tab Orders

Power users and assistive keyboard operators navigate exclusively through the Tab sequence. Elementa standardizes keyboard traversal around three predictable spatial trajectories: F-Pattern, Z-Pattern, and Line-Based models.

F-Pattern Focus Traversal

Touch Targets & Hit Cushions

Interactive Touch Target Visualizer

Component Profile

Visual Dimension

Physical Hit Area

Safety Separation

Architectural Role

Core ARIA Principles & Operational Rules

W3C Accessible Rich Internet Applications (WAI-ARIA) specifies how to bridge gaps where standard HTML semantics fall short. Adhere strictly to the five foundational rules below when authoring custom components in Elementa.

The 5 Foundational Laws of ARIA in Elementa

Rule 01First Rule of ARIA: Native HTML FirstFundamental Law

Rule 02Dynamic State SynchronizationState Integrity

Rule 03Keyboard Operability & Roving TabindexKeyboard Parity

Rule 04Structural Landmarks & Region SignpostingInformation Architecture

Rule 05Modal Dialog Focus Containment & RestorationFocus Trapping