This page is the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA compliance picture for the DomiDo platform. Accessibility is a baseline requirement, not a feature. The design satisfies every applicable success criterion at the specification level and the implementation maintains compliance through development, sprint reviews, and a release sweep. The audit evaluates the wireframe set, the information architecture, the user-flow diagrams, and the navigation-patterns document against the full WCAG 2.1 success-criteria list at Level A and Level AA. Some criteria — notably colour contrast — are also re-evaluated during high-fidelity design with explicit contrast measurements; others — notably keyboard operability and screen-reader semantics — are tested against the implementation. The sections below group the criteria thematically (perceivable content, structure, colour and contrast, keyboard and pointer, timing and motion, navigation aids, forms and errors, reflow and resize, and status messages) and record how the current design satisfies each.
Every meaningful image carries a text alternative. Gallery cards and design cards carry per-projection alternative text. Empty-state illustrations are described in words. Pipeline stage progress is announced through an Accessible Rich Internet Applications (ARIA) live region. The 3D viewer carries a descriptive fallback with the design name, block count, and dimensions. Admin charts have data-table equivalents — every chart has a parallel table. Decorative icons (the soft leaf motifs in the tab bar, ornamental separators) carry an aria-hidden attribute; informative icons (status badges, alerts) carry an accessible name through aria-label.
Content hierarchies map to heading levels: each numbered priority item from the information architecture becomes a heading at the appropriate depth. The tab structure exposes landmarks. Tables (Bill of Materials, admin data) use the table semantics. The projection-workflow progress dots are a progress indicator with explicit current and maximum values. Comment threads expose a tree role with level attributes that match the visual nesting. The masonry grid is rendered with explicit ordering so the screen-reader sequence matches the visual sequence. Horizontal scroll strips on the Home screen carry a "horizontal gallery" role description. No instruction relies solely on a sensory feature: buttons are labelled with text, the pipeline uses both visual indicators (checkmark, spinner) and text, status badges combine colour-icon-text, the projection-workflow current indicator carries a pulsing animation in addition to its colour, and the admin System Health indicators use labelled text ("Operational", "Degraded", "Down") next to the dots.
Colour is never the only carrier of meaning. Every status badge triple-codes through colour, icon, and text. Every admin health indicator carries text. The projection-workflow current dot has an animation. Status badge colours pass the four-and-a-half-to-one ratio against their backgrounds at body-text sizes and three-to-one for large text. The brand palette is engineered for accessibility — every text-on-background combination meets the AA threshold in both light and dark modes. The non-text contrast for interactive elements meets the three-to-one ratio.
Every interactive element is reachable with the Tab key. The 3D viewer accepts focus, shows a visible focus ring on the canvas, and uses arrow keys for orbit, plus and minus for zoom, Home for reset, and Tab to exit — the canvas does not trap focus. Every viewer instance on Design Review, Product Detail, and Gallery Detail follows the same pattern. The drag-to-reorder pattern in Collections has a keyboard equivalent (focus an item, Shift-Arrow-Up or Shift-Arrow-Down to move). Swipe-to-delete is paired with a keyboard-accessible Delete button. The explode-view slider supports arrow keys with Home and End for the extremes. Admin charts that are interactive expose their data as keyboard-navigable tables.
Every multi-point or path-based gesture has a single-pointer alternative. The Assembly Viewer playback uses buttons. The explode view exposes the slider as both gesture and stepped buttons. The 3D viewer has explicit Reset Camera and Zoom buttons. Every interactive element meets the forty-four-by-forty-four CSS-pixel minimum target. Even within the dense admin tables, hit areas extend to forty-four pixels through padding. Labels and accessible names match: "Add to Cart" reads as "Add to Cart" to a screen reader, not as a different label.
The home carousel pauses on focus and hover and has an explicit play and pause control. Pipeline Monitor and System Health auto-refresh screens carry a pause control and show the last-refresh timestamp. The Server-Sent Events connection shows a "Live updates paused, refreshing periodically" indicator when it falls back to polling. Return-label expiry sends a notification two days before auto-cancellation. The Stripe session timeout offers "Stay logged in" before signing the user out. No content flashes more than three times per second.
Every screen exposes a main landmark. A visually hidden "Skip to main content" link appears on first Tab focus. Admin screens add a "Skip to content" link that bypasses the sidebar. Section headings provide an additional bypass through screen-reader heading navigation. Every route sets a unique document title through the navigation library's title option, and titles are descriptive: "Design Review — DomiDo", "Cart — DomiDo", "Designer profile: [name] — DomiDo".
Focus follows the content hierarchy, not the layout. On multi-column layouts (Design Review with the viewer on the left and the Bill of Materials on the right) focus flows by priority. Modals receive focus on the heading and trap focus until Escape or an explicit dismissal. Every interactive element has a visible focus indicator: a two-pixel sage-green ring outside the element with a one-pixel offset, meeting the three-to-one non-text contrast against every background. Focus indicators are never removed; they are always at least the minimum size and never obscured by other elements. Every link's purpose is clear from its text or from its enclosing context. The page language is set on the document root through the application shell — the Open Authorisation surface and the United Kingdom delivery flows are English by default, and multi-language support routes through a separate translation system that maintains the language attribute.
Every form field that fails validation receives an inline error message with the field name, the constraint violated, and a constructive suggestion. The error message is associated with the field through aria-describedby and announced to screen readers through aria-live="polite". Destructive actions (delete account, cancel pre-order, refund) require explicit confirmation with a typed string for the strongest actions. Payment actions (the cart checkout) summarise the order — items, total, shipping address — on a review step before the user commits. Every form field has a persistent visible label above the field. Placeholder text is supplementary, never a substitute for a label. Help text sits beneath the field. Required fields are marked with both an asterisk and the word "required" in the accessible name.
The tab bar is in the same place on every screen. Components with the same function (Add to Cart, Submit Return, Generate) carry the same label and the same icon everywhere. The same colour and icon combination encodes the same status everywhere.
Content reflows for a single column at three-hundred-and-twenty CSS-pixel width and the user can read at four-hundred per cent zoom without horizontal scrolling for vertical text. The application supports portrait and landscape on every device. No essential content is hidden by an orientation lock. Text resizes to two hundred per cent without loss of content or functionality. Line-height, paragraph spacing, letter-spacing, and word-spacing user overrides do not break the layout — every container accommodates extra space.
Every status message — toast, banner, form error, save-state indicator — is exposed to assistive technology through an aria-live region with the appropriate politeness. Toast messages use role="status" and aria-live="polite"; errors use aria-live="assertive".
The systematic audit covered roughly forty applicable success criteria. Initial review identified three Level A or AA failures (Use of Colour, Target Size, Focus Visible) and nineteen partial passes covering colour-only indicators on admin health, keyboard accessibility of the 3D viewer, the home carousel pause control, the focus order on multi-column layouts, and the focus management for route changes. Every failure and every partial pass has been resolved through the design responses summarised above. The platform is engineered for full Level AA compliance at the specification level; implementation maintains compliance through automated linting, accessibility regression tests, and screen-reader testing with VoiceOver on iOS and TalkBack on Android.