Quick Accessibility Wins

The Problem

Text too light against background. WCAG requires 4.5:1 contrast ratio for normal text.

Quick Fix

/* Instead of light gray */
color: #999;  /* Bad: 2.7:1 on white */

/* Use darker gray */
color: #595959;  /* Good: 7:1 on white */

Tool: WebAIM Contrast Checker

The Problem

Screen readers can't identify what inputs are for.

Quick Fix

<!-- Bad -->
<input type="email" placeholder="Email">

<!-- Good -->
<label for="email">Email address</label>
<input type="email" id="email">

The Problem

Skipping levels (h1 → h3) breaks screen reader navigation.

Quick Fix

<!-- Bad -->
<h1>My App</h1>
<h3>Features</h3>  <!-- Skipped h2! -->

<!-- Good -->
<h1>My App</h1>
<h2>Features</h2>

The Problem

Icon-only buttons are announced as just "button" by screen readers.

Quick Fix

<!-- Bad -->
<button><svg>close icon</svg></button>

<!-- Good -->
<button aria-label="Close menu">
  <svg aria-hidden="true">close icon</svg>
</button>

The Problem

Assistive tech can't help users skip to content.

Quick Fix

<header>Logo and nav</header>
<main>Primary content</main>
<footer>Copyright</footer>