pokemon-inventory/docs/ACCESSIBILITY.md

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.