🏠 Overview › 🧩 Components ›🧩 A11y Primitives

A11y Primitives

Component Detail

User Interface medium complexity Shared Component mobile
0
Dependencies
0
Dependents
0
Entities
0
Integrations

Description

Foundational accessibility component library providing pre-built, WCAG 2.2 AA compliant UI primitives such as buttons, inputs, focus rings, and live regions. Every primitive ships with correct semantic roles, ARIA attributes, minimum 24x24 CSS pixel touch targets, and visible focus indicators by default.

Feature: WCAG 2.2 AA Compliance

a11y-primitives

Sources & reasoning

Section 1.2 mandates WCAG 2.2 AA from day one with explicit requirements (contrast, target size, keyboard nav, drag alternatives). The priority matrix in §4 confirms MUST HAVE / Fase 1 for all five tenants. Phase 1 in §5 maps to the MVP phase name.

  • Alle fire organisasjoner har brukere med svært ulike forutsetninger... Appen SKAL oppfylle WCAG 2.2 nivå AA som minimumskrav for alle skjermer og interaksjoner - fra dag én, for alle organisasjoner.
  • Universell utforming / tilgjengelighet (WCAG 2.2 AA) | ✓ | ✓ | ✓ | ✓ | ✓ | MUST HAVE | 1

Responsibilities

  • Provide accessible button, input, link, and form primitives with built-in ARIA labels and roles
  • Enforce minimum 4.5:1 text contrast and 3:1 UI contrast via design tokens
  • Render visible focus indicators and support keyboard navigation across all interactive elements
  • Expose live region and announcement helpers for screen reader feedback (VoiceOver/JAWS)
  • Supply scalable typography tokens supporting up to 200% zoom without layout breakage

Interfaces

AccessibleButton(label, onPress, hint?): ReactNode
AccessibleInput(label, value, onChange, error?): ReactNode
FocusRing(children, visible): ReactNode
LiveRegion(message, politeness): ReactNode
useA11yAnnouncement(message): void