Hvilket verktøy er best?

Her skal vi legge ut en sammenlikning mellom hva som testes med SortSite, ARC toolkit og W3Cs kodesjekker.

Vi jobber med å gjøre siden fult tilgjengelig. Inntil videre finner du den fullstendige oversikten på NAV-intern Confluence-side.

Bilder

Det verktøyene tester på bilde

Automatisert test av bilder
Test	SortSite	ARC	W3C	Site-improve*	TECH	WCAG
Alt-teksten skal ikke være et filnavn, eller inneholder ord som picture, spacer, graphic, icon, iage, thumnail, spacer	✅	✅	❌	?	F30	1.1.1
AREA-elementer må ha et ALT-Attribute	✅	✅	✅	?	F65	1.1.1
IMG-elementer uten ALT-Attribute skal ikke ha Title eller ARIA-Label-Attributes	✅	✅	❌	?	F39	1.1.1
IMG-elementer må ha en ALT-Attribute	✅	✅	✅	?	F65	1.1.1
Input TYPE = IMAGE må ha et beskrivende ALT-Attribute	✅	✅	✅	?	F65	1.1.1
ALT-tekst skal ikke bruke ASCII ART (inkluderer Smileys)	✅	❌	❌	?	F65	1.1.1
BUTTON-elementer som bare inneholder en IMG skal ha et ALT-attribute for bildet	✅	❌	✅	?		1.1.1
Alt-teksten er lik lenketeksten. Dette fører til at skjermlesen leser opp samme teksten to ganger. Dette ønsker vi å unngå. Bruk Alt="" evt. annen teknikk.	✅	❌	❌	?	H2	1.1.1, 2.4.4, 2.4.9
Dekorasjonsbilder (og Spacer images) skal ikke alt-tekst. Dokumentasjonen sier at SortSite tester dette....	ℹ️	❌	❌	?	F39	1.1.1

* ikke testet enda

Det verktøyene ikke tester på bilder

Se gjerne vår veileder for manuell test på bilder.

Om bildene inneholder kompleks informasjon

For eksempel:

graf
tabeller
plakat med tekst

Denne typen bilder skal ha et mer utfyllende alternativtekst.

Teksten skal enten ligge på samme side eller man kan legge inn en lenke som tar deg til en side hvor man kan nå tekstbeskrivelsen.

Om bilder med lenker:

får tydelig fokusmarkering ved tastaturnavigasjon eller ved å føre muspekeren over bildet.
har en alt-tekst som beskriver siden du kommer til.
åpnes i en ny fane, vindu, program e.
Får du info om dette før du klikker på lenken?

Om bildene er dekorasjon eller meningsbærende

Vi får kun et hint om at et bilde kan være dekorasjon dersom vi tilfeldigvis har brukt følgende engelske ord i alt-tekste: picture, spacer, graphic, icon, thumnail eller spacer.

Om bildet inneholder tekst

Oppdager ikke bilde av tekst, og om alternativteksten gjengir innholdet i bildet på en god måte.

Om alt-teksten er villedende

Krever manuell vurdering

Om Aria-labelledby fungerer for alle brukerne våre.

I følge dokumentasjonen til SortSite fungerer ikke Aria-labelledby for alle skjermlesere.

Om Aria-describedby er blir brukt som et alternativ til alt-tag

Struktur

Det verktøyene tester på struktur

Automatisert test av struktur
Test	SortSite	ARCToolkit	W3Cs kodesjekker	Siteimprove (ikke testet enda)	TECH	WCAG
Sidetittel. Nettsiden har en >title< som beskriver den aktuelle sidens emne eller formål.	✅	❌	✅	?	H25	2.4.2
Line break (<br>) skal ikke benyttes for å formatere avsnitt (<p>)	❌	✅	❌	?
Språk. Siden mangler lang attribute . (lang=....)	✅	✅	✅	?		3.1.1
Kodefeil (markup errors) (MLT, Heading should not bee empty linje 10, p001)	✅	✅	❌	?		4.1.1

Det verktøyene ikke tester på struktur

Om sidetittelen gir relevant beskrivning av emne eller formål med siden (sk 2.4.2, tech G88 og F25)
Om sidetittelen inneholder tekst som "Untitled" eller filnavnet (WAVE)

Farger / kontrast

Det verktøyene tester på farge og kontrast

Automatisert test av farge og kontrast
Test	SortSite	ARCToolkit	W3Cs kodesjekker	Siteimprove (ikke testet enda)	TECH	WCAG
Tekst og bakgrunn har god nok kontrast.	❌	✅	❌	?		1.4.3
Tekst og bakgrunn har en kontrast på 7:1	❌	❌	❌	?	1.4.6 (AAA)
Alt-teksten skal ikke inneholder farger. Antagelse: SortSite sjekker kun engelske ord (f.eks red, blue..)	✅	❌	❌	?		1.1.1

Det verktøyene ikke sjekker på farge og kontrast

Om kontrasten mellom tekst og bakgrunn 7:1
Om alt-teksten inneholder farger
Om siden inneholder kun farger og fargekombinasjoner som er godkjent og del av designsystemet

Overskrifter

Automatisert test av overskrifter
Test	SortSite	ARCToolkit	W3Cs kodesjekker	Siteimprove (ikke testet enda)	TECH	WCAG
Finnes det tomme overskriftstagger på siden( <h></h>)?	✅	✅	✅	?		2.4.6
Har overskriftsnivåene korrekt rekkefølge?	❌	❌	❌	?		1.3.1 (AAA)
Overskrifter skal ikke inne holde andre overskrifter.	❌	❌	✅	?
Use HTML headings instead of applying CSS heading styles to non-headings.	✅	❌	❌	?	F2

Det verktøyene ikke tester på overskrifter

Om innholdet på siden organisert ved hjelp av overskrifter, og hvis hensiktsmessig underoverskrifter?
Om overskriften inngår i et visuelt overskriftshierarki og om den da er kodet med samme nivå som den visuelle overskriften
Om all tekst som ser ut som overskrifter, kodet med overskriftstag (<h*>) 1.3.1
Beskriver overskriftene innholdet? 2.4.6

(NB! Skjema og tabeller har også overskrifter/ledetekster. Disse må også evalueres)

Lenker

Det verktøyene tester på lenker

Hverken SortSite, ARCToolkit eller W3Cs kodesjekker tester lenker automatisk. Siteimprove har noen muligheter, vi oppdaterer når vi har testet Siteimprove nærmere.

Det verktøyene ikke tester på lenker

Om lenker er fremhevet med noe mer enn bare farge 1.4.1
Om brukeren forstår hva som skjer når du trykker på lenken
Om lenker er plassert i som f.eks et ord i en setning eller et avsnitt.
Om det kommer tydelig fram ut fra teksten, lenketeksten og lenkonteksten sammen, hva som er lenkens mål og funksjon (2.4.4.)
Om det interne lenker er brutt

Tabeller

Det verktøyene tester på tabeller

Automatisert test av tabeller
Test	SortSite	ARCToolkit	W3Cs kodesjekker	Siteimprove (ikke testet enda)	TECH	WCAG
Kompleks tabell. Krever manuell verifisering	✅ Sjekker for tabeller som har to eller flere nivåer med overskrifter og nested tables	✅ Sjekker for table nested in non-layout table	❌	?	F49	1.3.1
Layout-tabeller skal ikke ha SUMMARY eller CAPTION. En tabell som mangler th kan se ut som en layout-tabell.	✅	✅ Tabeller ska ikke kodes med både Role="presentation" og (<th>,<caption> eller <summary>). (Krever manuel verifisering)	❌	?	F46
Tabeller som mangler overskrifer (<th>) er mest sannsynligvis kodet feil. Vi bruker av prinsipp ikke layout-tabeller (role="presentation). (Krever manuel verifisering)	✅	✅	❌	?	F91
role='presentation' har blir brukt i en tabell med th. Vi skal som prinsipp aldri bruke role='presentation'. (Krever manuel verifisering)	✅	✅	❌	?	F92
HEADERS attributet referer til en table header ID som ikke eksiterer.	✅	❌	❌	?	F90
Using spaces to create columns results in screen readers reading columns in the wrong order	✅ Det ser ut som SortSite reagerer på pre og ascii	❌	❌	?	F33, F34, F48	1.3.1
	skal ikke ha scope="row" eller scope="column"	x	✅	❌	?

Det verktøyene ikke tester på tabeller

Om en tabell er lagt i et bilde
Om tabellen er en layout-tabell eller om den presenterer data.
Om rad / kolonneoverskriftene er beskrivende
Om overskriftene i tabellen er kodet korrekt. (Er det som ser ut som en overskrift kodet som en overskrift?)

Komplekse tabeller må undersøkes manuelt.

Innhold

Det verktøyene tester på innhold

Automatisert test av innhold
Test	SortSite	ARCToolkit	W3Cs kodesjekker	Siteimprove (ikke testet enda)	WCAG
Siden inneholder et LANG attribute.	✅	✅	✅	?	3.1.1
Er teksten på siden skrevet på et annet språk enn det som står i lang attributet? (må verifiseres).	❌	❌	✅	?
Sidens title skal ikke være tom.	❌	❌	✅	?	2.4.2
Innhold som er i et annet språk bør være i en SPAN eller DIV med et LANG attribute.	❌	❌	❌	?

Det verktøyene ikke tester på innhold

Om LANG Attributet inneholder en ugyldige språkkoder
Om teksten er lett å forstå
Om tekst er kodet som tekst
Om det er mulig å markere teksten (og om kontrasten mellom tekst og bakgrunn er god)
Om språket som er definert i koden med lang attribute er korrekt. 3.1.1
Om det finnes tekst på siden som er på et annet språk enn hovedspråket og om denne teksten har korrekt lang-tag (lang="..")

Navigasjon

Det verktøyene tester på navigasjon

Automatisert test av innhold
Test	SortSite	ARCToolkit	W3Cs kodesjekker	Siteimprove (ikke testet enda)	TECH	WCAG
Siden har en ulogisk tabulator rekkefølge.	✅	✅	?	?	F44	2.4.3

Det verktøyene ikke tester på navigasjon

Om løsningen har to av følgende måter å naviger: meny, søkefunksjon, a-å lenker over alt innhold, lenker mellom alle sider på nettstedet SK2.4.5 Teknikker: G125, G161, G63
Om meny, søk og nettstedskartet fungerer som det skal
Om det finnes en snarveislenke som lar brukeren navigere raskt til hovedinnholdet. Funksjonen skal være blant de 3 første tab-stegene) 2.4.1 - G1 og G123
Om snarveislenken fungerer

Skjema

Det verktøyene tester på skjema

Automatisert test av skjema
Test	SortSite	ARCToolkit	W3Cs kodesjekker	Siteimprove (ikke testet enda)	TECH	WCAG
All ONCLICK handlers should have an equivalent ONKEYPRESS handler.	✅	❌	❌	?	F54	2.1.1
All ONMOUSEDOWN handlers should have an equivalent ONKEYDOWN or ONCLICK handler.	✅	❌	❌	?	F54	2.1.1
All ONMOUSEUP handlers should have an equivalent ONKEYUP or ONCLICK handler.	✅	❌	❌	?	F54	2.1.1
SELECT lists cannot be operated from the keyboard if they have an ONCHANGE handler that performs navigation, because the handler fires as the user moves the selection up and down using the keyboard.	✅	❌	❌	?	F36	3.2.2
This form automatically submits when focus changes making it nearly impossible for disabled users to navigate via the keyboard.	✅	❌	❌	?	F36	3.2.2
This input control submits the form when the user tabs out of it.	✅	❌	❌	?	F9	3.2.5
Skjemafeltet mangler autocomplete (WCAG 2.1)	❌	✅	❌	?	F65	1.1.1
IMG-elementer uten ALT-Attribute skal ikke ha Title eller ARIA-Label-Attributes	✅	✅	❌	?
Er labelelementet koblet korrekt med skjemafeltet?	❌	✅	❌	?		1.3.1
multipleLabellingTechniquesUse	❌	✅	❌	?
placeholderDoesNotMatchLabel	❌	✅	❌	?
inputNoAccessibleNameUseAlt	❌	✅	❌	?
noButtonText	❌	✅	❌	?
FIELDSET element blir brukt til å gi tekst en ramme. (SortSite sjekker at input ikke er definert med border-witdth: i CSS	✅	❌	❌	?		1.1.1
Det er kun brukt Placeholder	❌	✅ ARC Toolkit sjekker om placeholder brukes uten at det finnes en label.	❌	?
Alle FIELDSET skal ha LEGEND som føste element, som gir en label eller beskrivelse av gruppen med elementer.	✅	✅	❌	?	H71	1.3.1, 3.3.2
BUTTON elements containing only an IMG must hav an ALT attribute.	✅	❌	❌	?	H65	1.1.1
Label elements should be attached to the controls they label.	✅ (sjekker "orphanedLabelNoMatching IDAttribute", "emptyLabelText"	✅ (sjekker om det finnes label elementer uten innhold og om label med innhold er koblet til inputfeltet med for=)	❌	?		4.1.2
ONKEY handlers on static elements like DIV and SPAN cannot be triggered unless TABINDEX is set.	✅	❌	❌	?		2.1.1
The ARIA-LABELLEDBY attribute references a non-existent element ID	✅	✅	❌	?		4.1.2
This field removes focus when tabbed to making it impossible for disabled users to navigate this form via keyboard	❌	❌	❌	?		2.1.1, 2.1.3 2.4.7, 3.2.1
This form control has no programmatically determined name	✅ (Det er ikke sjekket grundig om SortSite identifiserer nøyaktig samme feil på p004)	✅	❌	?	F68	4.1.2
Form field labels should be unique on a page, or enclosed in a FIELDSET with a LEGEND that makes the label unique	✅	❌	❌	?		2.4.6
Radio buttons with very generic labels need to be enclosed in FIELDSET with LEGEND explaining the label	✅	❌	❌	?		2.4.6
Text-based form controls with absolute font sizes do not resize correctly	❌	❌	❌	?		1.4.4
Do not popup windows as users enter text into input fields	❌	❌	❌	?		3.2.5 (AAA)
The aria-labelledby attribute must point to an element in the same document.	✅	❌ ( invalid aria-labelledby id (Ensure that the id values refer to a valid element)	❌	?		1.3.1

Det verktøyene ikke tester på skjema

Notat: Det er litt uklart hva som testes og ikke testes. Det er noe repeterende info. Denne tabellen trenger bearbeidelse (p004)

Om label beskriver formålet med skjemafeltet 2.4.6
Når et skjemaelement får fokus: Skjer det en kontekstendring?3.2.1
Ved utfyllelse av skjema: Skjer det en automatisk konmtekstendring? (unntak: ok, dersom brukeren blir varslet om det før bruk av komponenten) 3.2.2
Hvis en inndatafeil blir oppdaget automatisk. Får brukeren en tekstlig beskrivelse av feilen og hvor feilen oppstår? 3.3.1
Hvis skjemafeltet krever spesielt format: Er formatete spesifisert?3.3.2
Hvis bruker fyller ut skjemaet feil: Får brukeren en feilmelding med konkrete forslag til øsning? 3.3.3
Får brukerne mulighet til å bekrefte, kontrollere og/eller endre sine data iskjema med viktige formål? 3.3.4
Fungerer tastaturnavigasjonen slik den skal på skjemaelementene? Bl.a:
- Tekstfelt
- Radioknapper
- Nedtrekklister
- Knapper
- Datovelger
Får alle skjema elementet synlig fokus? Husk å test datovelgeren, modalvindu og nedtrekkslister
Fungerer skemaelemntet som de skal
Nav ønsker ikke å å bruke inaktive knapper/funksjoner. SaaS testser ikke om denne typen funksjoner har blitt brukt.

Søk

Det verktøyene tester på søk

Automatisert test av søk
Test	SortSite	ARCToolkit	W3Cs kodesjekker	Siteimprove (ikke testet enda)	TECH	WCAG
Er labelelementet koblet korrekt med skjemafeltet?	❌	✅	❌	?		1.3.1
noButtonText	❌	✅	❌	?

Det verktøyene ikke tester på søk

Om løsningen har minst to av følgende: meny, søkefunksjon, a-å lenker over allt innhold, lenker mellom alle sider på nettstedet. 2.4.5
Om søkefeltet fungerer og at det gir brukerne en effektiv måte finne innholdet de er på jakt etter

Forstørring

Det verktøyene tester på forstørring

Ingen verktøy tester forstørring automatisk

Det verktøyene ikke tester på forstørring

Om bukerne får tilgang til alt innhold og alle funksjoner dersom man forstørrer siden til 200/400%
Om brukerne får tilgang til alle funksjoner med kun bruk av tastatur, dersom siden forstørres til 200/400%
Om løsningen er tilpasset forskjellige skjermstørrelser (responsiv design) slik at den fungerer tilnærmet likt på . mobil,nettbrett og laptop.

Lister

kommer

Video og animasjoner

kommer

Lyd

Det verktøyene tester på lyd

Automatisert test av lyd
Test	SortSite	ARCToolkit	W3Cs kodesjekker	Siteimprove (ikke testet enda)	TECH	WCAG
Om lyd spilles lengre enn 3 sekunder, og om det mangler en måte å slå av lyden 1.4.2	✅	❌	❌	?	F23	1.4.2

Det verktøyene ikke tester på lyd

kommer

Kode

Det verktøyene tester på kode

Automatisert test av kode
Test	SortSite	ARCToolkit	W3Cs kodesjekker	Siteimprove (ikke testet enda)	WCAG
Duplikate ID'er. ID'er har blitt brukt flere ganger på siden	❌	✅	❌	?
Elementer mangler ID'er	❌	⚠️ An ID used for a label or by an ARIA attribute does not exist. Add missing ID. Eksemplet/testen identifiserte et IMG element med aria-labelled by. IMG elementer uten ALT Attribute skal ikke ha Title eller ARIA Label Attributes	❌	?	1.3.1
The aria-labelledby attribute must point to an element in the same document.	✅	❌ (invalid aria-labelledby id (Ensure that the id values refer to a valid element)	✅	?	1.3.1

Det verktøyene ikke tester på kode

Om det er riktig å bruke ID.. Eks: IMG elementer uten ALT Attributes skal ikke ha title eller ARIA Label eller Aria Label Attributes.ARC Toolkit gir beskjed om at Elementet mangler ID. I dette tilfellet blir det feil å legge til ID, siden feilen er noe annet.
OM ARIA-LABELLEDBY referer til en ID til et element som ikke eksisterer (Det er mulig at WAVE tester dette. )