WCAG Fix Templates

Common accessibility issues with copy-paste code solutions

Filter by category:
All Perceivable Operable Understandable Robust
Critical

Missing Alt Text on Images

WCAG 1.1.1 Level A

Images must have alternative text that describes their content or function.

✗ Don't do this 
<img src="product.jpg">
✓ Do this instead 
<img src="product.jpg" alt="Blue wireless headphones with noise cancellation">
Tips:
  • Describe the image content, not just "image of..."
  • Use empty alt="" for decorative images
  • Keep alt text under 125 characters
  • For complex images, use longdesc or figure/figcaption
Critical

Missing Form Labels

WCAG 1.3.1 Level A

Form inputs must have associated labels that describe their purpose.

✗ Don't do this 
<input type="email" placeholder="Enter email">
✓ Do this instead 
<label for="email">Email Address</label>
<input type="email" id="email" placeholder="Enter email">

<!-- Or with aria-label -->
<input type="email" aria-label="Email Address" placeholder="Enter email">
Tips:
  • Always use <label> with matching for/id
  • Placeholder is not a substitute for label
  • Use aria-labelledby for complex labels
  • Group related fields with fieldset/legend
Major

Insufficient Color Contrast

WCAG 1.4.3 Level AA

Text must have sufficient contrast against its background.

✗ Don't do this 
.light-text {
  color: #999999;
  background: #ffffff;
  /* Contrast ratio: 2.85:1 - FAILS */
}
✓ Do this instead 
.accessible-text {
  color: #595959;
  background: #ffffff;
  /* Contrast ratio: 7:1 - PASSES AAA */
}

.large-text {
  color: #767676;
  background: #ffffff;
  font-size: 18pt;
  /* Contrast ratio: 4.54:1 - PASSES AA */
}
Tips:
  • Normal text: minimum 4.5:1 ratio (AA)
  • Large text (18pt+): minimum 3:1 ratio
  • Use contrast checker tools
  • Consider dark mode alternatives
Major

Improper Heading Structure

WCAG 1.3.1 Level A

Headings must be in logical hierarchical order.

✗ Don't do this 
<h1>Page Title</h1>
<h3>Section</h3>  <!-- Skipped h2 -->
<h5>Subsection</h5>  <!-- Skipped h4 -->
✓ Do this instead 
<h1>Page Title</h1>
  <h2>Section</h2>
    <h3>Subsection</h3>
    <h3>Another Subsection</h3>
  <h2>Another Section</h2>

<!-- Styling without breaking hierarchy -->
<h2 class="text-xl">Styled as large</h2>
<h3 class="text-xl">Also styled as large</h3>
Tips:
  • Start with one h1 per page
  • Never skip heading levels
  • Use CSS for visual styling, not heading levels
  • Headings help screen reader navigation

Find these issues automatically

WCAG Pulse scans your website and shows exactly which fixes you need.

Try Free Scan