Free, tests the published page

Webflow Accessibility Checker

Scan a published Webflow page and see which accessibility issues come from your structure, your headings, your interactions, your forms or your CMS content, and where in the Designer to fix each one.

Element tags and landmarks
Heading levels
Interactions and motion
Forms
CMS images
Custom code embeds

Each page is rendered in a real browser and tested with axe-core against the machine-testable WCAG 2.2 Level A and AA success criteria. Automated testing does not replace a manual accessibility review.

The same checker, for Webflow sites

This page runs the free TagPipes Website Accessibility Checker: one page address, loaded in a real browser, tested with axe-core against the machine-testable WCAG 2.2 Level A and AA success criteria, reported in plain language. What is different here is the explanation around it, written for Webflow sites.

Where accessibility issues come from on a Webflow site

Webflow gives designers direct control of the HTML. That is its strength, and it means accessibility is decided element by element in the Designer rather than by a theme.

1. Structure built from div blocks

Every element starts as a generic block. Unless its tag is set to Section, Nav, Main, Header or Footer, or a heading level is chosen, the published page has containers where landmarks and headings should be. Screen readers then have no map of the page.

2. Headings chosen for their look

A heading element whose level was picked to match a size, or text blocks styled to look like headings, produce skipped levels and pages with no h1. Classes control the look; the level should follow the outline.

3. Interactions, animations and custom components

Custom dropdowns, tabs, sliders and modals built from blocks and interactions often lack the keyboard behavior and ARIA that the native versions provide. Scroll and load animations can also move content for people who asked their system for reduced motion.

4. CMS content and custom code

Image fields in CMS collections carry alt text settings that editors have to fill in. Code embeds and third-party scripts pasted into custom code settings bring their own markup, outside the Designer's view.

What the scan finds on a Webflow page

The published page is loaded in a real browser exactly as a visitor gets it, interactions and embeds included, and tested with axe-core against the machine-testable WCAG 2.2 A and AA criteria.

What this scan finds

Images and CMS images with no alt text, and background images carrying content
Missing main, navigation and footer landmarks, and content outside them
Heading levels that skip, pages with no h1, and empty headings left in a layout
Link blocks and icon buttons with no accessible name
Form fields without labels, and submit buttons without names
Text and button colors that do not contrast enough with their background
Custom dropdowns, tabs and sliders with ARIA roles that are missing required attributes
Scrolling regions and custom controls that keyboard users cannot reach

What needs a person

Whether the alt text describes the image well, or should be empty
Whether custom interactions can be operated with a keyboard from start to finish
Whether animations respect reduced-motion preferences and can be paused
Whether the visual order matches the reading order after absolute positioning and grid
Whether a form's error messages explain what to fix
Content inside embedded videos, PDFs and third-party widgets

Automated testing does not replace a manual accessibility review.

Where to fix common findings in Webflow

Most findings map to a setting on the selected element in the Designer.

1. Element tags for landmarks

Select the container, open Element settings and change its Tag: Header, Nav, Main, Section, Footer. One Main per page. Content outside landmarks usually means a wrapper that still has the default Div tag.

2. Heading levels

Select the heading and change its level in Element settings (H1 to H6). One H1 per page, H2 for sections, H3 beneath. Keep the visual size on the class, not on the level, so the outline stays correct when the design changes.

3. Alt text on images

Static images: select the image, Element settings, Alt text. Choose Decorative for images that carry no information. CMS images: set the alt text on the collection item's image field, or bind it to a text field editors fill in.

4. Links, buttons and icons

A link block or button that contains only an icon needs text: add a visually hidden text element inside it, or an aria-label through custom attributes in Element settings. Make link text describe the destination.

5. Forms

Every input needs a Label element associated with it (Webflow does this when you add fields through the form settings). Placeholder text is not a label. Name the submit button for what it does, and give the success and error states real text.

6. Contrast and motion

Adjust text and background colors on the class until the report's measured ratio meets 4.5:1 for normal text and 3:1 for large text. For interactions, add a reduced-motion condition or keep motion decorative; do not move content that must be read.

Which Webflow pages to check

Check the home page, one CMS template page (a blog post or a case study), a page with a form, and any page built around a custom component such as a slider or tabs. Findings in symbols and components repeat everywhere they are used, so fixing the component fixes every instance. Findings in CMS content are item by item.

Webflow's Designer includes an Audit panel that flags some issues while you build. This scan tests the published page as a visitor receives it, including embeds and third-party scripts the Designer cannot see. Scan the published address, not the Designer preview.

Frequently asked questions

TagPipes monitors, configures and reports. It does not determine legal compliance and does not provide legal advice. Output is informational and reflects observed state at the time of observation. Rawsoft's expertise is technology, not law; please confirm any regulatory interpretation with your own counsel.

One checker, the same real-browser scan, explained for the question you came with. Every report opens at the same place.

Check a published Webflow page now.

Free, no signup, usually ready in a couple of minutes.

Check My Webflow Site