# Accessibility Plan (WCAG Compliance) - Kevron Suites & Apartments

## 1. Accessible Markup

* **Semantic Order**: Clear structural layout using `<header>`, `<main>`, `<section>`, `<nav>`, and `<footer>` HTML5 containers.
* **Header Hierarchy**: Single `<h1>` per view, sequential descending heading hierarchy (`<h2>` to `<h6>`) without skipping levels.
* **Interactive Elements**: Unique and descriptive `id` attributes on all buttons, forms, and tabs to prevent screen reader ambiguity.
* **Skip-to-Content**: Add a hidden skip link at the top of every page layout to allow keyboard users to skip header navigation:
  ```html
  <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-primary text-white p-3 rounded-full z-50">
    Skip to Content
  </a>
  ```

---

## 2. Keyboard & Interaction Hardening

* **Visible Focus States**: Explicit outline cues (`focus:ring-2 focus:ring-secondary focus:outline-none`) on all inputs, anchor elements, and sliders.
* **Keyboard Navigation**: Enable standard keyboard triggers (arrow keys, Enter, Esc, Space) for Preline tabs, date pickers, dropdown lists, and modal components.
* **Keyboard Trap Prevention**: Verify that user focus never gets stuck in any modal popup, newsletter panel, or date picker range.

---

## 3. High-Contrast & Scaling Support

* **Accessibility Widget**: Integrate an floating accessibility widget in the header containing:
  * Font Resizing Controls: Dynamic `font-size` scaling through interactive font magnification levels.
  * High-Contrast Mode Toggle: Dynamic stylesheet color swapping for optimal legibility.
* **Contrast Compliance**: Ensure standard and text colors exceed WCAG 2.1 AA recommendations:
  * Minimum text-to-background contrast ratio of `4.5:1` for standard text and `3:1` for bold visual weights.
  * Strictly avoid low-contrast overlays on hero sliders.

---

## 4. Reduced Motion Support

Respect operating system accessibility selections using media queries in the CSS design system. Suppress high-GPU GSAP scroll triggers, animations, and video carousels immediately when user settings reflect motion restrictions:
```css
@media (prefers-reduced-motion: reduce) {
  * {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}
```