Take part in shaping Wonders
Dynamic Content & ARIA
Live regions use aria-live where needed (e.g. form validation, async updates) Modals use role="dialog" and aria-modal="true" ARIA roles, states, and properties are used appropriately (but not overused) Tooltips, dropdowns, and popovers are keyboard-accessible and screen-reader-friendly
Buttons, Links & Controls
Buttons use , not or with click handlers Each button/link has a clear and unique label (no duplicate “Click here”) Icons or SVGs have accessible names (aria-label, title, or hidden text) Toggle buttons (e.g. hide/show password) use aria-pressed or similar
Ensure Global App-Level Accessibility
All pages have a unique tag that updates per view Landmarks used (e.g., , , , ) for screen readers Language is declared in Zoom: App functions correctly up to 200% zoom without horizontal scroll No reliance on color alone to convey information
Create Accessibility Policies
Define and create accessibility policies and best practices to operationalize accessible product updates during design & development.
Ensure Accessibility of Forms & Inputs
Ensure full integration of ARIA labels across the UI. All inputs have associated elements or aria-label Error messages are programmatically associated with inputs (aria-describedby) Required fields are indicated both visually and programmatically Form validation errors are announced to screen readers Autofocus is not misused (especially for modal inputs)
Integrate Dyslexia-Friendly fonts
Enable user choice of fonts for dyslexic users. Integrating OpenDyslexic https://opendyslexic.org/
Ensure Color Contrast
Ensure that color contrast complies with contrast ratios AA+ under WGAC. Text has contrast ratio of at least 4.5:1 (normal text) or 3:1 (large text) UI components (borders, icons, states) have 3:1 contrast minimum Colorblind-friendly palettes used (or alternate patterns/icons for alerts, charts)
Keyboard navigation
Enable navigation by keyboard and with screenreaders. All interactive elements (links, buttons, form inputs) are reachable via Tab Tab order is logical and intuitive :focus state is visible and styled (not removed by CSS resets) Modal dialogs trap focus while open, and return focus when closed Skip link available to jump to main content (Skip to content)