Hvilket verktĂžy er best?

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

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

Bilder

Bokmerke til denne overskriften

Det verktÞyene tester pÄ bilde

Bokmerke til denne overskriften
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

Bokmerke til denne overskriften

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

Om bildene inneholder kompleks informasjon

Bokmerke til denne overskriften

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:

Bokmerke til denne overskriften
  • 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

Bokmerke til denne overskriften

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

Bokmerke til denne overskriften

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

Om alt-teksten er villedende

Bokmerke til denne overskriften

Krever manuell vurdering

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

Bokmerke til denne overskriften

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

Bokmerke til denne overskriften

Struktur

Bokmerke til denne overskriften

Det verktÞyene tester pÄ struktur

Bokmerke til denne overskriften
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

Bokmerke til denne overskriften
  • 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

Bokmerke til denne overskriften

Det verktÞyene tester pÄ farge og kontrast

Bokmerke til denne overskriften
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

Bokmerke til denne overskriften
  • 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

Bokmerke til denne overskriften
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

Bokmerke til denne overskriften
  • 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

Bokmerke til denne overskriften

Det verktÞyene tester pÄ lenker

Bokmerke til denne overskriften

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

Bokmerke til denne overskriften
  • 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

Bokmerke til denne overskriften

Det verktÞyene tester pÄ tabeller

Bokmerke til denne overskriften
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

Bokmerke til denne overskriften
  • 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

Bokmerke til denne overskriften

Det verktÞyene tester pÄ innhold

Bokmerke til denne overskriften
Automatisert test av innhold
Test SortSite ARCToolkit W3Cs kodesjekker Siteimprove (ikke testet enda) TECH 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

Bokmerke til denne overskriften
  • 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="..")
Bokmerke til denne overskriften

Det verktÞyene tester pÄ navigasjon

Bokmerke til denne overskriften
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

Bokmerke til denne overskriften
  • 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

Bokmerke til denne overskriften

Det verktÞyene tester pÄ skjema

Bokmerke til denne overskriften
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.32.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

Bokmerke til denne overskriften

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

Bokmerke til denne overskriften

Det verktÞyene tester pÄ sÞk

Bokmerke til denne overskriften
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

Bokmerke til denne overskriften
  • 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

Bokmerke til denne overskriften

Det verktÞyene tester pÄ forstÞrring

Bokmerke til denne overskriften

Ingen verktĂžy tester forstĂžrring automatisk

Det verktÞyene ikke tester pÄ forstÞrring

Bokmerke til denne overskriften
  • 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

Bokmerke til denne overskriften

kommer

Video og animasjoner

Bokmerke til denne overskriften

kommer

Lyd

Bokmerke til denne overskriften

Det verktÞyene tester pÄ lyd

Bokmerke til denne overskriften
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

Bokmerke til denne overskriften

kommer

Kode

Bokmerke til denne overskriften

Det verktÞyene tester pÄ kode

Bokmerke til denne overskriften
Automatisert test av kode
Test SortSite ARCToolkit W3Cs kodesjekker Siteimprove (ikke testet enda) TECH 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

Bokmerke til denne overskriften
  • 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. )