Your Progress

0 of 5 completed

Web Accessibility Quick Start Guide

Make your website accessible to everyone with this practical 30-minute checklist

30 minutes
High Impact

Over 1 billion people worldwide have disabilities. Making your website accessible isn't just the right thing to do—it improves usability for everyone and can increase your audience by up to 20%.

What is WCAG 2 AA?

WCAG (Web Content Accessibility Guidelines) 2 AA is the internationally recognized standard for web accessibility. It's built on four core principles:

Perceivable
Operable
Understandable
Robust

5 Essential Accessibility Checks

Step 1 of 5
1

Add Alt Text to Images

5 minutes

✓ What to check:

  • Every image has an alt attribute
  • Alt text describes the image content and purpose
  • Decorative images use empty alt text (alt="")
  • Complex images have detailed descriptions nearby

Quick fix: Right-click images in your browser inspector and add alt="descriptive text here" to each img tag. For decorative images, use alt="".

2

Ensure Keyboard Navigation

7 minutes

✓ What to check:

  • All interactive elements can be reached with Tab key
  • Focus indicators are clearly visible
  • Tab order follows logical reading order
  • No keyboard traps (can Tab out of all elements)

Quick fix: Unplug your mouse and try navigating your site with just the Tab, Enter, and arrow keys. Add tabindex="0" to custom interactive elements if needed.

3

Check Color Contrast

6 minutes

✓ What to check:

  • Text has 4.5:1 contrast ratio with background (3:1 for large text)
  • Interactive elements have sufficient contrast
  • Don't rely on color alone to convey information
  • Links are distinguishable from regular text

Quick fix: Use a free contrast checker like WebAIM's tool. If contrast is too low, darken text or lighten backgrounds until you reach 4.5:1 ratio.

4

Label Form Fields Properly

6 minutes

✓ What to check:

  • Every input has a visible label element
  • Labels are associated with inputs using for/id attributes
  • Required fields are clearly marked
  • Error messages are clear and associated with fields

Quick fix: Wrap each input with a label tag or use for="input-id" on the label. Add aria-required="true" to required fields and aria-describedby for error messages.

5

Use Semantic HTML Structure

6 minutes

✓ What to check:

  • Use proper heading hierarchy (h1, h2, h3) without skipping levels
  • Page has landmark elements (header, nav, main, footer)
  • Lists use ul/ol tags, not just styled divs
  • Buttons use button tags, not clickable divs

Quick fix: Replace generic divs with semantic HTML5 elements. Change div class="header" to header, div class="navigation" to nav, and ensure your main content is wrapped in a main tag.

Helpful Testing Tools

WAVE Browser Extension

Free tool that evaluates web accessibility directly in your browser. Shows errors, alerts, and features with visual indicators.

Get WAVE Extension

WebAIM Contrast Checker

Simple tool to check if your color combinations meet WCAG contrast requirements. Just enter foreground and background colors.

Check Contrast

axe DevTools

Powerful accessibility testing integrated into Chrome DevTools. Automatically finds and explains accessibility issues.

Get axe DevTools