> ## Documentation Index
> Fetch the complete documentation index at: https://ihub.learnille.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Accessibility (a11y) & WCAG Guidelines

> Migrated from the previous Learnille internal documentation hub

## 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

```css theme={null}
@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;
  }
}
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.