Website accessibility checklist for WCAG 2.2

The Web Content Accessibility Guidelines (WCAG) 2.2 Level AA define the technical criteria necessary to make websites accessible to users with visual, motor, auditory, or cognitive disabilities. Working through this checklist covers the WCAG criteria that accessibility audits and ADA settlements most often use, and makes your site easier for every visitor to use. It is general information, not legal advice. The checklist covers foundational requirements across text contrast, keyboard navigation, and form labels, as well as newer rules governing touch target sizes and authentication.

Understanding formal W3C documentation can be intimidating for business owners and marketing directors. Technical specifications often span hundreds of pages of complex developer jargon.

Here is a practical, plain-English checklist designed to help you audit your commercial website against current WCAG 2.2 Level AA requirements.

What changed in WCAG 2.2?

The World Wide Web Consortium published WCAG 2.2 to address the realities of modern mobile browsing and cognitive accessibility. While it preserves the criteria from WCAG 2.1, it introduces key success criteria that every business website should implement:

• Target Size (Minimum) (2.5.8 Level AA). Interactive buttons and links must measure at least 24 by 24 CSS pixels, or provide sufficient whitespace around them to prevent accidental mistaps on touchscreens.
• Accessible Authentication (3.3.7 Level AA). Websites must not rely on cognitive function tests, such as memorizing passwords or solving complex visual puzzles, during login or checkout steps, unless an alternative method like password managers or email magic links is available.
• Redundant Entry (3.3.8 Level AA). When a user enters information during a multi-step checkout or contact process, the website must automatically populate that information in later steps rather than forcing them to retype it.
• Focus Appearance (2.4.11 Level AA). Focus outlines for keyboard users must provide strong visual contrast and sufficient pixel area around selected elements.

Review our companion guide to ADA website compliance to understand how federal courts apply these guidelines in litigation.

The WCAG 2.2 Level AA audit checklist

Use this structured breakdown to review your site layout, content elements, and interactive forms.

1. Visual contrast and typography

Visitors with low vision, color blindness, or older adults browsing on mobile screens in sunlight need strong visual separation between text and backgrounds.

• Body text contrast. Standard paragraph text (under 18pt or 14pt bold) maintains a color contrast ratio of at least 4.5:1 against its background.
• Large text contrast. Headings and large text maintain a contrast ratio of at least 3:1 against their background.
• Interface components. Button borders, input field outlines, and selected states maintain at least a 3:1 contrast ratio against adjacent colors.
• Color independence. Color is never the sole visual indicator of meaning. For example, required form fields should not be signaled only by red text; use an asterisk or text label.
• Text resizing. Visitors can zoom page text up to 200% using browser settings without breaking the layout or causing text blocks to overlap.
• Reflow. Pages adapt smoothly down to a screen width of 320 CSS pixels without requiring horizontal scrolling.

You can verify your palette choices with our guide on choosing website colors.

2. Images and alternative text

Screen readers cannot interpret visual image files without explicit HTML attributes.

• Informative image alt text. Every photo, chart, or graphic that conveys information includes a concise, descriptive alt attribute describing its content.
• Decorative images. Purely decorative background lines, shapes, or generic styling icons use empty alt attributes (alt="") so screen readers bypass them.
• Text in images. Avoid baking words into graphic image files. Use live HTML text styled with CSS so screen readers and translation tools can read it.
• Video captions. Pre-recorded marketing videos include synchronized closed captions for deaf or hard-of-hearing viewers.
• Audio transcripts. Podcasts or audio recordings include complete written transcripts on the page.

3. Keyboard navigation and focus flow

Many users browse websites using keyboards, switch devices, or sip-and-puff controls rather than a computer mouse.

• Full keyboard access. Users can reach and activate all links and buttons using only the Tab key and Enter.
• No keyboard traps. Users who tab into a calendar picker or popup window can easily tab back out or close the window with the Escape key.
• Logical tab order. As a user presses the Tab key, the focus cursor moves in a natural reading order (top to bottom, left to right).
• Visible focus indicator. Every active button, input field, and hyperlink displays a prominent outline or highlight when selected via keyboard.
• Skip navigation link. A hidden "Skip to main content" link appears at the very top of the page when tabbing, allowing keyboard users to bypass repetitive header menus.

4. Forms and user input validation

Contact forms, quote request forms, and checkouts represent the most critical conversion points on your website.

• Explicit input labels. Every text field and dropdown has a visible <label> element programmatically linked via the for and id attributes.
• Autocomplete support. Standard fields like name, email, phone number, and street address include appropriate HTML autocomplete attributes so browsers can populate them automatically.
• Clear error messaging. If a user submits an incomplete form, error text clearly identifies which field failed and explains how to correct it.
• Error identification. Form errors are identified in text rather than solely relying on color changes.
• Reversible submissions. For forms that submit legal commitments or financial transactions, users can review, confirm, or reverse the data before final submission.

To see how to implement these patterns cleanly, read our practical guide to website forms that convert.

5. Document structure and page navigation

A clean underlying document structure allows assistive technologies to build an accurate mental model of your page.

• Page titles. Every page has a unique, descriptive <title> tag that identifies the specific page topic and the company name.
• Heading structure. Headings follow a logical hierarchy (<h1> through <h6>) without skipping levels (for example, jumping from <h2> down to <h4>).
• Language declaration. The HTML opening tag specifies the document language (<html lang="en">).
• Descriptive link text. Hyperlinks describe their destination. Avoid generic link text like "click here" or "read more"; use "view commercial roofing services".
• Multiple navigation methods. Users can locate pages through multiple mechanisms, such as a top navigation bar, a search box, and a sitemap.

Summary checklist table

How to conduct an accessibility audit

Validating your website against this checklist requires a combination of automated scanning and hands-on manual verification:

Step 1: Run an automated browser scan

Install the free WAVE extension or use Google Chrome's built-in Lighthouse tool. Run a scan on your homepage, a representative service page, and your primary contact form. Automated tools immediately highlight low contrast, missing alt attributes, and orphaned form labels.

Step 2: Perform the hands-off keyboard test

Put your mouse away. Open your website in a desktop browser and press Tab to move through the page. Verify that you can see your position at all times, expand submenus, fill out forms, and close any modal popups that appear.

Step 3: Test on a mobile smartphone

Open your site on a phone. Inspect small links in the footer and mobile menu buttons. Are they large enough to tap easily without hitting adjacent links?

Bringing your website into compliance

Remediating accessibility issues does not require sacrificing clean visual aesthetics. In almost every case, making a website accessible makes it faster and easier to use for every prospective customer who visits.

At Techcelerant, our web development services build sites with semantic markup, and our Custom website package ($7,999) includes an accessibility pass against WCAG 2.2 AA. Whether you need an existing site remediated or a new accessible build, review our options on the pricing page to protect your company and serve all potential clients.