IGrow Group of Companies

Accessibility checklist

← Design System

← Design System Index | Component Reference | Foundations

Accessibility checklist

The IGrow design system targets WCAG 2.1 AA. Components below ship the required affordances by default — but the page-level implementation has to do the rest.

What the system gives you for free

Feature Where
Visible focus ring on every interactive control :focus-visible styles in components.css
Skip link helper class .ig-skip-link in reset.css
Visually-hidden helper .ig-visually-hidden
prefers-reduced-motion honouring tokens.css final block
44 × 44 minimum hit area on buttons Button padding defaults
Brand-red focus ring at 4.5:1 contrast on white Token --color-accent-primary-ring
Semantic colour pairings (success/warning/danger/info) at AA contrast tokens.css semantic block

What you still have to do

Page structure

  • One <h1> per page.
  • Heading order doesn't skip levels (h1 → h2 → h3, no h1 → h3).
  • <main> wraps the primary content. The skip link points to #main.
  • lang attribute on <html> — IGrow content is en-ZA.

Forms

  • Label every input. Don't rely on placeholder text.
  • Pair error messages with the input via aria-describedby.
  • Mark required fields with both required AND a visual indicator (the system's data-required does this).
  • Use inputmode and autocomplete to help mobile keyboards (inputmode="numeric" for phone, autocomplete="email").

Images

  • Decorative images: alt="". Don't omit the attribute.
  • Meaningful images (people, properties): describe what's depicted, not "image of …".
  • Property photos: alt="2-bedroom apartment exterior, 1 Bronkhorstspruit Rd" not alt="property".

Colour

  • Never use colour alone to communicate state. Pair with icon or text.
  • Brand red (#B6364B) on white: 4.7:1 — passes AA for normal text and AA Large for headings.
  • Body text grey (#3F3F3F) on white: 10.4:1 — comfortably AAA.
  • White text on brand-red CTA button: 4.7:1 — AA at 14px+ (which is the smallest the system uses).

Motion

  • The system honours prefers-reduced-motion: reduce via tokens.css.
  • Don't add custom animations that bypass the tokens. If you do, gate them yourself.

Keyboard

  • Every interactive element must be reachable via Tab.
  • Tab order should match visual order. Don't use tabindex greater than 0.
  • Modal: trap focus, return on close, Escape to dismiss. The React <Modal> handles Escape; focus trap is your call.
  • Off-canvas drawers (mobile nav, filter drawer): same as modals.

Live regions

  • Toast notifications: wrap in aria-live="polite". Don't use aria-live="assertive" unless the message is critical.
  • Form error summaries that appear on submit: role="alert" is appropriate.

Tables

  • Use <th> for headers and scope="col" or scope="row" where appropriate.
  • Caption complex tables with <caption> (visually hidden if you don't want it shown).

Drafting alt text — IGrow-specific patterns

Image type Pattern
Property photo (card) alt="" — the card title is already announced
Property photo (detail page hero) alt="2-bedroom apartment with open-plan kitchen, Bronkhorstspruit Rd"
Agent portrait alt="Malanie Lewis, IGrow Rentals consultant"
Brand mark in nav alt="IGrow Rentals"
Brand mark in footer alt="" — paired with the brand name in text
Stock lifestyle photo alt="" if purely decorative

Testing

Run these before shipping:

  1. Tab through the whole page — every interactive element reachable, focus visible.
  2. Resize to 400% zoom — content shouldn't disappear or require horizontal scroll (except in tables).
  3. VoiceOver / NVDA pass on the main flow — landmarks announced, headings logical, errors heard.
  4. Lighthouse a11y audit — should clear 95+.
  5. axe DevTools — should report zero serious / critical violations.