Accessibility
Built to be usable
A site that is fun to look at and impossible to use is not fun. Here is what was done, and what was checked.
What is in place
- Nothing below 13px. Body text is 17px; the smallest type anywhere is 13px on chips and eyebrow labels.
- The splash can always be escaped — a Skip button, Escape, Enter, Space, or a click outside it. It plays once per session, not once per page.
- Motion respects your settings. Under
prefers-reduced-motionthe peel, the float, the marquee and the page-lift are all switched off and the splash resolves instantly. - Keyboard throughout. A skip link, visible focus rings on every control, the mobile nav toggles with a real button carrying
aria-expanded, and the portal tabs move focus predictably. - Real semantics. One
h1per page, headings in order, tables with captions andthscopes, form labels tied to inputs, and status messages announced witharia-live. - Contrast. Cocoa ink on cream is well past 4.5:1. Banana yellow is never used as text on a light background — the yellow that appears as text is
#7A5D0B, which passes. - Decoration is hidden. Every emoji used as ornament carries
aria-hiddenso screen readers are not read a list of fruit.
What was checked
Every page at 390px and 1440px: no horizontal scroll, no console errors, no unlabelled control, no broken internal link.
Known gaps
- Fonts load from Google rather than being self-hosted, so a slow connection sees a flash of fallback type.
- The stockist finder is a text filter, not a map. A live build should have a real map with an accessible list view beside it.
- No automated accessibility test runs in CI. For a demo that is acceptable; for a live commerce site it is not.
Found something that does not work for you? Tell us — it gets fixed.