WCAG Compliance Checklist for Webflow Sites (Germany)

Why Accessibility Matters for Webflow Sites

Webflow gives you powerful design freedom, but that flexibility can create accessibility gaps if you're not deliberate about it. The EU's Accessibility Act enforcement date of June 28, 2025 means commercial websites in Germany now face real compliance expectations. More importantly: inaccessible sites exclude people with disabilities from using your product, reading your content, or buying from you—and that's both ethically wrong and a business risk.

Enforcement in Germany

Germany's accessibility law (the BFSG) is enforced by a newly-created joint authority, the Marktüberwachungsstelle der Länder (MLBF), operating nationwide since September 2025. Penalties are tiered: up to €100,000 for placing a non-compliant product or service on the market, and up to €10,000 for lesser violations like missing documentation.

One detail worth knowing if you're building on Webflow for a German audience: the BFSG explicitly covers services aimed at consumers. A service sold purely B2B, to other businesses only, technically falls outside its scope — though if your site is public marketing content that anyone can land on, that distinction may not offer much practical protection.

MLBF had received around 700 complaints and notifications by June 2026, and has started sending information requests to large financial and insurance companies asking them to report their accessibility status. No fine has been publicly issued yet. The standard EAA microenterprise exemption (under 10 employees, under €2 million turnover) applies for services, though not for physical products.

Checklist: Fix These Six Common Issues

Image Alt Text

The problem: Images without alt text are invisible to screen reader users and when images fail to load. Blind and low-vision users miss key information.

How to check on Webflow: Select any image element, open the settings panel on the right, scroll to the "Alt text" field. If it's empty or says "image" or "photo," it needs a real description.

What good alt text looks like:

• Describe what the image shows and why it matters in context
• Keep it under 125 characters; be specific, not flowery
• For logos or icons that are purely decorative next to text, you can leave alt text empty (but mark it as decorative)
• Bad: "Team photo" → Good: "Four developers reviewing code on a monitor at our Berlin office"

Color Contrast

The problem: Text that's too close in color to its background is hard or impossible to read for people with low vision or color blindness.

How to check on Webflow: Use a free tool like WebAIM's Contrast Checker or the WAVE browser extension. Take a screenshot of your page, plug in the foreground and background colors, and check the ratio. WCAG AA (the minimum standard) requires 4.5:1 for body text and 3:1 for headings and buttons.

Quick wins:

• Dark text on light backgrounds almost always works; avoid light gray on white
• Don't rely on color alone to convey information (like "required fields are red")
• Test your design on a grayscale monitor or use your browser's color blindness simulator

Form Labels

The problem: Form fields without labels confuse everyone, but screen reader users have no way to know what each field is asking for. A missing label makes your form unusable for blind users.

How to check on Webflow: Open a form element, look for the "Label" field in the right panel. Every input (name, email, phone, message, etc.) should have a visible label connected to it—not just placeholder text.

How to fix it:

• In Webflow, create a text element above or beside each input, then select the input and connect the label in the settings
• Never use placeholder text alone as a label; placeholder text disappears when the user starts typing
• Make labels visible and close to their fields so sighted users also benefit

Link Name (Link Text)

The problem: Links with no readable text, or only an icon/image without alt text, are unusable for screen reader users and keyboard navigators who can't see where the link goes.

How to check on Webflow: Select any link (text or button styled as a link) and ask: does it have clear, descriptive text that explains where it goes or what happens when clicked? Icon-only links and image-only links need a text label hidden for sighted users but readable by screen readers.

Examples:

• Bad: `<a href="/contact">→</a>` (icon only, no text)
• Good: `<a href="/contact">Contact our team</a>`
• Icon link fix: Add hidden text like `<a href="/contact"><span class="sr-only">Contact our team</span> →</a>` (Webflow can add this via custom code or alt text on the icon)

HTML Document Language

The problem: If your `<html>` tag doesn't declare the page language, screen readers can't pronounce the content correctly and search engines can't target your site to German-speaking users.

How to check on Webflow: Go to Project Settings → SEO Settings, and look for the "Language" dropdown. It should be set to "Deutsch" or "German" (or English if that's your primary language). Webflow will add the `lang` attribute to your `<html>` tag automatically.

What to do:

• Set your site language in Webflow's project settings; this is a one-time fix for all pages
• If you have pages in different languages, set the language per-page in the page SEO settings
• For German sites: use `de` or `de-DE`; for English: use `en` or `en-US`

Button Name (Button Text)

The problem: Buttons without clear text labels—especially icon-only buttons—are invisible to screen reader users. A blind user can't click a button if they don't know what it does.

How to check on Webflow: Select any button element. Does it have visible, readable text that describes its action (like "Send Message" or "Download PDF")? Icon-only buttons need hidden text labels that screen readers can read.

How to fix it:

• Always include descriptive text inside the button: "Submit Form," "Learn More," "Close Menu"
• For icon-only buttons (hamburger menu, close X, search), add hidden text using a span with a class like `sr-only` (screen-reader-only) via custom CSS
• Webflow doesn't have built-in support for this yet, so use custom code in your button element or ask your developer to add it

Next Steps

These six issues account for the vast majority of accessibility barriers on marketing sites. Start with the ones that affect the most pages: images and forms. Use your browser's accessibility inspector (DevTools → Accessibility tab) or free tools like WAVE or Axe DevTools to spot issues. If you're unsure about any fix, ask your development team—most of these take minutes to correct in Webflow, and the effort pays off in a usable site for everyone.

This is technical WCAG guidance, not legal advice.