Webflow accessibility checklist for WCAG 2.2 AA: what designers and developers each fix.

What does WCAG 2.2 AA mean for an accessible Webflow website?

WCAG 2.2 is the W3C's current version of the Web Content Accessibility Guidelines, a widely used set of accessibility standards, and a W3C Recommendation since October 5, 2023. Each requirement is a success criterion at level A, AA, or AAA, and conforming at level AA means meeting every level A and level AA criterion. Level AA is the target this checklist uses. Whether a legal requirement applies to your site is a separate question for counsel; WCAG compliance is a technical measure of website accessibility.

WCAG 2.2 added nine success criteria to WCAG 2.1. Six of them are at level A or AA, and several touch common patterns on marketing sites:

• 2.4.11 Focus Not Obscured (Minimum), AA: a focused element can't be completely hidden by content such as a sticky header or a cookie banner.
• 2.5.7 Dragging Movements, AA: anything you can drag, such as a slider handle, needs a single-pointer alternative.
• 2.5.8 Target Size (Minimum), AA: pointer targets are at least 24 by 24 CSS pixels, with exceptions such as enough spacing around smaller targets.
• 3.2.6 Consistent Help, A: help options repeated across pages, such as a contact link or chat, appear in the same relative order.
• 3.3.7 Redundant Entry, A: information already entered in a process is filled in or selectable, not typed again.
• 3.3.8 Accessible Authentication (Minimum), AA: logging in can't depend on memorizing, solving a puzzle, or transcribing, without an alternative.

WCAG 2.2 also removed 4.1.1 Parsing, which the W3C now treats as obsolete.

Which built-in accessibility features does Webflow have, and what's missing?

Webflow lists most of its built-in elements as accessible to screen readers and keyboards without custom code, including forms, buttons, link blocks, images, videos, sections, lists, and Collection lists. Four interactive elements need extra work: Tabs, Dropdown, Slider, and Navbar need a visible focus style that you set, and the slider dots need their focus style set in CSS.

Webflow also gives you three accessibility tools in the Webflow Designer:

• The Audit panel flags missing alt text, non-descriptive link text, skipped heading levels, and duplicate element IDs. It doesn't check color contrast, and it can't check issues inside components, images in Lightbox elements, or images bound to CMS fields.
• The contrast checker in the color picker rates each text color as AA, AAA, or Fail, using 4.5:1 for regular text and 3:1 for large text at level AA.
• Vision preview and Text zoom preview let you see the design as people with different types of vision see it, and with text resizing.

Everything else, from proper heading structure to form labels, depends on how the site is designed and built. Webflow gives you accessible building blocks; it doesn't make a site accessible on its own.

What should designers fix, from color contrast to target size?

Designers decide most of what users see, so these checks, from sufficient color contrast to focus states, belong in the design files before anything is built.

Plan for motion as well. Webflow's smooth scroll already respects a visitor's reduced motion setting on published sites, and Webflow advises against overriding that preference. Large parallax and scroll animations should follow the same rule.

What should developers fix in the Webflow Designer?

Developers turn the design into structure, so their checks are about semantics, labels, and keyboard behavior.

1. Use semantic HTML elements. Set the right HTML tag on layout elements (header, nav, main, footer, section, article) and use real Button and Link elements for anything clickable. A div with a click interaction isn't reachable by keyboard navigation, and semantic structure is what screen readers use to move around a page.
2. Set heading levels by structure, not size. One H1 per page, and no skipped levels. Style headings with classes, so a small H2 doesn't become a bold paragraph.
3. Style the Focused (keyboard) state. Webflow's Focused (keyboard) state maps to focus-visible, and Webflow suggests an outline, which shows focus without shifting the layout. Set it on Tabs, Dropdown, Slider, and Navbar too.
4. Label every form field. Each input needs a visible label, not just placeholder text, and clear error messages (WCAG 3.3.2 Labels or Instructions). Inaccessible forms cost leads directly, so test every form.
5. Add ARIA attributes only where needed. Webflow's custom attributes let you add an aria-label to an icon-only button or link. Native elements with visible text don't need one.
6. Add a skip link. A "Skip to main content" link as the first focusable element lets keyboard users bypass the navigation (2.4.1 Bypass Blocks).
7. Set the site's language code. Webflow sets it in the Localize panel, under Locales. It helps screen readers choose the right pronunciation (3.1.1 Language of Page).
8. Give sliders a non-drag control. Arrows and dots satisfy 2.5.7 Dragging Movements; check they work by keyboard.
9. Keep IDs unique. Duplicate IDs break form labels and anchor links, and the Audit panel flags them.

What should content editors check, from alt text to link text?

After launch, every new page and CMS item can add problems, and the Audit panel can't see images bound to CMS fields. Give editors a short list:

• every meaningful image has alt text (alternative text) that describes it in context, and decorative images have empty alt text;
• link text says where the link goes ("Read the pricing guide", not "Click here");
• headings in rich text follow the page's order, with no skipped levels;
• PDFs and downloads have an accessible alternative, or the same content on a page;
• contact and help links stay in the same place across pages.

How do you run accessibility audits on a Webflow site before launch?

Combine Webflow's checks with manual tests, because automated checks catch only part of the problems. Lighthouse in Chrome's developer tools adds another automated pass if you want one.

1. Run the Audit panel on every static page and template, and fix every item.
2. Use only the keyboard. Tab through the home page, a CMS template, and every form. Every interactive element should be reachable, the focus should always be visible, and nothing should trap the focus or hide behind a sticky header.
3. Run a screen reader test on the main templates: VoiceOver on macOS or NVDA on Windows. Listen for missing labels, unclear link text, and images announced by file name.
4. Zoom to 200% in the browser and check that text reflows without overlapping or cutting off, then check the main screen sizes from phone to desktop.
5. Check contrast for text with the color picker and for buttons, icons, and focus outlines by hand.
6. Repeat after big changes, such as a new template, a new interaction, or a new cookie banner.

Record what you tested, when, and on which pages. When an accessibility question comes up later, that record shows what the site met at launch. For the other launch-week checks, see our website launch checklist.

We design and build B2B and SaaS websites on Webflow and test accessibility before launch, so we have an interest in this topic. For how testing fits into a project, see our website redesign page.

Questions about Webflow accessibility