Tjek semantisk information

Krav til interaktive elementers semantiske informationer navn, rolle og værdi.

Inden for webtilgængelighed refererer semantik til den korrekte og meningsfulde brug af strukturer og elementer til at præsentere indhold. I relation til HTML arbejdes der ofte med semantiske elementer og semantisk information. Standard HTML elementer kaldes semantiske elementer, eftersom de som udgangspunkt indeholder både indbygget funktionalitet og semantisk information.

I forhold til webtilgængelighed er den vigtigste semantiske information et elements navn, rolle og værdi. Navn, rolle og værdi er også ét af de mest fundamentale succeskriterier i WCAG, netop fordi det stiller krav om, at alle elementer der er interaktive eller kan få tastaturfokus skal have et navn samt kommunikere rolle og eventuelt værdi, hvis det er relevant. Interaktive eller fokusbare elementer kan for eksempel være knapper, inputfelter og links.

Se også videovejledningen ”Semantik” for at få information om krav vedrørende semantik.

Følgende sektioner beskriver tjeks, som kan udføres for at sikre, at alle elementer indeholder semantisk information, såsom navn, rolle og værdi.

Manuelle tjeks

WCAG succeskriterium: 4.1.2 Navn, rolle, værdi (AA)

Tjek

Kontrollér, at alle interaktive elementer har et tilgængeligt navn.

Om tjekket

”Navn” dækker over hvad et element kaldes, og omtales også som et elements tilgængelige navn. Navn skal ikke forveksles med etiket. En etiket er et altid synligt stykke tekst, typisk et enkelt ord eller to. Et elements navn er usynligt, men præsenteres for software såsom hjælpeteknologier, hvorimod en etiket er synlig for alle brugere. Vær opmærksom på, at betydningen af "name" i WCAG ikke er det samme som "name" i HTML-specifikationen.
Et elements navn er en værdi, der kan bestemmes af en række forskellige attributter.

For en simpel knap kan navnet bestemmes af den synlige etiket, fx ”Send”, og navn og etiket vil dermed være helt ens. Men hvis der er tilføjet et ARIA-label på knappen, fx ”Send email”, så vil det tilgængelige navn bestemmes af dette ARIA-label i stedet.

For at sikre at der er navne på alle interaktive eller fokuserbare elementer, kan følgende testmetoder anvendes ved hjælp af browserens Developer Tools.

En metode til at udføre testen involverer at højreklikke på det interaktive element, der skal inspiceres, i en af de følgende browsere:

  • I Chrome findes "Name" under "Hjælpefunktioner" og "Beregnede egenskaber".
  • I Edge findes "Name" under "Accessibility" og "Computed properties".

I Firefox findes "Name" under "Tilgængelighed" og egenskaber, men kan også tilgås ved at højreklikke på siden og vælge ”Inspicer tilgængelighedsegenskaber” Sørg for at kontrollere, om alle links og knapper har tilgængelige navne, som angivet ved ”Name”. Dette sikrer, at brugere kan forstå formålet med disse elementer og interagere meningsfuldt med dem.

WCAG succeskriterium: 4.1.2 Navn, rolle, værdi (AA)

Tjek

Kontrollér, at interaktive elementer har en korrekt rolle angivet.

Om tjekket

Et elements rolle indikerer typen og den forventede funktionalitet.

Roller kan være implicitte eller eksplicitte. Semantiske elementer har implicit en semantisk rolle. <button>-elementet har fx en implicit rolle som knap. Derudover kan man definere en eksplicit semantisk rolle for et element ved fx at tilknytte role=”button” til et <div>-element. <div>-elementer har i sig selv ingen semantisk rolle eller information, og kan kaldes en ”tom beholder”. Ved tilføjelsen af role=”button” vil fx en skærmlæser annoncere <div>-elementet som en knap for brugeren, men det vil ikke være muligt at betjene med tastatur, medmindre samme element også får tilknyttet en tabindex-attribut, og JavaScript anvendes til at opfange tastetryk og klik.

Eksplicitte roller er ofte brugbare, hvis man bygger brugerdefinerede elementer og komponenter, da disse ikke indeholder den indbyggede information og funktionalitet som standard HTML-elementer har.
Vær opmærksom på at eksplicitte roller kun tilføjer information og ikke funktionalitet.

En måde at tjekke at et element har en korrekt rolle er ved at højreklikke på det interaktive element, som skal inspiceres, og følge nedenstående instruktioner:

  • I Chrome findes "Rolle" under "Hjælpefunktioner" og "Beregnede egenskaber".
  • I Edge finds "Role" under "Accessibility" og "Computed properties".
  • I Firefox findes "Role" under "Tilgængelighed" og egenskaber, men kan også tilgås ved at højreklikke på siden og vælge ”Inspicer tilgængelighedsegenskaber.

WCAG succeskriterium: 4.1.2 Navn, rolle, værdi (AA)

Tjek

Kontrollér, at ethvert interaktivt element, der ændrer indhold ved aktivering eller valg, skal meddele de relevante tilstande og egenskaber.

Om tjekket

Nogle elementer kan have en værdi eller en status, fx om en radioknap er valgt eller ej. Denne information er vigtig at kommunikere til hjælpeteknologier. Standard semantiske elementer har allerede den nødvendige funktionalitet til at kommunikere denne information. Fx vil et standard HTML element med rollen ”checkbox” automatisk kommunikere, hvorvidt dens værdi er markeret med true eller false.

I følgende eksempel på tjek af et elements værdi benyttes Chrome Developer Tools. Det er værd at bemærke, at tilsvarende funktioner findes i andre browseres Developer Tools, selvom metoderne kan variere.

Først inspiceres det pågældende element med Chrome Developer Tools. Under fanen "Elementer" vælges "Hjælpefunktioner" og i afsnittet "Beregnede egenskaber" findes tilstande og egenskaber for det valgte element. Når elementet på siden aktiveres skal tilstanden eller værdierne ændres i Developer Tools.

Et eksempel kan være et tekstafsnit, der udvides eller kollapser i en accordion. I Chrome og Edge vil det være markeret med ”Udvidet: True” eller ”Udvidet: false” under ”Beregnede egenskaber” eller "aria-expanded: true" eller "aria-expanded: false" under ”Aria-attributter”. I Firefox vil dette være "expanded" eller "collapsed".

Undersøgelsen af ændringer i tilstand eller værdier ved hjælp af Developer Tools bidrager til at sikre, at elementets værdi kommunikeres korrekt til skærmlæserbrugere.

Semantisk information på native apps

For mobilapplikationer (native apps) er det typisk ikke muligt at få adgang til kildekoden på samme måde som for websider, hvor der er adgang til HTML, CSS og JavaScript. Det komplicerer processen med at teste elementers semantiske information på native apps.

For at teste semantik og sikre tilgængelighed i native apps, er det nødvendigt at anvende en skærmlæser. Under tjekket af en native app anvendes en skærmlæser til at identificere, hvordan skærmlæseren annoncerer elementernes navn, rolle og værdi.