Fixing and Rechecking Accessibility Issues on a Webflow Site
This walkthrough follows one Webflow page from first scan to recheck. The page is a demo we published on 08.11.26 to a webflow.io subdomain of a retired site we own, not a client site. Unlike our WordPress example, every scan here ran through the public AllyProof free test, so the numbers are what any visitor would see for that URL.
What the first scan found
Score 68, six automated issues - one critical, four serious, one moderate (one of them shown only after signing up):
| Finding | Cause on this page | WCAG |
|---|---|---|
| Select element has no accessible name (critical) | Date dropdown inside a Webflow form with no label | 4.1.2 |
| Text contrast too low | Intro paragraph in a light "brand grey" (#b0b0b0 on white) | 1.4.3 |
| Form field border contrast too low | Default dropdown border | 1.4.11 |
| Page has no language | <html> published without a lang attribute; reported by both engines | 3.1.1 |
What the scan could not see
The images on the page were inserted with alt="". The published page showed different alt text: Webflow linked them to existing library assets and used the alt text stored on each asset - in Ukrainian, on an English page. The linked close icon therefore had a name ("icon, closed") that described the picture rather than the link, which went to the homepage. Every rule passed, because both images had alt text. Only a person reading it in context notices that it is in the wrong language and describes the wrong thing.
The fixes in Webflow
- Contrast. We changed the intro text colour in its class to
#595959and gave the dropdown a 1px#767676border. Both changes apply wherever the class is used, so check other pages that share it. - Image alt text. Select each image and set alt text on the element instead of relying on the asset: "Back to home" for the linked icon, and a short English description for the photo.
- The dropdown's name. We added a visible label, but Webflow published it with an empty
forattribute, so it was not linked to the field and the recheck still reported the critical issue. Giving the field an accessible name of "Workshop date" fixed the finding. In the Designer, also set the label's For field to the dropdown's ID, so that clicking the label focuses the field. - Page language. This comes from the site's primary locale, under Site settings > Localization, followed by a republish. It cannot be set from the page, so plan it with whoever has site-level access.
The rechecks
Each recheck used Run a fresh scan behaviour, so it tested the republished page rather than replaying the cached result:
| Scan | Score | Issues | Critical |
|---|---|---|---|
| First scan | 68 | 6 | 1 |
| After contrast and alt text fixes | 78 | 4 | 1 |
| After naming the dropdown | 86 | 4 | 0 |
The remaining findings are the page language, which both engines report until the site setting changes, and two moderate items shown only to signed-in users. Before telling a client the page is done, also tab through the form, check that the focus indicator is visible, and listen to the dropdown and images with a screen reader.
For agencies maintaining Webflow sites
Three Webflow behaviours from this page are worth checking on every client site: asset-library alt text appearing in the wrong context or language, form labels that are not linked to their fields, and a missing site language. The first is invisible to automated rules; the other two show up in a scan but need a Designer or site-settings change to fix. Business monitoring (EUR 35 per site per month, or EUR 336 per site per year; 14-day trial for eligible accounts, payment method required, renews until cancelled) rechecks the site weekly, so a CMS edit that brings an issue back shows up in the next scan.
Common questions
- Why did my Webflow image show different alt text than I set?
- Webflow images linked to an asset can use the alt text stored on the asset in the library. In this example the published page showed the asset's Ukrainian alt text on an English page. Set alt text on the image element when the image needs page-specific wording.
- Why is my Webflow form label not linked to its field?
- In this example the published label had an empty for attribute, so the dropdown had no accessible name. Set the label's For field to the input's ID in the Designer, or give the field an accessible name directly.
- How do I set the page language in Webflow?
- The html lang attribute comes from the site's primary locale. Set it under Site settings > Localization and republish. It cannot be fixed from an individual page.
Related articles
Want to see how your own site scores?
Run a free accessibility scan