Skip to content

Accessibility

Overview

PetFolio is for anyone with a pet - and anyone can have a pet. Accessibility is not a feature, it is a baseline. The product must be usable by people with visual impairments, motor disabilities, cognitive differences, and any other condition that affects how they interact with technology.

Standard

PetFolio targets WCAG 2.2 AA compliance. This is the current standard and covers mobile and touch interactions that are critical for PetFolio's mobile-first approach.

Why this matters for PetFolio specifically

PetFolio's user base is broad:

  • Pet owners range from tech-savvy millennials to older grandparents looking after someone's pets
  • Sitters may be checking profiles one-handed while holding a lead, in bright sunlight, or while managing an anxious animal
  • Professional staff at rehoming centres include volunteers of all ages and abilities
  • Recipients of shared profiles have no choice about the platform - they use PetFolio because someone shared a profile with them, not because they chose it

The "dip in and out" quick reference pattern means every interaction must be fast and accessible. A sitter checking medication dosage at 11pm cannot be blocked by an interface that doesn't work with their assistive technology.

Key considerations by feature area

Profile creation (structured prompts)

  • Screen reader users must be able to navigate the guided prompt flow without visual cues
  • Form fields must have clear labels, not just placeholder text
  • Error messages must be descriptive and associated with the field that caused them
  • The prompt flow must be navigable by keyboard alone (no mouse-dependent interactions)
  • Freeform text areas must clearly communicate their purpose and any character limits

Profile reading and reference

  • The information hierarchy (safety brief > daily ops > understanding > reference) must be conveyed through structure (headings, landmarks), not just visual styling
  • Top Tips and safety brief items must be distinguishable by more than colour alone (icons, text labels, or patterns)
  • Tables (behaviour entries, routine timeline, diet information) must be accessible to screen readers with proper header associations
  • Text must be resizable up to 200% without loss of content or functionality

Combined daily routine

  • The timeline view must be navigable without a mouse
  • Each entry must clearly communicate which animal it relates to (not just through colour coding)
  • Time-based information must be readable by screen readers in a logical order

Profile sharing

  • The sharing flow (create share, set dates, send invitation) must work with keyboard and screen reader
  • Shared profile views must meet the same accessibility standards as the creator's view
  • The safety brief must be announced/presented first regardless of assistive technology

Search and navigation (Professional accounts)

  • Filters must be operable by keyboard
  • Search results must be announced to screen readers as they update
  • The animal list must be navigable without a mouse, with clear focus indicators

Authentication

  • OAuth sign-in flow must be accessible (largely depends on the OAuth provider's implementation)
  • Biometric prompts must have fallback options (PIN entry)
  • Session expiry warnings must be communicated to screen readers

Mobile-specific considerations

  • Touch targets must be at least 44x44 CSS pixels (WCAG 2.2 AA requirement for mobile)
  • Interactive elements must have sufficient spacing to avoid accidental taps
  • The interface must work in both portrait and landscape orientation
  • Content must be usable with zoom up to 200%
  • The "dip in and out" pattern means pages must load and be usable quickly with assistive technology - no long waits for content to become interactive

Colour and contrast

  • The existing theme library already supports a high contrast palette - this must be maintained and extended as new components are built
  • All text must meet minimum contrast ratios (4.5:1 for normal text, 3:1 for large text)
  • Information must never be conveyed by colour alone (always pair with text, icons, or patterns)
  • Status indicators (Draft, Active, Inactive, Pending, On Hold, Archived) must be distinguishable without colour

Content and language

  • Use clear, simple language in all prompts and interface text
  • Avoid jargon or abbreviations without explanation
  • Error messages must explain what went wrong and how to fix it
  • Loading states must be communicated (not just a visual spinner)

Testing approach

  • Automated accessibility testing integrated into CI (axe-core or similar)
  • Manual testing with screen readers (VoiceOver on iOS/macOS, TalkBack on Android, NVDA on Windows)
  • Keyboard-only navigation testing for all flows
  • The component library already includes the Storybook a11y addon - accessibility must be verified at the component level before integration

Requirement highlights

MVP

  • WCAG 2.2 AA compliance across all features
  • High contrast palette support
  • Keyboard navigability for all flows
  • Screen reader compatibility for all content
  • Touch targets meeting minimum size requirements
  • Automated accessibility testing in CI
  • No information conveyed by colour alone

Future

  • WCAG 2.2 AAA for specific high-use flows (safety brief, medication instructions)
  • User testing with assistive technology users during beta
  • Accessibility statement published on the site