7 Webflow Accessibility Mistakes (And How to Fix Them)
Published February 3, 2025 · 9 min read
Webflow is one of the most popular website builders for designers and small business owners. Its visual editor is powerful — but it also makes it easy to skip accessibility steps that are not visually obvious. The result is that most Webflow-built sites have several WCAG 2.1 violations that could block screen reader users, keyboard-only users, and users with low vision.
This guide documents the seven issues that appear most frequently in Webflow site audits — and exactly how to fix each one in the Webflow Designer.
The 7 Most Common Webflow Accessibility Mistakes
Images without alt text
WCAG 1.1.1 Non-text Content (Level A)
The problem
Webflow's image upload panel has an optional alt text field — it defaults to empty. When designers skip this field, screen readers announce the image file name instead (e.g., "hero-banner-final-v3.jpg"), which is useless to a visually impaired user.
Where it commonly appears
- ›Hero banner images with no alt text
- ›Team headshots with only the file name as alt
- ›Service or product images with alt="" on meaningful images (decorative alt is correct for background shapes, not for product photos)
How to fix it in Webflow
In Webflow Designer, click the image → Settings panel → fill in the "Alt text" field. For decorative images (background shapes, dividers), set alt to "" (empty string) and check "Decorative". Never leave alt text blank on images that convey information.
Div-based buttons without accessible names or roles
WCAG 4.1.2 Name, Role, Value (Level A)
The problem
Webflow makes it easy to style any element to look like a button. Designers often use a <div> or <span> styled as a button instead of a native <button> element. These elements have no role and no keyboard activation by default — screen readers do not announce them as interactive, and pressing Enter or Space does nothing.
Where it commonly appears
- ›Menu toggle buttons built from a styled div
- ›Custom card elements with a click handler but no button role
- ›'Get a quote' call-to-action built as a div with an interaction
How to fix it in Webflow
In Webflow, use the Button element (not a div) for interactive controls. If you must use a div, add role="button" and tabindex="0" via Custom Attributes, and add an aria-label if there is no visible text.
Form inputs without associated labels
WCAG 1.3.1 Info and Relationships / 4.1.2 (Level A)
The problem
Webflow's Form element supports labels, but they are not always programmatically linked to their inputs. A label that is positioned near an input visually is not the same as a label that is linked via the for/id attribute.
Where it commonly appears
- ›Contact forms with floating placeholder labels only
- ›Newsletter signup forms with a label that is visually close but not connected
- ›Checkout forms that use placeholder text instead of visible labels
How to fix it in Webflow
In the Webflow Form block, every input has a Label setting. Ensure the Label is enabled and has text. Webflow links it programmatically when you use the built-in Form component. If you are building a custom form layout, add a for attribute to the <label> matching the input's id.
Insufficient color contrast
WCAG 1.4.3 Contrast Minimum (Level AA)
The problem
Webflow's color picker does not warn you when a color combination fails WCAG contrast requirements. Light gray text on white, white text on light mint, or navy text on dark blue all fail at various combinations. This is especially common on hero sections and testimonial cards.
Where it commonly appears
- ›Gray (#999) body text on white (#FFF): ratio ~2.85:1, fails AA (needs 4.5:1)
- ›White (#FFF) text on a light teal (#5BC8B0): ratio ~2.0:1, fails AA
- ›Light gray placeholder text in form inputs
How to fix it in Webflow
Use the W3C Contrast Checker or the Colour Contrast Analyser to test every text/background combination on your site. Adjust text or background colors until the ratio meets 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold).
Icon-only links without accessible names
WCAG 2.4.4 Link Purpose / 4.1.2 (Level A–AA)
The problem
Social media icons, phone number icons, and arrow links are often implemented as a linked SVG or image with no text. Screen readers read these as "link" with no destination context — the user cannot tell if clicking will open Instagram, send an email, or navigate to the next page.
Where it commonly appears
- ›Footer social media icon links (Twitter, LinkedIn, Instagram) with no labels
- ›Arrow buttons in sliders or carousels with no text
- ›Phone or email icon links with no visible text
How to fix it in Webflow
Add aria-label="Follow us on Instagram" to the link element via Webflow Custom Attributes. If the icon is an SVG, you can also add a <title> element inside the SVG, but aria-label on the <a> is more reliable.
Logical reading order broken by absolute positioning
WCAG 1.3.2 Meaningful Sequence (Level A)
The problem
Webflow's designer encourages positioning elements freely on the canvas. Absolute and fixed positioning, combined with z-index layering, can result in a DOM order that makes no logical sense when read sequentially — which is exactly how screen readers and keyboard users experience it.
Where it commonly appears
- ›A headline positioned visually above a section but placed later in the DOM
- ›An overlay modal that appears in the DOM before the trigger button
- ›Content split into two absolutely-positioned columns with interleaved DOM order
How to fix it in Webflow
Review your DOM order in the Webflow Navigator panel. The reading order in the Navigator should reflect the logical reading sequence. Avoid using absolute positioning for content elements — use Flexbox or Grid instead, which keep DOM and visual order in sync.
Missing focus styles or focus styles set to outline: none
WCAG 2.4.7 Focus Visible (Level AA)
The problem
Many Webflow templates remove the default browser focus ring with "outline: none" or "outline: 0" for aesthetic reasons. This makes it impossible for keyboard users to see which element has focus as they Tab through the page.
Where it commonly appears
- ›Global CSS with *:focus { outline: none; }
- ›Link styles with :focus { outline: none; } in Webflow's global styles
- ›Custom button styles that override focus without a replacement
How to fix it in Webflow
Remove any global outline: none rules in Webflow's Global Styles panel. Replace them with a visible custom focus style: for example, :focus-visible { outline: 2px solid #35C2A6; outline-offset: 2px; } This preserves good design while restoring keyboard accessibility.
How to Audit Your Webflow Site
The fastest way to find accessibility issues on a published Webflow site is to run an automated scan. Tools powered by WCAG 2.1 can identify most of the above issues in minutes:
- 1Publish your Webflow site to your custom domain or the webflow.io staging domain.
- 2Enter the URL in AccessCheckup (or the axe DevTools browser extension).
- 3Review the results — focus on Critical and High severity issues first.
- 4Return to the Webflow Designer and fix each issue using the guidance above.
- 5Republish and re-scan to confirm the fixes are effective.
Frequently Asked Questions
Is Webflow accessible by default?
Webflow generates reasonably semantic HTML compared to some website builders, but it does not automatically handle all accessibility requirements. Alt text, ARIA labels, logical reading order, and color contrast all require deliberate action by the designer or developer. A Webflow site built without accessibility in mind will typically have 5–15 WCAG violations on a basic scan.
Can I fix accessibility issues in Webflow without code?
Many common issues can be fixed directly in the Webflow Designer without writing custom code. Alt text is set in the image settings panel. Aria labels can be added through the element settings. Color contrast can be improved by adjusting the style settings. However, some advanced fixes — like custom focus styles or complex ARIA roles — require embedding custom HTML or JavaScript.
Does Webflow support ARIA attributes?
Yes. In the Webflow Designer, you can add ARIA attributes to most elements through the Element Settings panel under "Custom Attributes". For example, you can add aria-label, aria-hidden, role, and other ARIA attributes directly in the designer. Some ARIA attributes are also added automatically by Webflow's components (e.g., for navbar, dropdown, and slider components).
How do I audit a Webflow site for accessibility?
The easiest starting point is to run the published URL through an automated scanner like AccessCheckup. This will flag issues like missing alt text, form label problems, and color contrast failures across all your published pages. For a thorough audit, combine automated scanning with keyboard navigation testing and a quick screen reader review using VoiceOver (Mac) or NVDA (Windows/free).
Sources & Further Reading
Scan your Webflow site now
Enter your published Webflow URL and get a plain-English accessibility report in minutes. See exactly which of these 7 issues affect your site — and where.
Start free scan →