# Keyboard Navigation Audit

**Page:** [URL]
**Date:** [Date]
**Tester:** [Name]
**Browser:** [Browser and version]

## Results

| Component | Location | Keys Tested | Result | Notes |
|---|---|---|---|---|
| Skip link | Top of page | Tab, Enter | PASS | Jumps to #main |
| Main nav | Header | Tab, Enter, Arrow keys | FAIL | No arrow key support between items |
| Search form | Header | Tab, Enter | PASS | Labels announced correctly |
| ... | ... | ... | ... | ... |

## Failures

### [Component] — [Location]
**Issue:** [Description]
**Expected:** [What should happen]
**Actual:** [What happens instead]
**WCAG:** [Criterion number]
**Fix:** [Recommendation]

<!-- No alt attribute — screen reader announces the filename -->
<img src="team-photo-2024.jpg">

<!-- Useless alt text -->
<img src="chart.png" alt="image">
<img src="hero-banner.jpg" alt="banner">

<!-- Alt text that repeats adjacent text -->
<h2>Meet Our Team</h2>
<img src="team.jpg" alt="Meet Our Team">

<!-- Informative image: describe what the image communicates -->
<img src="team-photo-2024.jpg"
     alt="The engineering team celebrating the product launch, gathered in the office with confetti">

<!-- Chart: describe the data, not the visual -->
<img src="chart.png"
     alt="Bar chart showing monthly revenue: January $45K, February $52K, March $61K, trending upward">

<!-- Decorative image: empty alt so screen readers skip it -->
<img src="decorative-divider.svg" alt="">

<!-- Adjacent text already describes the image -->
<h2>Meet Our Team</h2>
<img src="team.jpg" alt="">  <!-- Empty because the heading already says it -->

<!-- Placeholder is NOT a label — it disappears when you start typing -->
<input type="email" placeholder="Email address">

<!-- No label, no placeholder — completely unlabeled -->
<input type="text" name="search">

<!-- Label exists but isn't connected to the input -->
<p>Email Address</p>
<input type="email" id="email">

<!-- Method 1: Explicit <label> with for/id (preferred) -->
<label for="email">Email Address</label>
<input type="email" id="email" placeholder="user@example.com">

<!-- Method 2: Wrapping label (no for/id needed) -->
<label>
  Email Address
  <input type="email" placeholder="user@example.com">
</label>

<!-- Method 3: aria-label (when visible label isn't desirable) -->
<input type="search" aria-label="Search articles" placeholder="Search...">

<!-- Method 4: aria-labelledby (label text exists elsewhere on page) -->
<h2 id="search-heading">Search Articles</h2>
<input type="search" aria-labelledby="search-heading">

/* FAIL: Light gray on white — ratio 2.6:1 */
.subtitle { color: #aaaaaa; background: #ffffff; }

/* FAIL: Medium gray on white — ratio 3.5:1 */
.body-text { color: #999999; background: #ffffff; }

/* FAIL: White text on light blue — ratio 2.9:1 */
.cta-btn { color: #ffffff; background: #74b9ff; }

/* FAIL: Placeholder text too light — ratio 2.3:1 */
input::placeholder { color: #cccccc; }

/* PASS: Dark gray on white — ratio 7.0:1 */
.subtitle { color: #666666; background: #ffffff; }

/* PASS: Darker gray on white — ratio 4.6:1 */
.body-text { color: #767676; background: #ffffff; }

/* PASS: White on darker blue — ratio 4.7:1 */
.cta-btn { color: #ffffff; background: #2d7dd2; }

/* PASS: Darker placeholder — ratio 4.6:1 */
input::placeholder { color: #767676; }