Webflow-saavutettavuus
Tee Webflow-sivustostasi aidosti saavutettava. EAA ja WCAG, ilman overlayta
Webflow antaa sinulle pikselintarkan hallinnan, mutta ei sisäänrakennettua saavutettavuutta: Designer jättää aria-*-määreet monimutkaisista komponenteista oletuksena pois. Me löydämme esteet ja toimitamme korjauksen omiin Custom Attributes -kenttiisi, ei widgettiä joka hidastaa sivustoasi.
Näin Seviranta korjaa Webflow-sivustosi juurta myöten
Missä esteet piileskelevät
Teemat, laajennukset ja lomakkeet tuovat hiljaisia esteitä. Löydämme ne kaikki.
Korjaus lähteessä, ei sen päälle
Konkreettisia korjauksia Webflow-kokoonpano-ympäristössäsi, ei overlay-kerrosta joka vain piilottaa virheet.
Ei widgettiä, ei hidastusta
Crawlaamme ulkoisesti EU-palvelimilta, 0% vaikutus latausnopeuteesi ja Core Web Vitals -arvoihin.
Valmis EAA:ta varten
Testaamme sivustoasi WCAG:tä vasten, sillä tasolla jolla valvontaviranomaiset testaavat.
Headless-skannaus axe-corella, sama moottori kuin Google Lighthousessa, EU-palvelimiltamme. 0% vaikutus latausnopeuteesi.
Totuus: Webflow ei ole automaattisesti saavutettava
Webflow Designer tuottaa siistiä HTML:ää, ja Webflow'n omat komponentit (Tabs, Dropdown, Navbar, Slider) ovat Webflow'n itsensä mukaan ARIA- ja näppäimistösaavutettavia. Ongelmat syntyvät siinä, mitä rakennat itse: diveistä ja interaktioista tehdyt välilehdet, modaalit ja painikkeet eivät saa roolia eivätkä tilaa, fokustyyli sinun on asetettava itse joka paikkaan, Audit panel tarkistaa vain neljä asiaa eikä Lightbox tue alt-tekstiä. Juuri sinne löydökset osuvat.
Mikä on todella pelissä
- Saavuttamaton kassa on suora EAA-rikkomus.
- Accessibility-widgetti ei käy rakenteellisesta ratkaisusta.
- Valvontaviranomaiset testaavat generoidun HTML:n, mukaan lukien sovelluksesi.
- ’Meillä on käytössä Webflow’ ei ole oikeudellinen puolustus: vastuu on julkaistulla verkkokaupalla, ei alustalla.
Mitä odottaminen voi maksaa
enintään € 1.000.000
EU-maksimi · Espanja/Luxemburg
$ 4.000
USA · Kalifornia (Unruh), per käynti
Sinua ei sakoteta tyhjästä, ensin tulee korjausmääräys ja takaraja. Mutta se, joka voi silloin näyttää päivätyn dokumentaation, selviää halvimmalla.
Katso, mikä pätee myyntimarkkinallasiKolmansien osapuolten Webflow-laajennusten piilevä riski
Arvostelu-widgetit, suodattimet, niputtajat ja hakusovellukset injektoivat dynaamista HTML:ää frontendiisi, ja jokainen sovelluspäivitys voi lisätä uuden esteen. Auditoinnissa tuo koodi lasketaan täysimääräisesti mukaan, vaikka et kirjoittanut sitä itse. Siksi Seviranta seuraa jatkuvasti lopputulosta niin kuin valvontaviranomainen sen näkee: Webflow-teemasi sekä kaikki sovellukset ja dynaaminen sisältö.
Mikä Webflow-alustalla menee usein pieleen
- Mukautetut välilehdet ilman role- ja aria-selected-attribuuttiaJos rakennat omat välilehtesi Designerissa, ne pysyvät tavallisina diveinä. Ilman role="tab"-, aria-selected- ja aria-controls-määritteitä välilehtien painikkeissa ruudunlukija ei tiedä, että kyse on välilehdistä tai mikä niistä on aktiivinen. Lisäät ne käsin Custom Attributes -kentän kautta.
- Pudotusvalikot ja modaalit ilman näppäimistöansan hallintaaWebflown interaktiot avaavat pudotusvalikon tai modaalin usein siirtämättä tai pitämättä fokusta. Näppäimistön käyttäjät tabittavat pois overlayn taakse ja menettävät sisällön.
- Div-painikkeet ilman role- ja tabindex-määreitäDiv, jossa on klikkaustoiminto, näyttää painikkeelta mutta ei ole sellainen. Ilman role="button" ja tabindex="0" -määrityksiä Custom Attributes -kentässä se on näppäimistö- ja ruudunlukijakäyttäjille tavoittamaton.
- Lightbox-kuvat ilman alt-tekstiäWebflow'n Lightbox ei tue alt-tekstiä sen sisällä oleville kuville, eikä Audit panel huomauta siitä. Jokainen lightboxissa oleva tuotekuva tai portfoliokuva on siksi näkymätön ruudunlukijoille. Käytä toisenlaista galleriaratkaisua tai kuvaile kuva sitä ympäröivässä tekstissä.
Miltä todellinen korjaus näyttää
Ota custom tab-komponentti, jonka olet rakentanut Designerissä diveillä. Ruudunlukija kuulee tällöin vain ‘ryhmä’ tab-rivin sijaan. Korjaus on kokonaan Custom Attributes -kentissä, ei uudelleenrakennusta: aseta role="tab", aria-selected ja aria-controls tab-painikkeisiin.
<div class="tab-link">Overzicht</div><div class="tab-link"
role="tab"
aria-selected="true"
aria-controls="panel-overzicht">Overzicht</div>Missä hoidat sen itse Webflow'ssa
Webflow'ssa on sisäänrakennettuna enemmän kuin useimmissa no-code-työkaluissa, mutta työkalut kattavat vain osan WCAG:stä. Tässä ovat viisi paikkaa, joissa teet itse eron Designerissa, ja se, mitä sinun on ratkaistava sen ulkopuolella.
- 1Audit panel: neljä tarkistusta, ei enempääAudit panel (vasen työkalupalkki, Option/Alt + U) tarkistaa tasan neljä asiaa: puuttuvat alt-tekstit, epäkuvaavat linkkitekstit, ohitetut otsikkotasot ja päällekkäiset elementti-ID:t. Värikontrasti, kaikki Components-osioiden sisällä, Lightbox-media ja CMS:ään sidotut kuvat jäävät ulkopuolelle. Vihreä Audit panelissa ei siis ole WCAG-vihreä.
- 2Alt-teksti: kuvaava tai koristeellinenAseta oletus-alt kullekin assetille Assets panelissa (hammasratas → Descriptive tai Decorative) ja ylikirjoita se instanssikohtaisesti kohdassa Image settings → Alt text. Decorative tuottaa tyhjän alt-tekstin, jolloin ruudunlukijat ohittavat kuvan. Alt-tekstiä Lightboxissa ei tueta; valitse siihen toisenlainen galleriaratkaisu.
- 3Tee kohdistus näkyväksiWebflow'n omat komponentit ovat Webflow'n mukaan ARIA- ja näppäimistösaavutettavia, mutta kohdistustyyli on sinun asetettavasi. Style panel → States → 'Focused (keyboard)' ja anna sille selkeä outline; sliderin pisteille se onnistuu vain mukautetulla CSS:llä kohteeseen .w-slider-dot:focus.
- 4Custom attributes kaikkeen, minkä rakennat itseJos rakennat välilehdet, modaalit tai painikkeet diveistä ja interaktioista, ruudunlukija ei tiedä, mitä ne ovat. Element settings → Custom attributes → '+' ja lisää role, aria-label, aria-expanded tai tabindex. Attribuutit voi sitoa myös CMS-kenttiin ja komponenttien ominaisuuksiin, jolloin asetat ne vain kerran.
- 5Skip-linkki ja liike'Hyppää sisältöön' -linkkiä ei ole Webflow'ssa valmiina; rakennat sen itse headerin ensimmäiseksi elementiksi, piilotettuna kohdistukseen asti, pienellä skriptillä kohdassa Project settings → Custom code. Animaatiot: aseta interaktiot tilaan 'no animation' tai 'skip to end', kun prefers-reduced-motion on käytössä, ja anna taustavideoille toisto/tauko-painike.
Webflow sanoo sen itse: testatut elementit täyttävät 'enintään' WCAG 2.1 AA -tason, ja työkalu tekee saavuttamattoman sisällön julkaisemisesta helppoa. Meidän skannauksemme testaa julkaistun sivun, täsmälleen sen, mitä valvontaviranomainen näkee, riippumatta siitä, mitä Audit panel merkitsee vihreäksi.
Mitä saat
Virhekohtaisesti: mitä, miksi ja miten
Jokaisen havainnon kohdalla näet, mikä on vialla, keneen se vaikuttaa, mitä WCAG-sääntöä se koskee ja konkreettisen, Webflow-tietoisen ratkaisun, koodiesimerkin kera silloin kun se on mahdollista.
Alustakohtainen tunnistus
Havaitset virheet, jotka syntyvät juuri Webflow-alustalla, et vain sitä, minkä geneerinen WCAG-tarkistus poimii.
Dokumentaatio joka kestää
Päivätty yleiskuva skannauksistasi ja havainnoistasi, jonka voit näyttää auditoinnissa tai tarkastuksessa.
Raportointityökalussa maksat lisenssin ja kehittäjäsi virheiden korjaamisesta. Sevirannassa korjaus on mukana, ei kaksinkertaista laskua.
Suojaa konversiosi ja oikeudellinen asemasi
Sovellus, joka liimaa saavutettavuuskuvakkeen Webflow-sivustosi päälle, on riski liiketoiminnallesi. Faktat rivissä:
Webflow-saavutettavuuswidgetit
- Lataavat ylimääräisiä ulkoisia skriptejä, jotka heikentävät latausnopeuttasi (LCP) ja siten konversiotasi.
- Peittävät virheen sen sijaan että ratkaisisivat sen, taustalla oleva koodi jää virheelliseksi.
- Eivät suojaa vaateilta. FTC sakotti overlay-tarjoaja accessiBea vuonna 2025 $1 miljoonalla harhaanjohtavista vaatimustenmukaisuusväitteistä.
Sevirannan lähestymistapa
- 0% vaikutus latausnopeuteesi, skannaamme ulkoisesti EU-palvelimiltamme.
- Korjaamme Webflow-mallipohjiesi todellisen lähdekoodin.
- Rakennamme automaattisesti säilytettävän EAA-dokumentaatiosi, valmiina näytettäväksi valvontaviranomaiselle.
Kysymykset ja vastaukset
- Webflow on kai jo saavutettava, miksi sivustoni sitten epäonnistuu?
- Webflow'n omat komponentit ovat Webflow'n mukaan ARIA- ja näppäimistösaavutettavia, mutta kaikki, minkä rakennat itse diveistä ja interaktioista, värivalintasi, alt-tekstisi ja otsikkojärjestyksesi ovat sinun päätettävissäsi. Siellä on suurin osa löydöksistä, eikä Audit panel niitä juuri näe.
- Myyn myös Ranskaan tai Saksaan. Mikä standardi siellä koskee Webflow-sivustoani?
- Sama: WCAG 2.1 AA EN 301 549:n kautta. Ranska testaa RGAA:lla (versio 4.1.2, 106 kriteeriä, jotka kattavat WCAG 2.1:n A- ja AA-kriteerit), Saksa BFSG:llä. Molemmat arvioivat julkaistun sivun, eivät rakennustyökalua. Kerran oikein Webflow'ssa on siis oikein kaikilla markkinoilla.
- Voiko Seviranta tehdä korjauksen Webflow'ssa puolestani?
- Toimitamme jokaisesta löydöksestä tarkan paikan (selektorin) ja korjauksen: minkä custom attributen, minkä alt-tekstin, minkä kohdistustyylin. Korjauksen teet sinä tai Webflow-tekijäsi Designerissa. Emme tarvitse pääsyä projektiisi emmekä sijoita sivustollesi mitään skriptiä.
- Riittääkö Webflow-saavutettavuus-widgetti EAA:han?
- Ei. Widget asettaa kerroksen sivustosi päälle, mutta ei korjaa taustalla olevaa koodia eikä käy rakenteellisesta vaatimustenmukaisuudesta.
- Kuuluuko Webflow-kassani EAA:n piiriin?
- Kyllä. Kassa ja navigointi ovat nimenomaisesti osa WCAG 2.1 AA:n mukaista velvollisuutta.
- Skannaako Seviranta myös Webflow-sovellukseni?
- Kyllä. Testaamme lopullisen generoidun HTML:n, teeman ja sovellukset, samoin kuin valvontaviranomainen tekee.
- Hidastaako tämä Webflow-sivustoani?
- Ei. Skannaamme ulkoisesti EU-palvelimiltamme; sivustollesi ei tule mitään skriptiä. 0% vaikutus latausnopeuteesi ja Core Web Vitals -arvoihin.
Teemme sen itsekin
Pidämme itsemme täsmälleen samalla rimalla: oma sivustomme saa 0 virhettä axe-coressa, samassa moottorissa, joka on Google Lighthousessa ja jolla skannaamme myös sinun Webflow-kauppasi. Sen, minkä kone toteaa varmasti, korjaamme koneellisesti, loput arvioi ihminen. Näin tarkasti saat sen meiltä: katso todellinen esimerkkiraportti.
Mitä EAA vaatii Webflow-kaupaltasi
Kesäkuusta 2025 lähtien verkkokauppasi on täytettävä WCAG 2.1 AA, Webflow-kauppa ei ole poikkeus. Maksuton skannaus näyttää 60 sekunnissa, mikä tilanne on, ja tarkan rivin, joka ei täytä vaatimusta.
Myytkö useampaan maahan?
WCAG on maailmanlaajuinen standardi. Lähes jokainen markkina nojaa siihen:
Korjaa Webflow-kauppasi kerran WCAG:iin, niin katat teknisen riman kaikilla noilla markkinoilla. Markkinakohtaisesti vaihtelevat valvoja ja seuraamusmaksut.
Katso, mikä pätee myyntimarkkinoittainHallinnoitko useita Webflow-sivustoja asiakkaille?
Estä se, että toimittamistasi verkkokaupoista tulee EAA:n mukainen oikeudellinen riski asiakkaillesi. Ota Seviranta käyttöön automaattisena laatuleimanasi jokaisessa luovutuksessa ja deployssa, yksi skannaus, ja jokainen sivusto on osoitettavasti kunnossa.
Tutustu kumppaniohjelmaammeMuut alustat
Skannaa Webflow-kauppasi ilmaiseksi
Liitä Webflow-URL-osoitteesi ilmaiseen skannaukseen ja näe minuutissa mitkä säännöt eivät täyty, sekä tarkka kohta komponenteissasi.