Webflow accessibility fixes: a practical checklist for small-business sites

Webflow gives you more design control than most website builders, so most accessibility problems on Webflow sites come from design choices rather than the platform itself. Webflow lists which of its built-in elements work with screen readers and keyboards (Accessible elements in Webflow). This checklist follows Webflow's own Help Center. Webflow changes its menus from time to time, so if a name below doesn't match what you see, search the Webflow accessibility help section for the setting.

1. Start with the Audit panel, and know what it skips

The Audit panel in the Designer's left toolbar runs 4 accessibility checks: missing alt text, non-descriptive link text, skipped heading levels and duplicate element IDs (Intro to the Audit panel). Fix everything it flags first. Then check by hand what Webflow says it does not cover:

• anything inside components
• images bound to the CMS (blog posts, team members, products)
• images inside Lightbox elements
• colour contrast (that check lives in the colour picker instead, see step 3)

2. Alt text

Open the Assets panel, hover an image, click its settings cog and fill in the alt text, or mark the image as decorative if it adds no information (Include alt text on images). Logos, linked images and images with words in them always need alt text.

• AI alt text: Webflow can generate alt text, including in bulk from the Audit panel. Review each suggestion before you accept it; see our AI alt text review checklist.
• CMS images: the Audit panel doesn't check them, so open a few published blog or team pages and confirm each image has a real description.
• Lightbox: Webflow's Lightbox help page says images inside a lightbox don't currently support alt text. Put a short text description next to the thumbnail so the information isn't only in the picture.

Not sure if your descriptions are good? Paste them into our free alt text checker.

3. Colour contrast

Select a text element and open its typography colour. Webflow's colour picker shows the contrast ratio and WCAG rating against the background (Use accessible color contrast ratios). Aim for at least 4.5:1 for normal text and 3:1 for large text. Text over photos or background videos needs a solid or darkened layer behind it, because the picker can't see the image. Check any pair of colours with our free contrast checker.

4. Form labels

Webflow's own guidance is that fully accessible form labels currently need a small manual step (Use clear, visible form field labels): give each field a unique ID in the Settings panel, then give its Label a custom attribute named for with that same ID. The published code should look like this:

<label for="email">Email</label>
<input id="email" type="email" name="email" required>

Keep labels visible above the field. Placeholder text disappears as people type and is usually too light to read. More in our accessible contact forms guide.

5. Headings in order

Use one H1 per page that says what the page is about, then H2s for sections and H3s inside them. Select a heading and choose its level in the Settings panel; if you want a different size, change the class, not the level. The Audit panel flags skipped levels. See heading structure.

6. Visible focus on menus, tabs, dropdowns and sliders

Webflow says its Tabs, Dropdown, Slider and Navbar elements need a focused-state style before they are fully keyboard accessible. Add one in the Designer's focused state, or site-wide in custom code:

<style>
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
.w-slider-dot:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
</style>

Then try the 5-minute keyboard test: you should always be able to see where you are.

7. Icon-only links and buttons

Social icons, a cart icon or a hamburger menu with no text are announced as just "link" or "button". Add visible text, or select the element and add a custom attribute aria-label in the Settings panel:

<a href="https://www.instagram.com/yourshop" aria-label="Our Instagram">…icon…</a>

8. Page regions and a skip link

Webflow's accessibility checklist recommends setting the tag of your wrappers in the element settings: Nav around navigation, Main around the page content (with the ID main), and Footer for the footer (landmark elements). Then add a skip link as the first item on the page:

<a class="skip-link" href="#main">Skip to main content</a>

Style it so it appears when it gets keyboard focus.

9. Background videos and animations

• Keep Include play/pause button switched on in Background video settings. Webflow turns it on by default for background videos added after June 2022, but older ones need it switched on by hand, and if you replace the icons, give them alt text such as "Pause video" (Toggle play/pause on background videos).
• Avoid anything that flashes more than 3 times a second, and keep scroll and hover interactions gentle (Use thoughtful motion and animation). Captions for real videos are covered in our video captions guide.

10. Page titles and language

Give each page a unique title in its SEO settings ("Kitchen remodeling in Tulsa | Elm Street Builders", not "Home"), and check the site language is set so <html lang="en"> (or your language) appears in the published code. Screen readers use it to pick the right pronunciation.

Moving to or from Webflow? Re-check after the move

Platform moves (Wix or WordPress to Webflow, or Webflow to another stack) are a common time for accessibility to slip: alt text gets lost when images are re-uploaded, forms are rebuilt without labels, heading levels change with the new design and focus styles disappear. After a move, re-run the Audit panel, a free scan and the keyboard test on every key page, and put a monthly check in place with our maintenance plan.

What a scan can and can't check here

An automated scan like ours uses axe-core to check the published code: missing alt text (including on CMS and component images the Audit panel skips), low-contrast text it can measure, unlabelled fields, nameless links and buttons, heading order, missing page language and title, and a viewport tag that blocks zoom. Our reports recognise Webflow sites and add Webflow-specific notes next to each code fix. A scan can't tell whether your alt text is accurate, whether focus is easy to see in every state, whether interactions are comfortable, or how pages behind a login or password work, and it only sees the pages it loads. Automated checks find only part of accessibility barriers, so pair the scan with the keyboard test and a 15-minute screen reader test.

Comparing builders? See Squarespace vs Wix vs WordPress vs Shopify. Other platform guides: Wix, Squarespace, WordPress, Shopify.

Want the fixes written for you?

Start with a free homepage snapshot. The $149 Fix-Pack scans up to 10 pages and gives copy-paste fixes for your platform within 48 hours, with a 14-day refund promise. See a sample report first.

This is general technical guidance, not legal advice, and it does not certify compliance with the ADA or any law.

Related guides

• Is your small business website AI-ready? The accessibility basics AI agents rely on
• WCAG 2.2 explained for small-business websites
• Squarespace accessibility fixes: alt text, contrast, forms and more
• Wix accessibility fixes: a practical checklist

All guides

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.