Cobble is for everyone
We're committed to making Cobble as accessible and usable as possible for all people, regardless of ability or device.
Our commitmentWhat we do for accessibility
We aim to meet WCAG 2.1 Level AA guidelines across our website and app. Here's how we approach it.
Readable typography
All text on the Cobble website and app is set in Inter, a highly legible typeface designed for screen use. Base font sizes are 16px or larger. We never use font sizes below 14px for body text and avoid text that relies on colour alone to convey meaning.
Colour contrast
Our primary brand green (#2D6A2D) on white backgrounds meets WCAG AA contrast requirements for body text. All interactive elements have visible focus states. We do not rely on colour alone to communicate information icons and text labels are used alongside colour.
Responsive design
The Cobble website is fully responsive it works correctly at all viewport sizes from mobile phones to large desktop screens. Content reflows appropriately and does not require horizontal scrolling. Text can be resized up to 200% without loss of content or functionality.
Semantic HTML
Our website uses semantic HTML5 elements headings, landmarks, lists, buttons, and form labels in the correct order and context. This ensures screen readers and assistive technologies can correctly interpret and navigate page content.
Keyboard navigation
All interactive elements on the Cobble website links, buttons, forms, and menus are reachable and operable via keyboard navigation. Focus indicators are visible. The tab order follows a logical reading sequence through the page.
Alternative text
All meaningful images, icons, and visual elements on the Cobble website have appropriate alt text or aria-labels. Purely decorative images are marked as such so screen readers skip them. Emoji used as icons are labelled or hidden from assistive technology where appropriate.
Accessible forms
All forms on the Cobble website have clearly labelled fields, appropriate input types, and error states that are communicated both visually and via aria-live regions so screen readers announce them. Required fields are clearly marked.
Screen reader support (app)
The Cobble mobile app is built with Flutter, which provides built-in accessibility semantics. We use Flutter's Semantics widgets throughout the app to ensure compatibility with VoiceOver (iOS) and TalkBack (Android). We test with both screen readers during development.
Known limitations
We are committed to improving accessibility continuously. Current known areas for improvement include:
- The camera scanning feature in the app requires visual interaction to aim at shelves we are exploring audio guidance for this flow.
- Some phone mockup elements on the marketing website are decorative and complex we've marked these with aria-label descriptions but may refine this further.
- Animated elements (scroll reveal) include reduced-motion fallbacks via CSS
prefers-reduced-motion, but we're still auditing all animation usage.
Found an accessibility issue?
If you encounter any accessibility barrier while using the Cobble website or app, please let us know. We take all accessibility reports seriously and will work to address them promptly.
Email support@eatwithcobble.com