Skip to content
Browse foundations

Foundation

Accessibility

Ordering.co targets WCAG 2.2 AA. Access is a system property shared by design, content, engineering, and release review.

01 / The decision

Operational confidence must be perceivable and controllable

Density and brand expression never override access. Each measure below belongs to a visible design decision, not only a compliance table.

4.5:1

Normal text

Body copy, labels, and control text use tested semantic pairs.

3:1

UI and focus

Control boundaries, large text, state graphics, and focus remain perceivable.

44px

Touch target

Compact visible controls keep a minimum interactive envelope.

320px

Reflow

The page preserves information and one-direction reading at narrow width.

02 / See it in use

A complete accessible form flow

The specimen combines a persistent label, help text, governed input, precise error, announced status, and native form action. Submit it empty, then enter an https:// URL.

Product flow · working specimen

Add an event endpoint

Keyboard ready

Use a secure URL that can receive event notifications.

Submit the empty form to inspect the error. Enter an https:// URL to inspect success.

03 / How it works

Keyboard behavior follows platform expectations

Use the real controls below. Tab reaches each trigger, Escape closes overlays, and focus returns to the control that opened them.

No keyboard action recorded yet.

Try the contract

  1. Tab reaches each trigger.
  2. Enter or Space opens it.
  3. Arrow keys move within the menu.
  4. Escape closes and restores focus.
Focus is a 2px action-blue outline with a 2px offset. Base UI supplies the governed overlay behavior through Ordering.co wrappers.

04 / Use / Avoid

Name every action; never rely on hue alone

Visible text is the clearest control. When space requires an icon-only action, provide the same meaning through its accessible name and tooltip.

Use · text

The visible label and accessible name match.

Use · icon only

A name, tooltip, and 44px target complete the compact control.

Avoid · unnamed

This inert visual demonstrates the failure without adding an inaccessible control to the page.

Use native meaning

Headings, labels, buttons, form controls, and landmarks expose name, role, and state without reconstruction.

Avoid visual-only semantics

Do not use a generic element, color, position, or icon shape as the only source of meaning.

Use visible focus

The 2px action-blue outline and 2px offset remain visible in Light and Dark.

Avoid focus loss

When a menu or dialog closes, do not leave focus on the document root or an object that no longer exists.

05 / Adaptation

Meaning survives theme, size, and viewport

Test theme contrast, text resizing, browser zoom, and narrow reflow as separate checks. The same state must remain legible without color.

Status in Light and Dark

Indicator, icon, title, detail, and status label travel together. Supporting colors adapt while the three operational indicators remain fixed.

light theme

Configuration saved

The next sync will use the update.

Success

Review required

One endpoint has not been verified.

Warning

Delivery stopped

Reconnect the endpoint to resume events.

Danger

dark theme

Configuration saved

The next sync will use the update.

Success

Review required

One endpoint has not been verified.

Warning

Delivery stopped

Reconnect the endpoint to resume events.

Danger

100%, 200%, and 320px

Labels wrap, actions remain available, and the reading order stays linear. The narrow specimen represents the reference CSS width rather than shrinking a desktop canvas.

100% text

Review event delivery

Resolve the endpoint before sending another test event.

200% text

Review event delivery

Resolve the endpoint before sending another test event.

320 CSS px

Review event delivery

Resolve the endpoint before sending another test event.

Reflow the page

A named table region may scroll when the content is intrinsically two-dimensional; the page itself should not.

Preserve reduced-motion meaning

Loading, status, and hierarchy remain complete when nonessential transitions are removed.

06 / Release gate

Record evidence before release

Automated, keyboard, and visual review are separate evidence streams. This example shows the shape of a review record; it is not approval for a real route.

Illustrative release evidence

Accessibility review · example record

Not publication approval

Automated

Pass

No critical or serious automated findings in the reviewed route.

Keyboard

Record

Attach the tested order, Escape behavior, and focus-restoration result.

Visual

Record

Attach Light/Dark, 200% text, zoom, and 320px review evidence.

07 / Technical reference

WCAG mapping and test contract

Open these references during implementation or review. Human-facing guidance stays example-first.

WCAG 2.2 AA mappingPerception, operation, understanding, and robustness
DecisionTargetVerify
Normal text contrast1.4.3 · 4.5:1Light and Dark semantic pairings.
UI, focus, and state graphics1.4.11 · 3:1Boundaries and essential visual information.
Keyboard and focus2.1.1 · 2.4.7 · 2.4.11Order, visibility, Escape, and restoration.
Target size2.5.8 · 24px minimumOrdering.co uses a stricter 44px touch-target contract.
Resize and reflow1.4.4 · 1.4.10200% text and 320 CSS px without loss.
Keyboard reviewTab, arrows, Enter, Space, Escape, and focus restoration
  1. Start before the first control and record the complete focus order.
  2. Operate every control without pointer input.
  3. Open menus and dialogs; verify their documented arrow-key and focus behavior.
  4. Close with Escape and confirm focus returns to the initiating control.
  5. Repeat at narrow width and with any responsive navigation open.
Release checklistAutomated, keyboard, visual, motion, resize, and reflow
  • Automated scan reports no critical or serious findings.
  • Keyboard order, Escape, and focus restoration are recorded.
  • Icon-only actions have accessible names, tooltips, and usable targets.
  • Status and validation remain clear without color.
  • Light and Dark pass automated and visual contrast review.
  • Reduced motion preserves a complete result.
  • 200% text, browser zoom, and 320 CSS px are tested separately.