92 lines
4.4 KiB
Markdown
92 lines
4.4 KiB
Markdown
# 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.
|