Canonical: https://www.playbookrg.com/brand/book/accessibility/ Description: Standards and compliance, visual, cognitive, and motor accessibility, screen readers, and multi-language support. > Static reading copy of the published page, including authored disclosures. Interactive controls, personalized state, and account data are not reproduced. Use the canonical page for interaction and citations, and the dedicated content feeds for complete resource inventories. Source terms still apply; this format does not extend the Brand CC0 license to other products or third-party material. # Accessibility Standards and compliance, visual, cognitive, and motor accessibility, screen readers, and multi-language support. 8 min read · Free to copy and adapt · CC0 On this page 7 sections Accessibility isn’t a compliance burden – it’s how you make sure every player can use your content and tools. Bigger audience = more engagement = better outcomes for everyone. If a player can’t read your content, find your tools, or navigate your features, you’ve failed before the voice and tone even matter. **The standard**: WCAG 2.1 Level AA as a practical baseline. Not aspirational – required. --- ## Standards and compliance ### 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 Legal frameworks by jurisdiction: Jurisdiction, Applicable law, Requirement | Jurisdiction | Applicable law | Requirement | | --- | --- | --- | | United States | ADA, Section 508, state laws | Web accessibility for public accommodations | | European Union | European Accessibility Act (EAA), EN 301 549 | Digital products and services | | United Kingdom | Equality Act 2010 | Reasonable adjustments for disabled users | | Australia | Disability Discrimination Act 1992 | Web accessibility for services | | Canada | Accessible Canada Act, AODA (Ontario) | Digital content accessibility standards | --- ## Visual accessibility ### Color contrast All text and interactive elements must meet these minimum contrast ratios: Color contrast: Element type, Minimum ratio, Standard | Element type | Minimum ratio | Standard | | --- | --- | --- | | Normal text (under 18px / under 14px bold) | **4.5:1** | WCAG 2.1 AA | | Large text (18px+ / 14px+ bold) | **3:1** | WCAG 2.1 AA | | UI components (buttons, form fields, icons) | **3:1** | WCAG 2.1 AA | | Critical content (helpline numbers, support links) | **7:1** | WCAG 2.1 AAA (recommended) | **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: Color independence: Instead of..., Use... | Instead of... | Use... | | --- | --- | | Red text for warnings | Red text + warning icon + “Warning:” label | | Green for success | Green + checkmark icon + confirmation text | | Color-coded chart | Color + patterns + labels | | Red/green for over/under limit | Color + text (”$50 remaining” / “Limit reached”) | ### 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 --- **Limit saved** **10 minutes remaining** **Limit reached** Keyboard focus [Jump to checklist]() 16px minimum text · 1.5 line height · 44px target Meaning survives without color: every state combines contrast, an icon, and explicit text; the link shows a persistent keyboard-focus treatment. ## Cognitive accessibility 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 --- ## Motor accessibility ### 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. Mobile-specific accessibility: Requirement, Standard, Why it matters for Playbook | Requirement | Standard | Why it matters for Playbook | | --- | --- | --- | | Touch targets | 44x44px minimum (48px recommended for critical CTAs) | Helpline buttons, self-exclusion, limit setting | | Thumb zone | Primary actions in bottom 2/3 of screen | One-handed play means CTAs must be reachable | | Orientation | Support both portrait and landscape | Some players lock orientation | | Zoom | Don’t disable pinch-to-zoom (`user-scalable=yes`) | Players with low vision need to zoom | | Text scaling | Support system font size settings (up to 200%) | Respect OS-level accessibility preferences | | Haptic feedback | Use system haptics for confirmations (limit set, quiz answer) | Provides non-visual feedback | | Screen reader gestures | Don’t override swipe gestures (VoiceOver uses them) | Custom swipe handlers break screen reader navigation | Test on real devices. Emulators don’t accurately simulate touch targets, haptic feedback, or screen reader gesture conflicts. --- ## Screen reader compatibility ### Semantic HTML - Use proper heading hierarchy (h1 \> h2 \> h3 – never skip levels) - Use `