The Complete WCAG 2.2 Compliance Checklist for Small Businesses

The digital world is a primary marketplace. Your website is your digital storefront. However, many websites are not accessible to everyone. People with disabilities often face barriers online. This is where web accessibility guidelines are needed. The Web Content Accessibility Guidelines (WCAG) are the global standard. A new version, WCAG 2.2, has been released.

For small businesses, this may seem complex. You might wonder where to even begin. This guide is built for you. It is a complete WCAG 2.2 compliance checklist. It is designed to be clear. It uses simple language. Accessibility can be achieved. Let’s make your website open to all.

Why Should Your Small Business Care About WCAG 2.2?

Web accessibility is not just a technical task. It is a core business strategy. Many benefits are gained from an accessible website. For a small business, these benefits are crucial.

Expand Your Customer Base

Over one billion people worldwide live with a disability. This is a significant part of the population. If your website is not accessible, you are losing customers. This market possesses significant spending power. By making your site usable, a new audience is reached. Consequently, your sales and market share can be increased.

Mitigate Legal Risks

Accessibility laws are becoming more common. In many countries, web accessibility is a legal requirement. The ADA, AODA, and EAA are examples. Lawsuits against businesses with inaccessible websites are rising. These lawsuits can be very expensive. Furthermore, they can damage your brand. Compliance with WCAG 2.2 is your best legal protection.

Enhance Your Brand Reputation

Today, customers value inclusivity. They support businesses that do the right thing. An accessible website shows social responsibility. It proves you care about every customer. This builds strong brand loyalty. As a result, your reputation is enhanced.

Improve Your SEO

Search Engine Optimization (SEO) is vital. Accessibility and SEO are closely related. Search engines like Google favor user-friendly sites. Good accessibility practices are good SEO practices. Clear headings are needed. Alt text for images is required. Transcripts for videos are used. All these actions help search engines understand your content. Therefore, your ranking can be improved.

Download WCAG Infographic

Understanding the Basics: POUR and Levels

Before the checklist, some basic concepts must be understood. WCAG is built on four principles. It is also sorted into three levels.

The Four Principles of WCAG (POUR)

The guidelines are organized by the POUR principles. Every part of your site should be:

1. Perceivable: Information cannot be invisible to all senses. Users must be able to perceive the content. This means providing text for audio. It also means providing audio for text.
2. Operable: The interface must be usable. Users must be able to navigate your site. This includes keyboard-only navigation.
3. Understandable: The information must be clear. The website’s operation must not be confusing. Language should be simple. Navigation should be predictable.
4. Robust: Content must be compatible with many technologies. This includes assistive technologies. Screen readers are a common example.

For detailed information on Four core WCAG Principles read this article.

The Three Levels of Conformance

WCAG success criteria are ranked by three levels.

• Level A: This is the minimum level. These criteria fix the most essential barriers. All Level A items must be passed.
• Level AA: This is the accepted standard. Most laws and legal actions reference Level AA. It addresses more significant barriers. This level is the recommended target for all businesses.
• Level AAA: This is the highest level of accessibility. These criteria provide an enhanced user experience. Level AAA is not always possible for all content. It is a goal, but not a legal requirement.

This checklist will focus on Level A and Level AA. These are the most important for your small business.

The WCAG 2.2 Compliance Checklist (A & AA)

Here is the actionable checklist. It is broken down by the four POUR principles. New criteria from WCAG 2.2 are marked.

Principle 1: Perceivable

Content must be presented in ways users can perceive.

Level A Checklist (Perceivable)

• 1.1.1 Non-text Content:
  • What it means: All images must have a text alternative. This is known as “alt text.”
  • Action: Alt text is added to all informative images. This text describes the image. Screen readers read this text aloud. For decorative images, empty alt text is used (alt=“”). This tells screen readers to ignore it. Read More about how to write accessible alt text.

• 1.2.1 Audio-only and Video-only (Prerecorded):
  • What it means: A transcript is needed for audio-only content. A transcript or audio track is needed for video-only content.
  • Action: A link to a full text transcript is provided. This is placed near the audio or video file.
• 1.2.2 Captions (Prerecorded):
  • What it means: All prerecorded videos with audio must have captions.
  • Action: Synchronized captions are included in your videos. YouTube and Vimeo offer tools for this.
• 1.2.3 Audio Description or Media Alternative (Prerecorded):
  • What it means: Users who are blind need video context. Key visual information must be described.
  • Action: An alternative audio track (audio description) is provided. Or, a detailed transcript is provided. This transcript must describe all visual actions.
• 1.3.1 Info and Relationships:
  • What it means: The structure of the page must be coded. Headings, lists, and tables must use correct HTML tags.
  • Action: <h1> is used for the main title. <h2>, <h3> are used for subheadings. <ol>, <ul>, and <li> are used for lists. <table>, <th>, and <td> are used for data tables. Bold text is not used as a heading.

• 1.3.2 Meaningful Sequence:
  • What it means: The reading order of content must be logical. A screen reader must follow the same order a sighted user would.
  • Action: The code order must match the visual order. This is checked by tabbing through the page.

• 1.3.3 Sensory Characteristics:
  • What it means: Instructions should not rely on shape, size, or location.
  • Action: Instructions are not written like “Click the red button on the right.” Instead, they are written as “Select the ‘Submit’ button.”
• 1.4.1 Use of Color:
  • What it means: Color must not be the only way to convey information.
  • Action: If a link is colored, it is also underlined. If an error is shown in red, an icon or text is also used.

• 1.4.2 Audio Control:
  • What it means: If audio plays automatically for more than 3 seconds, a control is needed.
  • Action: A visible “pause” or “stop” button is provided. A volume control is also provided. It is best to avoid auto-playing audio.

Download WCAG Infographic

Level AA Checklist (Perceivable)

• 1.2.4 Captions (Live):
  • What it means: All live video streams (webinars) must have captions.
  • Action: A live captioning service is used for webcasts. Tools like Zoom offer this feature.
• 1.2.5 Audio Description (Prerecorded):
  • What it means: This is a more formal version of 1.2.3. A separate audio track with descriptions is required.
  • Action: An audio description track is recorded. It is added to the video player as an option.
• 1.4.3 Contrast (Minimum):
  • What it means: Text and its background must have enough contrast.
  • Action: The contrast ratio must be at least 4.5:1 for normal text. For large text (18pt or 14pt bold), 3:1 is required. Free online contrast checkers can be used.
• 1.4.4 Resize Text:
  • What it means: Users must be able to zoom text up to 200%. No content or function should be lost.
  • Action: The browser zoom is tested. The page is zoomed to 200%. It is checked for broken layouts or hidden text.
• 1.4.5 Images of Text:
  • What it means: Real text should be used instead of images of text.
  • Action: Text is typed directly onto the page. CSS is used for styling. Logos are an exception to this rule.
• 1.4.10 Reflow:
  • What it means: Content must adapt to small screens. Users should not have to scroll in two directions (horizontally and vertically).
  • Action: The browser window is resized to 320px wide. The page is checked. Horizontal scrolling should not be required to read the content. This is essential for mobile users.
• 1.4.11 Non-text Contrast:
  • What it means: UI elements must have good contrast. This includes buttons, form borders, and icons.
  • Action: These elements must have a 3:1 contrast ratio. This ensures they are visible.
• 1.4.12 Text Spacing:
  • What it means: Users must be able to change text spacing. This is for readability. No content should be lost.
  • Action: Custom stylesheets are tested. It is ensured that increasing line height and spacing does not break the page.
• 1.4.13 Content on Hover or Focus:
  • What it means: If content appears on hover (like a tooltip), it must be controlled.
  • Action: The user must be able to:
    • Dismiss it (with the ‘Esc’ key).
    • Hover over the new content itself.
    • Keep it visible until they move away.

Principle 2: Operable

Users must be able to interact with the interface.

Level A Checklist (Operable)

• 2.1.1 Keyboard:
  • What it means: All website functions must work with a keyboard.
  • Action: The mouse is unplugged. The website is navigated using only the “Tab” key. All links, buttons, and forms must be reachable. Read detailed blog on keyboard navigation standards.
• 2.1.2 No Keyboard Trap:
  • What it means: A keyboard user must never get “stuck.”
  • Action: While tabbing, it is checked that focus can be moved away from every element. Pop-up modals are a
    common trap.
• 2.1.4 Character Key Shortcuts:
  • What it means: If single-key shortcuts are used (e.g., ‘m’ for mute), they must be controllable.
  • Action: A way to turn off the shortcut is provided. Or, the shortcut only works when a specific element is in focus.
• 2.2.1 Timing Adjustable:
  • What it means: If there is a time limit, users must be able to extend it.
  • Action: For session timeouts, a warning is given. An option to add more time is provided.
• 2.2.2 Pause, Stop, Hide:
  • What it means: Users must be able to control moving content.
  • Action: For sliders, carousels, or animations, a clear “pause” button is provided.
• 2.3.1 Three Flashes or Below Threshold:
  • What it means: Content must not flash more than three times per second.
  • Action: Flashing content is avoided. It can trigger seizures.
• 2.4.1 Bypass Blocks:
  • What it means: A “skip to main content” link is needed. This lets keyboard users skip the navigation menu.
  • Action: A “skip” link is added as the first item on the page. It can be invisible until it receives keyboard focus.
• 2.4.2 Page Titled:
  • What it means: Every page needs a clear, descriptive title.
  • Action: The <title> tag in the HTML is checked. It should be unique for each page. (e.g., “About Us – My Small Business”).
• 2.4.3 Focus Order:
  • What it means: The “tab” order must be logical.
  • Action: The page is tabbing through. The focus should move predictably. It usually goes from top to bottom, left to right.
• 2.4.4 Link Purpose (In Context):
  • What it means: The purpose of a link must be clear from its text.
  • Action: “Click here” is avoided. Instead, descriptive text is used. (e.g., “Read our full accessibility statement”).

Download WCAG Infographic

Level AA Checklist (Operable)

• 2.4.5 Multiple Ways:
  • What it means: Users need more than one way to find a page.
  • Action: A site map, a search bar, and clear navigation are provided.
• 2.4.6 Headings and Labels:
  • What it means: Headings and form labels must be descriptive.
  • Action: Headings are reviewed. They should describe the section that follows. Form fields are checked for clear labels.
• 2.4.7 Focus Visible:
  • What it means: The item with keyboard focus must be highly visible.
  • Action: When tabbing, a clear outline or border must appear. This is often a blue ring. This default is not disabled with outline: 0;.
• [NEW in 2.2] 2.4.11 Focus Not Obscured (Minimum):
  • What it means: The focused item must not be completely hidden.
  • Action: Sticky headers, footers, or cookie banners are checked. When tabbing, it is ensured these elements do not cover the focused link or button.
• [NEW in 2.2] 2.5.7 Dragging Movements:
  • What it means: If a drag-and-drop feature is used, a simple alternative is needed.
  • Action: For a drag-and-drop list, “Move Up” and “Move Down” buttons are also provided.
• [NEW in 2.2] 2.5.8 Target Size (Minimum):
  • What it means: Clickable targets must be large enough.
  • Action: All buttons and icons are checked. They must be at least 24 by 24 pixels in size. This is crucial for mobile users and those with motor disabilities.

Principle 3: Understandable

Information and operation must be clear.

Level A Checklist (Understandable)

• 3.1.1 Language of Page:
  • What it means: The main language of the page must be set in the code.
  • Action: The lang attribute is added to the <html> tag. (e.g., <html lang=“en”>).
• 3.2.1 On Focus:
  • What it means: Focusing on an element (like a form field) should not change the page.
  • Action: It is ensured that tabbing to a button does not automatically submit a form.
• 3.2.2 On Input:
  • What it means: Changing a setting (like a checkbox) should not automatically change the page.
  • Action: A “Submit” button is always used. The page is not changed until the user requests it.
• [NEW in 2.2] 3.2.6 Consistent Help:
  • What it means: If help is offered (like a phone number or contact form), it must be easy to find.
  • Action: The location of help information is kept consistent. It is put in the same place on every page (e.g., the footer).
• 3.3.1 Error Identification:
  • What it means: If an error is made in a form, it must be clearly identified.
  • Action: The field with the error is highlighted. A clear text message describes the error. (e.g., “Email address is missing the ‘@’ symbol”).
• 3.3.2 Labels or Instructions:
  • What it means: All form fields need clear labels.
  • Action: Labels are placed visibly next to their fields. They are also linked in the code using the <label for=“”> tag.
• [NEW in 2.2] 3.3.7 Redundant Entry:
  • What it means: Users should not have to re-enter the same information.
  • Action: In multi-page forms (like checkout), information is auto-filled. Or, a “use shipping for billing” checkbox is provided.

Download WCAG Infographic

Level AA Checklist (Understandable)

• 3.1.2 Language of Parts:
  • What it means: If a word is in a different language, it must be marked.
  • Action: The lang attribute is used on a <span> tag. (e.g., <span lang=“fr”>Bonjour</span>).
• 3.2.3 Consistent Navigation:
  • What it means: The main navigation menu must be in the same order on every page.
  • Action: The main menu is checked across multiple pages. It should not change.
• 3.2.4 Consistent Identification:
  • What it means: Icons or links that do the same thing should be consistent.
  • Action: If a “cart” icon is used, the same icon is used everywhere.
• 3.3.3 Error Suggestion:
  • What it means: When a user makes an error, a suggestion for correction is provided.
  • Action: If a username is “user123!” an error message says “Username cannot contain special characters.”
• 3.3.4 Error Prevention (Legal, Financial):
  • What it means: For important transactions, users must be able to check their work.
  • Action: A “Confirm Your Order” page is provided. Users must be able to review and correct information before paying.
• [NEW in 2.2] 3.3.8 Accessible Authentication (Minimum):
  • What it means: Login tasks must not rely on a cognitive test.
  • Action: “Remembering a password” is a cognitive test. Therefore, an alternative is provided. This includes copy-pasting into the password field. It also includes support for password managers. CAPTCHAs that require solving puzzles are avoided.

Principle 4: Robust

Content must be compatible with assistive technologies.

Level A Checklist (Robust)

• 4.1.1 Parsing (Obsolete in 2.2, but principle remains):
  • What it means: This rule is removed in WCAG 2.2. However, the principle is still important. Your code should be clean.
  • Action: An HTML validator is used. This checks for major errors. Clean code is less likely to break screen readers.
• 4.1.2 Name, Role, Value:
  • What it means: All custom components must report their status.
  • Action: If a custom button is built with a <div>, ARIA roles are used. (e.g., role=“button”). This tells screen readers what the element is. Read this Quick guide on ARIA implementation

Level AA Checklist (Robust)

• 4.1.3 Status Messages:
  • What it means: When content changes, screen readers must be told.
  • Action: For messages like “Item added to cart,” ARIA live regions are used. This makes the screen reader announce the message.

Download WCAG Infographic

How to Start: A Simple Plan for Small Businesses

This WCAG 2.2 compliance checklist is long. It can be intimidating. However, progress is the goal, not immediate perfection. Here is a simple plan.

1. Conduct a Basic Audit.
   Use free automated tools. WAVE or Lighthouse are good places to start. These tools will find many low-hanging fruits.
2. Prioritize High-Impact Fixes.
   Focus on your most important pages. This includes the homepage, contact form, and checkout process. Fix Level A issues first. Then, move to Level AA.
3. Address the New WCAG 2.2 Criteria.
   Pay special attention to the new rules. Check your sticky headers (2.4.11). Check your button sizes (2.5.8). Check your login process (3.3.8).
4. Publish an Accessibility Statement.
   This is a page on your site. It states your commitment to accessibility. It also provides a contact method. Users can report any barriers they find.
5. Integrate and Iterate.
   Accessibility is an ongoing process. It should be part of your workflow. When a new blog post is written, alt text is added. When a new page is designed, contrast is checked.

Conclusion: Accessibility Is a Journey

Your small business can be a leader in inclusivity. This WCAG 2.2 compliance checklist is your roadmap. It is detailed. However, every step taken makes a difference.

An accessible website is not a burden. It is an opportunity. It is an opportunity to reach more customers. It is an opportunity to build a better brand. It is an opportunity to do the right thing. Start your accessibility journey today.