# Accessibility

Target WCAG 2.2 Level AA.

## Required practices

- Semantic HTML.
- Full keyboard access.
- Visible focus indicators.
- Logical focus order.
- Accessible names for controls.
- Labels for all form inputs.
- Required/optional state communicated programmatically and visually.
- Accessible validation and error messages.
- No color-only meaning.
- Sufficient contrast.
- Responsive layouts.
- Support browser zoom and text resizing.
- Accessible dialogs and galleries.
- Focus management for dynamic UI.
- Appropriate live-region/status announcements for important asynchronous changes.
- Meaningful image alt text.
- Use ARIA only where native semantics are insufficient.

## Testing

Run automated accessibility testing in CI.

Serious accessibility regressions should fail CI.

Automated tests do not replace manual keyboard and assistive-technology review for important workflows.

## Public browsing review — 2026-09-10

Scope: catalog filters and listing links, listing/product detail states, image
selection, condition display, and seller contact links. Fixtures use public DTO
shapes, including `url`/`altText`, ten images, and a long seller email.

Findings fixed:

- Gallery buttons now use API `altText`, with legacy `alt` and label fallbacks,
  rather than announcing “undefined”. Controls form a named group and wrap.
- Failed API `url` images now announce an unavailable image rather than claiming
  no image exists.
- Detail text and grid children reflow without forcing horizontal scrolling;
  long seller contact addresses remain readable and focusable.
- Read-only detail conditions are text, removing a button that had no action.
- Listing and product loading/error messages expose status/alert roles.

Browser review: Codex in-app browser, keyboard and accessibility-tree inspection,
with screenshots checked at a 320px viewport. Tab/Enter select gallery images,
selection remains indicated, Tab reaches email then phone without a condition
button detour, and focus outlines remain visible. The populated catalog's filter
disclosure opens via Enter; expanded filters and the listing card fit at 320px.
Contact targets were inspected without launching email or telephone applications.

Enlargement review: 640px viewport (the CSS layout width of a 1280px browser at
200% zoom), additionally with root text enlarged to 200%. Detail text, gallery
controls, and seller links remain readable and keyboard-accessible without
horizontal scrolling. This is reflow/text-resize coverage, not a native browser
zoom result: browser-zoom shortcuts were unavailable in the review browser.

Regression coverage: mobile catalog filter keyboard interaction and listing
focus/link target; gallery selection and contact focus order; narrow and enlarged
reflow assertions; read-only condition story; broken API image fallback; and
loading/not-found announcements on both public detail pages. Existing light/dark,
empty-image, sold, and pending stories remain part of the accessibility gate.

Remaining manual coverage: native browser zoom, screen-reader speech and route
announcements (VoiceOver/Safari or NVDA/Firefox), and the full live-data navigation
journey. Automated checks and accessibility-tree inspection do not certify WCAG
conformance or replace those reviews.

## Public route navigation — 2026-09-10

- Catalog cards use router links with ordinary URL/open-in-new-tab behavior.
- Catalog and public detail pages set descriptive browser titles. Detail titles
  update to the product name or error message after loading.
- Entry focuses the named main landmark with a visible keyboard outline. It is
  programmatically focusable (`tabindex=-1`) without adding an extra Tab stop.
  Query updates and asynchronous results do not move focus again.
- Filtered catalog links carry their origin in `from`; “Back to catalog” restores
  that URL. Only `/` and catalog query URLs are accepted; external or non-catalog
  destinations fall back to `/`. Browser Back retains its normal history behavior.
- Three public Playwright tests exercise keyboard navigation, query preservation,
  browser Back, direct product links, not-found titles, safe return URLs, and a
  delayed response while focus remains on the return link. They intercept public
  API responses and do not require credentials or mutate production data.

These checks verify browser focus, titles, and navigation behavior. Screen-reader
speech and native browser zoom remain manual follow-ups from the earlier review.