Accessibility Guidelines

TpGroup design system follows WCAG 2.2 Level AA standards to ensure inclusive, accessible experiences for all users.

WCAG 2.2 AA Compliance

Web Content Accessibility Guidelines (WCAG) 2.2 Level AA is our mandatory baseline. Compliance is legally required in many jurisdictions by April 2026.

1.4.3 Contrast (Minimum)

Level AA

Text must have a contrast ratio of at least 4.5:1 (or 3:1 for large text)

Implementation: Use color contrast checker; verify all text meets minimum ratios

1.4.11 Non-text Contrast

Level AA

UI components and graphical objects must have 3:1 contrast against adjacent colors

Implementation: Icons, borders, focus indicators need sufficient contrast

2.1.1 Keyboard

Level A

All functionality must be available via keyboard

Implementation: Ensure Tab, Enter, Space, Arrow keys work for all interactive elements

2.4.7 Focus Visible

Level AA

Keyboard focus indicator must be visible

Implementation: Minimum 2px solid outline with 3:1 contrast ratio

2.5.5 Target Size

Level AAA (Best Practice)

Touch targets should be at least 44x44px

Implementation: Critical for mobile users; WCAG minimum is 24x24px

1.3.1 Info and Relationships

Level A

Information and relationships conveyed through presentation must be programmatically determined

Implementation: Use semantic HTML; associate labels with inputs; use ARIA when needed

Color Contrast

Proper color contrast ensures readability for users with low vision and color blindness. 83.6% of websites fail on contrast - don't be one of them.

Sample Text

The quick brown fox jumps

White on Navy
7.2:1

Body text on dark backgrounds

Sample Text

The quick brown fox jumps

Dark Gray on White
12.5:1

Primary body text

Sample Text

The quick brown fox jumps

Gold on White
1.6:1

NEVER use for text - decorative only

Sample Text

The quick brown fox jumps

Gold on Navy
8.3:1

Accent text on dark backgrounds

Critical Rule

Gold (#FFC700) must NEVER be used as text on white backgrounds. It fails WCAG AA with only 1.6:1 contrast. Use gold on navy/dark backgrounds or as decorative elements only.

Touch Target Sizes

Adequate touch target sizes are critical for mobile users and users with motor impairments. 75%+ of African e-commerce is mobile.

Minimum 44x44px

All interactive elements (buttons, links, inputs) should have a minimum touch target of 44x44 pixels. WCAG requires 24x24px, but 44x44px is the recommended best practice.

24x24px

Too small

44x44px

Recommended

56x56px

Even better

Spacing Between Targets

Maintain at least 8px spacing between adjacent touch targets to prevent accidental taps.

Keyboard Navigation

All functionality must be accessible via keyboard for users who cannot use a mouse or touch screen.

Keyboard Shortcuts

TabMove focus to next interactive element
Shift + TabMove focus to previous interactive element
EnterActivate buttons and links
SpaceToggle checkboxes and activate buttons
Arrow KeysNavigate within components (dropdowns, tabs, etc.)
EscapeClose modals and dialogs

Focus Indicators

Keyboard focus must be clearly visible at all times. Minimum 2px solid outline with 3:1 contrast ratio.

Screen Reader Support

Semantic HTML and ARIA attributes ensure content is accessible to screen reader users.

Use Semantic HTML

Always use the correct HTML elements for their intended purpose.

✓ Good

<button>Click me</button>

✗ Bad

<div onClick=...>Click me</div>

Label All Form Inputs

Associate labels with inputs programmatically using the "for" attribute or by wrapping.

Provide Alt Text for Images

All meaningful images need descriptive alt text. Decorative images should have alt="".

Use ARIA When Needed

ARIA attributes supplement HTML when semantic elements aren't sufficient.

  • • aria-label: Provides accessible name when visual label isn't present
  • • aria-describedby: Links element to its description
  • • aria-live: Announces dynamic content changes
  • • role: Defines element's purpose when HTML semantic isn't enough

Accessibility Testing

Regular testing ensures we maintain WCAG compliance throughout development.

Automated Testing Tools

  • • axe DevTools (browser extension) - Identifies WCAG violations
  • • WAVE (webaim.org/wave) - Visual accessibility checker
  • • Lighthouse (Chrome DevTools) - Accessibility audit
  • • Color contrast analyzers - Verify text contrast ratios

Manual Testing

  • • Keyboard-only navigation - Ensure all features work without mouse
  • • Screen reader testing - Test with NVDA (Windows) or VoiceOver (Mac)
  • • Zoom to 200% - Verify layout doesn't break
  • • Color blindness simulation - Test with various color vision deficiencies