Tilgængelighedsloven: hvad betyder den for jeres hjemmeside?

Forestil jer en kunde, der vil bestille en vinduespudser via jeres hjemmeside. Hun er svagtseende og bruger skærmlæser. Hun kommer fint igennem forsiden, men datovælgeren i bookingformularen kan kun betjenes med musen, og knappen til betaling hedder bare »knap« for skærmlæseren. Hun giver op og ringer til en konkurrent. Det er præcis den situation, tilgængelighedsloven skal forhindre, og det er også en situation, der koster jer omsætning, helt uafhængigt af loven.

Den danske tilgængelighedslov gennemfører EU’s European Accessibility Act (EAA). Den gælder for en række produkter og tjenester, og for de fleste virksomheder er det e-handel, der er relevant: webshops, bookingløsninger og apps, hvor en forbruger kan indgå en aftale online. Sikkerhedsstyrelsen fører tilsyn i Danmark. Vi er et digitalt produktstudie uden juridisk rådgivning, så brug denne guide som et praktisk overblik, og få jeres konkrete situation vurderet af en jurist eller via Sikkerhedsstyrelsens vejledning.

Hvem er omfattet af tilgængelighedsloven?

Loven rammer tjenester og produkter, der henvender sig til forbrugere. På tjenestesiden er de vigtigste kategorier e-handel, banktjenester til forbrugere, e-bøger, elektronisk kommunikation, adgang til audiovisuelle medietjenester og visse dele af passagertransport som billetkøb og rejseinformation. På produktsiden handler det om fx computere, smartphones, betalingsterminaler, billetautomater og e-bogslæsere. For en almindelig dansk virksomhed med hjemmeside er spørgsmålet derfor ret enkelt: kan en privatperson købe, bestille eller indgå en aftale med jer online?

Undtagelsen for mikrovirksomheder

Mikrovirksomheder, der leverer tjenester, er undtaget fra kravene. Definitionen er færre end 10 ansatte og en årlig omsætning eller balance på højst 2 mio. euro. Undtagelsen er nyttig for den lille webshop, men vær opmærksom på to ting. For det første vokser virksomheder, og når I passerer grænsen, gælder kravene. For det andet er en utilgængelig webshop stadig en webshop, der taber kunder: ældre brugere, folk med nedsat syn, farveblinde og alle, der handler på mobilen i sollys. Vi anbefaler derfor, at også små virksomheder bygger efter de samme principper, når de alligevel får lavet noget nyt.

Overgangsregler og uforholdsmæssig byrde

Loven indeholder overgangsregler for visse eksisterende kontrakter og produkter, og en virksomhed kan i særlige tilfælde påberåbe sig, at et krav vil være en uforholdsmæssig stor byrde eller kræve en grundlæggende ændring af tjenesten. Begge dele kræver en konkret, dokumenteret vurdering, og en sådan vurdering skal typisk kunne fremvises ved tilsyn. Det er ikke en genvej, I bør planlægge efter. Ser I det som en mulighed, så tal med en jurist, før I læner jer op ad den.

Hvad kræver loven konkret af en hjemmeside eller app?

Loven beskriver krav i funktionelle vendinger: tjenesten skal være opfattelig, anvendelig, forståelig og robust. Det er de samme fire principper, som WCAG bygger på. I praksis peger den harmoniserede europæiske standard EN 301 549 på WCAG 2.1 niveau AA for web og apps, og det er det niveau, vi anbefaler som mål. WCAG 2.2 er udgivet og tilføjer nogle få kriterier om fx fokus og trækbevægelser. Bygger I nyt, er det en god idé at tage dem med fra start, fordi det koster næsten ingenting, når det sker i designfasen.

• Opfattelig: tekstalternativer til billeder, undertekster til video, tilstrækkelig kontrast og indhold, der kan forstørres uden at gå i stykker.
• Anvendelig: alt kan betjenes med tastatur, fokus er synligt, der er tid nok til at udfylde formularer, og intet blinker voldsomt.
• Forståelig: tydelige labels, fejlbeskeder, der forklarer hvad der er galt, og en navigation, der opfører sig ens på alle sider.
• Robust: korrekt HTML og ARIA, så skærmlæsere og andre hjælpemidler kan læse knapper, felter og statusbeskeder.
• Information: en tilgængelighedserklæring eller tilsvarende oplysninger i handelsbetingelserne om, hvordan tjenesten lever op til kravene.

WCAG-tjekliste: hvad skal I teste på jeres hjemmeside?

Automatiske værktøjer finder kun en del af fejlene. De ser, om et billede mangler alt-tekst, men ikke om alt-teksten giver mening, og de kan ikke mærke, om et checkout-flow er logisk at gå igennem med tastaturet. Den bedste test kombinerer en automatisk scanning med en halv dags manuelt arbejde. Listen herunder kan I kopiere direkte ind i en mail til jeres leverandør eller bruge selv en eftermiddag.

1. Kan I gennemføre hele købet eller bookingen kun med Tab, Shift+Tab, Enter og mellemrum?
2. Kan I altid se, hvor fokus er, også på mørke baggrunde og i pop-ups?
3. Har alle billeder, der bærer information, en beskrivende alt-tekst, og er pyntebilleder skjult for skærmlæsere?
4. Har alle formularfelter en synlig label, der ikke forsvinder, når man begynder at skrive?
5. Forklarer fejlbeskeder, hvad der er galt, og hvordan det rettes, i tekst og ikke kun med rød farve?
6. Er kontrasten mindst 4,5:1 for almindelig tekst og 3:1 for stor tekst, ikoner og feltkanter?
7. Kan siden forstørres til 200 % og vises på en 320 pixel bred skærm uden vandret scroll eller overlappende tekst?
8. Har knapper og links navne, der giver mening uden for sammenhæng, fx »Læg i kurv« i stedet for »Klik her«?
9. Har videoer undertekster, og kan automatisk afspilning stoppes?
10. Har siden en logisk overskriftsstruktur med én H1 og H2’ere og H3’ere i rigtig rækkefølge?
11. Er sproget på siden angivet korrekt, så skærmlæseren udtaler dansk som dansk?
12. Virker cookiebanner, chatwidget og betalingsvindue med tastatur og skærmlæser?

Det sidste punkt overser mange. Et cookiebanner, der fanger tastaturfokus eller ikke kan lukkes uden mus, blokerer hele siden for nogle brugere. Det samme gælder betalingsvinduer fra tredjepart. Vælg leverandører, der selv dokumenterer tilgængelighed, og test dem i jeres eget flow. Reglerne for selve bannerets indhold gennemgår vi i guiden om regler for cookiebannere.

Hvilke tilgængelighedsfejl skal I rette først?

Har I fået en rapport med 140 fejl, kan det føles uoverskueligt. Prioritér efter to spørgsmål: blokerer fejlen nogen i at gennemføre et køb eller en booking, og hvor mange sider rammer den? En manglende label i checkout er vigtigere end en forkert overskriftsrækkefølge på en blogartikel fra 2019. Mange fejl sidder desuden i fælles komponenter som header, menu, knapper og formularfelter, så én rettelse i et designsystem løser problemet på hundrede sider på én gang.

De fem fejl, vi oftest ser

Når vi gennemgår eksisterende hjemmesider, går de samme fejl igen. Lav kontrast i lysegrå tekst og i knapper med hvid tekst på pastelfarver. Ikoner uden tekst, som fx en kurv eller et forstørrelsesglas, der ikke har et navn for skærmlæseren. Formularer, hvor feltets navn kun står som pladsholdertekst og forsvinder, når man skriver. Dropdown-menuer og datovælgere, der er bygget som specielle komponenter og ikke kan betjenes med tastatur. Og pop-ups, hvor fokus ikke flyttes ind i vinduet, så skærmlæserbrugeren slet ikke opdager, at der er åbnet noget. Alle fem kan løses i design og kode uden at gå på kompromis med udtrykket.

Hvad koster det at gøre en hjemmeside tilgængelig?

Prisen afhænger mest af, hvordan siden er bygget. En moderne løsning med et fælles komponentbibliotek kan ofte rettes på dage, fordi fejlene samles få steder. En ældre WordPress-side med et købt tema, ti plugins og en sidebygger kan være dyr at rette, fordi koden ikke er jeres, og fordi hver opdatering kan genindføre fejlene. Her er det tit billigere at bygge de vigtigste skabeloner om. Intervallerne nedenfor er typiske markedspriser og skal ses som pejlemærker.

Vi mener, at tilgængelighed hører hjemme i designet og koden fra første skitse, og det er langt billigere end at rette bagefter. Se hvad der indgår i vores pakker, eller få tilgængelighed gennemgået som en del af en UX-audit. Står I over for at skulle rette en gammel side, kan en redesign af hjemmesiden være den mest økonomiske vej, fordi I samtidig slipper af med teknisk gæld.

Hvordan bygger man tilgængelighed ind fra starten?

Det vigtigste valg tages i designfasen. Farvepaletten afgør kontrasten, typografien afgør læsbarheden, og interaktionsmønstrene afgør, om noget kan bruges med tastatur. Derfor arbejder vi med et designsystem, hvor hver komponent er afprøvet én gang og genbruges overalt. I koden bruger vi rigtige HTML-elementer, før vi griber til specialbyggede løsninger: en knap er en knap, og et link er et link. Det lyder banalt, men det er kilden til halvdelen af de fejl, vi finder hos andre.

Hvad sker der, hvis man ikke lever op til tilgængelighedsloven?

Sikkerhedsstyrelsen kan føre tilsyn, bede om dokumentation og påbyde, at fejl bliver rettet, og loven indeholder også mulighed for sanktioner. Vi går ikke ind i størrelsen på eventuelle bøder her, fordi det afhænger af sagen og af praksis, som stadig er under udvikling. Det praktiske råd er det samme uanset: vis, at I har styr på det. En dokumenteret test, en prioriteret plan og en ærlig erklæring stiller jer langt bedre end en side, ingen har kigget på.

Der er også en forretningsmæssig side. En tilgængelig side er hurtigere at bruge, har bedre struktur for Google og konverterer typisk bedre på mobilen, fordi tydelige labels, store klikflader og logisk rækkefølge hjælper alle. Mange af kravene overlapper med god SEO-venlig opbygning og med hjemmesidens hastighed. Det er samme håndværk.

Et eksempel: webshop med 25 ansatte

Tag en dansk webshop med 25 ansatte, der sælger havemøbler til private. Den er klart omfattet. En automatisk scanning viser 140 fejl, men de fleste stammer fra seks komponenter: produktkort, filtermenu, antalsvælger, kurv, checkout-formular og cookiebanner. En manuel audit af søg, filtrér, læg i kurv og betal koster typisk 15.000–25.000 kr. Rettelserne i komponenterne tager en til to uger i en moderne kodebase. Redaktionen bruger en dag på alt-tekster til de 50 mest solgte produkter og på at erstatte PDF-plejeguides med almindelige sider. Til sidst skrives erklæringen med to kendte mangler og en dato for, hvornår de er løst. Samlet regning ligger et sted mellem 30.000 og 70.000 kr., og webshoppen er bagefter lettere at bruge for alle kunder.

Skal I alligevel have ny hjemmeside eller ny webshop, så stil krav om WCAG 2.1 AA i kravspecifikationen, og bed leverandøren beskrive, hvordan de tester. Kombinér det med de øvrige regler i guiden om GDPR for hjemmesider og apps. Vil I have et konkret bud på, hvad det koster for jer, så få en fast pris inden for 24 timer.