Accessibility statement
Our commitment to inclusive, accessible design — and the evidence behind it.
About this site
Nip & Claw is a fictional artisanal catnip dispensary. It does not sell anything. No cats were charged. It exists as a companion demo site for Accessibility Champion — a practical book about web accessibility for developers, designers, and digital teams.
Every page is built to model the accessibility patterns discussed in the book: landmark regions, accessible tables, live regions, label association, error announcement, focus management, and touch target sizing. If a page demonstrates a pattern, the implementation should be the correct one — an ironic demo site is not useful.
Conformance status
This site targets WCAG 2.2 Level AA conformance. All pages have been audited with axe-core 4.10 against WCAG 2.0 A, 2.0 AA, 2.1 AA, 2.2 AA, and best-practice rules.
| Page | Violations | Passes | Notes |
|---|---|---|---|
Products (index.html) |
0 | 42 | Zoomies badge contrast fixed during audit (was 3.45:1, now 5.8:1). "Add to cart" buttons disambiguated with sr-only product names. |
Subscriptions (subscriptions.html) |
0 | 45 | — |
My Orders (orders.html) |
0 | 44 | — |
Checkout (checkout.html) — clean state |
0 | 45 | — |
Checkout (checkout.html) — error state |
0 | 47 | Error summary and aria-invalid fields audited in situ |
Automated testing catches approximately 30–40% of accessibility issues. The remainder require manual testing — keyboard navigation, screen reader testing, and judgement about the quality of accessible names and reading order.
Technologies used
This site is built with:
- HTML5
- CSS (no preprocessor)
- Vanilla JavaScript (ES5-compatible)
- No frameworks
- No build step
No JavaScript is required to read content. The product listing, plans table, and order history are all visible without JavaScript. JavaScript is used only for the filter buttons, cart announcements, and checkout form validation.
Known limitations
The product card images are emoji characters rendered in a decorative div, marked aria-hidden="true". They carry no information — the product name and description convey the content. These will be replaced with photographs when available.
Product ratings use ★ and ☆ characters followed by a numeric value in parentheses — for example, ★★★★★ (4.9). The numeric value is readable by screen readers. The star characters themselves are not given explicit labels, on the basis that the numeric value makes them redundant.
When a filter button is activated, matching products are shown and non-matching products are hidden. There is currently no animation. A future update may add a CSS transition; when it does, it will respect prefers-reduced-motion.
Manual testing notes
Keyboard navigation
All interactive elements are reachable by keyboard. Focus order follows document order throughout. The skip link is the first focusable element on every page and moves focus to #main. The checkout error summary receives programmatic focus on form submission so keyboard users land at the top of the error list.
Screen reader testing
The following patterns have been verified to work correctly:
- Live region announcements on add-to-cart and filter (VoiceOver, macOS Safari)
- Error summary announcement via
role="alert"on form submission - Table header association on the orders and plans tables
- Icon button labels — "Reorder Girl Scout Mousies from 26 May 2026"
- Check/cross cells in the plans table — "Included" / "Not included"
Colour contrast
All text colour combinations have been verified to meet the 4.5:1 ratio for normal text and 3:1 for large text. The design token comments in assets/css/tokens.css document the ratio for each pairing.
Reporting an issue
If you encounter an accessibility barrier on this site, please raise it via the GitHub Issues page, or contact us through accessibilitychampion.com.
We aim to respond to accessibility reports within 5 working days.
Statement details
This statement was prepared on and last reviewed on . It was prepared from a self-assessment.