# Accessibility WCAG 2.2 AA guidance for the Actian DS. Source: [Accessibility page](https://www.figma.com/design/l8biHxfarNi1I2RMvVxVOK?node-id=12685:19373) Generated: 2026-03-26 --- > Accessibility ensures our products are usable by everyone. We aim to meet WCAG 2.2 AA standards across all experiences. > > **Resources:** > - [WCAG 2.2 guidelines](https://www.w3.org/TR/WCAG22/) > - [WebAIM Accessibility Guidelines](https://webaim.org/) > - [Deque University Free Accessibility Courses](https://dequeuniversity.com/) > > **Focus on section:** > - Text Alternatives (1.1) — Alt text for images, icons, and media. > - Time-based Media (1.2) — Captions, transcripts, audio descriptions. > - Adaptable / Distinguishable Content (1.3 & 1.4) — Color contrast, readable text, resizing, focus indicators. > - Keyboard & Navigation (2.1, 2.4) — Keyboard operability, focus order, skip links. > - Input & Interaction (2.2, 2.3) — Dragging alternatives, timing, animations. > - Error Prevention & Feedback (3.3) — Forms, validation, error messages. --- ## WCAG Principles {#wcag-principles} ### WCAG 2.2 AA Principles | Principle | Requirement | |-----------|-------------| | **Perceivable** | Users must be able to see or hear content (text, images, video) clearly | | **Operable** | Users must be able to interact with all UI elements (keyboard, gestures) | | **Understandable** | Content and interface must be predictable and readable | | **Robust** | Content must work across browsers, assistive technologies, and future devices | --- ## Color & Contrast {#color-contrast} | Check | Ratio | |-------|-------| | Body text (< 18pt) | **4.5:1** minimum | | Large text (≥ 18pt or 14pt bold) | **3:1** minimum | | UI components, icons, focus indicators | **3:1** minimum | Rules: - Use accessible color palettes and tokens — never hardcode - Do not rely on color alone to convey meaning - Provide secondary indicators (icons, text, patterns) --- ## Typography & Readability {#typography-readability} - Default body text size is **14px** - Minimum body text size is **12px** - **11px** is only acceptable for non-essential UI - Use defined type styles (avoid light weight) - Maintain readable line height and spacing - Text line length is **544px** at max with 16px text - Text line length is **480px** at max with 14px text - Text line length is **424px** at max with 12px text - Avoid placeholder-only labels - Avoid long blocks of dense text - Text must be resizable up to 200% without loss of content - Paragraph width: 60–75 characters max for readability --- ## Layout & Responsiveness {#layout-responsiveness} - Content reflows at **400% zoom** - No horizontal scrolling for text content - Logical reading and focus order preserved - Touch targets: **44px ideal / 24px minimum** with sufficient spacing (WCAG 2.5.8) - No content clipped or hidden at 200% zoom --- ## Keyboard & Focus {#keyboard-focus} ### Keyboard - All interactive elements are keyboard accessible - No keyboard traps - Logical focus order ### Key Rules - Use `Tab` for forward and `Shift+Tab` for backward - Only focusable items that are visually visible should be in the tab order - Use `Enter` or `Space` to trigger links and expand/collapse buttons - Support `Enter` or `Space` to activate links and toggles - `Esc` should close open sub-menus or an expanded sidebar ### Focus - Focus styles must be visible - Focus must not be obscured by sticky UI - Never remove focus outlines without replacement - Focus indicator: **2px solid `--zen-color-interactive-focused-stroke-default`** (#000000), never suppressed - `:focus-visible` must always be styled — never use `outline: none` without a replacement --- ## Interactions {#interactions} - Dragging interactions should also provide single-pointer or keyboard alternative. A single-pointer alternative means the action can be done with simple clicks or taps (no holding, no dragging). - Avoid time limits. Provide extensions if needed. - Tooltips must be accessible also by keyboard. --- ## Required States {#required-states} Every interactive component must have these states designed: | State | Requirement | |-------|-------------| | **Default** | Base visual appearance | | **Hover** | Visual change on mouse hover | | **Focus** | Visible focus indicator (keyboard) — never remove | | **Active/Pressed** | Visual feedback during click/tap | | **Disabled** | Visually distinct, `aria-disabled="true"` preferred over HTML `disabled` | | **Error / Success** | For form elements — error message + visual indicator | --- ## Feedback & Errors {#feedback-errors} - **Explain what happened** and **how to fix it** - Error messages appear **near the field** they relate to - Use `aria-live="polite"` for non-critical status updates - Use `aria-live="assertive"` only for critical, time-sensitive errors - Status changes must not rely on color alone — include icon + text - Toasts/alerts auto-dismiss: minimum **5 seconds** display time --- ## Forms & Data Entry {#forms-data-entry} - Labels are **always visible** (no placeholder-only labels) - Required vs optional is **clearly indicated** (asterisk `*` for required) - Errors appear **near the field** with explanation - Inline validation is helpful, not disruptive - Timeouts include **warnings and recovery options** - Group related fields with `fieldset`/`legend` - Logical tab order follows visual layout --- ## Motion & Media {#motion-media} - Motion is never the only feedback - Reduce motion or provide toggle for sensitive users - Avoid auto-play without controls - Keep animations subtle and purposeful --- ## Component-Specific Checklists {#component-specific-checklists} ### P0 Critical: Function & Infrastructure > Critical items are the structural essentials. If Navigation, Forms, or Buttons fail, the user is physically blocked. These are the paths and entry points required to actually use the product. > > - **Navigation:** Defines the entire site structure and landmarks. > - **Forms (Patterns & Inputs):** The primary way users provide data. > - **Modals:** High risk for focus traps and keyboard locking. > - **Buttons:** The primary triggers for all actions. --- #### Button > Buttons translate user intent into system action. If buttons fail (are unclear or broken), the workflow hits a dead end, leaving users physically unable to complete tasks. **Accessibility checklist** Button semantics - [ ] Uses a native button element or proper button role - [ ] Name clearly describes the action (verb-based) Keyboard interaction - [ ] Focusable via Tab - [ ] Activated with Enter and Space - [ ] Disabled buttons are not focusable Target size - [ ] Recommended: 44x44 px minimum - [ ] Absolute minimum: 24x24 px with sufficient spacing - [ ] Hit area is not reduced by visual styling States - [ ] Default, hover, focus, active, disabled states are defined - [ ] Loading state prevents duplicate activation - [ ] Disabled state is visually and programmatically disabled Icon-only buttons - [ ] Has an accessible name (e.g. aria-label) - [ ] Purpose is understandable without visual context Toggle buttons - [ ] Toggle state is programmatically exposed - [ ] State change is perceivable without color alone Screen reader expectations - [ ] Announced as "button" with a clear name - [ ] Loading or state changes are announced when relevant - [ ] Toggle buttons announce current state (pressed / not pressed) Do not - [ ] Do not use links for actions - [ ] Do not rely on hover only - [ ] Do not remove focus styles **WCAG criteria:** 2.1.1 Keyboard, 2.4.3 Focus Order, 2.4.7 Focus Visible, 3.3.2 Labels or Instructions, 4.1.2 Name Role Value, 1.4.1 Use of Color, 2.5.5 Target Size (2.2) --- #### Navigation (header, sidebar, breadcrumbs) > Navigation patterns define the structural map of your product. If navigation fails, users feel disoriented and abandon the application because they literally cannot find the features they need to do their job. **Accessibility checklist** General Navigation - [ ] Landmark roles are used correctly (`