mralexsaavedra/spotiarr/accessibility

<!-- ❌ Missing alt -->
<img src="chart.png" />
 
<!-- ✅ Descriptive alt -->
<img src="chart.png" alt="Bar chart showing 40% increase in Q3 sales" />
 
<!-- ✅ Decorative image (empty alt) -->
<img src="decorative-border.png" alt="" role="presentation" />
 
<!-- ✅ Complex image with longer description -->
<figure>
  <img
    src="infographic.png"
    alt="2024 market trends infographic"
    aria-describedby="infographic-desc"
  />
  <figcaption id="infographic-desc">
    <!-- Detailed description -->
  </figcaption>
</figure>

<!-- ❌ No accessible name -->
<button>
  <svg><!-- menu icon --></svg>
</button>
 
<!-- ✅ Using aria-label -->
<button aria-label="Open menu">
  <svg aria-hidden="true"><!-- menu icon --></svg>
</button>
 
<!-- ✅ Using visually hidden text -->
<button>
  <svg aria-hidden="true"><!-- menu icon --></svg>
  <span class="visually-hidden">Open menu</span>
</button>

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ❌ Low contrast (2.5:1) */
.low-contrast {
  color: #999;
  background: #fff;
}
 
/* ✅ Sufficient contrast (7:1) */
.high-contrast {
  color: #333;
  background: #fff;
}
 
/* ✅ Focus states need contrast too */
:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

<!-- ❌ Only color indicates error -->
<input class="error-border" />
<style>
  .error-border {
    border-color: red;
  }
</style>
 
<!-- ✅ Color + icon + text -->
<div class="field-error">
  <input aria-invalid="true" aria-describedby="email-error" />
  <span id="email-error" class="error-message">
    <svg aria-hidden="true"><!-- error icon --></svg>
    Please enter a valid email address
  </span>
</div>

<!-- Video with captions -->
<video controls>
  <source src="video.mp4" type="video/mp4" />
  <track
    kind="captions"
    src="captions.vtt"
    srclang="en"
    label="English"
    default
  />
  <track
    kind="descriptions"
    src="descriptions.vtt"
    srclang="en"
    label="Descriptions"
  />
</video>
 
<!-- Audio with transcript -->
<audio controls>
  <source src="podcast.mp3" type="audio/mp3" />
</audio>
<details>
  <summary>Transcript</summary>
  <p>Full transcript text...</p>
</details>

// ❌ Only handles click
element.addEventListener("click", handleAction);
// ✅ Handles both click and keyboard
element.addEventListener("click", handleAction);
element.addEventListener("keydown", (e) => {
  if (e.key === "Enter" || e.key === " ") {
    e.preventDefault();
    handleAction();
  }
});

/* ❌ Never remove focus outlines */
*:focus {
  outline: none;
}
 
/* ✅ Use :focus-visible for keyboard-only focus */
:focus {
  outline: none;
}
 
:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}
 
/* ✅ Or custom focus styles */
button:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.5);
}

/* ✅ Account for sticky headers when scrolling to focused elements */
:target {
  scroll-margin-top: 80px;
}
 
/* ✅ Ensure focused items clear fixed/sticky bars */
:focus {
  scroll-margin-top: 80px;
  scroll-margin-bottom: 60px;
}

/* ✅ Minimum target size */
button,
[role="button"],
input[type="checkbox"] + label,
input[type="radio"] + label {
  min-width: 24px;
  min-height: 24px;
}
 
/* ✅ Comfortable target size (recommended 44×44) */
.touch-target {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

// Allow users to extend time limits
function showSessionWarning() {
  const modal = createModal({
    title: "Session Expiring",
    content: "Your session will expire in 2 minutes.",
    actions: [
      { label: "Extend session", action: extendSession },
      { label: "Log out", action: logout },
    ],
    timeout: 120000,
  });
}

/* Respect 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;
  }
}

<!-- ❌ No language specified -->
<html>
  <!-- ✅ Language specified -->
  <html lang="en">
    <!-- ✅ Language changes within page -->
    <p>The French word for hello is <span lang="fr">bonjour</span>.</p>
  </html>
</html>

<!-- Navigation should be consistent across pages -->
<nav aria-label="Main">
  <ul>
    <li><a href="/" aria-current="page">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

<!-- ✅ Auto-fill shipping address from billing -->
<fieldset>
  <legend>Shipping address</legend>
  <label>
    <input type="checkbox" id="same-as-billing" checked />
    Same as billing address
  </label>
  <!-- Fields auto-populated when checked -->
</fieldset>

<!-- ✅ Allow paste in password fields -->
<input type="password" id="password" autocomplete="current-password" />
 
<!-- ✅ Offer passwordless alternatives -->
<button type="button">Sign in with passkey</button>
<button type="button">Email me a login link</button>

<!-- ❌ ARIA role on div -->
<div role="button" tabindex="0">Click me</div>
 
<!-- ✅ Native button -->
<button>Click me</button>
 
<!-- ❌ ARIA checkbox -->
<div role="checkbox" aria-checked="false">Option</div>
 
<!-- ✅ Native checkbox -->
<label><input type="checkbox" /> Option</label>

# Lighthouse accessibility audit
npx lighthouse https://example.com --only-categories=accessibility
 
# axe-core
npm install @axe-core/cli -g
axe https://example.com