Verktøykasse
advarsel
VIKTIG! Før du tar i bruk noen av verktøyene nedenfor, må du huske at sikkerhet og personvern SKAL ivaretas. Sørg derfor for at du tester på testmiljøer og lignende som har fiktiv testdata. En av grunnene til dette er at noen av utvidelsene til nettlesere KAN sende data til servere utenfor NAV.
Før- og etter-sider
W3C har laget noen før- og etter-sider. Sidene ser ganske like ut, men "før"-sidene har en rekke uu-feil, som er fikset i "etter"-sidene. Test gjerne verktøyene på disse sidene: https://www.w3.org/WAI/demos/bad/.
Tastatur
Det er svært viktig at alt fungerer bare med tastatur. Test dette jevnlig. WAI har laget en veileder om hvordan elementer bør oppføre seg når man bruker tastatur.
- Funkify - betalt versjon gir deg mulighet til å teste med kun tastaturnavigasjon.
Skjermlesere
-
Voice over - Gratis innebygd skjermleser på Mac og iPhone.
- Se video: Screen Reader Basics: VoiceOver -- A11ycasts #07
- Se video: Assistive Tech: VoiceOver on iOS
- Guide med shortcuts og mer info: Using VoiceOver to Evaluate Web Accessibility
-
JAWS - Den mest populære skjermleseren til Windows. Kan være kostbar. Standard-skjermleser til våre interne ansatte på jobb.
- Guide med shortcuts og mer info: Using JAWS to Evaluate Web Accessibility
-
NVDA - Populær og gratis skjermleser til Windows.
- Se video: Screen Reader Basics: NVDA -- A11ycasts #09
- Guide med shortcuts og mer info: Using NVDA to Evaluate Web Accessibility
- Download NVDA
-
TalkBack - Gratis skjermleser til Android.
- Se video: Assistive Tech: TalkBack
Kontrastforhold
- http://contrastchecker.com/ - her kan du legge inn fargekodene dine og få et konkret svar om kontrastforholdet er i tråd med WCAG-kravene. Du kan også se gråtoner som fargeblind (arkfaner øverst til høyre)
- https://webaim.org/resources/contrastchecker/
- http://accessible-colors.com/
- Funkify - gratis simulering av ulike typer fargeblindhet m.m.
Lese- og skrivevansker
- Dyslexia Formatter - gratis utvidelse til Chrome som gjør det enklere å tilegne seg informasjon og bruke nettbaserte tjenester for folk med dysleksi
- Funkify - gratis simulering av dysleksi m.m.
Parkinsons, ADHD og Synsnedsettelser
- Funkify - gratis simulering av skjelving, tåkesyn, tunnellsyn m.m. Betalt versjon gir flere simuleringer som ADHD og sollys på skjermen.
Automatisk testing
Vi anbefaler verktøyene SortSite, ARC Toolkit, Axe Tools (Deque) og SiteImprove for automatisk testing.
advarsel
Det er viktig å være klar over at automatisk testing vanligvis bare avdekker ~30% av feil, og at man helst bør kombinere disse med både brukertester og manuelle ekspertevalueringer i tillegg.
Automatisk analyse
- W3Cs kodevalidator - W3Cs verktøy for å teste om markup-en er valide (ikke direkte uu-tester, men sjekker om koden er i tråd med HTML-standarden, som er en viktig forutsetning for å møte uu-krav). Har blitt brukt i tilsyn.
-
Chrome DevTools - gratis sett med webutviklerverktøy som ligger integrert i Google Chrome-nettleseren. Kan hjelpe deg med å redigere/manipulere en hvilken som helst nettside/tjeneste og raskt diagnostisere problemer.
- Lighthouse (del av Chrome DevTools) - gir rask og detaljert analyse av nettsider med kriterier for ytelse, tilgjengelighet, progressive webapps, beste praksis, søkemotoroptimalisering for både mobile og desktop. Kan kjøres rett i Chrome DevTools, fra kommandolinjen, eller som en nodemodul
- Web Developer Toolbar (Chrome/Firefox) - gratis utvidelse med et hav av muligheter til å manipulere og validere nettsider.
- ARC Toolkit - gratis utvidelse til Chrome med rike verktøy for å teste opp mot WCAG 2.0, WCAG 2.1, EN 301 549, Section 508.
- Visual Aria - gratis utvidelse til Chrome som gir en visuell oversikt over ARIA-attributter som brukes på en nettside, inkludert live regioner, roller, nøsting og fokushåndtering.
- WAVE - gratis utvidelse til Chrome og Firefox som evaluerer tilgjengeligheten på nettsider og gir en veldig visuell tilbakemelding.
-
AXE Coconut - gratis utvidelse for Chrome
- SortSite - godt verktøy for validering av grensesnittkode opp mot W3C-standarder som WCAG 2.0/2.1, HTML5, CSS3, etc. Gir en god oversikt sammen med en god beskrivelse av hva som er feil, hvor feilen er og hvordan den kan fikses. Pris ca NOK 8000,- per lisens.
- SiteImprove - godt verktøy som gir deg en lettfattelig og god oversikt over problemer og forbedringsområder. Som f.eks. dårlig kodekvalitet og kvalitetsfeil som brutte lenker og stavefeil, kontrastforhold som er for dårlig, m.m. Verktøy tester opp mot W3Cs standarder som f.eks. HTML5 og WCAG 2.0/2.1 og man kan filtrere funnene på roller (utvikler, redaktør, etc). God beskrivelse for hva som er feil og hvordan det kan fikses. Har blitt brukt i tilsyn. Ønsker du tilgang? Kontakt UU-Teamet på Slack-kanalen #nav-uu.
- Total Validator Pro - dette var et av de bedre verktøyene til validering av kildekode og støtte for universell utforming. Pro-versjonen koster noen få hundrelapper, men er verdt pengene.
- Adobe Acrobat DC (PDF) - validering av PDF-skjema opp mot W3C standarder som WCAG 2.0/2.1 (Verktøy>Tilgjengelighet>Tilgjengelighetskontroll eller Full kontroll. NAV har lisenser på dette.
- Forslag til oppsett for UU-linting i NAV
- Vue ESLint - Static AST checker for accessibility rules on elements in .vue.
- JSX ESLint - Static AST checker for a11y rules on JSX elements.
- JSX TSLint - JSX a11y lint rules for TSLint.
- Angular Codelyzer - A set of tslint rules for static code analysis of Angular TypeScript projects.
Enhetstester
- Jest Axe - Custom Jest matcher for aXe for testing accessibility.
Ende-til-ende
- axe-core - Accessibility engine for automated Web UI testing https://www.deque.com/axe/
- Pa11y - Pa11y is your automated accessibility testing pal. It runs accessibility tests on your pages via the command line or Node.js, so you can automate your testing process.
Del gjerne flere tips og verktøy: uu@nav.no eller (NAV-intern) slack-kanal #nav-uu. Takk til Kristoffer Nordström for den flotte oversikten i hans artikkel på Kode24.no.