Our Commitment
TallyUp is built for everyone. We are committed to ensuring that our app is accessible to people with disabilities, and we target conformance with the Web Content Accessibility Guidelines (WCAG) 2.1 at Level AA as our standard.
We treat accessibility as an ongoing effort, not a one-time checkbox. If you encounter a barrier, we want to know about it and fix it.
What We Have Done
The following measures have been implemented across TallyUp to improve access for all users:
Color Contrast
All text and interactive element labels meet the WCAG AA contrast ratio requirements: 4.5:1 for normal-sized text and 3:1 for large text and user interface components. We use a dedicated accessible green (#0F6830) for all text instances of our brand color, preserving the visual identity while meeting contrast thresholds.
Keyboard Navigation and Focus Indicators
All interactive elements — buttons, links, and form inputs — are reachable and operable via keyboard. A visible focus ring (2px green outline) appears on any element that receives keyboard focus, ensuring users who navigate without a mouse can always see where they are on the page.
Screen Reader Support
Icon-only controls (scan button, quantity adjusters, delete buttons, navigation icons) carry descriptive aria-label attributes so screen readers announce their purpose. The running cart total is marked as an aria-live region, so assistive technology announces updates automatically when the total changes after scanning or adding an item.
Form Labels
Every form input has an associated label or aria-label attribute. This includes item name and price fields, budget input, store name field, email address, shopping list name, and list item fields. Placeholder text is never used as a substitute for a label.
Touch Target Size
Tappable controls meet the 44x44 point minimum touch target size recommended by WCAG and Apple’s Human Interface Guidelines. This applies to quantity buttons, delete and trash icons, navigation buttons, and the account icon, regardless of their visible size.
Image Alternative Text
Every image has a meaningful altattribute. The TallyUp logo reads “TallyUp”. Purely decorative images and inline SVG icons carry empty or suppressed alt text so they are not announced unnecessarily by screen readers.
Semantic Structure
Pages use semantic HTML landmarks (main, header, nav) and a logical heading hierarchy. State selector and store suggestion dropdowns use role="listbox" and role="option" with aria-selected attributes.
Known Limitations
We are aware of the following areas that are still being improved:
- The camera viewfinder in the scan screen does not yet provide audio feedback to guide blind users. We are exploring audio cues and alternative manual-entry flows.
- Some bottom sheets and modal overlays may not trap focus fully on all browsers. We are working on adding explicit focus management to sheet components.
- White text on the brand green primary action buttons (such as the “Scan an item” button) does not meet the 4.5:1 contrast ratio for normal text against that specific background. This is a design tradeoff under active review.
Technical Approach
TallyUp is a progressive web app built with Next.js and React. Accessibility improvements are applied at the component level using React inline styles, ARIA attributes, and a global :focus-visible CSS rule. We test using keyboard-only navigation and VoiceOver on iOS.
Report an Issue
We want to hear from you if you encounter an accessibility barrier. Please contact us at tallyup.shop@gmail.com and include:
- A description of the barrier or issue you encountered
- The page or feature where it occurred
- The assistive technology or browser you were using
We aim to respond within 5 business days and to resolve confirmed accessibility issues within 30 days where technically feasible.