Accessibility
Accessibility is a first-class concern in Orbit — not a section added later. This page documents the accessibility foundations that apply across every component and pattern in the system.
Accessibility documentation is a priority for the next release. Request it in #platform-design-system if your team needs specific guidance urgently.
Orbit is committed to WCAG 2.1 AA as a minimum across all surfaces. The sections below outline the scope of accessibility guidance that will be documented here. Where you need immediate guidance before full documentation is available, the WCAG 2.1 Quick Reference and The A11Y Project are reliable starting points.
Colour and contrast
WCAG 2.1 AA requires 4.5:1 for normal text, 3:1 for large text and UI components, and 3:1 for non-text UI elements. Every token in the Orbit colour system has been evaluated against these requirements. Full contrast tables and usage guidance coming in the next release cycle.
Focus indicators
All interactive elements in Open Point must have a visible focus indicator with a minimum 3px outline using color-interactive-focus (#BACD42). Focus indicators must be clearly distinguishable from the surrounding background. Documentation of focus ring specifications per component coming in the next release cycle.
Motion and reduced motion
Orbit respects prefers-reduced-motion throughout. Any animations that convey state or meaning must have a non-animated equivalent. Decorative animations must be suppressed entirely under prefers-reduced-motion. Full animation and motion guidelines coming in the next release cycle.
Touch targets
Every interactive element must have a minimum 44×44px touch target. This applies to buttons, links, checkboxes, radio buttons, and all other controls. Where the visual element is smaller, the touch target must be extended invisibly (e.g. via padding). Documentation of component-specific touch target requirements coming in the next release cycle.
Reading order
The visual reading order and DOM order must match. Screen readers and keyboard navigation follow DOM order, not visual layout. Content positioned with CSS grid or flexbox must not create a mismatch. Full guidance on layout and reading order coming in the next release cycle.
Alt text
All meaningful images require alternative text. Decorative images require empty alt attributes (alt=""). For complex images (charts, diagrams), alt text alone is rarely sufficient — a data table or detailed description must be provided nearby or linked from the image. Full alt text guidance coming in the next release cycle.
Form accessibility
Every form field must have a programmatically associated label (not just a placeholder). Error messages must be associated with their field via aria-describedby. Required fields must be indicated in a way that does not rely on colour alone. Full form accessibility guidance coming in the next release cycle.
Was this page helpful?