Fix: Add descriptive alt text

<!-- Bad: No alt text -->
<img src="hero.jpg">
<!-- Good: Descriptive alt text -->
<img src="hero.jpg" alt="Developer coding on laptop in modern office">

<!-- Good: Decorative image (empty alt) -->
<img src="decoration.svg" alt="">

Examples of contrast ratios

Fix: Associate labels with inputs

<!-- Bad: No label association -->
<input type="email" placeholder="Email">
<!-- Good: Explicit label -->
<label for="email">Email address</label>
<input type="email" id="email">

<!-- Good: Implicit label -->
<label>
  Email address
  <input type="email">
</label>

Fix: Use descriptive link text

<!-- Bad: Non-descriptive -->
<a href="/pricing">Click here</a>
<a href="/docs">Read more</a>
<!-- Good: Descriptive text -->
<a href="/pricing">View pricing plans</a>
<a href="/docs">Read the documentation</a>

Fix: Provide visible focus styles

/* Bad: Removing focus indicator */
:focus {
  outline: none;
}
/* Good: Custom focus style */
:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}

/* Good: Focus-visible for modern browsers */
:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}