How to Audit Your Website for Accessibility (Step-by-Step)

DEFINITION

WCAG

Web Content Accessibility Guidelines, published by the W3C. WCAG 2.1 AA is the standard most courts and regulators reference when evaluating whether a website is accessible. It covers four principles: Perceivable, Operable, Understandable, and Robust.

DEFINITION

ARIA

Accessible Rich Internet Applications. A set of HTML attributes that add semantic meaning to elements for assistive technologies. ARIA labels, roles, and states help screen readers understand interactive components like modals, tabs, and dropdown menus.

DEFINITION

Screen Reader

Software that reads website content aloud for users who are blind or have low vision. Common screen readers include NVDA (free, Windows), JAWS (paid, Windows), and VoiceOver (built into macOS and iOS). Screen reader compatibility is a core WCAG requirement.

DEFINITION

Alt Text

A text description added to an image's alt attribute in HTML. Screen readers read this text aloud so users who cannot see the image understand its content. Missing alt text is the single most common accessibility violation found in automated scans.

DEFINITION

Color Contrast

The difference in luminance between foreground text and its background. WCAG 2.1 AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Low contrast makes text unreadable for users with low vision or color blindness.

Why Accessibility Audits Matter for Your Business

ADA-related web accessibility lawsuits have been climbing year over year. If your website has barriers that prevent people with disabilities from using it, you face legal exposure regardless of your company size. Courts do not care whether you intended to exclude anyone.

An accessibility audit identifies what is broken, how to fix it, and how to prove you took reasonable steps toward compliance. That proof matters if you ever receive a demand letter.

Step 1: Run an Automated Scan

Start with an automated scan. Tools like A11yProof, axe DevTools, and WAVE test your HTML against WCAG 2.1 success criteria and return a list of violations with severity ratings.

Automated scans take minutes and catch the low-hanging fruit: images without alt attributes, form inputs without labels, links with no discernible text, and color combinations that fail contrast ratios. This gives you a baseline count of known issues.

Do not stop here. Automated tools only test what is programmatically verifiable. They cannot judge whether your alt text actually describes the image, whether your tab order makes logical sense, or whether a custom JavaScript widget is usable without a mouse.

Step 2: Test Keyboard Navigation

Disconnect your mouse and navigate your entire site using only the keyboard. Press Tab to move forward through interactive elements, Shift+Tab to move backward, Enter to activate buttons and links, and arrow keys for menus and radio buttons.

Watch for these problems:

• Keyboard traps — places where focus enters a component (like a modal or dropdown) and cannot leave
• Invisible focus — you are tabbing through elements but cannot visually tell where the focus is
• Skipped elements — interactive buttons or links that Tab skips entirely
• Illogical tab order — focus jumps around the page instead of following visual reading order

Keyboard accessibility is non-negotiable. Every interactive element on your site must be reachable and operable without a mouse.

Step 3: Run a Screen Reader Pass

Turn on a screen reader and experience your site the way a blind user would. On Mac, activate VoiceOver with Cmd+F5. On Windows, download NVDA (free) and press Ctrl+Alt+N to start it.

Navigate through your pages and listen. Are images described? Do form fields announce their labels? Does the reading order match the visual layout? Do buttons and links announce their purpose?

This step is where you find the issues no scanner can detect. A button labeled “Click here” passes automated testing — it has text. But it fails the screen reader test because a user hearing “Click here” without visual context has no idea what the button does.

Step 4: Check Forms and Error Handling

Forms are the highest-risk area on most websites. Submit your contact form, checkout flow, or signup form with empty or invalid fields. Then check:

• Does each error message identify which field has the problem?
• Are errors announced to screen readers when they appear?
• Can you correct the error and resubmit without losing previously entered data?
• Are required fields marked in a way that doesn’t rely on color alone?

If your forms fail these checks, fix them first. Inaccessible checkout and contact forms are the most common targets in ADA lawsuits against ecommerce and service businesses.

Step 5: Review Heading Structure and Document Outline

Open your browser’s developer tools and check the heading hierarchy. Every page should have one H1, followed by H2s for major sections, H3s for subsections, and so on. Skipping levels (H1 straight to H3) breaks the document outline that screen readers use for navigation.

A screen reader user navigating by headings relies on this structure to understand the page layout without seeing it. If your headings are chosen for font size rather than document structure, the page becomes confusing.

Step 6: Test Zoom and Reflow

Zoom your browser to 200% (Ctrl/Cmd + Plus). Content should reflow into a single column without requiring horizontal scrolling. Text should resize without being clipped or overlapping.

WCAG 1.4.10 (Reflow) requires content to be usable at 320 CSS pixels width. Users with low vision zoom in regularly. If your layout breaks at 200%, those users cannot read your content.

Step 7: Document and Prioritize

Now you have a list of issues from automated scanning, keyboard testing, screen reader testing, form testing, and zoom testing. Prioritize them:

1. Critical — keyboard traps, inaccessible forms, missing navigation landmarks. These block users entirely and carry the highest legal risk.
2. Serious — missing alt text on meaningful images, insufficient contrast on body text, unlabeled form fields.
3. Moderate — heading hierarchy issues, missing skip navigation links, redundant ARIA.
4. Minor — decorative images with non-empty alt text, minor contrast issues on non-essential elements.

Fix critical and serious issues first. Use a tool like A11yProof to track your progress over time and catch regressions when your site changes.