<!-- Bad ❌ -->
<img src="logo.png">

<!-- Good ✅ -->
<img src="logo.png" alt="Company Logo">

<!-- Decorative (empty alt) -->
<img src="divider.png" alt="">

<!-- Bad ❌ -->
<input type="text" placeholder="Email">

<!-- Good ✅ -->
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required>

<!-- Bad ❌ -->
<div onclick="submit()">Submit</div>

<!-- Good ✅ -->
<button type="submit">Submit</button>

<!-- Bad ❌ -->
<a href="#">Click here</a>

<!-- Good ✅ -->
<a href="/products">View all products</a>

/* Good contrast */
.text {
  color: #1e293b;        /* Dark gray */
  background: #ffffff;   /* White */
  /* Contrast ratio: 13.5:1 ✅ */
}

/* Bad contrast */
.text {
  color: #94a3b8;        /* Light gray */
  background: #ffffff;   /* White */
  /* Contrast ratio: 2.8:1 ❌ */
}

// Focus management
element.focus();
element.blur();

// Focus trap for modals
const focusableElements = modal.querySelectorAll(
  'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
);

<!-- Live regions for dynamic content -->
<div aria-live="polite" aria-atomic="true">
  Status: Loading...
</div>

<!-- Hidden visually but readable -->
<span class="sr-only">Opens in new tab</span>

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

# Lighthouse CLI
npx lighthouse https://example.com --view

# axe-core
npm install axe-core