WEBFLOW · TILGÆNGELIGHED · EAA

Webflow og tilgængelighed:
den praktiske audit-guide

Hvor Webflow-sider faktisk fejler WCAG-tjek — og hvordan bureauer retter det inde i Designeren, før EAA bliver kundens problem.

Opdateret august 2026 · 6 minutters læsning

Hvorfor dette gælder dig

Webflow er foretrukne værktøj til EU-marketingssider, SaaS-landingpages og bureaukunder — præcis den e-handels- og forbrugertjeneste-zone, European Accessibility Act dækker siden juni 2025. Bureauer der leverer Webflow-projekter, leverer altså også tilgængelighedstilstanden selv: der er mindre plugin-støj end i WordPress, men også intet plugin der redder dig. Den gode nyhed er, at Webflow giver usædvanlig direkte kontrol med semantikken — de fleste fejl skyldes designbeslutninger, ikke platformens grænser.

🎯 Du ejer semantikken

Webflow lader dig sætte hvilket som helst element-tag (div → nav, section, h2...). De fleste tilgængelighedsfejl er simpelthen divs der udfører semantiske jobs.

⚡ Hurtig udbedring

Fordi alt er visuelt og centraliseret, tager det minutter at rette 20 kontrastfejl i style-panelet — når først de er fundet.

📜 Salgbart deliverable

En audit-rapport plus tilgængelighedserklæring er nu en fakturerbar linje — kunder i EAA-omfang skal have begge dele.

Typiske Webflow-fejl

🧱 Div-suppe i stedet for overskrifter

Tekst stylet til at ligne overskrifter men efterladt som rene divs. Skærmlæsere ser ingen dokumentstruktur. Fix: markér elementet → Indstillinger → skift tag til h1/h2/h3.

🎨 Kontrast på gradienter

Hero-tekst oven på gradienter eller billeder fejler 4,5:1 et sted langs overgangen. Test det værste hjørne og læg et mørkt overlay (scrim) bag teksten.

⌨️ Interaction-fælder

Hover-drevne dropdowns, tabs og slidere bygget med Interactions ignorerer ofte tastaturet helt — ingen fokus, ingen escape, intet touch-alternativ.

🖼️ Baggrundsbilleder som indhold

Billeder uploadet som background-image har ingen alt-attribut. Indholdsbærende billeder skal være rigtige Image-elementer med alt-tekst.

🔗 Link Blocks

En "Link Block" der omslutter hele kort giver gentagne nøgne links; indre tekst-spans læses ikke pålideligt som linkkontekst.

Designer-retninger der dækker det meste

Tag-disciplin: gå sektion for sektion og sæt rigtige tags: nav omkring navigationen, header/footer-elementer, én h1 pr. side og logisk h2/h3-nesting under den.

Alt-tekst: hvert Image-element får beskrivende alt i sine indstillinger; dekorative får tomt alt. Erstat background-image-divs med informative billeder som rigtige billedelementer.

Fokus-synlighed: sæt aldrig outline: none uden en erstatning. Style Focus-tilstanden i selector-panelet — 2px solid currentColor med offset virker næsten altid.

Formularer: hvert input får et rigtigt label-element (ikke kun placeholder). Opsæt success-/fejlbeskeder som live regions så skærmlæsere annoncerer dem.

Farvetokens: ret kontrasten ét sted i dine globale variabler/swatches — mørkere brødtekst, mørkere gråtoner på badges — og tjek med et kontrastværktøj.

Sprog og metadata: sæt html lang i Project Settings og unikke titler/meta pr. side.

Interactions og tastatur

Interactions er Webflows største strukturelle risiko, fordi funktionen opfordrer til mus-først-tænkning. Audit-reglerne: hver hover-interaktion skal have en fokus-ækvivalent (dropdowns åbner ved focus-in og lukker ved focus-out); tabs og slidere skal kunne betjenes med piletaster og eksponere aria-selected/roller; alt der udløses ved klik skal være en rigtig knap eller et link — ikke en div med click-trigger; modal-interaktioner skal flytte fokus ind ved åbning og tilbage ved lukning; og autospillede hero-animationer skal respektere prefers-reduced-motion. Er det for dyrt at genbygge en interaktion tilgængeligt, så giv en statisk fallback til samme indhold — WCAG kræver ikke identisk oplevelse, kun ækvivalent adgang.

Audit-workflow i fem skridt

Trin 1 — automatisk scanning af forsiden, en nøgleside, en formularside og evt. collection-/skabelonsider. Det fanger kontrast, alt, overskriftsorden, labels og duplikerede IDs på minutter — forvent 10-30 fund på et typisk build.

Trin 2 — ret i Designeren, publicér staging og genscan til de automatiske fund er væk.

Trin 3 — keyboard-gennemgang: tag musen fra bordet og gå hver interaktive sti igennem — menuer, accordions, tabs, modals og formularer.

Trin 4 — skærmlæser-spotcheck af én kernerejse med NVDA eller VoiceOver.

Trin 5 — levér: fundrapport (før/efter) plus tilgængelighedserklæring med conformance-status og kendte begrænsninger. Genscan efter hver større site-ændring.

Ofte stillede spørgsmål

Er Webflow mere tilgængeligt end WordPress ud af boksen?

Ingen af dem vinder automatisk. Webflow giver mere ren kontrol med markeringen, men outputtet er kun så tilgængeligt som designeren gør det. WordPress-temaer varierer vildere. I begge tilfælde afgør byggeren.

Gælder EAA B2B-sider lavet i Webflow?

EAA rammer forbrugervendte tjenester, så rene B2B-sider falder mest udenfor — men WCAG-baserede krav gælder stadig via EN 301 549-udbudskaeder, og offentlige kunder kræver conformance alligevel.

Må jeg bruge et tilgængeligheds-overlay på Webflow?

Overlays kan ikke skabe manglende semantik, reparere ubrugelige interactions eller rette indholdsproblemer, og markedsføring af dem som compliance har mødt regulatorisk kritik i EU. Ret årsagerne i Designeren i stedet.

Hvordan tjekker jeg kontrast over gradienter og billeder?

Prøvtag det lyseste og mørkeste punkt bag teksten og tjek begge mod tekstfarven i et kontrastværktøj. Læg et scrim-overlay på, hvis ét punkt fejler.

Kan bureauer sælge Webflow-tilgængelighedsaudits?

Ja — en automatiske scanning kombineret med manuel tastatur-/skærmlæsertestning og en leveret rapport er en standard, fakturerbar ydelse, og EAA-fristerne har gjort efterspørgslen voksende.

Start med en gratis scanning →

Relateret: Wix og EAA · Squarespace og EAA · Pris på tilgængelighedsgennemgang