How to run a quick WCAG spot-check

Use this 30-minute checklist to identify the most common accessibility issues on your website and ensure compliance with Web Content Accessibility Guidelines (WCAG).

30 minutes
High Impact

Web accessibility isn't just a legal requirement—it's about creating inclusive digital experiences for everyone. A quick WCAG spot-check can help you identify and fix the most common accessibility barriers before they impact your users. This comprehensive checklist will guide you through the essential accessibility checks you can complete in just 30 minutes.

What is WCAG?

The Web Content Accessibility Guidelines (WCAG) are international standards that define how to make web content more accessible to people with disabilities. WCAG 2.1 Level AA is the most commonly referenced standard and is required by many accessibility laws worldwide.

Perceivable
Operable
Understandable
Robust

Your 30-Minute WCAG Spot-Check Checklist

0 of 6 checks completed
1

Keyboard Navigation

5 minutes
Keyboard navigation accessibility

✓ Tab through your entire page

  • Can you reach every interactive element using only the Tab key?
  • Is the tab order logical and intuitive?
  • Are focus indicators clearly visible on all focusable elements?
  • Can you activate buttons and links using Enter or Space?

Quick fix: Ensure all interactive elements have visible focus styles and logical tab order.

2

Images and Alt Text

5 minutes
Image accessibility and alt text

✓ Review all images on the page

  • Do informative images have descriptive alt text?
  • Do decorative images have empty alt attributes (alt="")?
  • Are complex images (charts, graphs) properly described?
  • Do linked images describe the link destination?

Quick fix: Add meaningful alt text that describes the image's purpose and content.

3

Headings and Structure

5 minutes
Website structure and headings

✓ Check heading hierarchy

  • Does the page have a single H1 tag?
  • Are headings used in logical order (H1, H2, H3, etc.)?
  • Do headings accurately describe the content that follows?
  • Are headings used for structure, not just styling?

Quick fix: Reorganize headings to follow proper hierarchy and use CSS for visual styling.

4

Color and Contrast

5 minutes
Color contrast and accessibility

✓ Test color contrast ratios

  • Does text have sufficient contrast against backgrounds? (4.5:1 for normal text, 3:1 for large text)
  • Is information conveyed through more than just color?
  • Are error messages and important information clearly distinguishable?
  • Do interactive elements have adequate contrast in all states?

Quick fix: Use online contrast checkers and adjust colors to meet WCAG standards.

5

Forms and Labels

5 minutes
Web forms and labels accessibility

✓ Examine form accessibility

  • Does every form field have a clear, descriptive label?
  • Are required fields clearly marked?
  • Do error messages clearly explain what needs to be fixed?
  • Are form instructions easy to understand?

Quick fix: Associate labels with form controls and provide clear error messaging.

6

Links and Navigation

5 minutes
Website navigation and links

✓ Review link accessibility

  • Do links have descriptive text that makes sense out of context?
  • Are "click here" and "read more" links avoided or properly contextualized?
  • Is the main navigation consistent and easy to understand?
  • Are there skip links to main content?

Quick fix: Rewrite vague link text and add skip navigation links.

Essential Tools for Your Spot-Check

Browser Extensions

  • axe DevTools: Comprehensive accessibility testing
  • WAVE: Visual accessibility evaluation
  • Colour Contrast Analyser: Quick contrast checking

Online Tools

  • WebAIM Contrast Checker: Color contrast validation
  • Heading Map: Heading structure visualization
  • Keyboard Navigation Tester: Tab order validation

Common Issues and Quick Fixes

Missing Alt Text

Problem: Images without alternative text are invisible to screen readers.

Solution: Add descriptive alt attributes to all meaningful images, use alt="" for decorative images.

Poor Color Contrast

Problem: Text that's difficult to read affects users with visual impairments.

Solution: Ensure text meets WCAG contrast ratios: 4.5:1 for normal text, 3:1 for large text.

Keyboard Traps

Problem: Users get stuck in interactive elements and can't navigate away.

Solution: Ensure all interactive elements can be exited using standard keyboard commands.

Unlabeled Form Fields

Problem: Form fields without proper labels are confusing for screen reader users.

Solution: Use proper label elements or aria-label attributes for all form controls.

Beyond the Spot-Check

While this 30-minute spot-check covers the most common accessibility issues, comprehensive accessibility testing requires:

Screen reader testing with tools like NVDA, JAWS, or VoiceOver
User testing with people who have disabilities
Automated testing integrated into your development workflow
Regular audits by accessibility professionals

Take Action Today

Accessibility is an ongoing commitment, not a one-time fix. Start with this spot-check, but remember that creating truly accessible experiences requires continuous learning and improvement.

Your next steps:

  1. Run this spot-check on your most important pages
  2. Fix the issues you identify
  3. Implement accessibility testing in your regular workflow
  4. Consider professional accessibility auditing for comprehensive compliance

Remember: Every accessibility improvement you make helps create a more inclusive web for everyone. Start small, be consistent, and keep learning.