Webtilgængelighed med Accessibility Checker fra Equalize Digital

Accessibility Checker til WordPress identificerer og rådgiver om hvordan man løser problemer med webtilgængelighed jf. WCAG succes-kriterierne.

Tjek webtilgængelighed i blok-editoren

Med Accessibility Checker plugin’et til WordPress, kan du tjekke dit indhold for problemer med webtilgængelighed direkte i blok-editoren og rette fejlene mens du laver dem. Accessibility Checker er mig bekendt det eneste plugin til WordPress der tilbyder den mulighed.

Der er en gratis udgave af Accessibility Checker til rådighed på WordPress.org. Den er velegnet til mindre websites med få sider eller artikler. Min blog her, er et godt eksempel på et WordPress website har gavn af den gratis version.

Til lidt større sites, hvor vi gerne vil tjekke hele websitet på en gang, på websites med WooCommerce, eller websites med roller som redaktører og forfattere, er Accessibility Checker Pro et bedre valg.

Accessibility Checker Pro includes full site scanning, scanning of custom post types, admin columns so you can quickly see accessibility status at a glance, centralized lists of all open issues and items ignored, and more.

Screenshots & Features – Equalize Digital

Begrænsninger ved automatiske tests

Omkring en tredjedel af fejl ved webtilgængelighed kan identificeres med automatiske tests. En fejl kunne være et social media logo med et link, men uden link-tekst. Hvor normal seende visuelt kan se forskel på et facebook og et linkedin-logo, er en skærmlæser afhængig af at der er en link-tekst.

En manglende link-tekst kan fanges i en automatisk tests.

Manuel kontrol er nødvendig for at afsløre andre problemer med webtilgængelighed. At en link-tekst er til stede, er et vigtigt skridt, men hvis link-teksten ikke er beskrivende er den værdiløs. Tænk på hvad klik her eller IMG1234.JPG fortæller dig. Ikke meget, vel?

Identificér indlæg med problemer

Efter et full-site scan i Accessibility Checker Pro, vises antal fejl ud for hvert indlæg. Visningen her er tilpasset mine præferencer med Admin Columns.

Der er tilsyneladende en fejl i mit blogindlæg Styrk sikkerheden i WP med HTTP Security Headers. Lad os undersøge hvad det kan være.

Min hjemmesides liste over indlæg, viser antallet af fejl i hvert indlæg. Fremhævet er tre indlæg med én fejl. Resten af indlæggene ser fine ud.
Visning af alle indlæg med antallet af potentielle fejl i hvert indlæg.

Fejl og advarsler for det aktuelle indlæg

Detaljer om fejl i indlæget vises nederst i blok-editoren. Listen opdateres hver gang jeg trykker gem. I min artikel har jeg en Missing Transcript fejl. HTML koden der udløser fejlen vises, og det er ofte tilstrækkelig information for mig til at udbedre fejlen. Er jeg i tvivl, klikker jeg på View on page

Accessibility Checkers indikation af et manglende transcript-problem, med links til mere information og handlinger som vis på side og ignorer.
Alle fundne problemer er listet med de mest alvorlige først, links til mere information og kontekst.

Se fejl fremhævet i kontekst på front-end

Og her skinner Accessibility Checker virkelig. På front-enden tegnes en pink stiplet ramme om det problematiske element. En beskrivelse af fejlen vises nederst til højre. Herfra linkes der til Equalize Digitals udførlige artikler om webtilgængelighed og løsningsforslag. Optræder der flere fejl i indlægget, kan jeg bladre frem og tilbage.

Visning af potentielt problem. En videoen uden transkription bliver indrammet med en stiplet pink kant, og i nederste højre hjørne er der en grundig beskrivelse af fejlen Missing Transcript.
Potentielle fejl, her et “Missing Transcript”, vises og forklares på front-end.

Equalize Digitals eksemplariske dokumentation

Fejl og advarsler er beskrevet i Accessibility Checkers dokumentation – en guldgrube af gennemarbejdede, konkrete løsningsforslag og referencer til relevante WCAG succeskriterier.

Jeg har delt artikler med plugin- og temaudviklere mange gange. Når vi i fællesskab identificer og retter fejl i et plugin eller tema, forbedrer vi tilgængeligheden på tusindvis af hjemmesider. Det er ret fantastisk.

Screenshot fra Equalize Digital, der viser anbefalingerne til, hvordan man løser problemet med manglende transskribering.
Equalize Digital leverer omfattende dokumentation og løsninger på tilgængelighedsproblemer.

Falsk alarm? Ignorér fejlen med en kommentar

Videoen herunder, en konverteret GIF, er en kulturel reference til tyveknægtene fra Olsen Banden og udtrykket “Skidegodt, Egon”. Videoen har ingen transskribering – en tekst der beskriver et eventuelt lydspor i tekstform.

Olsen Banden bryder ind i Det Kongelige Teager – Benny siger “Skidegodt, Egon”

Eftersom at videoen ikke har betydning for forståelsen af artiklen, og lydsporet er ikke eksisterende, vælger jeg at ignorere fejlen om manglende transskribering med en kommentar om hvorfor.

Et problem med "manglende transskription" er fremhævet på en video, men videoen er uden lyd, så problemet er markeret som ignoreret.
Ignorerer potentielt problem med manglende transskribering på video uden lyd.

Overblik over samtlige fejl på sitet

Fejl i globale elementer som header, navigation og footer, håndteres lettest fra Accessibility Checkers dashboard. Dette er en Pro-feature. Her igangsætter man en ny skanning – på mit site tog det cirka et minut – og får et overblik over hvor slemt det står til.

Testoversigten, der vises efter den fulde test, viser, at 85% af testene bestod, og at der var 2 unikke fejl og 21 unikke advarsler at tage sig af.
Fuld test af webstedet viser antallet af unikke fejl og advarsler med link til alle åbne problemer.

Bemærk også annonceringen af de tilbagevendende Equalize Digital meetups om webtilgængelighed. De er gratis at deltage i og meget lærerige.

Håndtér de mest udbredte fejl med Fast Track

Jeg vælger View All Open Issues, og får 5 forskellige advarsler på mit website. Det mest udbredte potentielle problem er en ARIA Hidden attribute på visse grafiske elementer. Dette optræder i alt 315 steder på mit website. Hmm 🤔

Accessibility Checkers Open Issues viser lister over alle problemer, sorteret efter det højeste antal først. I mit tilfælde er det ARIA Hidden-attributten, som er til stede 315 gange på hele sitet.
Alle åbne tilgængelighedsproblemer sorteret efter type.

Liste over fejl med omgivende HTML

Med Fast Track funktionen forholder jeg mig til potentielle fejl der gentages på flere sider. I eksemplet herunder bliver jeg opmærksom på at et WordPress logo er skjult for skærmlæsere med aria-hidden. Det “issue” ignorer jeg globalt, altså for alle de 27 sider hvorpå logoet optræder. Hvorfor? Læs videre.

Accessibility Checkers Fast Track-visning viser mig blandt andet, at det sociale ikon for WordPress.org har attributten aria-hidden. Jeg kan vælge at ignorere det problem globalt.
Det sociale ikon til WordPress har ARIA hidden-attribute, hvilket er OK i dette tilfælde.

Manuel kontrol af funktionalitet

Det er her det manuelle eftersyn bliver nødvendigt. En grafik vil typiske være beskrevet med en alt-tekst. Men i dette tilfælde, er grafikken et WordPress ikon, og linket der omgiver ikonet, er korrekt beskrevet med en aria-label.

Slår jeg min skærmlæser til, og tabulerer gennem de forskellige social media ikoner, annonceres linket som forventet som tale, og med en tydelig focus-outline uden om ikonet.

Så Accessibility Checker hjælper mig, med at identificerer indhold eller funktionalitet som kan have et problem med webtilgængelighed, men det er op til mig at bekræfte om det faktisk er tilfældet.

Jeg tabber gennem de sociale ikonlinks med min skærmlæser tændt og min browsers inspektionsværktøj åbent. Den relevante label for WordPress-ikonet er til stede i linket.
Når man tabber gennem sociale ikoner med en skærmlæser, annonceres destinationen korrekt

Opsummering og konklusion

Der er mange gode værktøjer i kassen når vi taler webtilgængelighed, og det er en god ting. Vi har selvfølgelig brug for forskellige værktøjer til de forskellige roller der indgår i at publicere på internettet.

Accessibility Checker hjælper med at identificere, og rådgiver om hvordan man løser, problemer med webtilgængelighed. Den gratis udgave er fuldt funktionsdygtig og velegnet til mindre blogs eller brochure-sites. Til større eller avancerede websites er pro-udgaven et oplagt valg.

En “perfect score” I Accessibility Checker er ingen garanti for at mit site er webtilgængeligt – men – at have en hjælpende hånd under selve redigeringen af indhold er værdifuldt. Det får mig til at stoppe op og tænke mig om en ekstra gang; jeg er mere omhyggelig.

Omhyggelighed har vi alle glæde af, uanset hvordan vi benytter internettet.

Read more about Bjarne Oldrup, Sønderborg

Bjarne Oldrup

Bjarne er webudvikler med en stor forkærlighed for det bæredygtige, inkluderende og respektfulde internet.

Med en baggrund som datatekniker i 1992, har han arbejdet som programmør, sysadmin og netværksspecialist. I dag fokuserer han på hjemmesiders klimaaftryk, webtilgængelighed og GDPR-compliance.

WordPress, HTML, CSS og LiteSpeed webservere er Bjarnes foretrukne redskaber, og open source-fællesskabet hans komfortzone.

Bjarne bor i Sønderborg i et lille hus med en vild have og en doven kat.

Efterlad et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *