Skjermbilde av uu.difi.no som viser to illustrasjoner.

Vurdering av uu.difi.no

Difi har definert hvilke kriterier innen universell utforming norske nettsteder må følge for å være i henhold til regelverket. Jeg har sjekket hvordan Difi selv ligger ann.

Jeg har tatt utgangspunkt i sjekklisten fra Wuhcag. Denne forklarer WCAG bedre enn W3C selv, og har gode eksempler.

Hensikten med denne artikkelen er ikke å henge ut Difi. De gjør en god og viktig jobb. Og hvem er jeg til å kritisere? Universell utforming på nett er ikke sort-hvitt. Mine vurderinger og kommentarer kan være feilaktige. Jeg håper at saken viser at vi alle gjør feil og at vi alle kan lære noe nytt om uu.

Konklusjon

Av de 35 kriteriene som Difi sier at vi skal innfri, bommer de selv på ti. La meg ta deg gjennom hele listen.

1.1.1 Ikke-tekstlig innhold

For å sjekke de alternative tekstene på bilder åpner jeg Chrome-utvidelsen Web Developer. Under Images finner jeg valget Display Alt Attributes. Dette viser merkelapper på alle bilder. Hos Difi er de fleste merkelappene kun røde, små streker uten innhold. Dette tyder på bildene mangler alt-tekst. Kan virkelig Difi ha snublet på det første og mest elementære kriteriet?

Små streker tyder på at Difi har tomme alt-tekster.
Små streker tyder på at Difi har tomme alt-tekster.

Her er det noe som skurrer, så jeg åpner kildekoden og søker etter «<img». Null treff. Inneholder ikke siden Løsningsforslag for web noen bilder? Logoen er satt inn som et bakgrunnsbilde. Det er ikke mulig å sette inn alternative tekster på bakgrunnsbilder. I dette tilfellet skjønner jeg ikke hvorfor Difi har valgt å bruke bakgrunnsbilde. For brukere med bildevisning avskrudd vil logoen ikke vises. Chrome på Android kommer med en modus for å spare datatrafikk som blant annet fjerner bilder.

Forsiden inneholder to bilder. Det første er en illustrasjon som viser ulike personer. Illustrasjonen står i sammenheng til teksten «Enklare digital kvardag for alle». Dette en en god illustrasjon fordi den gjør et poeng av at universell utforming ikke kun handler om å utforme for mennesker med permanente funksjonshemninger. Det handler òg om midlertidige funksjonshemninger som en brukken arm eller dårlig syn som følge av skarpt sollys. Illustrasjonen mangler en påkrevd alt-tekst. Her ville jeg skrevet inn teksten «Universell utforming er for alle, for eksempel rullestolbrukere, innvandrere, barn, de med brukken arm, mobilbrukere og eldre.». Ikke godkjent.

Skjermbilde av uu.difi.no som viser to illustrasjoner.
Difi har brukt to bildefiler på forsiden av uu.difi.no

Det andre bildet på forsiden viser fire ikoner. En hånd, en høyttaler, en hjerne og et øye. Dette illustrerer fire typer funksjonsnedsettelser. Ikonene står i sammenheng med teksten «Finn løsningsforslag for web». I dette eksempelet har Difi en tom alt-tekst. Her er jeg enig. Det gir ingen merverdi å legge inn en tekst om hva ikonene viser eller hva de betyr. For eksempel at hånden betyr nedsatt førlighet.

1.2.1 Bare lyd og bare video (forhåndsinnspilt)

Etter å ha gjennomgått en god mengde sider og videoer, finner jeg ingen innholdselementer som består av kun lyd eller kun video. Eksempler på dette kunne vært podcaster eller animasjoner. Jeg fant riktignok videoer som inneholdt lyd i form av bakgrunnsmusikk, som denne:

Hensikten med kriterie 1.2.1 er at synshemmede skal kunne få ut informasjon av filmer, eller at hørselshemmede skal kunne lese lydfiler. Bakgrunnslyden i eksempelet er kun der for å sette en stemningen, ikke for å formidle informasjon slik en fortellerstemme vil gjøre. I et uu-perspektiv vil derfor videoer av denne typen være likestilt med en film helt uten lyd.

Videoen skal ha et alternativ i form av tekst- eller lyd. Det har den ikke. Verken på Vimeo eller på Difis side om Innovasjonsprisen 2016. Besøkende med synsnedsettelser har derfor ingen mulighet å få vite at søknadsfristen er 1. mars.

Løsningen er enkel. Vimeo har et godt verktøy for å lage undertekster på videoer. Et eksempel på en film jeg har tekstet er denne demofilmen for Lyses energioversikt for bedrifter. Tekstede filmer får et CC-ikon på linjen med lydstyrke og bildekvalitet.

1.2.2 Teksting (forhåndsinnspilt)

Difi sin kanal på Vimeo har mange videoer uten teksting. Her er et eksempel:

På Youtube er de flinkere:

1.3.1 Informasjon og relasjoner

Difi skriver at dette kort fortalt betyr ting skal være kodet som det ser ut som. Denne setningen sier ikke meg så mye. For meg handler dette om at HTML-koden skal være skrevet semantisk, det vil si at de riktige taggene brukes for å markere innhold. Et eksempel på dette er sitatet i første setning i dette avsnittet. Her har jeg brukt taggen <q> for å si at dette er et sitat, og attributtet cite for å si hvor jeg har hentet det fra. Andre eksempler er å bruke h-tagger i ulike nivå for å markere overskrifter, skrive feilfri HTML og bruke etiketter på alle skjemafelter.

To advarsler og én feil i HTML-koden på difi.no.
Feil i HTML-koden på uu.difi.no

Det første jeg gjør er å sjekke om HTML-koden inneholder feil. Dette gjør jeg med en validator. På forsiden finner validatoren én feil og to advarsler. Nettsteder har vanligvis mye mer feil enn dette, så her har koderne til Difi gjort en god jobb. Den ene feilen går på en illustrasjon som mangler alt-tekst.

Den første advarselen er at Difi bruker h1-taggen to ganger. Dette er ikke nødvendigvis feil, men i dette eksempelet vil jeg si at det er feil. Første h1 er uu.difi.no og andre h1 er Enklare digital kvardag for alle. Jeg ser ingen grunn til å skrive nettadressen uu.difi.no her. Det er godt mulig Difi har noen gode argumenter her.

Andre advarsel er at det brukes en <section>-tagg som ikke inneholder en overskrift. I følge HTML5 Doctor er dette en vanlig tabbe.

1.3.2 Meningsfylt rekkefølge

Jeg tar tre tilfeldige undersider og tabber meg gjennom dem for å se at fokuset flytter seg i en logisk rekkefølge. Deretter skrur jeg av CSS for å sjekke at innholdet gir mening i den rekkefølgen det da presenteres.

Dette er som det skal. Jeg finner ikke noe å utsette.

Skjermbilde som vises uten CSS.
Slik ser nettsiden ut uten CSS.

1.3.3 Sensoriske egenskaper

Jeg tar noen stikkprøver. Finner ingen bruk av «sensoriske egenskaper». Difi bruker ikke instruksjoner med lyd, ei heller instruksjoner som bruker farge, plassering eller form.

1.4.1 Bruk av farge

Heller ikke her har jeg funnet noe feil i mine stikkprøver. Ingen instruksjoner eller annen informasjon krever fargesyn.

1.4.2 Styring av lyd

Har ikke funnet bruk av lyd som starter automatisk.

1.4.3 Kontrast

På siden Kvifor universell utforming av IKT? finner jeg en illustrasjon som ikke tilfredsstiller minimumskravet til kontrast.

Skjermbilde av en illustrasjon på difi.no som ikke har god nok fargekontrast.
Illustrasjon med tekst som ikke har god nok kontrast.

De hvite ordene «endre» og «styrke» står på piler med bakgrunnsfarge RGB 92,192,54. Dette gir en kontrastverdi på 2,3 som ikke tilfredsstiller minstekravet på 4,5. Kravet gjelder også bilder og illustrasjoner, ikke kun ren tekst.

1.4.4 Endring av tekststørrelse

Vanligvis bruker jeg nettleseren Chrome, men for å sjekke endring av kun tekststørrelse velger jeg Safari. I Vis-menyen velger jeg «Zoom kun tekst» og deretter «Zoom inn» fire ganger. Navigasjon og hovedinnhold er godt lesbart. Jeg finner likevel eksempler på tekst som overlapper og blir uleselig.

Skjermbilde som viser at tekst overlapper når den er forstørret 200 %.
Noe tekst overlapper med 200 % tekstforstørrelse.

Innholdet i seksjonen «Lær mer om kravet hos W3C» overlapper med 200 % tekstforstørrelse. Deler av teksten forsvinner. Dette tilfredsstiller ikke kravet.

1.4.5 Bilder av tekst

I sine løsningsforslag for web bruker Difi mange illustrasjoner med bilder av tekst. Noen er i en gråsone for hva som er akseptabelt, men jeg finner eksempler på bilder som enkelt kunne vært presentert med ren kode.

Skjermbilde fra Difi som viser to illustrasjoner som burde vært ren tekst.
Eksempel fra Difi som inneholder to bildefiler som heller kunne vært ren tekst.

Ettersom jeg selv her presenterer skjermbilder med ren tekst, skyter jeg meg selv i foten. Jeg velger likevel å bruke skjermbilder for å vise et identiske eksempler som Difi.

2.1.1 Tastatur

Jeg «tabber» sider og lenker. Jeg prøver skjemaer og starter filmer. Alt ved hjelp av tastaturet. Finner ingen feil i mine stikkprøver.

2.1.2 Ingen tastaturfelle

Finner ingen tastaturfeller i mine stikkprøver.

2.2.1 Justerbar hastighet

Jeg har ikke funnet noen tidsbegrensninger på sidene.

2.2.2 Pause, stopp, skjul

Jeg finner ingen eksempler på innhold som beveger seg uten at bruker setter det i gang.

2.3.1 Terskelverdi på maksimalt tre glimt

Jeg finner ingen eksempler på innhold som glimter. Difi bruker riktignok videoer, men de er rolige og uten hyppig blinking.

2.4.1 Hoppe over blokker

Dette er godt ivaretatt. Når jeg «tabber» meg gjennom navigasjonen vises lenken «Hopp til hovedinnhold». Difi har et eget løsningforslag for snarveier og hurtigkommandoer.

Skjermbilde fra difi.no som viser lenken Hopp til hovedinnhold for tastaturbrukere.
Lenken «Hopp til hovedinnhold» brukes av blant annet tastaturbrukere.

2.4.2 Sidetitler

Difi bruker nyttige og tydelige sidetitler. Har ikke funnet noe å utsette her.

2.4.3 Fokusrekkefølge

Fungerer bra. En liten kommentar er at jeg ville hatt fokus på lenken «Til toppen» før bunnteksten. Denne lenken er nå den siste lenken på alle sider. Her er jeg åpen for diskusjon.

2.4.4 Formål med lenke

De lenkene jeg har sett på har meningsfulle lenketekster. Ingenting å utsette.

2.4.5 Flere måter

Difi tilbyr både navigasjon og søk. De kunne i tillegg hatt sidekart, men det er ikke et krav å ha tre veier til Rom.

2.4.6 Overskrifter og ledetekster

Veldig bra. Difi har god kontroll på overskrifter og ledetekstene.

2.4.7 Synlig fokus

Alle lenker har synlig fokus. Tydeligheten varierer. Hovednavigasjonen endrer bakgrunnsfarge, og får veldig tydelig fokus. Lenkede overskrifter får kun nettleserens standardfokus som ikke er like tydelig. Ikonet av et forstørrelsesglasset i søkefeltet får en blassere farge ved fokus, og er dermed mindre tydelig. Difi er i henhold til kravet, men den visuelle fremstillingen av fokus kunne vært mer konsistent.

Skjermbilde fra Difi som viser at hovednavigasjonen får tydelig fokus med egen bakgrunnsfarge.
Lenken «Krav og regelverk» har tydelig fokus.

3.1.1 Språk på siden

Alle sider har angitt språkkoden nb. Det gjelder også sidene som er skrevet på nynorsk, for eksempel Kva seier forskrifta? Her skulle språkkoden vært nn slik Difi selv skriver i sitt løsningsforslag Språk i koden.

3.1.2 Språk på deler av innhold

Her synder de fleste, også Difi. På sin personvernerklæring skriver de om cookies. Dette er et engelsk ord som Difi ikke har markert som engelsk. Jeg skal innrømme at dette er flisespikkeri. Hensikten med kriteriet er at man skal markere språkendring på større deler enn enkle ord og begreper.

Dersom jeg gjør et søk etter sidekart kommer jeg til et søkeresultat uten treff. Her er alle løsningsforslagene skrevet på engelsk, og skal derfor markeres som engelsk. Det er det ikke. Det er selvfølgelig ikke meningen å presentere engelsk tekst her. Det er nok bare en feil eller forglemmelse.

Den engelske siden er markert som engelsk, men den inneholdet mye norsk, blant annet all navigasjon. Denne skulle vært markert som norsk.

Skjermbilde fra Difi som viser engelsk tekst når man gjør et søk uten treff.
Søkeresultatet har engelske løsningsforslag.

3.2.1 Fokus

Jeg har ikke funnet tilfeller der det skjer store endringer på en side når et element kommer i fokus.

3.2.2 Inndata

Jeg har heller ikke funnet tilfeller der endringer av skjemafelt medfører store endringer på en side.

3.2.3 Konsekvent navigering

Ingenting å utsette. Navigasjonen holder seg lik på tvers av sider.

3.3.1 Identifikasjon av feil

Felter i et skjema som fylles ut feil eller som ikke fylles ut, får feilmelding. Innskrivningsfeltene blir markert med rød kantlinje. Dette tilfredsstiller kriteriet. Jeg ser likevel litt forbedringspotensiale:

  • Feilmeldingene kan skrives og uten bruk av det unødvendig tunge ordet «obligatorisk». For eksempel «Feltet Navn kan ikke stå tomt.»
  • Feilmeldingene bør gjentas i nærhet av feltet som de gjelder.
  • Feilmeldingene bør lenkes til de respektive feltene.
  • Kontrasten på feilmeldingene er ikke god nok. Kun 4,4.
Skjermbilde fra Difis blogg som viser feilmeldinger når kommentarfeltet ikke er fyllt ut riktig.
Difi viser hvilke felt i skjemaet som feiler, og forklarer hvorfor.

3.3.2 Ledetekster eller instruksjoner

De få skjemaene jeg har funnet er ikke kompliserte, og krever et minimum av ledetekster og instruksjoner. Kriteriet er innfridd. Har likevel en kommentar. Påkrevde felter er markert med en rød (for de som kan se farger) stjerne. Stjernen har en tittel som sier «Dette feltet er obligatorisk.». Bra, men jeg savner bruk av aria-required. For å være ekstra tydelig ville jeg også skrevet i starten av skjemaet, «Felter som må fylles ut er merket med *». Selv en så velkjent konvensjon kan skape problemer for brukere med kognitive utfordringer.

3.3.3 Forslag ved feil

Jeg skal kommentere en artikkel, og skriver feil e-post. Feilmeldingen «E-postadressen du har oppgitt er ikke gyldig.» gir meg ikke en konkret løsning. Denne bør være tydeligere, for eksempel «E-posten er feil. Sjekk om den inneholder @ og punktum.».

Skjermbilde fra Difis blogg med feil e-post ved kommentering.
Feilmeldingen E-postadressen du har oppgitt er ikke gyldig gir ikke et konkret forslag til løsning.

Les gjerne min artikkel Feilmeldinger satt i system.

3.3.4 Forhindring av feil

Jeg har ikke funnet skjema som kan medføre juridiske forpliktelser.

4.1.1 Parsing

Jeg finner HTML-feil her og der, som jeg har nevnt tidligere. Ingen av feilene jeg har sett er alvorlige, og Difi innfrir derfor dette kriteriet.

4.1.2 Navn, rolle, verdi

Difi bruker standard HTML-elementer, og oppfyller derfor automatisk dette kriteriet.

Til slutt

Takk for at du leste hele saken. Har du innspill til mine vurdering setter jeg pris på å høre dem. Jeg er alltid åpen for å lære mer. Skriv en kommentar, eller finn meg på Twitter.

3 kommentarer om “Vurdering av uu.difi.no”

  1. Fin bloggpost! Jeg foretrekker også WUHCAG (W-øh-CAG?), og synes i tillegg boka («how to meet the wcag 2.0») er fin.

    Bra triks med Safari for å kun zoome tekst på 1.4.4, den var jeg ikke klar over. En årsak til at den feilen du viser til oppstår her, er at høyden til containeren / boksen er satt i px. Den er altså «hugget i stein», og teksten vokser ut av den. Det samme gjelder egentlig media queries, og det er noe mange gjør. Når en da forstørrer tekst, kan den falle utenfor containere, eller det klippes helt bort / skjules, i stedet for at siden brekkes om. Det meste (font, høyder, media queries etc) bør defineres på dynamisk vis vha em / rem e.l, slik at alt skalerer med fontstørrelsen. Da blir det ordentlig responsivt! 🙂

    Forresten (ble nysgjerrig, måtte sjekke selv); Om en prøver å forstørre tekst via instillinger i Chrome, så skjer lite eller ingenting (på den sida du testa), da font er satt i px på og .

    Når det gjelder 1.2.1 og videoen om innovasjonspris, så kan en si, synes jeg, at videoen understøtter tekstinnholdet på siden den vises på. Den er bare et tillegg. Ingressen der sier at søknadsfrist er 1 mars osv. Da er det kanskje innafor? Ser uansett et poenget med en kort beskrivelse her, slik at en skjønner at en ikke går glipp av viktig info om en ikke kan se den.

    1. Takk for at du tok deg tid til en god kommentar, Anders. Jeg visste ikke at Chrome ikke skalerer tekststørrelser når de er satt i piksler. Godt å vite.
      Jeg er ikke enig i at det er godt nok at det er godt nok at innholdet er tilgjengelig på siden hvor videoen vises. Når vi publiserer videoer har vi ingen kontroll over konteksten den blir vist i. Andre kan bruke videoen i andre sammenhenger. Med tekst vil den være tilgjengelig overalt. Dette er ikke en alvorlig feil, men Difi burde gått frem som et godt eksempel.

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *