Universell utforming rapport
Rapporten fokuserer på universell utforming og brukervennlighet på Ygg & Lyng sin nettside, og tar for seg både automatisk og manuell testing.
Lenke til rapport: https://docs.google.com/document/d/1GoeRKrJfDMoHsfXANK9_JwWSpeQp-3XHjLNhlP8mjhM/edit?usp=sharing
Lenke til kode kodeeksempler: https://codepen.io/collection/gYyJRq
Rapportmal
For å sikre en effektiv, strukturert og oversiktlig rapport startet jeg med å lage en mal i Google Docs. Denne malen definerte grunnleggende elementer som font, skriftstørrelse, paginering og et banner element. Banneret ble designet for å hjelpe leseren å holde oversikt på hvilken seksjon av rapporten de ser på. Siden rapporten er vesentlig lang, følte jeg at dette ville være praktisk.
Manuell testing
Den manuelle testingen ble utført for å avdekke potensielle tilgjengelighets utfordringer på nettsiden. For å teste brukeropplevelsen til personer med synshemminger ble Windows Skjermleser og Android Talkback benyttet. Disse verktøyene leser nettsidens innhold, og avdekker dermed problemer knyttet til navigasjon, forståelse av innhold og bruk av interaktive elementer.
Helst skulle jeg brukt Jaws skjermleseren siden det er den mest populære skjermleseren på Windows, men dessverre må du kjøpe en lisens til programmet.
For å utføre en grundig analyse ble Firefox Inspiser Elementer foretrukket fremfor Chrome. Firefox tilbyr nemlig utvidet funksjonalitet for tilgjengelighetstesting. Verktøyet “Accessibility Inspector” tillater rask og effektiv måling av tekst kontrast, og gir en skala fra lavest til høyest kontrast på individuelle tekst elementer. I tillegg identifiserer Firefox potensielle tilgjengelighetsproblemer knyttet til HTML-elementer og deres attributter.
Automatisk testing
Etter den manuelle testen utførte jeg automatiske tester ved hjelp av ulike verktøy:
- Google Lighthouse: Et verktøy integrert i Chrome som evaluerer nettsider basert på ytelse, tilgjengelighet, beste praksis og SEO. Lighthouse genererer en rapport med konkrete forslag til forbedringer.
- HeadingsMap (Chrome-utvidelse): Visualiserer nettsidens overskriftsstruktur (h1-h6) i et hierarkisk tre, og avdekker dermed mangler eller feil i bruken av overskrifter, noe som er kritisk for navigasjon for brukere av skjermlesere.
- Siteimprove Accessibility Checker (Chrome-utvidelse): Skanner nettsiden for brudd på WCAG-retningslinjene, WAI-ARIA standardene og beste praksis. Deretter identifiserer den problemer og gir deg en liste med alle feilene på nettsiden.
- Wappalyzer (Chrome-utvidelse): Identifiserer teknologier som brukes på nettsiden, slik som CMS, programmeringsspråk, Javascript-bibliotek og plugins. Dette gir innsikt i potensielle årsaker til ytelsesproblemer og kompatibilitet utfordringer.
Dokumentasjon av funn
Under testingen ble alle identifiserte brudd på WCAG-retningslinjene nøye dokumentert i en separat seksjon. Hvert funn ble kort forklart, supplert med referanser til relevante WCAG-kriterier eller andre aktuelle ressurser.
Hvordan funn ble dokumentert kunne varierte ut fra hvor komplekst et problem var, men det som er felles mellom alle funnene var en kort forklaring, koblinger til ressurser som wcag eller law of ux, et mer utdypet forklaring og et løsningsforslag.
To av funnene var unntak hvor jeg lagde en full seksjon av nettsiden fra bunnen av. Dette var fordi disse problemene kan være veldig vanskelig å forstå hvis du bare leser om dem. I de tilfellene lagde jeg en codepen som viser disse nye seksjonene på en responsiv måte. Disse eksemplene kan bli funnet her https://codepen.io/collection/gYyJRq
Ut over WCAG-brudd ble også andre brukeropplevelse problemer registrert. Disse bestod av elementer som potensielt hindret brukervennlighet, men ikke nødvendigvis brøt WCAG. Disse funnene ble dokumentert separat for senere utdyping.
Utdyping av andre funn
Etter å ha fullført den manuelle og automatiske testen, gikk jeg i dybden på de andre funnene. Hvert problem ble dokumentert tilsvarende som wcag problemene, og det ble gitt konkrete forslag til forbedringer basert på prinsipper for universell utforming og brukervennlighet.
Oppsummering av rapporten
For å gi en kortfattet oversikt over de viktigste problemstillingene, skrev jeg en oppsummering. Denne seksjonen presenterte de mest kritiske funnene, samt en kort forklaring på hvorfor disse er problematiske for brukervennligheten og tilgjengeligheten.
Ressurser og referanser
Avslutningsvis inkluderte jeg en liste over alle ressurser og verktøy som ble benyttet under utarbeidelsen av rapporten. Dette omfattet lenker til automatiske og manuelle testverktøy, relevante WCAG-kriterier, lovverk knyttet til personvern, generelle ressurser for universell utforming og kodeeksempler.
Ved å følge denne strukturerte og kronologiske prosessen, sikret jeg en grundig og informativ tilsynsrapport som gir Ygg & Lyng et solid grunnlag for å forbedre nettsidens tilgjengelighet og brukeropplevelse.