Skip to content
Learnille Documentation

Accessibility (a11y) & WCAG Guidelines

Accessibility (a11y) & WCAG Guidelines

Overview

Learnille is committed to providing an accessible learning platform for all users, including those with visual, auditory, motor, or cognitive impairments. All frontends must conform to WCAG 2.1 Level AA standards.

♿ Core Accessibility Standards

1. Color Contrast & Visual Standards

  • Text Contrast: Body text must maintain a minimum contrast ratio of 4.5:1 against its background. Large headings (18pt+) must achieve at least 3:1.
  • Interactive State Cues: Color alone must never be used as the sole indicator of state (e.g., error messages must include an alert icon and text description alongside red styling).

2. Keyboard Navigation & Focus Ring

  • Tab Sequence: Logical DOM tab ordering for all interactive elements (buttons, links, form inputs, modal close buttons).
  • Focus Ring: Custom high-contrast outline (2px solid #6366f1 with offset 2px) visible during keyboard focus (:focus-visible). Never suppress focus rings with outline: none without providing an equivalent focus indicator.

3. Screen Reader & ARIA Standards

  • Form Controls: All inputs must have associated <label> tags or explicit aria-label / aria-labelledby attributes.
  • Dynamic Content: Live status changes (e.g., real-time chat messages, socket notifications, booking status updates) must use aria-live="polite" or aria-live="assertive".
  • Modals & Dialogs: Trapped keyboard focus inside open dialogs (FocusLock), with Escape key configured to close.

4. Reduced Motion Preference

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}