# Accessibility Module

The Accessibility module provides WCAG 2.1 AA compliance features that are automatically initialized when AdminLTE loads.

##### Features

Feature | WCAG Criterion | Description
--- | --- | ---
Skip Links | 2.4.1 Bypass Blocks | Adds “Skip to main content” and “Skip to navigation” links.
Focus Management | 2.4.3 & 2.4.7 | Modal focus restoration to the triggering element and Escape handling.
Keyboard Navigation | 2.1.1 Keyboard | Arrow key navigation in menus, Enter/Space for custom buttons.
Reduced Motion | 2.3.3 Animation | Respects `prefers-reduced-motion` by disabling animations.
Live Announcements | 4.1.3 Status Messages | Announces errors and success messages to screen readers.
Error Identification | 3.3.1 & 3.3.2 | Auto-labels unlabelled inputs, announces form validation errors.
Table Accessibility | 1.3.1 Info & Relationships | Adds `scope` attributes to table headers automatically.

##### Configuration

The module is initialized in `adminlte.ts` with all features enabled by default:

    initAccessibility({
      announcements: true,
      skipLinks: true,
      focusManagement: true,
      keyboardNavigation: true,
      reducedMotion: true
    })

Set any option to `false` to disable that feature.

##### Public API

    import { initAccessibility } from 'admin-lte'

    const a11y = initAccessibility()

    // Announce a message to screen readers
    a11y.announce('Item saved successfully', 'polite')
    a11y.announce('Form has errors', 'assertive')

    // Focus a specific element
    a11y.focusElement('#my-input')

    // Trap focus inside a container (useful for custom modals/dialogs)
    a11y.trapFocus(document.querySelector('.my-dialog'))

    // Add semantic landmarks to the page
    a11y.addLandmarks()

##### Utility Functions

    import { accessibilityUtils } from 'admin-lte'

    // Check color contrast ratio (WCAG 1.4.3)
    const result = accessibilityUtils.checkColorContrast('rgb(0,0,0)', 'rgb(255,255,255)')
    // { ratio: 21, passes: true }

    // Check if an element is focusable
    accessibilityUtils.isFocusable(element)

    // Generate a unique ID for ARIA attributes
    accessibilityUtils.generateId('modal') // "modal-x7k2m9p4q"

##### CSS Classes

Class | Description
--- | ---
`skip-links` | Container for skip navigation links.
`skip-link` | Individual skip link, visible only on focus.
`reduce-motion` | Added to `<body>` when user prefers reduced motion.
`sr-only` | Screen reader only content (visually hidden).
`live-region` | ARIA live region for dynamic announcements.

##### Notes

- The module integrates with Bootstrap’s modal and dropdown events for focus management.
- Modal Escape key handling is deferred to Bootstrap to respect `keyboard: false` and stacked modals.
- Form validation announcements work automatically for any input with HTML5 validation attributes.