1. Opfattelig

Brugeren skal tydeligt kunne forstå dit website, også selvom de bruger en hjælpeteknologi. Hvis du har en besøgende på dit site, som gør brug af en skærmlæser, skal vedkommende kunne forstå dit site akkurat som en person uden en skærmlæser.

1

1.1.1 Ikke-tekstbaseret indhold

Indhold som har betydning, men som ikke er tekst, skal have et tekstalternativ til blinde og svagtseende. Dette gælder indhold såsom billeder, animationer, videoer, iframes og lydelementer. En skærmlæser skal kunne adskille disse elementer fra hinanden, ved hjælp af det, der kaldes en “alt-tekst”. Alt-teksten bliver læst op af skærmlæseren, når der fx bliver kørt hen over et billede med skærmlæseren.

Hvordan løser jeg problemet?

Hvis du arbejder i et CMS hvor du har mulighed for selv at indsætte alt-tekster, kan du nemt løse dette ved at udfylde alt-tekst feltet i dit CMS. Hvis du ikke har mulighed for dette, skal din udbyder udvikle en mulighed for webredaktører til at udfylde alt-tekster i CMS’et.

2

1.2.1 Rent lydindhold (audio only) og rent videoindhold (video only) (forudindspillet)

Rent lyd- og videoindhold er en lydoptagelse eller en videooptagelse der står alene. Det vil sige en video uden lyd, eller et lydspor uden video. Det er vigtigt, at brugere med eksempelvis nedsat syn kan tilgå og læse rent videoindhold, på niveau med personer som ikke har nedsat syn. Det samme gør sig gældende for personer med nedsat hørelse og rent lydindhold. Derfor skal der tilbydes et alternativ - f.eks. via tekst.

Hvordan løser jeg problemet?

Du kan løse problemet ved at tilbyde brugeren med nedsat hørelse et tekstalternativ som beskriver, hvad der foregår på lydoptagelsen, f.eks. en transskribering af lydoptagelsen. Det samme vil gøre sig gældende for rent videoindhold.

3

1.2.2. Undertekster (forudindspillet)

Video med lyd skal være undertekstet, medmindre din video er et alternativ til tekst og er tydeligt markeret sådan.

Hvordan løser jeg problemet?

Du kan via YouTube’s platform selv indtaste undertekster til dine videoer, hvis dine videoer ligger på YouTube. Alternativt kan du bede din videoleverandør levere undertekster til dig, som vises i videoafspilleren på dit site.

4

1.2.3 Synstolkning eller mediealternativ (forudindspillet)

Her gælder samme princip som 1.2.2: Alt videoindhold skal synstolkes, medmindre din video er et alternativ til tekst og er tydeligt markeret sådan.

Hvordan løser jeg problemet?

Her kan du tilbyde et ekstra lydspor, som beskriver hvad der foregår på din video for personer, som har intet eller nedsat syn (synstolkning). Dette skal din videoleverandør levere, medmindre du selv har mulighed for at producere lydsporet. Du kan også tilbyde et tekstalternativ til videoen.

5

1.2.4 Undertekster (direkte)

Hvis der vises live video på dit site, skal det være muligt at slå undertekster til.

Hvordan løser jeg problemet?

Der findes forskellige services på nettet som tilbyder undertekstning af live video. YouTube har f.eks. en funktion, som automatisk tekster live videoindhold.

6

1.2.5 Synstolkning (forudindspillet)

Dette krav har stor lighed med punkt 1.2.3 bortset fra, at det ikke er muligt at tilbyde et tekst alternativ. Der skal stilles et lydspor med synstolkning til rådighed, der forklarer hvad der foregår på videoen.

Hvordan løser jeg problemet?

Du skal tilbyde et ekstra lydspor, som beskriver hvad der foregår på din video for personer, som har intet eller nedsat syn (synstolkning). Dette skal din videoleverandør levere, medmindre du selv har mulighed for at producere lydsporet.

7

1.3.1 Information og relationer

Information, struktur, og relationer skal være forståelige og tilgængelige uden design, og kan enten forstås programmeringsmæssigt eller være tilgængeligt via tekst. Dvs. har brugeren fx ikke aktiveret stylesheet eller javascript skal indholdet stadig være forståeligt og tilgængeligt.

Et eksempel på denne regel kunne være, at du har et formularfelt på dit website, hvor nogle af felterne i din formular er obligatoriske. Hvis du har markeret disse felter med rød skrift, vil dette ikke være nok, da den svagtseende person med skærmlæseren ikke kan se den røde farve. Derfor kan du her tilføje en stjerne (*), så personen med skærmlæseren også kan læse, at dette er et obligatorisk felt. 

Et andet eksempel kunne også være, at du har en liste med punkter, som præsenteres i en særlig rækkefølge på dit website. For at skærmlæseren skal kunne læse rækkefølgen korrekt op, skal listen skrives i korrekt HTML.

Hvordan løser jeg problemet?

Du skal teste dit website med et værktøj som f.eks. AXE eller WAVE, som kan lave en tilgængelighedsrapport over, hvilke elementer der teknisk ikke lever op til WCAG på dit site. Rapporten vil vise dig, hvor HTML’en er semantisk ukorrekt på dit site. Du skal give rapporten til din leverandør og forklare, at der er elementer på dit site som ikke er semantisk korrekte på dit site. Du kan også slå dit stylesheet fra med WAVE, og dermed teste om indholdet er forståeligt uden CSS/design.

8

1.3.2 Meningsfuld rækkefølge

Elementer på dit site, som er placeret i en rækkefølge der er nødvendig for forståelsen af indholdet, skal læses op på samme måde af skærmlæseren som uden. Et eksempel kunne her være personer, som bruger et program der læser siden op for dem. Her er det vigtigt, programmeringsmæssigt, at bestemme læserækkefølgen så den giver mening for brugeren.

For at forstå dette kriterie kan man forestille sig en avis, hvor alle kolonnerne, artiklerne og billederne vil blive læst i en særlig rækkefølge af øjet. Denne rækkefølge skal via HTML'en på din hjemmeside fastlægges, så personer uden syn vil få indholdet præsenteret i en naturlig, logisk rækkefølge.

Hvordan løser jeg problemet? 

Dette problem skal løses af din leverandør, som programmeringsmæssigt skal bestemme læserækkefølgen på elementerne, på dit site.

9

1.3.3 Sensoriske egenskaber

For at forstå denne regel skal man forestille sig en blind person, der på en hjemmeside møder teksten “Tryk på den grønne knap til venstre, for at fortsætte”. Tekst og elementer som kræver, at man kan se, høre eller bruge sine hænder er ikke tilgængelige for personer med gældende handicap.

Hvordan løser jeg problemet?

Hvis der er tale om tekst på dit website, kan du som redaktør selv gå ind og redigere i teksten, så den ikke forudsætter at brugeren f.eks. har et velfungerende syn. Hvis der er tale om et andet element såsom en knap, et menupunkt eller noget, du som redaktør ikke har mulighed for at redigere, skal du forklare dette til din leverandør, og bede dem rette fejlen.

10

1.3.4 Retning

Denne regel siger med andre ord, at dit indhold skal være responsivt. Dit website skal kunne forstås og bruges uanset, om det bliver besøgt med en vandret eller lodret skærmretning. Nogle handicappede brugere har en fastlåst skærmretning og kan ikke vende sit device, derfor skal man kunne tilgå websitet uanset skærmretning.

Hvordan løser jeg problemet? 

Hvis dit site ikke kan ses eller tilgås i alle skærmretninger, skal din leverandør sørge for, at dette kan lade sig gøre.

11

1.3.5 Identificering af inputformål

Denne regel vedrører specifikt inputelementer, f.eks. felter i en formular.

Her skal HTML koden skrives så skærmlæseren kan se, at der er tale om et emailfelt, et navnefelt eller et telefonnummer felt etc.

Hvordan løser jeg problemet?

Hvis dit site indeholder inputfelter eller formularfelter, som skærmlæseren ikke kan identificere, skal du kontakte din leverandør og bede dem rette fejlen.

12

1.4.1 Anvendelse af farve

Du må ikke have information på dit site, hvor farve er det eneste der bruges til at formidle elementet. Et eksempel kan være en formular, hvor der står “obligatoriske felter er markeret med rød”. Her er det nødvendigt at gøre brug af mere end bare farven, til at indikere hvilke felter der er obligatoriske. Et andet eksempel er links, hvor det kun er en farve der indikerer at der er tale om et link. Her ville man gøre brug af en understregning eller et ikon som viser, at det er et link.

Hvordan løser jeg problemet?

Du kan ændre teksten på dit website som redaktør, så farven i sig selv ikke er den eneste indikator for den information, du vil formidle. Hvis dette ikke er muligt, skal du kontakte din leverandør og bede dem rette fejlen.

13

1.4.2 Kontrol af lyd

Hvis du på din hjemmeside har lyd, som afspilles automatisk i mere end 3 sekunder, skal brugeren enten kunne afbryde lyden helt eller skrue ned for den ved hjælp af en volumenknap.

Hvordan løser jeg problemet? 

Dette problem er et teknisk problem, som din leverandør skal løse ved enten at implementere en knap til at afbryde lyden helt, eller en volumenknap. Du kan alternativt også indlejre lyden på din hjemmeside med en afspiller fra en ekstern leverandør, som har disse knapper i forvejen (YouTube, Soundcloud mm.).

14

1.4.3 Kontrast (minimum)

Dette punkt omhandler kontrastforholdene på dit website, og gør sig især gældende for mennesker med svagt eller stærkt nedsat syn. Kontrastforholdene skal være mindst 4,5:1, undtagen:

  • Hvis der er brugt stor skrift - her skal kontrastforhold være på mindst 3:1
  • Hvis det er billede eller tekst, som ikke er betydningsbærende. Det vil sige elementer, som udelukkende er dekorative.
  • Hvis der er tale om et logo.

Hvordan løser jeg problemet?

Du kan kontrollere dine kontrastforhold ved at indtaste baggrunds- og forgrundsfarven på WebAIM’s Contrast Checker. Det er et nyttigt værktøj, da det også vil fortælle dig hvilke fontstørrelser, der lever op til WCAG’s retningslinier i forhold til de farver, du indtaster.

Hvis du har farver på din hjemmeside som ikke lever op til kontrastforholdene, skal du kontakte din leverandør, medmindre du selv har mulighed for at ændre farver i dit CMS.

15

1.4.4 Ændring af tekststørrelse

Al tekst på dit website skal kunne forstørres op til 200% i browseren, uden det ødelægger informationen eller konteksten på siden.

Hvordan løser jeg problemet?

De fleste moderne browsere lader brugeren forstørre teksten på internettet, så her er det ikke nødvendigt at tilbyde en zoom funktion, medmindre dine brugere er tvunget til at bruge Internet Explorer 6 eller ned, hvilket er en meget sjælden situation. Dog kan det ske, at browserzoom vil gøre din tekst ulæselig eller ødelægge informationer på dit site, fordi det ikke er responsivt. Her skal du kontakte din leverandør og bede dem gøre dit site responsivt for scenarier, hvor brugeren zoomer op til 200% i browseren.

16

1.4.5 Billeder af tekst

Du må ikke indsætte billeder på dit website, som indeholder tekst. Grunden til dette er, at skærmlæseren ikke kan skelne teksten fra billedet, og svagtseende vil dermed ikke kunne læse teksten via skærmlæseren (medmindre der er tale om dit logo).

Hvordan løser jeg problemet?

Du skal undlade at uploade billeder på dit site, som indeholder tekst. Du kan uploade et billede og indsætte teksten der hører til, ved siden af, eller få din leverandør til at designe et særligt modul til dig, hvor tekst og billede indgår i samspil på den ønskede måde.

17

1.4.10 Ombrydningsvisning

Denne regel omhandler, at du skal undgå scroll i flere dimensioner. Tekst og elementer som f.eks. tabeller skal kunne læses uden at brugerens skal scrolle frem og tilbage i forskellige retninger på alle devices. Dette krav skal overholdes ved zoom op til 400%.

Hvordan løser jeg problemet?

Hvis du eksempelvis har en stor tabel på dit site, hvor du både kan scrolle horisontalt og vertikalt, skal du kontakte din leverandør og bede dem ændre i koden, så dette ikke længere er muligt. Eksempelvis kunne en løsning være scroll udelukkende horisontalt.

18

1.4.11 Kontrast for ikke-tekstbaseret indhold

Elementer på dit site, som ikke er tekstbaserede, skal opfylde kontrastforholdene 3:1 hvis der er tale om visuel information, som er nødvendig for forståelsen af elementet. Et eksempel kunne være en infografik, hvor de ikke-tekstbaserede elementer er væsentlige for forståelsen. Et andet eksempel kunne være en graf, hvor kontrastforholdene gør det svært at læse kurverne eller søjlerne.

Hvordan løser jeg problemet?

Afhængigt af elementets format kan du enten kontakte din leverandør for teknisk at ændre jeres farver på sitet, eller udforme en infografik med nye kontrastforhold.

19

1.4.12 Tekstafstand

Dette punkt sikrer, at personer kan se teksten på din side selvom de har nedsat syn, og dermed ikke kan se små tekststørrelse. Følgende regler gælder:

  • 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

Hvordan løser jeg problemet?

Tjek om teksten på din hjemmeside lever op til ovenstående retningslinier, og hvis ikke skal du bede din leverandør ændre fontstørrelserne på dit site, medmindre du selv har mulighed for det i dit CMS.

20

1.4.13 Indhold ved svævepegning(hover) eller fokus

Dette punkt omhandler elementer på din hjemmeside, hvor du kan holde musen (hover) over et element, hvor der derefter dukker ny information op. F.eks. et link som viser en infoboks når musen holdes over linket. Her er det vigtigt, at brugeren skal kunne fjerne disse elementer igen enten ved tastaturnavigation eller klik. 

Hvordan løser jeg problemet?

Du skal gå til din leverandør og forklare det konkrete problem på din side, og bede dem gøre det muligt at navigere væk fra pop-up indholdet ved hjælp af tastaturet på din side.

2. Anvendelig

Brugeren skal kunne anvende dit website enten vha. tastaturet eller anden hjælpeteknologi.

21

2.1.1 Tastatur

Indholdet på dit website skal kunne tilgås og anvendes vha. tastaturet. Anvendelsen må ikke være afhængig af brugerens timing af tastaturtryk.

Der kan være undtagelser, hvis funktionaliteten på websitet er afhængig af brugerens handlinger. F.eks. hvis brugeren skal tegne en underskrift.

Hvordan løser jeg problemet?

Din leverandør skal sikre, at brugeren kan bruge tastaturet til at tilgå og anvende indholdet på dit website. Dette gøres oftest ved brug af TAB tasten på tastaturet.

22

2.1.2 Ingen tastaturfælder

Brugeren skal let kunne skifte fokus mellem indholdselementer med tastaturet. Hvis der er særlige måder at skifte fokus på, skal brugeren have metoden forklaret.

Hvordan løser jeg problemet?

Test din side ved at navigere igennem den med tastaturet. Du kan typisk gøre dette med TAB knappen på tastaturet. Hvis du opdager ovenstående problem, skal du forklare din leverandør problemet og bede dem rette fejlen.

23

2.1.4 Genvejstaster

Hvis der anvendes genvejstaster på dit website skal mindst én af følgende muligheder virke: Det skal være muligt for slutbrugeren at slå genvejstaster fra, ændre genvejen eller at genvejstaster kun er aktive når indholdselementet er i fokus.

Hvordan løser jeg problemet?

Er der genvejstaster på dit website skal du bede din leverandør sikre, at én af ovenstående muligheder virker.

24

2.2.1 Justerbar tastehastighed

Brugeren skal have tilstrækkelig tid til at læse og anvende indholdet på dit website. Hvis dit website har tidsbegrænset indhold, f.eks. en animation som viser tekst for så at forsvinde igen, skal brugeren have mulighed for at styre indholdet så de kan nå at læse det. Brugeren skal enten kunne slå tidsbegrænsningen fra, tilpasse tidsbegrænsningen eller udvide tidsbegrænsningen.

Der er undtagelser hvis indholdet kører i realtid, tidsbegrænsningen er nødvendig eller tidsbegrænsningen er over 20 timer.

Hvordan løser jeg problemet?

Undersøg om der er indhold på dit website som opdateres eller ændres, uden at brugeren interagerer med det. Hvis du har sådan noget indhold, skal du bede din leverandør gøre det muligt for brugeren at sætte det på pause eller ændre tiden for indholdet.

25

2.2.2 Pause, stop, skjul

Indhold på website som automatisk bevæger sig, blinker, scroller eller lignende skal kunne sættes på pause, skjules eller stoppes. Dette gælder også hvis det varer mere end 5 sekunder, eller hvis det vises samtidigt med andet indhold. For indhold som automatisk opdateres skal det også være muligt for brugeren at styre hvor ofte det bliver opdateret.

Hvordan løser jeg problemet?

Undersøg om dit website har indhold som bevæger sig, blinker, scroller eller automatisk opdateres. Hvis dette er tilfældet skal du bede din leverandør sikre, at brugeren har mulighed for at pause, skjule eller stoppe indholdet.

26

2.3.1 Grænseværdi på tre glimt eller derunder

Indhold på dit website må ikke kunne forårsage epileptiske anfald eller andre fysiske reaktioner. Intet indhold på dit website må glimte mere end tre gange på et sekund.

Hvordan løser jeg problemet?

Gennemse indholdet på dit website for at sikre dig, at der ikke er glimt eller flashes som er over de officielle grænser. Er der glimt i indholdet på dit website som er mere end tre gange på et sekund skal du ændre indholdet. Er det en del af designet skal du bede din leverandør ændre indholdet.

27

2.4.1 Spring over blokke

Gør det lettere for brugeren at navigere direkte til indholdet de skal bruge, ved at implementere muligheder for at springe indhold over som ofte bliver gentaget på flere sider.

Hvordan løser jeg problemet?

For brugere som anvender skærmlæsere skal du bede din leverandør sikre, at de kan springe indhold over som bliver gentaget på alle/mange sider. Dette kan f.eks. være hovedmenuen, reklameblokke, grafikker etc.

Som redaktør kan du selv hjælpe brugeren yderligere, ved at sikre at de let fra toppen af en lang side lettere kan navigere ned til det indhold de søger. F.eks. kan du indsætte anchorlinks i toppen af en lang indholdsside til indholdets sektioner. Du kan også indsætte filtreringsmuligheder, så resultatlister på en side bliver kortere.

28

2.4.2 Sider har titler

Sider på dit website skal have titler som forklarer emne eller formål, så brugeren hurtigt kan vurdere om de kan anvende indholdet.

Hvordan løser jeg problemet?

Du skal sikre hos din leverandør, at siderne på dit website har et <title> tag som du kan udfylde, og at brugeren kan se det.

29

2.4.3 Fokusrækkefølge

Når en bruger navigerer igennem indholdet på et website er der en bestemt rækkefølge som brugeren kan følge. Altså, fokus flytter sig fra ét indholdselement til det næste i en bestemt rækkefølge. Det er vigtigt at denne rækkefølge er opsat sådan, så brugeren kan forstå indholdet og betjene websitet. F.eks. hvis en knap på dit website åbner et popup vindue, skal du sikre at fokus-elementer begrænses til pop-up vinduet indtil det lukkes igen.

Hvordan løser jeg problemet?

Brug TAB knappen til at navigere igennem dit website. Hvis rækkefølgen i indholdet du fokuserer på ikke giver mening for indholdet skal du ændre den. Du kan bede din leverandør ændre rækkefølgen hvis det handler om indhold du som redaktør ikke selv kan ændre. Du skal herudover sikre, at det indhold du kan redigere, bl.a. overskriftniveauer (H1, H2, H3 osv.) følger den korrekte rækkefølge.

30

2.4.4 Formål med links (i kontekst)

Det er vigtigt at alle brugerne forstår hvad der sker når de klikker på et link på dit website. Derfor skal teksten på selve linket, linkets alt-tekst eller teksten ledende op til linket være beskrivende for, hvad der sker når brugeren klikker på linket. 

Et eksempel på en dårlig linktekst kunne være:

<a href="">Klik her</a>

En beskrivende linktekst kunne istedet være:

<a href="">Download Berús årsrapport for 2019 her</a>

Hvordan løser jeg problemet?

Gennemgå dit website for alle steder du har et link (inkl. knapper, image maps og lign.). Du skal sikre dig, at brugeren forstår hvad der sker når de klikker på linket. Hvis ikke det er beskrevet i linksteksten, kan du vha. en alt-tekst i HTML’en tilføje en tekst, som skærmlæseren vil læse op, når der rulles hen over linket. Nogen CMS systemer giver redaktører mulighed for selv at tifløje alt-tekster til links, og hvis dette ikke er en mulighed skal du bede din leverandør tilføje dem. 

31

2.4.5 Flere måder

Der skal være mere end én måde at komme frem til en side på dit website. F.eks. kan du indsætte søgning som kan hjælpe brugeren med at finde en side, og tilbyde en link liste med links til undersider på dit website. Et andet eksempel kunne være, at du har et website med 5 sider, hvor brugeren kan navigere sig frem og tilbage mellem hver side i hovednavigationen, samtidig med at der på forsiden er links til alle undersider.

Undtagelser kan være, hvis sider på websitet er resultatet af en række handlinger eller en proces. F.eks. kan en søgeresultatside kun vises som resultat af, at brugeren har søgt på websitet.

Hvordan løser jeg problemet?

Du skal sikre dig, at der ikke er sider på dit website som kun kan tilgås på én måde. Hvis du har sider som kun kan tilgås på én måde, skal du tilføje flere måder hvor brugeren kan nå frem til siden.

32

2.4.6 Overskrifter og etiketter

Det skal være nemt for brugere at forstå og finde indhold på dit website. Derfor skal overskrifter og etiketter/labels være beskrivende, så brugeren forstår emnet eller formålet med indholdet. 

Hvordan løser jeg problemet?

På de steder på dit website, hvor der er overskrifter og labels skal du sikre dig, at brugeren kan forstå indholdet og formålet ud fra overskriften eller etiketten. Du skal ikke skrive overskrifter hvis det ikke er nødvendigt, og overskrifterne behøver ikke være lange. Som redaktør skal du blot sørge for at skrive så præcist som muligt, så brugeren forstår emne og formål.

33

2.4.7 Synligt fokus

Indhold som brugeren kan navigere til med tastaturet, skal have en synlig fokus-tilstand, så brugeren er klar over hvilket element der er navigeret hen til.

Hvordan løser jeg problemet?

Du skal bede din leverandør sikre, at designet indeholder fokus-tilstande som er synlige for alle elementer brugeren kan navigere hen til med tastaturet.

34

2.5.1 Pegebevægelser (Pointer Gestures)

Denne regel gælder særligt for mennesker, som ikke har mulighed for at bruge en mus, men i stedet bruger andre hjælpeværktøjer. Dette kan f.eks. være en mus med en trackball. Dette segment har oftest ikke mulighed for at lave bevægelser som f.eks. at swipe, zoome med to fingre mm. Derfor er det vigtigt, at du tilbyder alternativer til disse bevægelser på dit website.

Hvordan løser jeg problemet?

Hvis du f.eks. har et kort på din hjemmeside, hvor brugeren har mulighed for at zoome ind med to fingre, er det vigtigt at du også tilbyder zoom med tastaturet (“+” og “-”), så brugere der ikke kan lave denne bevægelse også har mulighed for at betjene dit website.

35

2.5.2 Pege-annullering

Nogle brugere kan have svært ved at navigere rundt via et pegeværktøj, f.eks. pga. rystelser, og kan derfor let komme til at trykke på en knap ved en fejl som udløser en uønsket handling. Derfor skal du tilbyde en "fortryd" knap eller tilbyde, at brugeren kan fortryde handlingen ved at bevæge musen væk fra knappen, inden der klikkes.

Hvordan løser jeg problemet?

Gå dit website igennem og kig særligt efter steder, hvor brugeren kan “dragge”/trække elementer, eller trykke på knapper som bekræfter en handling (købe en vare, sende en ordre, gemme personfølsomme data etc.). Sørg for, at brugeren har mulighed for at annullere handlinger som disse, som beskrevet foroven, ved at bede din leverandør lave en teknisk løsning på dette. En mulighed kunne også være, at brugeren har mulighed for at fortryde eller trække handlingen tilbage.

36

2.5.3 Etiket i navn

Dette punkt omhandler f.eks. knapper eller andre interaktive elementer, som har synlig tekst på hjemmesiden. Dette kunne være knapper med teksten: “søg”, “send”, “accepter”, “annuller” mm. Her er det vigtigt, at teksten i din HTML matcher det ord du ser på hjemmesiden, hvis du har et label i din HTML til det pågældende element. 

Grunden til at HTML'en skal matche etiketteksten er, at f.eks. skærmlæsere læser HTML'en op. Det er vigtigt, at det korrekte ord bliver læst op, så brugeren forstår hvad etiketten/knappen signalerer.

Hvordan løser jeg problemet?

Hvis du har opdaget steder på dit site, hvor teksten på f.eks. en knap ikke matcher med en HTML label, skal du bede din leverandør rette dette, så teksten er den samme.

37

2.5.4 Betjening via bevægelse

Dette punkt omhandler elementer, som kræver en særlig bevægelse for at blive betjent. Disse skal kunne deaktiveres for brugere, som ikke fysisk har mulighed for at udføre disse bevægelser.

Hvordan løser jeg problemet?

Hvis du opdager, at en funktion på dit site kræver en bevægelse såsom at ryste, rotere eller panorere et device er det vigtigt, at du tilbyder et alternativ til denne bevægelse til brugere, der er fysisk begrænsede ifht. denne bevægelse. Bed din leverandør om at udvikle dette alternativ.

3. Forståelig

Dine brugere skal kunne forstå informationerne på dit website, og hvordan de bruger det.

38

3.1.1 Sproget på siden

Der skal programmeringsmæssigt tilføjes en "lang" attribut i <HTML> elementet der omgiver ens website. Dette fortæller browseren, hvilket sprog websitet er skrevet i. Dette er bl.a. vigtigt for, at skærmlæseren kan identificere hvilket sprog den skal læse op for brugere med nedsat eller intet syn.

Hvordan løser jeg problemet?

Hvis der ikke er angivet et sprog på dit website, skal du bede din leverandør inkludere hjemmesidens sprog i sidens HTML. 

39

3.1.2 Sprog, der anvendes til dele af indhold

Hvis der anvendes forskellige sprog på enkelte dele på websitet skal dette informeres til brugeren.

Dette kan gøres ved at indsætte en definering af det sprog der skrives i, direkte i det HTML element indholdet er i.

HTML'en kunne f.eks. se sådan her ud:

<blockquote lang="de">Guten abend Fräulein</blockquote>

Hvordan løser jeg problemet?

Hvis du i dit CMS ikke selv har mulighed for at angive sprog for dele af teksten på din hjemmeside, skal du bede din leverandør om dette.

40

3.2.1 I fokus

Formålet med dette punkt er at sikre, at funktionaliteter er forudsigelige når besøgende navigerer sig ned igennem ens website. Dette gør sig især gældende, når man bruger TAB tasten til at navigere med. Her vil de forskellige links og knapper modtage fokus, imens man tab'er sig ned gennem sitet. Der må ikke ske en ændring af kontekst når der tab'es gennem sitet. Et eksempel på ændring af kontekst når en komponent modtager fokus kunne være, at en formular automatisk bliver submitted når en knap modtager fokus.

Hvordan løser jeg problemet?

Hvis din side har et pop-up vindue eller åbnet en ny side, som ændrer konteksten og forståelsesrammen uden at advare brugeren, skal du enten som redaktør ændre teksten i den nye information, så den stadig er inden for samme kontekstramme, eller teknisk bede din leverandør implementere en advarsel til brugeren med skærmlæser der forklarer, at der kommer et nyt element uden for kontekstrammen. 

41

3.2.2 Ved input

Dette kriterie minder meget om 3.2.1, hvor konteksten ikke må ændres når elementer kommer i fokus. Det samme gælder for 3.2.2, men her er der bare tale om, at konteksten ikke må ændres ved input, altså særligt for formularer hvor der inputtes data.

 

Et eksempel på dette kunne være en kalender på dit website, hvor brugeren kan vælge at oprette et møde, en aftale eller en påmindelse. Hvis brugeren vælger at klikke på “møde”, vises der yderligere felter for indtastning af mødedeltagere. Hvis der klikkes på “påmindelse” vil brugeren blive præsenteret for helt andre muligheder. Da kun dele af formularen ændres og den samlede struktur forbliver den samme, opretholder man den grundlæggende kontekst og struktur for brugeren, så brugeren ikke bliver forvirret.

Hvordan løser jeg problemet?

Hvis du eksempelvis har en formular på dit site, som ved klik på en knap åbner et nyt vindue eller en dialogboks uden at brugeren får en advarsel, skal du kontakte din leverandør og bede dem implementere advarsler om dette. I nogen CMS systemer er det muligt at vælge, at brugeren skal have en advarsel ved åbning af nye vinduer, og her kan du som redaktør selv vælge dette.

42

3.2.3 Konsekvent navigation

Når et navigationselement bliver repeteret på op til flere sider skal det bevare konsistens og have en ensartet rækkefølge ned igennem strukturen. Elementet må altså ikke ændre sig med mindre at brugeren har foretaget en handling der skaber denne ændring.

F.eks. skal ens hovednavigation forblive ens når man som bruger navigerer ned igennem sitets struktur.

Hvordan løser jeg problemet?

Hvis et navigationselement ændrer sig på forskellige undersider, skal du bede din leverandør tilrette strukturen, så den altid er den samme. Det kan være forvirrende for brugerne med skærmlæsere, hvis navigationsstrukturen ændrer sig.

43

3.2.4 Konsekvent identifikation

Det er vigtigt, at du er konsekvent i den måde du formidler information på. F.eks. kan du vælge altid at anvende et dokument ikon, hver gang du har en liste med dokumenter der kan downloades. Et andet eksempel kunne være, altid at skrive alt-teksten på samme måde i download links til dokumenter, ved f.eks. at starte alt-teksten med “Download” hver gang. 

Hvordan løser jeg problemet?

Hvis du opdager steder på dit site, hvor det samme element ikke bliver præsenteret på en konsekvent måde hver gang, er det vigtigt at du laver en strategi for, hvordan disse elementer skal præsenteres og retter fejlen. Der kan også være tale om designændringer, hvor du i de fleste tilfælde ville skulle kontakte din leverandør for at få tilrettet dette.

44

3.3.1 Identifikation af fejl

Hvis brugeren indtaster en fejl i f.eks. en formular på dit site, skal det tydeligt angives for brugeren, at der er tale om en fejl. Det kan være en email der ikke møder op til emailfeltets krav, et telefonnummer hvor der mangler et tal eller lignende. Her skal du oplyse brugeren om, at de har indtastet en fejl.

Hvordan løser jeg problemet?

Tjek dine formularer igennem og andre steder på din side hvor man kan indtaste oplysninger og se, om du får en fejlmeddelelse. Fejlmeddelelsen skal være semantisk korrekt og leve op til WCAG 2.1, f.eks. i form af aria tekst. Kontakt din leverandør for at sikre, at dine fejlmeddelelser lever op til kravene.

45

3.3.2 Etiketter eller instruktioner

Elementer på din side som kræver brugerinput, herunder formularer, skal have etiketter og instruktioner som hjælper brugeren med at udfylde den korrekte information. 

Hvordan løser jeg problemet?

Hvis dit CMS tillader at ændre formularfelter og hjælpetekst, skal du selv sørge for at teksten i dine formularer guider brugeren til en korrekt udfyldning. Alternativt skal du bede din leverandør rette dette.

46

3.3.3 Fejlforslag

Hvis der automatisk registreres en fejl i et udfyldt inputfelt, og der findes fejlforslag, bør disse forslag leveres til brugeren. Dette kunne f.eks. være et inputfelt der kræver at brugeren indtaster en måned (Januar, Februar, etc.). Brugeren indtaster “2” og får derfor en fejlmeddelelse. Denne fejlmeddelelse bør indeholde en beskrivelse af, at det er navnet på den givne måned der skal indtastes istedet for et tal.

Hvordan løser jeg problemet?

Hvis dit CMS tillader at ændre formularfelter og hjælpetekst, skal du selv sørge for at skrive fejlforslag som kommer frem til brugere, der udfylder forkerte informationer. Alternativt skal du bede din leverandør rette dette.

47

3.3.4 Forhindring af fejl (juridisk, økonomisk, data)

Hvis dit website håndterer informationer med juridiske forpligtelser eller økonomiske transaktioner (brugertestsvar, bankkontonummer, CPR nummer etc.), skal man som bruger have mulighed for at kunne trække ens indtastninger tilbage.

Derudover skal brugeren også have mulighed for, at:

  • Tjekke for indtastningsfejl
  • Rette indtastningsfejl
  • Tjekke alle indtastninger, inden al dataen sendes afsted

Ovenstående er vigtigt for personfølsomme, økonomiske eller andre juridiske data, så man sikrer, at brugeren ikke sender forkert information afsted.

Hvordan løser jeg problemet?

Gennemgå alle de steder på dit site, hvor brugeren kan indtaste personfølsomme data eller købe varer, og sørg for at ovenstående gør sig gældende. Hvis ikke, skal du gå til din leverandør og bede dem tilrette siden og dens formularer på ovenstående måde.

4. Robust

Alle elementer på dit website skal være tilgængelige med hjælpeteknologi, og skal opdateres i takt med teknologierne.

48

4.1.1 Parsing

Når HTML “parser” vil det sige, at det er semantisk korrekt. Det er skrevet korrekt og kan køres igennem en HTML validator uden at give fejl.

Hvordan løser jeg problemet?

Kør koden på dit website gennem en HTML validator og find i samarbejde med din leverandør ud af, hvad i kan gøre for at koden validerer bedre, så du står med et mere robust og tilgængeligt website. Ideelt set skal du have 0 fejl i HTML validatoren.

49

4.1.2 Navn, rolle, værdi

Navn, rolle og værdi er f.eks. ARIA labels, tags og landmarks. Dette er tegn i HTML koden, som hjælper skærmlæseren med at forstå de forskellige elementer på dit website.

Hvordan løser jeg problemet?

Lav en teknisk tilgængelighedstest med et værktøj som f.eks. AXE eller WAVE, der kan give dig en rapport over navne, roller og værdier som ikke er defineret i din HTML kode (f.eks. i form af ARIA labels). Bed herefter din leverandør om at tilføje de navne, roller og værdier der mangler i din HTML kode.

50

4.1.3 Statusbeskeder

Statusbeskeder kan f.eks. være, når brugeren på et website tilføjer tre varer til en indkøbskurv, og kurven derefter vil få tilføjet et tretal i en rød cirkel ved siden af kurven. Det kunne også være et ikon der indikerer, at brugeren har gemt sine ændringer.

Statusbeskeder kan bestemmes i HTML'en gennem f.eks. “role” attributten. Det er vigtigt, at statusbeskederne er skrevet med korrekt HTML, da personer med skærmlæsere ikke vil få læst beskederne korrekt op, hvis HTML'en ikke er korrekt.

Hvordan løser jeg problemet?

Klik dig igennem dit website og undersøg, om der er steder hvor du ville finde det naturligt som bruger at få en besked eller notifikation omkring en ændring på dit site. Hvis du opdager steder som disse, noter dem, og udarbejd i samarbejde med din leverandør og/eller designer notifikationer og statusbeskeder, der fremadrettet skal optræde på dit site.