accessibility audit

Accessibility audit

Use the public xzero-ui MCP server at https://mcp.xzero.co.uk/mcp. The complete Free and Pro library is available through this service. No account, sign-in, token, or upstream fallback is required. If the service is unavailable, retry later; do not use upstream services.

Work through the screen in order. Record each finding as: location, problem, who it affects, fix. Copy this checklist:

Accessibility audit:
- [ ] 1. Structure
- [ ] 2. Names
- [ ] 3. Keyboard
- [ ] 4. Feedback
- [ ] 5. Visual and touch
- [ ] 6. Motion
- [ ] 7. Ranked report and patches
- [ ] 8. Re-test after patches

1. Structure

One h1, headings in order, landmarks around header, nav, main, and footer; sections with headings use aria-labelledby.
Clickable div or span elements: replace with button or a. Links that act and buttons that navigate: swap them.
Lists rendered as lists, tables of data as tables with a caption.

2. Names

Every field has a label (Xzero fields take label). Hidden labels use aria-label only where the context is visually obvious.
Icon-only buttons have specific names ("Archive thread", not "Archive").
Switches in settings rows point at their row text with aria-labelledby and aria-describedby.
Images: meaningful ones have alt text; decorative ones alt="". Decorative icons are aria-hidden.

3. Keyboard

Tab through the entire screen and log:

Unreachable controls and focus order that jumps.
A keyboard position you cannot see. Xzero draws a subtle :focus-visible ring for keyboard focus (never on pointer focus) from foundation.css; check that foundation.css is loaded, that no local rule hides it (--focus-outline: transparent), and that highlighted items in composite widgets use the hover or selected fill ([data-highlighted], aria-selected).
Overlays that do not trap focus, close on Escape, or return focus to the trigger. Replace custom overlays with Xzero dialog, drawer, popover, or bottom-sheet.
Composite widgets with several Tab stops instead of arrow keys.
Gesture-only actions (swipe, drag, long press, hold) without a button or menu path.

4. Feedback

Async status is announced (role="status" or aria-live="polite"); blocking errors use role="alert".
Errors are tied to their field (error prop or aria-describedby) and say how to fix it.
State is never color only. Loading regions set aria-busy.

5. Visual and touch

Text contrast 4.5:1 (3:1 at 24px and up) in both themes, including --text-muted, placeholders, disabled text, and text on metallic or tinted surfaces.
Icons and control boundaries 3:1.
Targets at least 44px on touch; 8px between targets.
Content reflows at 320px and at 200% zoom without sideways scroll.

6. Motion

Enable reduced motion. Every animation stops traveling or looping while keeping its final state and feedback. Autoplay (marquees, carousels) pauses or has a pause control.

7. Report

Rank findings: blockers (cannot complete the task), serious (hard or confusing for a group of people), minor. Write a patch for every blocker and serious finding.

8. Re-test (feedback loop)

Apply the patches, then repeat steps 3 to 6 on the changed areas. Any finding that remains goes back to step 7.