Skip to main content

11d — Accessibility Matrix (WCAG 2.2 AA)

Scope: Per-surface compliance status for each WCAG 2.2 AA Success Criterion, plus special modes (low-literacy, elderly, color-blind safe) and Pashto/Dari literacy considerations.

Status legend: ✅ Compliant · ⚠️ Partial · ❌ Exception (documented) · 🔲 Not applicable

1. WCAG 2.2 AA matrix​

Principle 1: Perceivable​

SCCriterionWebMobileDesktopKioskTest method
1.1.1Non-text content (alt text)✅✅✅✅axe + manual
1.2.1Audio-only / video-only alternatives✅✅✅🔲Manual
1.2.2Captions (prerecorded)✅✅✅🔲Manual
1.2.3Audio description or media alternative⚠️⚠️⚠️🔲Manual (360° tours only)
1.2.4Captions (live)🔲🔲🔲🔲N/A (no live video)
1.2.5Audio description (prerecorded)⚠️⚠️⚠️🔲Manual
1.3.1Info and relationships✅✅✅✅axe
1.3.2Meaningful sequence✅✅✅✅Manual
1.3.3Sensory characteristics✅✅✅✅Manual
1.3.4Orientation✅✅✅❌ (kiosk fixed landscape)Manual
1.3.5Identify input purpose✅✅✅✅axe
1.4.1Use of color✅✅✅✅Manual
1.4.2Audio control✅✅✅✅Manual
1.4.3Contrast (minimum) 4.5:1✅✅✅✅axe + Figma
1.4.4Resize text (200%)✅⚠️ (OS font scaling)✅🔲 (fixed kiosk)Manual
1.4.5Images of text✅✅✅✅Manual
1.4.10Reflow (320px)✅🔲🔲🔲Manual (web only)
1.4.11Non-text contrast 3:1✅✅✅✅Figma + manual
1.4.12Text spacing✅⚠️✅🔲Manual
1.4.13Content on hover/focus✅🔲✅🔲Manual

Exceptions:

  • 1.3.4 (kiosk): Self-check-in kiosk is always landscape (fixed mount). Exception accepted; documented in Risk Register.
  • 1.2.3 / 1.2.5: 360° room tours (Matterport) do not have audio descriptions. Mitigation: provide a photo gallery as an alternative. Full compliance target: Phase 3.

Principle 2: Operable​

SCCriterionWebMobileDesktopKioskTest method
2.1.1Keyboard✅🔲✅⚠️ (switch access)Manual
2.1.2No keyboard trap✅🔲✅✅Manual
2.1.4Character key shortcuts✅ (no shortcuts conflict)🔲✅🔲Manual
2.2.1Timing adjustable✅✅✅✅Manual
2.2.2Pause, stop, hide (animations)✅✅✅✅Manual
2.3.1Three flashes or below threshold✅✅✅✅Manual
2.4.1Bypass blocks (skip link)✅🔲✅🔲axe
2.4.2Page titled✅✅✅✅axe
2.4.3Focus order✅✅✅⚠️Manual
2.4.4Link purpose (in context)✅✅✅✅axe
2.4.6Headings and labels✅✅✅✅axe
2.4.7Focus visible✅✅✅⚠️Manual
2.4.11Focus not obscured (min)✅✅✅⚠️Manual
2.4.12Focus not obscured (enhanced)⚠️⚠️⚠️⚠️Manual
2.5.3Label in name✅✅✅✅axe
2.5.4Motion actuation✅✅✅🔲Manual
2.5.7Dragging movements✅✅✅🔲Manual
2.5.8Target size (min 24×24 px)✅ (all ≥ 44px)✅✅✅ (all ≥ 60px)Manual

Principle 3: Understandable​

SCCriterionWebMobileDesktopKioskTest method
3.1.1Language of page✅✅✅✅axe
3.1.2Language of parts✅✅✅✅Manual
3.2.1On focus (no context change)✅✅✅✅Manual
3.2.2On input (no unexpected change)✅✅✅✅Manual
3.2.3Consistent navigation✅✅✅✅Manual
3.2.4Consistent identification✅✅✅✅Manual
3.2.6Consistent help✅✅✅✅Manual
3.3.1Error identification✅✅✅✅axe
3.3.2Labels or instructions✅✅✅✅axe
3.3.3Error suggestion✅✅✅✅Manual
3.3.4Error prevention (legal, financial)✅✅✅✅Manual
3.3.7Redundant entry✅✅✅✅Manual
3.3.8Accessible authentication (min)✅✅✅✅Manual

Principle 4: Robust​

SCCriterionWebMobileDesktopKioskTest method
4.1.2Name, role, value✅✅✅✅axe
4.1.3Status messages✅✅✅✅axe

2. Assistive technology test matrix​

ATPlatformTest frequencyCoverage
VoiceOverSafari / iOSPer releaseAll consumer + operator web screens
TalkBackAndroid ChromePer releaseAll mobile screens
NVDA + ChromeWindowsPer releaseOperator desktop key flows
JAWS + ChromeWindowsQuarterlyOperator desktop
Switch AccessiOS + AndroidPer releaseKiosk self-check-in
Voice ControliOSQuarterlyConsumer mobile

3. Special accessibility modes​

3.1 Low-literacy mode​

Trigger: Opt-in button "Simple view" in kiosk footer; automatic for kiosk languages where literacy rates are lower.

Changes:

  • Text replaced with icons + single-word labels where possible
  • Font size increased +20%
  • Sentence length reduced to ≤ 8 words
  • Progress shown as visual steps (not text)

3.2 Elderly / low-vision mode​

Trigger: System prefers-contrast: more or font scale > 150%.

Changes:

  • Minimum font size 18px (body)
  • All touch targets ≥ 48×48 px on mobile (normally 44×44)
  • Icon sizes increased to 24px minimum
  • Reduced animation (same as reduced-motion)
  • High-contrast color scheme (if prefers-contrast: forced)

3.3 Color-blind safe palette​

The design token palette is validated against three color-blindness simulations using the colorblindly Figma plugin:

  • Deuteranopia (red-green): All status colors use distinct shapes + icons
  • Protanopia (red-weak): Same
  • Tritanopia (blue-yellow): Blue used only as a secondary signal, never alone

All status badges (booking statuses, housekeeping statuses) use icon + color + text label — never color alone.

3.4 Pashto / Dari literacy considerations​

Literacy statistics context: Afghanistan has a 43% literacy rate (2023, UNESCO). A non-trivial portion of hotel guests may have limited reading ability.

Design adaptations:

  • Kiosk: icon-primary design; text labels secondary; TTS available
  • Consumer mobile: property photos prominent; text secondary; rating stars (universal) over text ratings
  • Error messages: visual icon prominent; short text ≤ 8 words
  • Booking flow: visual room photos + price (Latin numerals) are the primary decision input; detailed text is secondary

4. CI accessibility gates​

GateToolThresholdEnforced on
axe automated scanaxe-playwright0 critical / serious violationsEvery PR
VoiceOver key flowsManual + recorded test100% passWeekly
Contrast auditFigma A11y plugin + storybook-addon-a11y0 failuresPer design review
Focus order checkManual (tabbing through all interactive)100% logical orderPer new screen

References​