Webflow Accessibility: A Practical WCAG 2.2 AA Checklist

Webflow gives you plenty of control over HTML, responsive layouts, interactions, and content. That is a good start, but it does not make a site accessible on its own. Someone still has to decide whether the headings make sense, the menu works without a mouse, and a form tells people what went wrong.

The practical goal is to make accessibility part of everyday website work, not a cleanup project saved for the week before launch. This checklist covers the places where Webflow teams most often need to slow down, test, and make a deliberate choice.

It is not legal advice, and no checklist can replace testing with people who use assistive technology. Use it as a working guide toward WCAG 2.2 Level AA.

Start with the page structure

Good structure makes a page easier to navigate for screen-reader users and easier for everyone to scan. It also gives search engines a clearer picture of how the content fits together.

On each page, check for:

• One clear main content region
• One descriptive H1
• Headings in a logical order
• Navigation and footer landmarks
• Real lists for grouped items
• Buttons for actions and links for destinations

Choose heading levels for meaning, not appearance. If an H3 looks right but the page needs an H2, use the H2 and style it. The same rule applies to controls: a styled div is not a button unless it also behaves like one for keyboard and screen-reader users.

Reusable components make these decisions easier to repeat. Our guide to a scalable Webflow design system explains how shared patterns reduce one-off fixes across a site.

Try every interaction without a mouse

Put the mouse aside and work through the page with Tab, Shift+Tab, Enter, Space, Escape, and the arrow keys. You should be able to see where focus is, reach controls in a sensible order, and operate every important feature.

Test the things that are easiest to miss:

• Dropdown and mobile navigation
• Accordions and tabs
• Modals and lightboxes
• Carousels and media controls
• Cookie banners
• Embedded forms and scheduling tools

Never remove the browser's focus outline unless you replace it with something equally visible. A hover style is not enough because keyboard users never trigger it.

Check contrast in real states

Normal text generally needs a contrast ratio of at least 4.5:1, while large text generally needs 3:1. Meaningful icons, control boundaries, and focus indicators also need enough contrast to be recognizable.

Do not stop at the default design. Check muted copy, error messages, disabled controls, text over images, button hover states, and form borders. Those secondary states are where contrast problems often hide.

Colour should not carry meaning by itself. A red input border can reinforce an error, but the form still needs text that explains what the person should fix.

Write alt text for the job the image is doing

Useful alt text is short, specific, and shaped by context. Describe an image when it adds information. Use empty alt text when an image is purely decorative so a screen reader can skip it.

Avoid copying the file name, repeating a nearby caption, or starting every description with “Image of.” If the same asset serves a different purpose on another page, it may need different alt text there.

For CMS content, make this part of the publishing checklist. A logo that links home should identify the destination, while an icon inside an already labelled button is usually decorative.

Make links and controls understandable on their own

Screen-reader users can browse a list of links without hearing the surrounding paragraph. A page full of “Learn more” links gives them very little to work with.

Prefer labels such as:

• Read the Webflow migration guide
• View the PRIMED Medical project
• Book a strategy call

If an entire CMS card is linked, build its accessible name from that item's title. Do not give every card the same generic aria-label. Start with native HTML and add ARIA only when the native element cannot express the behaviour you need.

Build forms that help people recover from mistakes

Every input needs a persistent label. Placeholder text disappears as soon as someone starts typing, so it cannot do that job by itself.

Check that required fields are identified, instructions appear before they are needed, and each error explains how to correct the problem. Error text should be tied to the relevant input, and longer forms may need focus moved to an error summary after submission.

Test the success state too. It should confirm that the form worked and tell the person what happens next. Third-party forms and calendars deserve the same review as native Webflow forms because visitors experience them as part of your site.

Test zoom, reflow, and long content

Review pages at narrow widths and at 200 percent browser zoom. Most content should reflow without horizontal scrolling. Look for fixed-height containers, clipped text, off-screen menus, sticky elements covering headings, and buttons that break when their labels wrap.

Webflow's device presets are useful, but they are not the whole test. Increase the browser text size, enter long CMS titles, open menus, and trigger form errors. Real content is much better at exposing layout problems than tidy placeholder copy.

Respect reduced-motion preferences

Animation can make an interface easier to follow, but non-essential motion should respect prefers-reduced-motion. Avoid flashing content and give people control over anything that moves or plays automatically.

Page-load effects should never leave important content hidden if a script fails. This is good for accessibility and resilience, and it often helps performance too. Our post-launch Webflow guide covers why these checks should continue after release.

Keep CMS entries from undoing good templates

An accessible template can still produce an inaccessible page. Editors can skip heading levels, paste vague links, forget alt text, or add a table that falls apart on mobile.

Before publishing any CMS item, confirm that:

1. The title and H1 describe the page accurately.
2. The headings form a useful outline.
3. Links explain where they lead.
4. Images have useful or intentionally empty alt text.
5. Lists use native list formatting.
6. Video has captions and audio content has a transcript when needed.
7. Tables have headers and a sensible mobile treatment.
8. The page works by keyboard at every breakpoint.

Use automated tools, then keep testing

Automated checks are good at finding missing labels, duplicate IDs, contrast failures, and some structural problems. They cannot tell you whether the reading order feels sensible, an instruction is clear, or a custom interaction is frustrating to use.

Combine Webflow's audit tools and browser checks with keyboard navigation, screen-reader testing, zoom and text-resizing tests, and a manual review against the relevant WCAG criteria. When possible, include people with disabilities in the testing process.

Keep a simple record of the issue, its owner, the fix, and the retest date. Accessibility is much easier to maintain when it is part of normal website operations instead of an occasional emergency audit.

Frequently asked questions