WCAG 2.2-kriterier, regler og manuel gennemgang

Find forudindspillede medier med kun lyd (podcast, lydklip) og med kun video (stumt produktklip, animation uden lyd). Bestået: Der er linket til en transskription eller et tilsvarende alternativ i tekst eller lyd direkte ved siden af hvert af dem. Ikke relevant, når webshoppen ikke har den slags medier.

Afspil hver forudindspillet video med tale (produktdemoer, brandfilm, indlejrede videoer fra YouTube/Vimeo). Bestået: Der er undertekster via en CC-knap, et <track kind="captions"> eller faste undertekster i billedet, og de er korrekte. Automatisk genererede undertekster, som ingen har gennemgået, består ikke.

For hver forudindspillet video, hvor billedsiden indeholder information, der ikke er i lyden (tekst på skærmen, håndtering af produktet, trin, der vises, men ikke siges). Bestået: Der findes en version med synstolkning eller et fuldt tekstalternativ (en transskription, der beskriver det visuelle).

Kun for livevideo med lyd (live shopping-events, streamede lanceringer). Bestået: Der vises undertekster i realtid under streamen. Ikke relevant for webshops uden livevideo.

For forudindspillet video med informativt billedindhold, som lydsporet ikke dækker. Bestået: Der findes et synstolkningsspor eller en synstolket version af videoen. Et tekstalternativ alene opfylder 1.2.3, men ikke dette kriterium.

Læs siden fra top til bund med skærmlæseren (piletaster / gennemsynstilstand), og sammenlign med den visuelle rækkefølge. Bestået: Produkttitel, pris, variantvalg og »Læg i kurv« kommer i en fornuftig rækkefølge; grids, sidebars og megamenuer, der er omarrangeret med CSS, ødelægger ikke læserækkefølgen. Skærmlæser: Windows: NVDA (gratis, nvaccess.org) + Chrome. Mac: VoiceOver (Cmd+F5) + Safari.

Gennemsøg instruktioner og hjælpetekster efter henvisninger, der kun bygger på form, farve, størrelse, placering eller lyd: »klik på den grønne knap«, »feltet til højre«, »se boksen nedenfor«, »lyt efter bippet«. Bestået: Hver af disse instruktioner nævner også betjeningselementet eller giver et holdepunkt i tekst.

Åbn forsiden, en produktside, kurven og første trin i kassen på en telefon eller tablet (eller med enhedsemulering i udviklerværktøjerne), og drej mellem stående og liggende format på hver af dem. Bestået: Indhold og betjeningselementer er tilgængelige og brugbare i begge retninger, og intet beder den besøgende om at dreje enheden. Kun indhold, der kræver én bestemt retning for at fungere, må låse den, og det er sjældent i en webshop.

Tjek alle steder, hvor farve bærer betydning: den valgte farveprøve for en variant (skal have en kant, et flueben eller tekst, ikke kun et farveskift), formularfejl (ikon eller tekst, ikke kun en rød kant), links i brødtekst (understregning eller en kontrast på 3:1 plus et kendetegn ved hover/fokus), lagerindikatorer (en grøn/rød prik skal have tekst). Bestået: Hver betydning formidles også uden farve.

Zoom til 400 %, og se på herobannere, kampagnemærkater, »Udsalg«-grafik og kategorifliser. Al tekst, der bliver sløret, er et billede af tekst. Bestået: Tekst er rigtig tekst (logoer og varemærker undtaget), eller billedet er nødvendigt (f.eks. en trykt etiket vist på et produktfoto). Hvis webshoppen genererer fakturaer eller kvitteringer som PDF, så åbn en af dem: Den skal være tekstbaseret (teksten kan markeres), ikke et scannet billede.

Zoom til 400 % (Ctrl og + indtil 400 %, eller et viewport på ca. 320 px i udviklerværktøjerne). Bestået: Der skal ikke scrolles vandret for at læse indhold (datatabeller undtaget); menuen, priserne og »Læg i kurv« er stadig til stede og kan bruges; intet overlapper eller forsvinder; formularetiketter bliver ved deres felter. Den automatiske kontrol vs-reflow opdager kun vandret scrolling.

Udløs alle pop op-elementer, der vises ved hover eller fokus: værktøjstip, megamenuer, størrelsesguider, forhåndsvisning af minikurven, hurtigvisning af produkter (quick view). Bestået: Pop op-elementet kan lukkes med Esc uden at flytte markøren, markøren kan flyttes hen over det, uden at det lukker, og det bliver stående, indtil det lukkes, eller hover/fokus forlader det.

Tag musen ud, eller lad være med at bruge den; brug kun Tab, Shift+Tab, Enter, mellemrumstasten, piletasterne og Esc. Gå med Tab gennem forsiden fra top til bund. Åbn og luk alle menuer, burgermenuer og rullemenuer (Enter/mellemrum åbner, Esc lukker). Åbn en produktside, vælg en variant (størrelse/farve), og læg den i kurven. Åbn kurven, ret et antal, og fjern en vare. Bestået: Alt kan nås og betjenes, og du ved hele tiden, hvor du er.

Åbn alle modalvinduer og pop op-vinduer (nyhedsbrev, cookiebanner, størrelsesguide, hurtigvisning, login). Bestået: Fokus flyttes ind i vinduet, Esc lukker det, og fokus vender tilbage til, hvor du var. Det er et klart ikke bestået, hvis du kan nå siden bag modalvinduet med Tab. Selve cookiebanneret: Både »Afvis« og »Accepter« kan nås og betjenes med tastaturet alene, og intet fanger dig inde i det.

Sæt fokus på selve siden (ikke i et felt), og tryk på enkelte bogstaver og tegn som /, s, k, ?. Bestået: Ingen genvej med ét tegn er aktiv; eller den kan slås fra eller ændres; eller den virker kun, mens det tilhørende betjeningselement har fokus.

Se hver video, der afspilles automatisk, hvert animeret banner, hver GIF, hver nedtællingstimer og hver hovereffekt i 10 sekunder. Bestået: Intet blinker mere end tre gange i sekundet, og intet stort område blinker som et stroboskop. Bekræft også, at enhver karrusel, der kører automatisk, kan sættes på pause.

Hold øje med, hvor fokus går hen, under gennemgangen med tastaturet. Bestået: Tab-rækkefølgen følger det visuelle layout; når en menu eller et modalvindue lukkes, vender fokus tilbage til det element, der åbnede det; efter en opdatering af kurven, en livesøgning eller et skift i en karrusel bliver fokus, hvor du satte det, og forsvinder ikke op til toppen af siden.

Bekræft, at der er mindst to måder at nå enhver side på: webshoppens søgning plus navigationsmenuen, et sitemap, brødkrummer eller links til relaterede produkter. Lav én søgning, og åbn et resultat. Bestået: To uafhængige veje virker. Sider, der er trin i en proces (kassen), er undtaget.

Læs listen over overskrifter (skærmlæserens H-tast eller en visning af dokumentstrukturen i browseren) og formularetiketterne. Bestået: Overskrifter beskriver deres afsnit (h1 på produktsiden er produktnavnet, overskrifter på kategorisider nævner kategorien, ingen »Sektion 1« eller pladsholdertekst), og etiketter beskriver feltets formål (»E-mailadresse«, ikke »Felt« eller »Indtast«). Skærmlæser: Windows: NVDA (gratis, nvaccess.org) + Chrome. Mac: VoiceOver (Cmd+F5) + Safari.

Gentag gennemgangen med tastaturet, og kig efter fokusmarkeringen. Bestået: Hvert element med fokus viser en synlig markering (outline, ring, understregning eller et tydeligt farveskift), så du altid kan pege på skærmen og sige »fokus er dér« uden at gætte, og markeringen kan stadig ses mod baggrunden, når du kniber øjnene sammen. Den automatiske kontrol vs-focus-visible kan ikke vurdere, hvor synlig ændringen er.

Find bevægelser med flere kontaktpunkter eller bestemte baner: knib for at zoome på produktbilleder, karruseller med swipe, swipe for at slette i kurven, gallerier, der scrolles ved at trække. Bestået: Hver af dem har et alternativ, der kan betjenes med ét enkelt kontaktpunkt (zoomknapper, næste/forrige-knapper, en fjern-knap).

Tryk museknappen ned på betjeningselementer som »Læg i kurv«, »Fjern« og »Afgiv ordre«, flyt markøren væk fra betjeningselementet, og slip. Bestået: Intet sker (handlinger udløses først, når knappen slippes), eller handlingen kan fortrydes.

Gå med skærmlæseren til knapper og links, der viser synlig tekst (»Læg i kurv«, »Til kassen«, »Anvend kode«). Bestået: Det navn, der bliver læst op, indeholder den synlige tekst; en aria-label som »Køb nu« på en knap med den synlige tekst »Læg i kurv« består ikke. Skærmlæser: Windows: NVDA (gratis, nvaccess.org) + Chrome. Mac: VoiceOver (Cmd+F5) + Safari.

Kig efter funktioner, der styres ved at bevæge enheden: ryst for at fortryde, vip for at dreje et produkt, AR-forhåndsvisninger, der styres med bevægelse. Bestået: Et betjeningselement på skærmen gør det samme, og bevægelsesstyringen kan slås fra. Ikke relevant for de fleste webshops.

Find passager på et andet sprog end sidens: engelske slogans eller produktnavne i en tysk eller dansk webshop, engelske fagudtryk på juridiske sider, en sprogvælger, der viser hvert sprog under dets eget navn. Bestået: Sådanne passager har en lang-attribut (undersøg i udviklerværktøjerne), og hvis der er en sprogvælger, bliver skiftet læst op og virker. Egennavne og enkelte låneord er undtaget.

Gå med Tab gennem hele siden, også søgefelter, rullemenuer og cookiebanneret. Bestået: Blot det at give et element fokus åbner aldrig en menu, sender aldrig en formular, flytter aldrig fokus et andet sted hen og navigerer aldrig til en anden side.

Skift værdien i rullemenuer, radioknapper og afkrydsningsfelter med tastaturet: variant (gå gennem valgmulighederne med piletasterne), land, leveringsmetode, antal, sortering. Bestået: En ændret værdi sender ikke automatisk formularen og navigerer ikke uden varsel; hvis siden opdateres, får brugeren besked på forhånd, eller en knap udløser ændringen. Variantvælgere, der navigerer, så snart man trykker på en piletast, er en almindelig fejl i webshops.

Sammenlign forside, kategoriside, produktside, kurv og kasse. Bestået: Header, hovednavigation, søgning, brødkrummer og footer står i samme indbyrdes rækkefølge på alle sider (kassen må have mindre navigation, men må ikke ændre rækkefølgen på det, der er tilbage). Tag 404-siden og en produktside for en udsolgt vare med: Begge skal stadig have navigation og webshoppens design. Den automatiske kontrol vs-consistent-help dækker kun placeringen af hjælpelinket.

Tjek, at den samme funktion har samme betegnelse overalt: »Læg i kurv« vs. »Tilføj til kurv«, navnet på kurv-ikonet, søgeknappen, »Ønskeliste« vs. »Favoritter«, linket til kontoen. Bestået: Identiske funktioner har identiske navne og ikoner på tværs af skabeloner.

Brug skærmlæseren i kassen (og ved login og oprettelse af konto), og send en tom formular og en med en ugyldig e-mailadresse og et ugyldigt postnummer. Bestået: Fejl bliver læst op, når de vises, angiver, hvilket felt der er forkert, og siger, hvad der er galt. Skærmlæser: Windows: NVDA (gratis, nvaccess.org) + Chrome. Mac: VoiceOver (Cmd+F5) + Safari.

Gå med Tab og skærmlæser gennem alle felter i kassen, adresseformularer, login og tilmelding til nyhedsbrev. Bestået: Skærmlæseren læser hvert felts etiket op; påkrævede felter angiver selv, at de er påkrævede (ikke kun med farve eller en uforklaret stjerne); formatvejledning (dato, postnummer, telefon) gives før indtastningen. Skærmlæser: Windows: NVDA (gratis, nvaccess.org) + Chrome. Mac: VoiceOver (Cmd+F5) + Safari.

Indtast en forkert udformet e-mailadresse, et postnummer i forkert format og en udløbsdato for kortet, der allerede er passeret. Bestået: Hver fejlbesked foreslår, hvordan fejlen rettes (»Indtast et postnummer som 2100«, »E-mailadressen skal indeholde @«), ikke kun »Ugyldigt input«, medmindre et forslag ville gå ud over sikkerheden.

Gå gennem kassen til sidste trin uden at betale. Bestået: Før ordren afgives, er der et oversigtstrin, der viser varer, antal, samlet pris, adresser og betalingsmetode, alt kan ændres, og den sidste handling har en tydelig betegnelse (f.eks. »Køb nu«). Tjek også, at sletning af kontoen eller en adresse kræver en bekræftelse.

Brug skærmlæseren gennem hele købsflowet, med start i webshoppens søgning. Bestået: Søgefeltets formål bliver læst op, og det samme gør resultaterne, så du kan nå et produkt; farveprøver for varianter læses op med navn og valgt tilstand, knapper til antal og sammenklappelige sektioner med rolle og tilstand, kurvens indhold, antal og total læses op i rækkefølge, og ved kortfelter i iframes (Stripe og lignende) bliver det læst op, hvilket felt der er kortnummer, udløbsdato og CVC. Du skal kunne købe den rigtige størrelse og farve uden at kigge. Skærmlæser: Windows: NVDA (gratis, nvaccess.org) + Chrome. Mac: VoiceOver (Cmd+F5) + Safari.

Udløs med skærmlæseren statusændringer uden at flytte fokus: »lagt i kurven«, antal varer i kurven, antal resultater ved søgning og filtrering, ændring af pris eller lagerstatus ved valg af variant, rabatkode anvendt, formular gemt og til sidst ordrebekræftelsen. Bestået: Hver af dem bliver læst op (live-område) uden at flytte fokus; kunden skal vide, at købet er gået igennem. Den automatiske kontrol vs-live-updates dækker kun produktsiden. Skærmlæser: Windows: NVDA (gratis, nvaccess.org) + Chrome. Mac: VoiceOver (Cmd+F5) + Safari.