Hjælp til WCAG loven

Brugeren af din hjemmeside skal tydeligt kunne forstå dit indhold uafhængigt af, om der anvendes en hjælpeteknologi. En person, der anvender en skærmlæser, skal kunne forstå hjemmesiden på præcis samme måde som en person, der ikke anvender en skærmlæser. 

1.1 Indhold, der ikke baseret på tekst

WCAG 2.2 dikterer, at indhold, der ikke er tekstbaseret, skal have en alternativtekst således at blinde og svagtseende kan forstå indholdet. Dette omfatter eksempelvis billeder, videoer og lydfiler. Alternativteksten laves med henblik på, at en skærmlæser er i stand til at beskrive indholdet. Denne oprettes ved funktionerne ”alttekst” eller ”title” attribut.

Sådan løses problemet:
Såfremt, du arbejder i et CMS kan du selv oprette alt-tekster eller titles. Alternativt skal din udbyder hjælpe dig med at udvikle en løsning hvor du, som webredaktør, selv kan udfylde alternativtekst i CMS’et. 

1.2 Video med lyd (indspillet på forhånd)

Videoer med lyd kræver undertekster, medmindre videoen er et alternativ til tekst og tydeligt markeret som et alternativ.

Sådan løses problemet:
En eventuel videoleverandør kan levere dine undertekster. Alternativt kan undertekster laves via YouTube's platform, såfremt at videoerne ligger på Youtube. 

1.3 Rent lyd- og videoindhold (indspillet på forhånd)

Rent lydindhold er lydfiler uden video og rent videoindhold er videoer uden lyd.

I henhold til videoindholdet uden lyd er det vigtigt, at blinde og synshæmmede kan opfatte indholdet på samme måde som personer, der ikke er synshæmmede. Ligeledes skal personer med nedsat hørelse kunne forstå lydindholdet på lige fod med personer uden nedsat hørelse.

Sådan løses problemet:
I henhold til videoindhold løses problemet ved at lave undertekster eller en .srt fil, der kan læses op af en skærmlæser. For lydindhold løses problemet ved at tilføje en alternativ tekst, som beskriver indholdet i lydoptagelsen, eksempelvis ved hjælp af en transskription.

1.4 Live video

Der skal tilbydes en mulighed for at slå undertekster til en live video, der vises på din hjemmeside. 

Sådan løses problemet:
Undertekstning findes ved at anvende servicer, som tilbyder undertekster til live videoer. Eksempelvis besidder YouTube en funktion, der automatisk sætter undertekster på live videoer.

1.5 Synstolkning eller tekstalternativ (indspillet på forhånd)

Hvis videoen er et alternativ til tekst, skal det tydeligt markeres. Alt andet videoindhold skal synstolkes. 

Sådan løses problemet:
Du kan tilbyde et tekstalternativ til videoen, men du kan også tilføje et lydspor som beskriver, hvad der foregår i videoen. En leverandør skal levere lydsporet, hvis ikke du selv har mulighed for at producere det.

1.6 Synstolkning (indspillet på forhånd)

Her er det ikke muligt at lave et tekstalternativ. Derfor skal der laves et lydspor, der beskriver hvad der foregår på videoen.

Sådan løses problemet:
Lydsporet skal din videoleverandør levere, såfremt, du ikke selv har mulighed for at producere lydsporet.

1.7 Struktureret indhold

Hvis dit indhold er struktureret på en bestemt måde og i en bestemt rækkefølge, er det vigtigt, at en skærmlæser er i stand til at læse indholdet op i den korrekte rækkefølge. Det skal således programmeres, så rækkefølgen giver mening for brugeren, når der læses op fra skærmlæseren.

Sådan løses problemet:
Via HTML’en på din hjemmeside kan rækkefølgen fastlægges. Dette skal løses med hjælp fra en leverandør.

1.8 Information 

Information, strukturer samt relationer skal enten kunne forstås gennem selve programmeringen eller være webtilgængelige via tekst. Indholdet skal altså være forståeligt og webtilgængeligt, selvom brugeren ikke har aktiveret stylesheeet eller javascript.

Den redaktørmæssige del af dette krav omhandler "headline order", hvilket betyder, at der skal være en korrekt overskriftsrækkefølge, når der laves indhold på din hjemmeside.

Sådan løses problemet:
Problemet løses ved, at du kan slå dit stylesheet fra med WAVE og teste om indholdet er forståeligt uden CSS/design. Med samme værktøj kan du teste, om overskrifterne er udarbejdet i den korrekte rækkefølge.

1.9 Inputfelter

Her er der er tale om inputfelter i form af eksempelvis et e-mailfelt, felt til telefonnummer eller lignende. HTML koden skal skrives, så skærmlæseren er i stand til at identificere, at der er tale om et inputfelt.

Sådan løses problemet:
Hvis skærmlæseren ikke kan identificere inputfelter, skal du kontakte din leverandør, som kan hjælpe dig med at rette fejlen.

1.10 Sensoriske egenskaber

Der skal tages højde for, at blinde og synshæmmede personer ikke forstår udsagnet ”Tryk på den røde knap ovenfor”. Denne tekst kræver, at man kan se og bruge sine hænder, og derfor er denne ikke webtilgængelig for alle. 

Sådan løses problemet:
For at sikre webtilgængeligheden, kan du, som redaktør, selv redigere teksten på din hjemmeside. Såfremt der er tale om en knap eller lignende, skal en leverandør hjælpe med at ændre fejlen.

1.11 Skærmretning

Indholdet på din hjemmeside skal kunne læses og forstås, uanset om brugeren besøger hjemmesiden med en vandret eller lodret skærmretning.

Sådan løses problemet:
Din leverandør skal sørge for at din hjemmeside kan tilgås i alle skærmretninger.

1.12 Farver på din hjemmeside

WCAG 2.2 dikterer, at du skal undlade at have information på din hjemmeside, hvor en bestemt farve anvendes til at formidle noget. Eksempelvis må du ikke have en formular, hvor der angives, hvilke felter, der er markeret med grøn for at indikere, hvilke felter der er tale om.

Sådan løses problemet:
Du kan selv ændre teksten, så farven ikke er den eneste information. Såfremt du ikke selv har mulighed for at ændre det, kan du kontakte din leverandør.

1.13 Kontrastforhold

Kravet om kontrastforholdende på din hjemmeside skal være mindst 4,5:1. Dette gør sig gældende for mennesker med et nedsat syn. Kravet gør sig dog ikke gældende på følgende:

• Såfremt der anvendes stor skrift, skal kontrastforholdet være på mindst 3:1.
• Billeder eller tekster, der ikke har betydning og udelukkende er dekorative, omfatter ikke kravet.
• Hvis der er tale om et logo på din hjemmeside.

Sådan løses problemet:
Hvis dine farver ikke lever op til kravene om kontrastforholdende, skal du kontakte din leverandør eller ændre farverne selv, hvis du arbejder med et CMS. Kontrastforholdende kan reguleres ved at skifte baggrunds-og forgrundsfarve på følgende værktøj: WebAim's Contrast Checker. Dette værktøj fortæller samtidigt hvilken fontstørrelse, der lever op til kravene om webtilgængelighed i henhold til de forskellige farver.

1.14 Kontrollér lyden på din hjemmeside

Det skal være muligt for brugeren at afbryde eller skrue ned for en lydfil, som afspilles automatisk på din hjemmeside.

Sådan løses problemet:
Mangler du ovenstående muligheder, skal en leverandør hjælpe med at implementere en stop-eller volumenknap. Alternativt, kan du implementere din lydfil med hjælp fra en ekstern leverandør, såsom YouTube eller Soundcloud.

1.15 Tekststørrelse

WCAG 2.2 kræver, at det skal være muligt at forstørre teksten på din hjemmeside med op til 200% i browseren uden, at det ødelægger meningen med indholdet på siden.

Sådan løses problemet:
Moderne browsere lader typisk brugeren forstørre teksten på internettet, og dermed er det ikke nødvendigt at tilbyde en zoom funktion. Såfremt at zoomet i browseren gør teksten ikke-læsbar eller utydelig, skal du kontakte din leverandør og få hjælp til at gøre din hjemmeside responsiv, når brugeren zoomer op til 200%.

1.16 Billeder, der indeholder tekst

Billeder, der indeholder tekst, må ikke indsættes på din hjemmeside. Såfremt dette sker, er skærmlæseren ikke i stand til at skelne teksten fra billedet, og blinde/svagtseende vil således ikke være i stand til at forstå teksten. 

Sådan løses problemet:
Du kan i stedet uploade et billede og indsætte teksten ved siden af. Alternativt kan din leverandør hjælpe dig med at designe et modul til dig, hvor tekst og billede spiller sammen på den måde, du ønsker.

1.17 Ombrydningsvisning

Brugeren skal have mulighed for at læse tekst og elementer såsom tabeller uden, at der skal scrolles i forskellige retninger. Kravet skal overholdes når der zoomes op til 400%. Eksempelvis skal en løsning udelukkende kunne scrolles vertikalt.

Sådan løses problemet: Hvis ovenstående ikke er muligt, skal du kontakte din leverandør og bede dem ændre fejlen.

1.18 Kontrastforhold for indhold, der ikke indeholder tekst

Indhold, der ikke er baseret på tekst, det vil sige visuel information, skal opfylde kontrastforholdende 3:1. Et eksempel kunne være et diagram, hvor kontrastforholdende gør det svært at aflæse kurverne eller søjlerne i diagrammet.

Sådan løses problemet:
Du kan kontakte din leverandør for at få hjælp til skift af farver eller udformning af infografik.

1.19 Afstand i tekst

I WCAG 2.2 gælder der følgende regler for webtilgængelig tekstafstand:

• Linjeafstand skal være mindst 1,5 gange skriftstørrelsen
• Afstanden mellem afsnit skal være mindst 2 gange skriftstørrelsen
• Bogstavafstand skal være mindst 0,12 gange skriftstørrelsen
• Afstanden mellem ord skal være mindst 0,16 gange skriftstørrelsen

Det er vigtigt, at teksten på din hjemmeside lever op til disse krav, således, at personer med nedsat syn kan se teksten.

Sådan løses problemet:
Hvis ikke teksten lever op til kravene, bør du kontakte din leverandør og få hjælp til at ændre fontstørrelserne på din hjemmeside, såfremt du ikke selv har mulighed for at ændre det i et CMS.

1.20 Svævepegning

Svævepegning (hover) handler om indhold, hvor der dukker ny information op, når du kører musen hen over. På din hjemmeside kan du eksempelvis have en boks, hvor yderligere information dukker op, når du kører musen over et link. Brugeren skal være i stand til at fjerne elementerne igen ved navigation med tastaturet eller et klik. 

Sådan løses problemet:
Du bør gå til din leverandør og få hjælp til at gøre det muligt at navigere væk fra pop-up indholdet på din hjemmeside ved hjælp af tastaturet.

2. Anvendelig

2.1 Tilgængelighed via tastatur

WCAG 2.2 dikterer, at indholdet på din hjemmeside skal kunne tilgås og anvendes ved hjælp af tastaturet. Når brugeren anvender tastaturet, bør anvendelsen ikke afhænge af timingen af tastaturtryk. Undtagelsesvist, kan funktionaliteten være afhængig af brugerens handlinger, eksempelvis, når der skal tegnes en underskrift.

Sådan løses problemet:
Din leverandør bør sørge for, at brugeren kan anvende et tastatur og dermed tilgå indhold på hjemmesiden. 

2.2 Genvejstaster

WCAG 2.2 kræver, at såfremt, der anvendes genvejstaster på din hjemmeside, skal det være muligt for slutbrugeren at:

1. slå genvejstaster fra

2. ændre genvejen eller at genvejstasterne kun er aktive, når indholdselementet er i fokus.

Mindst én af ovenstående skal virke.

Sådan løses problemet:
Din leverandør kan hjælpe med at sikre, at en af de to muligheder virker.

2.3 Undgå tastaturfælder

Du bør undgå, at brugeren risikerer at havne i en tastaturfælde. Det vil sige, at brugeren let skal kunne komme ud af, eksempelvis, et søgefelt ved brug af tastaturet uden at sidde fast. Brugeren skal således kunne skifte fokus mellem indholdselementer via tastaturet. Såfremt, der er særlige måder at skifte fokus på, skal det forklares for brugeren.

Sådan løses problemet: Hvis du ikke kan navigere på din hjemmeside med tastaturet, kan du teste din side med TAB knappen på tastaturet og kontakte din leverandør og bede dem rette fejlen.

2.4 Mulighed for justering af tastehastighed

Hvis din hjemmeside indeholder tidsbegrænset indhold, såsom et login, der udløber efter et vis tidsrum, skal brugeren have mulighed for at selv at styre indholdet, så vedkommende kan nå at læse det. Brugeren skal derfor kunne tilpasse, udvide eller slå tidsbegrænsningen helt fra. Dette er en undtagelse, hvis tidsbegrænsningen anses som en nødvendighed, hvis tidsbegrænsningen er over 20 timer eller hvis indholdet kører i realtid.

Sådan løses problemet:
Hvis du opdager, at der er indhold på din hjemmeside, der opdateres eller ændres, uden at brugeren interagerer med det, bør du henvende dig til din leverandør og bede dem gøre det muligt for brugeren at ændre tiden for indholdet eller sætte det på pause. 

2.5 Mulighed for at springe indhold over

Du bør gøre det muligt for brugeren at navigere direkte til det indhold, vedkommende ønsker at tilgå. Dette gøres ved at implementere muligheder for at springe indhold over, der gentages på flere sider. 

Sådan løses problemet:
Som webredaktør kan du hjælpe brugeren ved at indsætte anchorlinks i toppen af en indholdsside til indholdets sektioner, eller du kan indsætte filtreringsmuligheder, så resultatlister på en side bliver kortere. På denne måde kan du hjælpe med at sikre, at brugerne let kan navigere i indholdet.

For de brugere, som anvender en skærmlæser, skal det ligeledes være muligt at springe indhold over, der bliver gentaget på mange sider. Det kan, eksempelvis, være reklameblokke, grafikker mm. Din leverandør bør her hjælpe dig. Dette gøres typisk ved et ”skip-link”, som er et link, der ofte befinder sig før hovednavigationen i HTML’en og herigennem kan brugeren via tastaturet springe hovednavigationen over.

2.6 Mulighed for pause, stop eller skjul

WCAG 2.2 kræver, at indhold, der bevæger sig på din hjemmeside, såsom blinker eller scroller, bør kunne sættes på pause eller stoppes helt uanset om, det varer mere end 5 sekunder eller vises samtidigt med andet indhold. Dette gælder også for indhold, der automatisk opdateres, såsom en billedslider, der automatisk skifter mellem billeder.

Sådan løses problemet:
Du bør undersøge, om dit indhold bevæger sig. Såfremt, der er bevægelse i indholdet, skal din leverandør sørge for, at brugeren af din hjemmeside, har mulighed for at pause, stoppe eller skjule indholdet.

2.7 Titel på en side

Det er vigtigt, at siderne på din hjemmeside har en titel, der beskriver formålet med siden, således, at brugeren hurtigt kan danne sig et overblik over sidens indhold.

Sådan løses problemet:
Din leverandør skal hjælpe dig med at sikre, at din hjemmeside har en ”title”, som du kan udfylde, så brugeren kan se det.

2.8 Rækkefølge i indhold

For at opnå webtilgængelighed dikterer WCAG 2.2, at indholdet på din hjemmeside har en rækkefølge, der er opsat på en måde, så brugeren kan forstå indholdet og betjene hjemmesiden. Fokusset bør således flytte sig fra et element i indholdet til et andet, i en bestemt rækkefølge.

Sådan løses problemet:
TAB knappen kan benyttes til at navigere på hjemmesiden. Såfremt, rækkefølgen i indholdet ikke giver mening, skal rækkefølgen ændres. Hvis du, som redaktør, ikke selv kan ændre den, bør du kontakte din leverandør og bede om hjælp.

2.9 Anvendelsen af links

Når der linkes til noget på din hjemmeside, skal der være en linktekst, der beskriver hvad der sker, når brugeren klikker på linket. Dermed kan brugeren nemmere forstå, hvad det respektive link handler om. Der skal ikke blot stå ”Klik her”, men i stedet ”Klik her for at downloade Bleaus årsrapport”.

Sådan løses problemet:
Du bør gennemgå din hjemmeside for de steder, hvor du har et link. Hvis linket ikke er beskrevet med nogen linktekst, kan du ved hjælp af en "title attribut" i HTML’en tilføje en tekst. Denne vil skærmlæseren være i stand til at læse op, når der scrolles hen over linket. Såfremt, du ikke har et CMS, der giver dig mulighed for selv at tilføje titles til links, skal din leverandør hjælpe dig med at tilføje dem.

2.10 Flere adgange til en side

Brugeren bør være i stand til at komme frem til en side på din hjemmeside på flere måder. Dette kan, eksempelvis, gøres ved at indsætte et søgefelt, så brugeren selv kan søge efter en bestemt side eller, at brugeren kan navigere frem og tilbage mellem sider i hovednavigationen. Undtagelsesvist, fremkommer nogle sider kun som følge af en aktiv handling. Eksempelvis, vises en søgeresultatside kun som resultat af, at brugeren har søgt på hjemmesiden.

Sådan løses problemet:
Det er vigtigt, at sider på din hjemmeside kan tilgås på mere end én måde. Hvis din hjemmeside indeholder sider, der kun kan tilgås på én måde, bør du sikre dig, at disse sider kan tilgås på flere måder. 

2.11 Overskrifter

Overskrifter skal anvendes, så brugeren let kan danne sig et overblik over indholdet. Derudover skal overskrifterne beskrive formålet med indholdet, så brugeren let kan forstå det.

Sådan løses problemet:
Du skal sikre dig, at overskrifterne på din hjemmeside beskriver formålet med indholdet. Du bør ikke skrive overskrifter, hvis det ikke anses for at være nødvendigt. Overskrifterne skal fremgå så præcist som muligt og skal ikke være for lange.

2.12 Fokustilstand

WCAG 2.2 dikterer, at indhold på din hjemmeside skal have en synlig fokustilstand, når brugeren navigerer sig frem til indholdet med tastaturet. Dermed ved brugeren, hvad der navigeres hen til.

Sådan løses problemet: Din leverandør bør hjælpe dig med at sikre, at designet på din hjemmeside indeholder fokustilstande, som er synlige for alle elementer, som brugeren kan navigere til via tastaturet. 

2.13 Pegebevægelser

Nogle mennesker anvender alternativer til en mus, såsom en mus med en trackball. Disse personer har ikke mulighed for, eksempelvis, at zoome, swipe mm. Du skal dermed tilbyde nogle alternativer hertil på din hjemmeside.

Sådan løses problemet:
Det er vigtigt, at du også tilbyder en funktion, hvor der kan zoomes gennem tastaturet (”+” og ”-”). På denne måde kan brugere, der ikke kan zoome med to fingere, også betjene din hjemmeside.

2.14 Når der klikkes på noget forkert

Brugere kan let komme til at trykke på noget ved en fejl, fordi de har svært ved at navigere med pegeværktøjet, eksempelvis, fordi de ryster. Det er derfor vigtigt, at der tilbydes en ”fortryd” knap til brugeren. Alternativt kan brugeren fortryde sin handling ved at bevæge musen væk fra knappen, inden vedkommende klikker på den.

Sådan løses problemet:
Sørg for, at brugeren har mulighed for at annullere handlinger, såsom køb af varer, send ordre mv. Bed din leverandør om at lave en teknisk løsning, der giver mulighed for at trække handlingen tilbage og fortryde.

2.15 Tekst på en etiket

WCAG 2.2 fremhæver vigtigheden af, at din HTML matcher det ord, du ser på hjemmesiden, hvis du har en label i din HTML til det pågældende element. Eksempelvis skal knapper, hvor der står ”søg”, ”accepter”, ”godkend” mv. matche teksten i din HTML. Dette er vigtigt, fordi, eksempelvis, skærmlæseren skal være i stand til at læse HTML’en op og dermed indikere, hvad knappen signalerer.

Sådan løses problemet:
Hvis du opdager sider, hvor teksten på en knap ikke stemmer overens med din HTML label, skal du bede din leverandør om at rette dette.

2.16 Betjening med særlig bevægelse

Elementer, der kræver en bestemt bevægelse for at blive betjent, skal kunne deaktiveres for brugere, der ikke har mulighed for at udføre disse.

Sådan løses problemet:
Hvis din hjemmeside indeholder nogle funktioner, der kræver, at brugeren ryster eller roterer sin device, bør du tilbyde et alternativ til den bevægelse. Dermed kan brugere, der ikke er i stand til at ryste eller rotere sin device også betjene din hjemmeside. Din leverandør kan hjælpe dig med at udvikle et alternativ hertil.

3. Forståelig