<!-- ❌ Bad: Not semantic -->
<div class="header">
  <div class="nav">
    <div class="logo">Brand</div>
  </div>
</div>

<!-- ✅ Good: Semantic with landmarks -->
<header>
  <nav aria-label="Main navigation">
    <a href="/" aria-label="Home">Brand</a>
  </nav>
</header>
<main id="main-content">
  <article>...</article>
</main>
<footer>...</footer>

/* ✅ Good: Clear focus indicator */
:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

/* ❌ Bad: outline: none without alternative */
button:focus {
  outline: none;
}

<!-- Place as first element in body -->
<a href="#main-content" class="skip-link">
  Skip to main content
</a>

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #005fcc;
  color: white;
  padding: 8px 16px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

:root {
  /* ✅ Good: Sufficient contrast */
  --text-primary: #1a1a2e;   /* 15.5:1 against white */
  --text-secondary: #4a4a68; /* 7.2:1 against white */

  /* ❌ Bad: Insufficient contrast */
  --text-muted: #888888; /* 2.8:1 against white */
}

// ❌ Bad: Unnecessary ARIA
<div role="button" tabindex="0" onClick={handleClick}>
  Submit
</div>

// ✅ Good: Native HTML
<button type="submit">Submit</button>

// ❌ Bad: Label not connected
<input type="text" placeholder="Email" />

// ✅ Good: Explicit association
<label htmlFor="email">Email</label>
<input id="email" type="email" />

<label htmlFor="password">Password</label>
<input
  id="password"
  type="password"
  aria-describedby="password-requirements password-error"
  aria-invalid="true"
/>
<p id="password-requirements">
  Minimum 8 characters, 1 uppercase, 1 number
</p>
<p id="password-error" role="alert">
  Password must contain at least 8 characters
</p>