Accessibility

Baseline: WCAG 2.1 AA

All Playbook RG digital content must meet WCAG 2.1 Level AA as a minimum. Level AAA conformance is recommended for:

• Contrast ratios on critical content (helpline numbers, CTAs, support links)
• Text resizing up to 200% without loss of functionality
• Extended audio descriptions for video content

Legal frameworks by jurisdiction

Color contrast

All text and interactive elements must meet these minimum contrast ratios:

Testing tools:

• WebAIM Contrast Checker
• Colour Contrast Analyser (CCA)
• Chrome DevTools Accessibility panel
• Figma Stark plugin

See visual-identity/color/accessibility-matrix.md for the full contrast ratio matrix.

Color independence

Never use color as the only way to convey information:

Text and typography

• Minimum body text size: 16px (1rem). No exceptions.
• Minimum touch target: 44x44px for all interactive elements (WCAG 2.5.5)
• Line height: Minimum 1.5x for body text
• Paragraph spacing: At least 2x the font size
• Text resizing: Content must remain functional when text is resized to 200%
• No text in images: All text must be real text (HTML/CSS), not embedded in images

Players come to Playbook content in all kinds of states – relaxed and curious, stressed and looking for help, tired after a long session. Design for all of them.

Plain language

• Write at Grade 6–8 reading level (Flesch-Kincaid)
• Use common, everyday words
• One idea per sentence
• Avoid double negatives
• Avoid jargon and acronyms (or define them immediately)
• See Chapter 4: Voice and Tone for complete writing guidelines

Clear navigation

• Consistent layout: Tools and information should always be in the same place
• Predictable behavior: Interactive elements should behave consistently
• Visible current state: Players should always see their current limits and settings
• No time limits on decisions: Never auto-dismiss important messages

Reduce cognitive load

• Front-load key information: The most important content visible without scrolling
• Progressive disclosure: Show essentials first; let users expand for details
• Minimize form fields: Collect only what’s necessary
• Provide defaults: Pre-fill common values where appropriate
• Confirm irreversible actions: Self-exclusion and limit changes should require confirmation

Keyboard navigation

All interactive elements must be fully operable with keyboard alone:

• Tab order: Logical, follows visual layout
• Focus indicators: Visible focus ring on all interactive elements (minimum 2px, high contrast)
• Skip links: Provide “Skip to main content” links
• No keyboard traps: Users must be able to navigate away from any element

Touch targets

• Minimum size: 44x44px for all interactive elements
• Spacing: Minimum 8px between adjacent touch targets
• Critical CTAs (helpline, self-exclusion): Consider 48x48px minimum

Mobile-specific accessibility

Mobile is where 60%+ of players gamble. Mobile-specific accessibility requirements go beyond desktop patterns.

Test on real devices. Emulators don’t accurately simulate touch targets, haptic feedback, or screen reader gesture conflicts.

Semantic HTML

• Use proper heading hierarchy (h1 > h2 > h3 – never skip levels)
• Use <nav>, <main>, <aside>, <footer> landmarks
• Use <button> for actions, <a> for navigation
• Use <table> with proper <th> headers for data tables

ARIA labels

ARIA landmark patterns

Use semantic HTML landmarks as the foundation. ARIA landmarks are supplementary – they fill gaps where native HTML doesn’t provide a role.

Always test with at least two screen readers (VoiceOver + NVDA recommended). Different screen readers interpret ARIA differently – test, don’t assume.

Alternative text

• All images must have descriptive alt text
• Decorative images: alt=""
• Icons that convey meaning: alt describing the meaning, not the image
• Charts and graphs: Provide a text summary of the data
• Helpline numbers: Always rendered as text, never as images

Language requirements

Playbook RG content should be translatable into the primary languages of each operating jurisdiction:

Translation guidelines

• Translate meaning, not words: Adapt for the target culture
• Maintain voice principles: Translations must preserve the Playbook tone
• Test with native speakers: Machine translation is a draft, not a final product
• Account for text expansion: Translated text is often 20–40% longer than English

Technical requirements

• Character set: UTF-8 encoding everywhere
• RTL support: Mirror layouts for Arabic, Hebrew, and other RTL languages
• Font support: Use Noto Sans as fallback for non-Latin scripts
• Number formatting: Adapt decimal separators, thousands separators, and currency symbols per locale

Critical accessibility findings

The visual-identity/color/accessibility-matrix.md audit identified five critical failures in the default semantic color mappings. These must be addressed before deployment.

These fixes are incorporated in the recommended _brand.yml changes in the accessibility matrix. Operators who customize colors must run their own contrast audit. See visual-identity/color/accessibility-matrix.md for the full matrix and all approved color pairings.

Use this when reviewing any Playbook RG content:

Visual

• All text meets minimum contrast ratio (4.5:1 normal, 3:1 large)
• Color is never the sole indicator of meaning
• Text resizes to 200% without loss of functionality
• No text is embedded in images

Cognitive

• Content is written at Grade 6–8 reading level
• Key information is visible without scrolling
• Navigation is consistent and predictable
• Important messages are not auto-dismissed

Motor

• All elements are keyboard-accessible
• Focus indicators are visible
• Touch targets are at least 44x44px

Screen reader

• Heading hierarchy is logical
• All images have appropriate alt text
• Interactive elements have descriptive labels
• Helpline numbers are rendered as text

Multi-language

• Content is available in jurisdiction-required languages
• Translations preserve voice and tone principles
• Layouts accommodate text expansion
• RTL languages display correctly

Previous: Chapter 5 – Messaging Framework | Next: Chapter 7 – Application Guidelines