`views/public/accessibility.ejs`

45 lines
<%- include('../partials/head', { title, meta_desc }) %>
<%- include('../partials/header') %>

<main class="legal-page">
  <section class="section">
    <div class="wrap narrow">
      <p class="muted small"><a href="/">← Home</a></p>
      <h1>Accessibility Statement</h1>
      <p class="muted">Last updated: <%= updated %></p>

      <h2>Our commitment</h2>
      <p class="prose">Butlr is built to be usable by people with a wide range of disabilities — vision, hearing, motor, cognitive. We target conformance with <strong>WCAG 2.1 Level AA</strong> across every public-facing page. Where we fall short, we list it openly below and commit to specific fixes.</p>

      <h2>What's been built for accessibility</h2>
      <ul class="prose">
        <li><strong>Semantic HTML</strong>: every page uses native form elements, headings (h1 → h3), and landmark regions (header / main / footer / nav).</li>
        <li><strong>Keyboard navigation</strong>: every interactive element is keyboard-accessible. Tab order follows visual order. No keyboard traps.</li>
        <li><strong>Screen-reader labels</strong>: every form field has an explicit <code>&lt;label&gt;</code>. Required fields use both visual indicator ("required") and <code>aria-required</code>. Hidden radio inputs are paired with clickable labels.</li>
        <li><strong>Focus indicators</strong>: every focusable element shows a 2px outline in the accent color (CSS <code>:focus-visible</code>).</li>
        <li><strong>Color contrast</strong>: text is rendered at WCAG AA contrast against the surface color in both light and dark modes.</li>
        <li><strong>No motion-required UX</strong>: nothing requires gesture or motion. The hero animations are decorative only and respect <code>prefers-reduced-motion</code> on Phase 2.</li>
        <li><strong>Dark mode</strong>: full theme toggle persisted in localStorage with anti-flash pre-render.</li>
        <li><strong>Touch targets</strong>: all interactive elements meet the 44px × 44px minimum on mobile.</li>
        <li><strong>No timed forms</strong>: the wizard has no session timeout. Step state persists in hidden inputs and survives back/forward navigation.</li>
      </ul>

      <h2>Known gaps</h2>
      <ul class="prose">
        <li><strong>Reduced motion</strong>: the rotating wave animation in the hero does not yet check <code>prefers-reduced-motion</code>. Planned for Phase 2.</li>
        <li><strong>Screen-reader testing</strong>: we've tested with VoiceOver on macOS Safari but not yet with NVDA on Windows. NVDA pass-through targeted before public launch.</li>
        <li><strong>High-contrast mode</strong>: Windows High Contrast not yet explicitly tested.</li>
        <li><strong>Audio captions</strong>: the Phase 2 AI voice agent (when shipped) will offer real-time transcript in the user's pane.</li>
      </ul>

      <h2>Need help or found a problem?</h2>
      <p class="prose">If you can't use part of Butlr because of an accessibility barrier, email <a href="mailto:accessibility@butlr.ai">accessibility@butlr.ai</a> with: the page URL, the browser + screen reader (if any), and a description of what didn't work. We aim to respond within 2 business days and fix the issue within 30 days for WCAG-AA-level barriers.</p>

      <h2>Alternate ways to use the service</h2>
      <p class="prose">If filling out the web wizard is not accessible to you for any reason, email <a href="mailto:hello@butlr.ai">hello@butlr.ai</a> with the same information the form asks for (business name, business phone, the goal of the call, your callback number) and we will queue the call manually.</p>
    </div>
  </section>
</main>

<%- include('../partials/footer') %>