A practical website accessibility checklist based on WCAG 2.2: a keyboard and focus walkthrough, text, contrast, form labels and errors, image text alternatives, what automatic checkers catch versus human testing, and how to record findings without claiming legal compliance.
<p class="lead text-xl text-[#3a3a3a] mb-8"> This checklist covers the checks a small-business owner can run in about an hour without special software: use the site with only a keyboard, check text size and contrast, check that every form field has a label and clear errors, and check that images have sensible text alternatives. It is based on <a href="https://www.w3.org/TR/WCAG22/" rel="noopener" target="_blank">WCAG 2.2</a>, the standard most laws and policies refer to, and on the W3C's own <a href="https://www.w3.org/WAI/test-evaluate/preliminary/" rel="noopener" target="_blank">Easy Checks</a>. Passing it does not make a site legally compliant; it finds the most common barriers. </p>
<h2>1. Keyboard and focus walkthrough</h2> <p>Put the mouse away. Press Tab from the top of the page to the bottom, then Shift+Tab back.</p> <pre><code>[ ] A "Skip to content" link appears on the first Tab (helpful on long menus) [ ] Every link, button and form field can be reached with Tab [ ] You can always see where focus is (an outline or highlight) [ ] Focus moves in a sensible order, top to bottom, left to right [ ] The menu opens with Enter or Space and closes with Escape [ ] Pop-ups can be closed with the keyboard, and focus returns to the page [ ] Nothing traps focus (you can always Tab onward) [ ] Sticky headers do not cover the focused item</code></pre>
<h2>2. Text, contrast, form labels and errors</h2> <pre><code>[ ] Body text is readable at normal zoom (around 16px or larger) [ ] Zoom to 200%: nothing overlaps or gets cut off; no sideways scrolling [ ] Text contrast at least 4.5:1 (3:1 for large text) - check with a tool [ ] Links are distinguishable from text by more than colour alone [ ] Every form field has a visible label (placeholder text is not a label) [ ] Required fields are marked in text, not only with colour [ ] Errors say what went wrong and how to fix it, next to the field [ ] Buttons say what they do ("Send enquiry", not "Submit" or an icon only) [ ] The page language is set, and headings go in order (H1, H2, H3)</code></pre> <p>Check colour pairs with the <a href="/tools/color-contrast-checker">color contrast checker</a>. The contrast figures come from WCAG's <a href="https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html" rel="noopener" target="_blank">contrast (minimum)</a> criterion.</p>
<h2>3. Image purpose and text alternatives</h2> <ul> <li><strong>Informative image</strong> (a photo of your work, a map): alt text says what it shows that matters, for example "Rebuilt stone wall with new capping stones".</li> <li><strong>Decorative image</strong> (a background texture): empty alt (<code>alt=""</code>) so screen readers skip it.</li> <li><strong>Image with text in it</strong> (a flyer, a menu photo): the text must also be on the page, or in the alt text if short.</li> <li><strong>Linked image or icon button:</strong> the alt or label says where it goes or what it does ("Call us", not "phone icon").</li> </ul> <p>The W3C's <a href="https://www.w3.org/WAI/tutorials/images/decision-tree/" rel="noopener" target="_blank">alt text decision tree</a> covers edge cases.</p>
<h2>4. Automatic checks versus human testing</h2> <table> <thead><tr><th>Automatic checkers find</th><th>Only a person can judge</th></tr></thead> <tbody> <tr><td>Missing alt attributes</td><td>Whether the alt text is actually useful</td></tr> <tr><td>Low contrast on plain backgrounds</td><td>Contrast of text over photos and video</td></tr> <tr><td>Form fields with no label</td><td>Whether labels and errors make sense</td></tr> <tr><td>Missing page language, empty links</td><td>Keyboard order, focus visibility, traps</td></tr> <tr><td>Skipped heading levels</td><td>Whether headings describe the content</td></tr> </tbody> </table> <p>Run an automatic check first (the <a href="/tools/website-grader">website grader</a> includes basic accessibility checks; the W3C keeps a <a href="https://www.w3.org/WAI/test-evaluate/tools/list/" rel="noopener" target="_blank">list of evaluation tools</a>), then do the manual walkthrough above. If your customers include many people with disabilities, pay for testing with disabled users.</p>
<h2>Filled findings log (a labelled demonstration)</h2> <p>A fictional business, "Harbour Line Plumbing". Not a real company; this shows the format, not results.</p> <pre><code>Date checked: [date] Checked by: owner Pages: Home, Services, Contact Browser/devices: laptop keyboard only; phone with screen reader on
1 Home Call icon has no label ("button") 4.1.2 yes 2 Home White text over hero photo hard to read 1.4.3 yes, darker overlay 3 Contact Postcode field label is placeholder only 3.3.2 yes 4 Contact Error says "Invalid" only 3.3.1 yes, "Enter a phone number" 5 Services Gallery photos alt = file names 1.1.1 yes 6 All No visible focus on menu links 2.4.7 open - raised with builder Not tested: video captions (no video on site)</code></pre> <pre><code>BLANK Date / checked by / pages / browsers and devices:
Not tested:</code></pre>
<h2>5. Document findings without claiming legal compliance</h2> <ul> <li>Keep the log with dates. It shows good-faith effort and what is still open.</li> <li>Publish an honest accessibility statement: what you tested, known issues, and how to contact you for help. The <a href="/tools/accessibility-statement-generator">accessibility statement generator</a> drafts one.</li> <li>Do not claim "fully ADA compliant" or "WCAG certified". Laws differ by country; in the US see the Justice Department's <a href="https://www.ada.gov/resources/web-guidance/" rel="noopener" target="_blank">web accessibility guidance</a>, and our guide to <a href="/guides/ada-website-compliance-small-business">ADA website compliance for small businesses</a>. Ask a lawyer about your obligations.</li> <li>Avoid overlay widgets that promise automatic compliance; they do not fix the underlying page.</li> </ul> <figure> <img src="/images/app/visual-edit-1200.webp" alt="Click-to-edit in the We.Inc builder, used to fix labels and text on the page" loading="lazy" width="1200" height="750" /> <figcaption>Fixing labels and text in place in the We.Inc builder.</figcaption> </figure>
<h2>Next step</h2> <p>Start from a <a href="/website-templates/business">business template</a> in the <a href="/website-builder">We.Inc website builder</a>, then run this checklist and the <a href="/tools/website-grader">website grader</a> before you publish. Free gives up to 3 template sites on a we.inc address (no AI credits, no custom domain); Starter at $20/month adds AI building and custom domains (<a href="/pricing">pricing</a>). Budgeting fixes or a rebuild? Use the <a href="/tools/website-cost-calculator">website cost calculator</a>.</p> <p><a href="https://my.we.inc/signup">Start building your business website</a></p>
WCAG 2.2 at level AA is the standard most laws and policies refer to. This checklist covers its most common small-business issues, not every criterion.
No. Automatic tools catch missing attributes and some contrast problems, but a person must check keyboard use, focus, and whether labels and alt text make sense.
No checklist can guarantee legal compliance. Keep a dated log, publish an honest accessibility statement, and ask a lawyer about your obligations.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.