1. Opfattelig
Dit website skal være forståelig for besøgende, som bruger hjælpeteknologier som f.eks. en skærmlæser. Med hjælpeteknologier skal, besøgende kunne forstå dit website på samme måde og med samme opfattelse som brugere uden skærmlæsere.
1.1.1 Ikke-tekstbaseret indhold
Har du indhold på dit website, som IKKE er tekst, og som har en betydning for forståelsen af budskabet, skal der være et tekstalternativ til svagtseende og blinde. Dette er relateret til indhold som billeder, videoer, animationer, lydelementer og iframes. Hjælpeteknologier, som skærmlæsere skal kunne kende forskel på disse elementer ved at læse beskrivelser, når en skærmlæser kører hen over elementet. Dette kan afhjælpes med det, der kaldes ”alt-tekster”.
Hvordan løser jeg opgaven?
Hvis dit website er på en platform, hvor du selv har mulighed for at redigere alt-tekster, kan du nemt gå i gang med at beskrive elementerne. Hvis din platform ikke giver dig denne mulighed, må du lige aftale med din leverandør, hvordan i bedst sikrer, at dette kan udbedres.
1.2.1 Rent lyd-indhold (audio only) og rent videoindhold (video only) (forudindspillet)
Har du video, hvor der ikke er lyd på, eller lydfiler uden video skal der tænkes i alternativer. En bruger, der har nedsat syn, skal kunne tilgå videobudskabet på samme niveau som brugere med normalt syn. Det samme gør sig også gældende for brugere med nedsat hørelse, at de skal kunne forstå budskabet i lydfilerne på samme måde som brugere med normal hørelse.
Hvordan løser jeg opgaven?
En løsning kan f.eks. være en tekstalternativ, som beskriver budskabet for både lyd og video, så hjælpeteknologier kan understøtte brugeren i besøget på websitet.
1.2.2. Undertekster (forudindspillet)
Har du video eller videopræsentationer med et vigtigt budskab, skal det være undertekstet. Det er dog ikke relevant, hvis videoen er et alternativ til en tekst, og at det også fremgår således.
Hvordan løser jeg opgaven?
Hvis dine videoer ligger på YouTube, har du mulighed for at undertekste dine videoer på platformen. Laver du selv dine videoer, eller har du en leverandør som vConnect s til det kan du bede om at få undertekster leveret sammen med dine videoer, som vises, når videoen bliver afspillet.
1.2.3 Synstolkning eller mediealternativ (forudindspillet)
Meget lig punkt 1.2.2 skal videobudskaber synstolkes på nær, hvis videoen er et alternativ til en tekst, du har skrevet, og at det fremgår, at videoen blot er et alternativ til en tekst.
Hvordan løser jeg opgaven?
Opgaven kan løses ved at producere en lydfil, der fortæller handlingen eller budskabet i videoen. Du kan bede din videoleverandør at levere det sammen med videoen eller selv indtale det. En mulighed er også at skrive en beskrivende tekst, der forklarer budskabet i videoen, som skærmlæsere kan læse op.
1.2.4 Undertekster (direkte)
Hvis du har planer om at live-streame video på dit website, skal det være muligt for dine brugere at aktivere undertekster.
Hvordan løser jeg opgaven?
Der er en rivende udvikling i gang med software, der kan levere undertekster på live video ved at bruge talegenkendelse. For nuværende kan det være svært at finde en dansk udgave, der kan udføre opgaven. På YouTubes platform er det mulig at få live undertekster på engelsksproget video.
1.2.5 Synstolkning (forudindspillet)
Dette kriterie minder om punkt 1.2.3, men her drejer det sig om, hvis ikke det er muligt at tilbyde brugeren et tekstalternativ. Brugeren skal have adgang til en synstolkning gennem en lydfil, der informerer om, hvad der sker på videoen.
Hvordan løser jeg opgaven?
Her kan det være en god løsning at lave en lydfil, hvor du fortæller, hvad der sker i videoen så blinde, eller brugere med nedsat syn forstår udtryk, adfærd eller visuelle budskaber i videoen på samme niveau som normalt seende. Du kan bede din videoleverandør levere lydfilen sammen med videoen eller indtale det selv via software på din pc.
1.3.1 Information og relationer
Den struktur, dit website er bygget op omkring og den information, der er på siden, og relationerne mellem dem skal være tilgængelig og forståelig uden design. Det betyder, at dit website programmeringsmæssigt eller via tekst er tilgængeligt, uden at der er designregler som f.eks. stylesheets eller koder som JavaScript, der bestemmer en visuel relation.
Forestil dig, på dit website, at du har nogle felter i en formular, som er obligatoriske. Hvis disse blot er markeret med en farve eller et ikon, vil dette være en udfordring, for svagtseende med skærmlæsere. Hvis de obligatoriske felter er markeret med tekst eller universelle tegn, kan hjælpeteknologier også forstå informationen.
Strukturen i lister, som ofte bliver opstillet med punkter, skal ligeledes være defineret korrekt i kodesproget som f.eks. HTML, for at skærmlæsere kan forstå opsætningen. Her er det ikke nok, at listerne rent grafisk og designmæssigt er stillet flot op.
Hvordan løser jeg opgaven?
Der findes værktøjer, som kan hjælpe dig med at fremhæve elementer, der har en udfordring i forhold til WCAG 2.1 standarden. Værktøjer, som AXE eller WAVE er nogle af de mest brugte og ved at bruge WAVE Evaluation Tool, som en udvidelse i din Chrome browser, kan du f.eks. deaktivere stylesheets, så du kan se, hvordan strukturen fungerer uden designregler.
1.3.2 Meningsfuld rækkefølge
Hvis du har elementer på dit website, som er placeret i en rækkefølge, der er vigtig for forståelsen af budskabet, skal det kunne læses, om af en skærmlæser og forstås på samme måde som uden hjælpeteknologier. Det vil sige, at hjælpeteknologier, der bliver brugt af brugeren, kan levere budskabet til brugeren, så det giver mening i forhold til hensigten.
Et eksempel kan være et excel-ark opdelt i tabeller og kolonner. Normalt seende vil gennem øjet kunne tyde rækkefølgen, data skal læses i. Her skal koden på websitet fortælle f.eks. skærmlæsere, hvordan data skal præsenteres for en bruger.
Hvordan løser jeg problemet?
Den platform, du bruger til dit website, skal programmeringsmæssigt kunne præsentere elementernes rækkefølge, enten som standard eller pr. definition af dig. Du kan eventuelt vende dette med din leverandør, hvis du er i tvivl.
1.3.3 Sensoriske egenskaber
Hvis du på dit website har et budskab, der siger, «Klik på den orange knap øverst til højre for at logge ind” så taler du til brugere, der kan bruge deres øjne, og hænder. Budskabet og indholdet skal være tilgængeligt for skærmlæsere og hjælpeteknologier generelt til at levere budskabet til funktionshæmmede brugere.
Hvordan løser jeg problemet?
Som webredaktør eller webmaster kan du redigere tekst og indhold, så det giver mening for f.eks. skærmlæsere. Hvis din platform ikke understøtter en funktion, du selv kan redigere med, bør du tage en snak med din leverandør og høre, hvordan i bedst tackler det.
1.3.4 Retning
Dit website skal kunne tilpasse sig forskellige skærmstørrelser og skærmretninger. Det betyder at dit website bør være responsiv således at websitet tilpasser sig den enhed der bliver brugt til at besøge siden. Nogle funktionshæmmede brugere har fastlåste skærmretninger og kan derfor ikke altid selv rotere deres enhed så det tilpasser sig websitet.
Hvordan løser jeg opgaven?
Den platform, og design, dit website benytter på bør have muligheden for at skalere siden og elementer alt efter skærmstørrelse og retning. Er dette ikke muligt kan du eventuelt tale med din platform leverandør hvordan dette kan løses.
1.3.5 Identificering af inputformål
På dit website har du sandsynligvis inputfelter, hvor brugeren skal indtaste specifikke data som email, navn eller telefonnummer.
HTML-koden på websitet er derfor noget til at definere, hvad hensigten med felterne er. Det betyder, at f.eks. email-feltet bør være defineret som et email inputfelt, så f.eks. skærmlæsere forstår hensigten med det, der forventes at blive udfyldt.
Hvordan løser jeg opgaven?
Hvis du på dit website har input felter, der ikke er beskrevet og defineret, så skal du redigere beskrivelsen på felterne i dit website administration. Har du ikke selv mulighed for det, kan du bede din leverandør eller programmør at definere det i koden eller tilføje en metode, der gør, at du selv har mulighed for det.
1.4.1 Anvendelse af farve
Det er ikke hensigtsmæssigt at have information eller budskaber, der kun er kommunikeret med farver. Hvis du har felter i formularer, hvor der står ”Obligatorisk i grønne felter”, er du nødt til på en anden måde at indikere, at felterne er obligatoriske.
Du har måske også links på dit website, der er defineret, ved, at de har en blå eller en anden farve, som er gennemgående på dit website. Her vil du ligeledes være nødt til at definere det, er et link på en anden måde en blot en farve som, f.eks. med en understregning.
Hvordan løser jeg problemet?
Du bør arbejde med teksterne mere end med farverne på dit website, så de er tilgængelige for hjælpeteknologier. Hvis din platform ikke giver det mulighed for dette, må du tage en snak med din platform leverandør eller programmør.
1.4.2 Kontrol af lyd
Har du lydfiler på dit website, der automatisk går i gang og afvikles i mere end 3 sekunder så skal der være mulighed for, at brugeren kan afbryde pause eller skrue ned for volumen.
Hvordan løser jeg opgaven?
Hvis du gerne vil have muligheden for, at lydfilerne afspilles direkte på dit website, skal der rent teknisk være mulighed for at afbryde pause eller skrue ned på websitet. Dette er noget en programmør, eller din leverandør kan hjælpe med. Alternativt kan du afvikle dine lydfiler fra tjenester, der allerede har disse muligheder som f.eks. Youtube, Vimeo og SoundCloud.
1.4.3 Kontrast (minimum)
De farver, du bruger på, dit website skal have en kontrastforhold på mindst 4,5:1 mellem for- og baggrund. Der er dog nogle punkter, hvor det ikke er gældende:
Hvis det er et logo.
Når billeder og tekst ikke har betydning for budskabet, men kun er til pynt.
Hvis skriftsstørrelsen er stor – kontrastforholdet skal i dette tilfælde være 3:1
Hvordan løser jeg opgaven?
Der findes værktøjer til at tjekke kontrastforhold. Du kan f.eks. bruge WebAIM’s Contrast Checker, som også kan beskrive WCAG standarden i forhold til skriftstørrelsen. De farver, der bliver brugt på dit website, er sikkert defineret i designet og skal måske ændres i din designskabelon. Hvis ikke du selv har mulighed for det, skal du have hjælp af din designleverandør.
1.4.4 Ændring af tekststørrelse
Tekst, du har på dit website, skal kunne forstørres op til 200%, uden at det mister sit budskab eller sammenhæng.
Hvordan løser jeg opgaven?
De internetbrowsere, der bruges i dag, giver rig mulighed for at zoome og forstørre uden problemer. Der kan dog være gamle og uddaterede browsere, hvor det kan blive en udfordring, og her må du vælge, om det er et punkt, du skal arbejde med. Sikkerhedsmæssigt kan det ikke altid være forsvarligt at arbejde med uddaterede browsere som f.eks. Internet Explorer. Hvis dit website ikke er responsiv, kan det også give nogle udfordringer ved zoom gennem browsere, og i dette tilfælde må du vurdere sammen med din leverandør eller programmør, hvordan i bedst håndterer dette.
1.4.5 Billeder af tekst
Du har måske prøvet det selv eller oplevet det på et andet website. Du ser en tekst, som egentligt er et billede. Det kan f.eks. være et billede af et bål, hvor teksten er ”Skt. Hans 2020”, hvor teksten er en del af billedet. Det er ikke hensigtsmæssigt, da teksten jo ikke kan læses af skærmlæsere. En undtagelse kunne være dit logo.
Hvordan løser jeg opgaven?
Du bør ikke bruge billeder af tekst, men uploade billeder og indsætte tekst på billedet eller som billedtekst. Rent teknisk kan du få en programmør til at hjælpe med at skabe et tekstlag oven på billeder hvis det er det, du ønsker.
1.4.10 Ombrydningsvisning
En bruger skal helst undgå at scrolle i flere retninger på dit website. F.eks. skal tabeller helst kunne læses, uden at brugeren skal scrolle både op og ned på alle enheder for at forstå indholdet. Dette gælder op til en forstørrelse på 400%.
Hvordan løser jeg problemet?
Hvis du allerede på dit website har tabeller, hvor man kan scrolle både op og ned, og på langs bør du forhindre, det ved selv at fjerne scroll-muligheden eller bede din programmør om at fjerne det. Du kunne også vurdere, om det giver mening bare at scrolle på langs.
1.4.11 Kontrast for ikke-tekstbaseret indhold
Har du grafik eller elementer på dit website, som ikke er baseret på tekst, og som er vigtig for budskabet eller forståelsen, skal kontrastforholdende være 3:1. Det kan f.eks. være info baseret på grafik eller diagrammer med søjler og grafer, hvor farver er en del af forståelsen.
Hvordan løser jeg opgaven?
Drejer det sig om dine farvevalg på websitet, må du eller din grafiker i gang med at definere nye farver på websitet. Dette gøres ofte centralt i et design. Har du grafik på websitet på grafikeren i gang med de oprindelige filer for at korrigere farvevalg.
1.4.12 Tekstafstand
Teksten på dit website skal være nemt at læse for svagtseende eller brugere generelt med nedsat syn. Tekststørrelser, afstand og linjeskift har derfor en vigtig betydning, og følgende punkter skal der tages hensyn til:
Afstanden mellem bogstaver skal være mindst 0,12 gange skriftstørrelsen
Afsnit skal have en afstand på mindst 2 gange skriftstørrelsen
Afstanden mellem linjer skal være, mindst 1,5 gange skriftstørrelsen
Ord skal have en afstand på mindst 0,16 gange skriftstørrelsen
Hvordan løser jeg opgaven?
Du kan altid gå ud fra skriftstørrelsen i ovenstående. Så når du kender skriftsstørrelsen, kan du regne ud hvilke parametre du skal holde dig indenfor i forhold til afstande. Hvis ikke du selv har mulighed for at korrigere afstande i din teksteditor eller i fontindstillinger må du have fat på en programmør til at opsætte nogle regler eller høre din leverandør af platformen, hvordan i bedst håndterer dette.
1.4.13 Indhold ved svævepegning (hover) eller fokus
Hvis du har elementer på dit website, hvor det er muligt at få information ved at føre musen hen over elementet (også kaldet “hovering”), skal der være mulighed for at fjerne informationen igen ved enten at bruge tastaturet eller klikke med hjælpeværktøjer.
Hvordan løser jeg opgaven?
Denne opgave kan ofte kun løses gennem en teknisk løsning på din platform gennem din leverandør eller en programmør. Du skal definere, hvad udfordringen er med at kunne navigere væk fra information, der popper op ved hjælp af tasturet, og få deres hjælp til at løse det.
2. Anvendelig
Besøgende på dit website skal kunne navigere med tastatur, skærmlæsere eller andre hjælpeteknologier.
2.1.1 Tastatur
Besøgende skal kunne navigere på dit website via deres tastatur og brugen af websitet må ikke være afhængig af den tid, brugeren skal bruge på at trykke eller navigere sig rundt.
Hvis du har funktioner eller handlinger, der kræver et tidsinterval (reservationer, underskrifter, transaktioner etc.), kan der være undtagelser.
Hvordan løser jeg opgaven?
Det er ofte TAB-tasten, der bruges til at navigere gennem indholdet på websitet, og du skal sammen med din platformleverandør sikre, at dette er muligt, og hvordan I bedst løser det.
2.1.2 Ingen tastaturfælder
Dit indhold på websitet er sikkert delt op i sektioner, elementer og punkter. Det skal være muligt for besøgende at kunne skifte fokus mellem disse elementer med tastaturet uden at ende i en blindgyde. Hvis der skal bruges en speciel metode til at skifte mellem områder og elementer, skal brugeren informeres om det.
Hvordan løser jeg opgaven?
Det er forholdsvis nemt at teste dette, da du blot kan prøve at navigere dig gennem dine sider med tastaturet og primært TAB-tasten. Finder du ud af, at der er noget, der ikke virker efter hensigten, skal du ofte have hjælp af din programmør eller leverandør.
2.1.4 Genvejstaster
Hvis besøgende på dit website skal, eller kan anvende genvejstaster på dit website, er der nogle punkter, der skal være tilgængelige:
Genvejstaster skal kunne deaktiveres
Mulighed for at ændre genvejstasten
Genvejstaster er kun aktiveret, når elementer er aktive eller i fokus.
Hvordan løser jeg opgaven?
Bruger du genvejstaster på dit website, skal du sammen med din leverandør af platformen sikre, at ovenstående punkter er standarden.
2.2.1 Justerbar tastehastighed
Besøgende skal have god tid til at gennemgå og reagere på det indhold, du præsenterer på dit website. Hvis du har indhold, der er begrænset af tidsintervaller som f.eks. animationer, karruseller eller tekst, der skifter i intervaller, skal brugeren have mulighed for at påvirke tidsbegrænsningen, ved at:
Pause
Deaktivere
Give, mere tid
Der kan være undtagelser, når:
Indholdet er live eller i real-time
Hvis begrænsningen er nødvendig for funktionen
Hvis tiden, der går, er over 20 timer
Hvordan løser jeg opgaven?
Hvis du har indhold på dit website, der skifter eller opdaterer i intervaller som f.eks. et nyheds karrusel eller billede skift uden, at besøgende gør noget aktivt, skal du sammen med din programmør sikre, at det er muligt for brugeren at påvirke begrænsningen som ovenstående.
2.2.2 Pause, stop, skjul
Minder lidt om punkt. 2.2.1. Hvis du har elementer på dit website, der blinker eller bevæger sig, skal det kunne stoppes, pauses eller skjules. Dette gælder, også hvis aktiviteten vises i mere end 5 sekunder eller er en del af noget andet indhold. Er der indhold, der står og opdaterer automatisk (f.eks. indlæsning af rapporter hvert minut), skal brugeren kunne bestemme, hvor ofte opdateringen skal ske.
Hvordan løser jeg opgaven?
Hvis du har aktivt indhold, skal du blot sikre dig, at der er mulighed for, at brugeren selv kan vælge om, det skal pauses, stoppes eller skjules. Automatisk opdatering af rapporter kan f.eks. løses ved at der er en knap der aktiverer en opdatering ved tryk således brugeren selv bestemmer interval.
2.3.1 Grænseværdi på tre glimt eller derunder
Elementer eller indhold på dit website må ikke provokere eller forårsage anfald som f.eks. epilepsi. Derfor må der ikke indgå elementer, der glimter eller blinker mere end 3 gange indenfor en tidsramme på 1 sekund.
Hvordan løser jeg opgaven?
Kig dit indhold igennem, og se, om du har indhold, der blinker eller glimter for at tiltrække opmærksomhed, og se om, det holder sig inden for de 3 glimt under 1 sekund. Hvis det er en del af dit design, må du måske have din grafiker med indover.
2.4.1 Spring over blokke
På dit website kan der være elementer eller blokke, der bliver gentaget på flere sider hele websitet igennem. For at gøre det nemmere for brugerne og deres hjælpeteknologier skal der være muligheder for at springe indhold over, som netop går igen på flere sider.
Hvordan løser jeg opgaven?
Rent teknisk på platformen skal der laves en mulighed for skærmlæsere kan springe blokke som f.eks. hovedmenuen, footer, blokke med reklamer, formularer etc.
Du kan også selv som webmaster indsætte links øverst på siden, som hurtigt sender dem videre til indhold
2.4.2 Sider har titler
Dine landingpages (sider) skal have sigende titler, som gør det muligt for skærmlæsere at forstå emnet, de omhandler og formål med det. På denne måde kan brugeren hurtigt beslutte, om det er relevant indhold eller ej.
Dine landingpages (sider) skal have sigende titler, som gør det muligt for skærmlæsere at forstå emnet, de omhandler og formål med det. På denne måde kan brugeren hurtigt beslutte, om det er relevant indhold eller ej.
Hvordan løser jeg opgaven?
Dine landingpages skal have mulighed for at have en titel. Vi kalder dette en ”Title Tag”. Det er ofte det navn siden har og er også det du ser i Googles søgeresultater. Når du opretter en side, skal der være mulighed for at udfylde dette.
2.4.3 Fokusrækkefølge
Dette punkt handler om, at en besøgende kan følge en bestemt rækkefølge fra element til element på dit website. Denne rækkefølge skal være opsat på en måde, der giver mening for brugeren således vedkommende, kan forstå indholdet og bruge websitet, som det er meningen. Hvis f.eks. du har et udvidet vindue eller et pop-up vindue, et sted er det vigtigt, at fokus holdes inde i vinduet, indtil det lukkes ned igen.
Hvordan løser jeg opgaven?
Den første metode, du kan bruge, er at bruge TAB tasten til at se rækkefølgen på elementerne. Hvis den rækkefølge, der viser sig, ikke giver mening eller skaber udfordringer, skal du have den ændret, så den følger den rækkefølge, der er hensigten. Kan du ikke sælge ændre rækkefølgen, skal du have fat på en programmør eller din leverandør. Du kan selv sikre, at den rigtige rækkefølge på tilter, og overskrifter giver meningen i forhold til H1, H2, H3 etc.
2.4.4 Formål med links (i kontekst)
Når du har links i din tekst, skal teksten på linket fortælle, hvad der sker, når man trykker på linket. Det betyder, at i stedet for at skrive ”Download her” kan du med fordel skrive ”Download menukort her», således, skærmlæsere kan læse op, hvad det er, linket linker hen til, når der trykkes på linket.
Hvordan løser jeg opgaven?
Gå en tur, igennem dit website, og se, hvor du har tekst eller elementer, der linker videre til noget andet. Det kan være knapper, billeder, tekster osv. Hvis ikke du har mulighed for at ændre linkteksten, så kan du indsætte en såkaldt alt-tekst (beskrivelse) til linket, således, skærmlæsere kan læse konteksten, når der læses hen over elementet. De fleste websystemer har denne mulighed, ellers må du have fat på din leverandør for at finde ud af, hvilke muligheder du har.
2.4.5 Flere måder
Dine sider på websitet skal kunne tilgås på mere end én måde. Måder, man tilgår sider på, kan være gennem søgninger liste med sider og hovednavigering gennem en menu. Det vil sige, at der skal være mulighed for at navigere frem og tilbage mellem alle sider gennem f.eks. en menu eller en liste af sider. Der er dog en undtagelse, hvis f.eks. siden er kommet frem via et søgeresultat gennem f.eks. en søgemaskine.
Hvordan løser jeg opgaven?
Hvis du har sider på dit website, der kun kan tilgås på én måde, kan du med fordel tilføje en anden måde at tilgå siden på som f.eks. søgning, liste med sider eller tilføjelser til menuen.
2.4.6 Overskrifter og etiketter
Når en besøgende på dit website bevæger sig gennem indholdet, skal det være nemt at forstå og overskue. Overskrifter og etiketter skal være derfor være enkle og beskrivende i en form, der gør det nemt at forstå indholdet.
Hvordan løser jeg opgaven?
Hvis ikke det er nødvendigt med en overskrift, er det bedst at undlade det. Som redaktør kan du løbe dine sider igennem og kigge på budskabet. Dine overskrifter skal give mening og være korte og enkle, så brugere forstår formål og budskab.
2.4.7 Synligt fokus
Hvis en bruger navigerer med tastatur på dit website, skal det være tydligt, hvilket element der er i fokus. Det skal være klart, for brugeren, hvor der er navigeret til.
Hvordan løser jeg problemet?
Din leverandør eller programmør kan hjælpe dig med, at dit design indeholder regler for at synliggøre elementer, som brugeren kan navigere hen til.
2.5.1 Pegebevægelser (Pointer Gestures)
Brugere, der ikke har mulighed for at bruge den traditionelle mus, skal have mulighed for at bruge andre hjælpeværktøjer. Det kan f.eks. være pegepind eller øjnbevægelser. Disse brugere kan ikke fysisk udføre bevægelseshandlinger som f.eks at swipe, zoome eller trække indhold. Alternativer skal findes til disse bevægelser.
Hvordan løser jeg opgaven?
Hvis en bruger skal foretage en handling på dit website, der kræver en bevægelse, skal der tilbydes et alternativ til dette. Genveje eller tastaturtryk kan give mulighed for at udføre de fleste handlinger som en alternativ måde til at navigere med.
2.5.2 Pege-annullering
Nogle besøgende kan bruge pegeværktøjer eller andre teknologier, som kan blive påvirket af rystelser eller hurtige bevægelser. Det kan udløse uønskede handlinger som at trykke på den forkerte knap. Derfor skal der være mulighed for, at brugeren kan fortryde ved enten at flytte fokus fra elementerne eller annullere sit valg, inden der klikkes.
Hvordan løser jeg opgaven?
Hvis du på dit website har handlinger, der skal bekræftes ved at trykke på en knap (acceptere køb sende personfølsomme data eller underskrive dokument), skal du sikre, at der er mulighed for at fortryde eller annullere. Din softwareleverandør bør kunne hjælpe dig med en løsning, hvor brugere kan fortryde inden accept.
2.5.3 Etiket i navn
Knapper eller andre interaktive elementer med synlig tekst som f.eks. ”Send”, ”Nej tak”, ”Søg” ”Annullere” etc. skal matche med teksten i HTMLén koden. Skærmlæsere vil læse HTML-koden i den label/etiket, der er tilknyttet elementet, og det er derfor vigtigt, at denne tekst er det samme som den synlige tekst på knappen, så brugere kan tyde, hvad der sker, når de aktiverer elementet.
Hvordan løser jeg opgaven?
Hvis du ikke selv kan tilgå din HTML og tyde den, skal du have fat i en programmør eller din leverandør og få hjælp til at sikre labels på disse elementer. De skal enten skrives eller oprettes, hvis de ikke allerede eksisterer.
2.5.4 Betjening via bevægelse
Elementer, der kræver en bevægelse for at blive aktiveret, skal kunne deaktiveres. Der er brugere, som enten ikke kan udføre alle bevægelser, eller som modsat også altid laver netop denne bevægelse. Det kan være bevægelser som at rotere eller ryste en enhed.
Hvordan løser jeg opgaven?
Hvis du har handlinger, der kræver eventuelle bevægelser på dit website, skal du have lavet nogle alternativer til disse. Det kan være genveje, der f.eks. dukker op efter deaktivering.
3. Forståelig
Budskab og informationer på dit website skal være forståelig for dine brugere, og det skal være nemt for besøgende at forstå, hvordan de bruger informationerne.
3.1.1 Sproget på siden
For at skærmlæsere og andre teknologier kan identificere, hvilket sprog et website er skrevet i, skal der defineres sprog ved at tilføje en såkaldt, «lang” attribut i elementer. Dette er også, for at skærmlæsere ved, hvilket sprog de skal oplæse med.
Hvordan løser jeg opgaven?
Ofte er det muligt at definere, hvilket sprog websitet er skrevet i. Hvis ikke dette er muligt, skal du have din programmør til at tilføje sprog i den HTML, der bruges på siden.
3.1.2 Sprog, der anvendes til dele af indhold
Minder lidt om punkt 3.1.1. Hvis der bruges forskellige sprog på websitet i forhold til forskelligt indhold eller forskellige målgrupper, skal dette informeres til brugeren. Et eksempel vil være, hvis du har et budskab, der står med engelsk, så kan det beskrives direkte i den HTML kode, som omgiver elementet, der indeholder teksten.
Hvordan løser jeg opgaven?
Hvis din platform ikke giver dig mulighed for at definere sprog, når du skriver tekst, så skal du alliere dig med din programmør og få det defineret i koden.
Et eksempel på HTML koden kan se sådan her ud for en engelsk sprogdefinition:
This is just an english example
3.2.1 I fokus
Når en bruger navigerer rundt på dit website, skal funktionaliteten kunne beregnes på forhånd. Specielt hvis man bruger TAB-tasten. Når man bruger TAB-tasten til at løbe ned gennem websitet, vil de individuelle elementer opnå fokus og her det det så vigtigt, at der ikke sker en ændring af kontekst. Et eksempel på ændret kontekst kan være, at et spørgeskema popper op, når et billede får fokus.
Hvordan løser jeg problemet?
Du skal kigge på dit site og tjekke, om du har steder på dit website, hvor nye vinduer eller pop-up bokse indeholder information, der trækker brugeren væk fra den kontekst, de kommer fra uden at advare brugeren. I så fald skal du have opsat en advarsel eller have ændret kontekst i det nye fokus.
3.2.2 Ved input
Lidt lige som punkt 3.2.1. Her er reglen, bare at kontekst ikke må ændres ved input, hvilket betyder, at du er i gang med at udfylde f.eks. formular på kontekst, og forståelsesrammen ikke ændres.
Et eksempel kan være et udvalg af indhold i et filter, hvor der kan være valg baseret på kriterier. Indholdet ændrer sig, men rammerne er det samme, og kontekst holdes, og det giver stadig mening for brugeren.
Hvordan løser jeg problemet?
Check dine filtre og formularer, og se, om du har eksempler, hvor der f.eks. åbnes et nyt vindue. Vurder herefter, om der skal implementeres advarsler.
3.2.3 Konsekvent navigation
Når en bruger navigerer rundt på dit website, skal elementerne til navigering blive i samme ramme eller struktur gennem hele websitet. Det vil sige, at f.eks. hovedmenuen altid er den samme. Så navigeringen må ikke ændre sig, medmindre en bruger aktivt laver en handling, der skaber denne ændring.
Hvordan løser jeg problemet?
Skærmlæsere og hjælpeteknologier har generelt lidt udfordringer, hvis navigeringselementer ændrer sig. Så du må tjekke dit site for at se, om det er gældende på dit website, og få din programmør eller platform leverandør til rent teknisk at korrigere det.
3.2.4 Konsekvent identifikation
Dette punkt handler om, at du er konsekvent i den måde, du kommunikerer indhold, informationer og budskaber på gennem hele dit website. Hvis du f.eks. bruger ikoner eller andre grafiske elementer, bør du bruge dem ensartet alle steder. Tekster, du bruger til links, bør også være ensartet, så du f.eks. altid bruger udtrykket ”Hent filen”, hvor gang der er noget, der kan downloades.
Hvordan løser jeg opgaven?
Kig dine links, menuer og ikoner igennem på dit website, og se, om der er nogle informative elementer, som har samme budskab, men forskellige tekster eller ikoner, og få dem rettet, efterhånden som du finder dem. Alternativt kan du gå dit design igennem for at ændre grafiske elementer.
3.3.1 Identifikation af fejl
Hvis en bruger indtaster forket information i interaktive områder, som f.eks. formularer og felter skal en bruger advares om fejlen. Forestil dig et adressefelt, hvor der indtastes et telefonnummer. Her skal det angives for brugeren, at det er en fejl, og der kræves en adresse i stedet for.
Hvordan løser jeg opgaven?
Gå dit website igennem for formularer, felter og andre steder, hvor det er muligt at indtaste data. Prøv at lave fejl, og se, om du får nogle advarsler. Advarsler eller informationer skal leve op til WCAG standarden som ARIA tekst. Du vil sandsynligvis få brug for en programmør eller din platform leverandør for at komme i mål med dette projekt.
3.3.2 Etiketter eller instruktioner
Hvis du har felter, formularer eller andre interaktive elementer, der kræver input fra brugerne, skal de have instruktioner og vejledninger som vejleder brugeren i, hvilke data der skal udfyldes i elementerne.
Hvordan løser jeg opgaven?
De fleste platforme giver mulighed for at oprette hjælpefelter til formularer og inputfelter. Gå dit site igennem, og se, om du vejleder dine brugere bedst mulig. Har du ikke mulighed for dette på din platform, skal du have fat i din platform leverandør og aftale, hvordan I bedst løser dette.
3.3.3 Fejlforslag
Dette emne omhandler eventuelle fejlforslag, der kan leveres til brugeren. Et eksempel kan være, at brugeren skal indtaste måned for fødselsdag (f.eks. Maj) og i stedet kommer til at skrive ”05», og bliver advaret om, at data ikke opfylder feltets krav. Her bør meddelelsen fortælle, at det er navnet på måneden, der skal indtastes.
Hvordan løser jeg opgaven?
Mange platforme tillader, at man selv kan definere fejlforslag til brugere og deres input. Hvis du ikke har denne mulighed, bør du tage fat i din leverandør og høre, hvordan i bedst tackler dette. Alternativt må du have fat i en programmør.
3.3.4 Forhindring af fejl (juridisk, økonomisk, data)
Har du på dit website interaktive områder med inputfelter og formularer, som håndterer juridiske, økonomiske eller persondata generelt, skal der være mulighed for at verificere sine indtastninger. Det vil sige, at brugere, der taster data ind som f.eks. kontonummer, personnumre, eller personlige oplysninger, skal de have mulighed for at fortryde og tilbagetrække indtastninger.
Ligeledes skal der også være mulighed for, at tjekke og rette eventuelle fejl i indtastninger inden afsendelse. Disse punkter er meget vigtige i dette punkt, da vi gerne vil sikre, at brugeren ikke afsender forkerte data.
Hvordan løser jeg opgaven?
Alle de steder, du har inputfelter, skal du tjekke, om der er mulighed for at tjekke og rette indtastninger inden afsendelse. Hvis ikke, er du nødt til sammen med din programmør eller platform leverandør at aftale, hvordan I sammen løser denne opgave.
4. Robust
Hjælpeteknologier skal have adgang til alle elementer på dit website. Koden skal være robust og stabil til hjælpeteknologier og skal opdateres i takt med værktøjer og teknologien.
4.1.1 Parsing
HTML Parsing er den proces, hvor koden bliver analyseret, og bestemmer semantikken i koden. Når HTML koden kan køre igennem en HTML Validator uden fejl, er koden semantisk korrekt opbygget.
Hvordan løser jeg opgaven?
Få hjælp af din programmør til at validere HTML koden på dit website: Eventuelt gennem en validator. Meningen er, at koden skal understøtte websitet, så det er tilgængeligt i en robust form med så få fejl i HTML koden som muligt i forhold til WCAG 2.1 standarden.
4.1.2 Navn, rolle, værdi
Dit website består af HTML, kode, som indeholder f.eks. etiketter og tags, der hjælper skærmlæsere med at forstå de forskellige elementer, som dit indhold består af. Navn, rolle og værdi er data, der fortæller disse egenskaber på et element, så skærmlæsere forstår dem. Her kommer ARIA Labels også frem, som et udtryk for en attribut, der hjælper med netop at tildele disse egenskaber til et element.
Hvordan løser jeg opgaven?
Du kan med værktøj som f.eks. WAVE skabe dig et overblik over navne, roller og værdier, der ikke er defineret på dit website i HTML koden. En programmør kan hjælpe dig med at tilføje de data, du mangler.
4.1.3 Statusbeskeder
Statusbeskeder kan også gå under betegnelsen notifikationer og er, f.eks. hvis du tilføjer ønsker til en ønskeliste eller produkter til en varekurv, hvor der ofte vil blive markeret med et tal eller tekst, der indikerer antal emner på listen. Det kan også være et ikon, der markerer en gemt filtrering.
Det er vigtigt i disse eksempler, at skærmlæsere kan oplæse beskederne korrekt. Derfor kan disse beskeder defineres korrekt i HTML koden ved f.eks. at bruge det, der kaldes ”Role attribution”, som netop er med til at definere en rolle på et element.
Hvordan løser jeg opgaven?
Løb dit website igennem, og se, om der i designet er steder, der markeres med statusbeskeder eller notifikationer. Er der steder, hvor e kommer naturligt, eller er der steder, hvor du mener det, giver mening, så få dem noteret og løb det igennem med en designer. Nu skal du så med din designer og programmør få dem defineret korrekt i HTML koden og teste dem med en skærmlæser.