Alt-attributt på ikke-tekstlig innhold
Ikke-tekstlig innhold
Gi brukeren et tekstalternativ for innhold som ikke er tekst.
- Alle bilder skal ha alternativ bildetekst (alt-attributt)
- Ved dekorative bilder skal alt-attributt være blank
Bilder med lenke
Alt-teksten blir lenketeksten for brukere med skjermleser. Da skal lenkens mål beskrives, ikke motivet på bildet. Evt kan man inkludere begge deler, men lenkens mål skal beskrives først.
- Beskriv lenkens mål med alt-teksten
Bilde av tekst
Noen steder er det nødvendig med bilde av tekst. For eksempel hvis man viser et kakediagram med statistikk.
- Beskriv formål og hovedinformasjon med alt-teksten
- Det skal eksistere en tekstversjon som formidler samme informasjon
Unntak
Det finnes unntak beskrevet hos difi. Blant disse er det verdt å nevne at skjemaelementer som knapper og inndata-felter gir unntak for regelen, da det er andre kriterier som treffer disse. På slike elementer er det krav til beskrivende tekst og du finner en veiledning til bruk på hver enkelt komponent i Jøkul.
Lenker
Blinkende innhold
- Animasjon
- Modal/Dialog
- Media (lyd/video)
Med blink mener man endringer hvor resultatet motsetter hverandre på en måte som skaper en stor forstyrrelse. For eksempel fargeendring på et større område eller et element som hyppig vises/gjemmes.
- Innhold skal ikke blinke oftere enn 3 ganger i sekundet
Lenker
Merk at alt-attributt alltid skal brukes på bilder, men på dekorativt innhold skal den være blank: alt="".
- Rent dekorativt innhold skal ignoreres av kompenserende teknologi
Et bilde kan være dekorativt når bildet er
Et visuelt element som brukes til innramming
Illustrerende for nærliggende tekst, men bidrar ikke med tilleggsinformasjon
Beskrevet av nærliggende tekst
Lenker
Fokus
Det skal være synlig fokus på elementer. Like viktig er det at fokusrekkefølgen ivaretas. Hvis en dialog er tatt i bruk så er det allerede tatt en beslutning på at innholdet som vises er viktig. Derfor skal dialogen være første element i fokusrekkefølgen etter at den er synlig på skjermen. Se artikkelen om fokushåndtering.
Tastaturfelle
Dersom man tar i bruk dialog i tjenesten sin er det særdeles viktig å passe på at bruker ikke havner i en tastaturfelle. Det skal fortsatt være mulig å bruke tjenesten rundt, både med tastatur og mus.
Tidsbegrensning
Dersom dialog brukes i kombinasjon med en tidsbegrensning, se artikkelen om tidsbegrensning.
Blinking på siden
Innhold skal ikke blinke mer enn tre ganger i løpet av ett sekund. Dette er et spesialtilfelle og hvis blinking oppstår ved bruk av dialog er det som regel som følge av en feil som må rettes.
Lenker
Farger
- Tekstinnhold
- Skjema
- Tabell
- Lister
- Bilder
- Modal/Dialog
- Innlogging
- Navigasjon
- Animasjon
Farger kan være en god meningsbærer og kan brukes for å gi bedre oversikt for bruker. Samtidig er det viktig at farge aldri brukes som eneste informajsonsbærer.
- Farge er ikke eneste virkemiddel for å formidle funksjonalitet eller viktighet
For ytterligere info om farger, se artikkelen om kontrast.
Lenker
Fokushåndtering
- Skjema
- Tabell
- Tekstinnhold
- Media (lyd/video)
- Modal/Dialog
- Innlogging
- Navigasjon
Synlig fokus
Fokuserbare elementer skal ha synlig fokus.
- Det må være en visuell endring når et element får fokus
Fokusrekkefølge
Fokuserbare elementer må navigeres i en rekkefølge som gir mening for innholdet. Merk at man må være ekstra oppmerksom i dynamiske menyer og dialoger.
Handlinger ved fokus
Det skal være forutsigbart å bruke nettsiden. Ved fokus skal det derfor ikke foregå automatiske handlinger som at
- Et nytt vindu åpnes
- Fokus blir flyttet
- Man navigeres til ny side
- Sideinnholdet omorganiseres
Tips: Unngå bruk av tabindex for å overskrive dokumentets naturlige fokusrekkefølge. Hvis semantikken (lenke til global kode?) er på plass så er det sannsynligvis ingen feil her.
Lenker
Brukeren skal ha en mulighet til å enkelt kunne hoppe over innhold som er gjentatt på flere sider, for å kunne komme direkte til hovedinnholdet med tastaturnavigasjon.
En vanlig teknikk er å bruke en skip-link beskrevet hos difi. Den skal være blant de 3 første tab-stegene på siden.
Lenker
Ikoner
- Tekstinnhold
- Skjema
- Navigasjon
Ikoner uten en kontekstuell mening skal hvis mulig ha tom alt-attributt for å bli ignorert av skjermleser.
Ikoner som er med å sette en stemning som f.eks. emojis kan leses opp.
Ikoner kan være et visuelt virkemiddel i tillegg til farge for å gi et element en feilmelding.
Vi bruker sjelden ikoner i Jøkul, men de ikonene og medfølgende retningslinjer vi har kan du se på infosiden om ikoner i Jøkul.
Lenker
Inndatafelter
- Skjema
- Navigasjon
- Innlogging
Inndatafelter skal være knyttet til en ledetekst både visuelt og i kode. Feks ved bruk av aria-labelledby.
Ledeteksten eller instruksjonen skal få brukeren til å forstå hvordan feltet skal fylles ut.
- Inndatafelter skal ha ledetekst
Endringer
Endringer i et inputfelt skal ikke gi kontekstuelle endringer uten forvarsel.
Eksempler på store kontekstuelle endringer kan være
- Endring av layout
- Når siden åpner et nytt vindu i nettleser
- Fokus flyttes.
Lenker
Konsekvent identifikasjon
- Navigasjon
- Skjema
- Innlogging
- Modal/Dialog
Elementer som har samme funksjonalitet på tvers av flere sider skal være utformet likt.
For å gjøre det enkelt, bruk felles komponenter fra Jøkul.
Lenker
Navigeringsmekanismer som gjentas på flere sider skal oppføre seg likt og se like ut på alle sider med mindre brukeren selv gjør en endring.
Lenker
Kontrast
- Skjema
- Bilder
- Tabell
- Tekstinnhold
- Media (lyd/video)
- Modal/Dialog
- Innlogging
- Animasjon
- Navigasjon
For å sikre god lesbarhet skal all tekst ha tilstrekkelig kontrast mot bakgrunnen.
- 4.5:1 for normal tekst
- 3:1 for stor tekst (24 piksler høy i vanlig skrift eller minst 19 piksler høy i fet skrift)
- 3:1 for grafiske elementer
Våre farger i Jøkul er bestemt med hensyn til kontrastnivået.
Lenker
Lenker
- Tekstinnhold
- Modal/Dialog
- Skjema
Lenker kan brukes inline i tekst eller selvstendig. Lenker skal alltid ha en href attributt og utheves med visuelle virkemidler.
Om farge brukes som et visuelt virkemiddel, må man bruke et annet virkemiddel i tillegg: Understreking, ikon eller lignende.
- En tydelig tilstandsendring skal vise at lenken har fått fokus
- Formålet med lenken skal kunne forstås ved lenketeksten
I Jøkul skiller vi også mellom interne og eksterne lenker samt navigasjonslenker.
Lenker
Lister benyttes til å ramse opp informasjon. En liste skal være korrekt kodet, enten det er unummerert, nummerert, definisjonliste eller lister over flere nivå så bruk riktig HTML-elementer.
- Korrekt koding gir fast innrykk
- Ingen mellomrom mellom
<li> og tekst
Egentilpassede symboler i liste
Et konkret eksempel er en liste som definerer hva en forsikring dekker eller ikke. Der er gjerne kulepunktet byttet ut med et eget symbol. Det er viktig at kulepunktet ikke er eneste måte å skille innholdet på. Dette tilsvarer egentlig to lister hvor den ene har overskriften "Forsikringen dekker" og den andre har overskriften "forsikringen dekker ikke". Det er sterkt anbefalt å bruke slike overskrifter for å gjøre det veldig tydelig at det er en forskjell her. Hvis listen mangler slike overskrifter må det passes på at
- Farge ikke er eneste virkemiddel for å formidle funksjonalitet eller viktighet
- Kulepunktene er testet med skjermleser
Jøkuls lister med ikoner har allerede tatt hensyn til dette slik at de kan brukes uten slike overskrifter.
Lenker
Hvis innholdet som presenteres kun er video eller lyd skal det finnes et alternativ som formidler samme informasjon.
- Unngå automatisk avspilling av innhold med mindre det er absolutt nødvendig
- Hvis automatisk avspilling forekommer må den starte muted
- Ikke inkluder blinkende innhold som blinker mer enn tre ganger i sekunder
Lenker
Modal er krevende å implementere da det påvirkes av mange krav. Hensikten til en modal er å tvinge bruker til å utføre en handling før brukeren kan gå videre.
Fokus
Det er viktig at elementer utenfor modalen ikke skal få fokus, samt at det er synlig fokus på elementene i modalen. Like viktig er det at fokusrekkefølgen ivaretas. Se Fokushåndtering
Tastaturfelle
Dersom man tar i bruk en modal i tjenesten sin er det særdeles viktig å passe på at bruker ikke havner i en tastaturfelle. Handlinger som skal utføres av bruker i modalboksen må derfor være mulig å navigere til med tastatur i tillegg til mus.
Tidsbegrensning
Dersom modalen brukes i kombinasjon med en tidsbegrensning gjelder kravene under Tidsbegrensinng.
Blinking på siden
Innhold skal ikke blinke mer enn tre ganger i løpet av ett sekund. Dette er et spesialtilfelle og hvis blinking oppstår ved modal er det som regel som følge av en feil som må rettes.
Tips
- Bruk NRK-Core Dialog
- Hvis mulig, legg til ESC som tilbakeknapp for å navigere ut av modal
Lenker
Overskrifter
Overskrifter og korrekt bruk av overskriftsnivåer er en av de enkleste måtene å sikre oversiktlighet og korrekt flyt i tjenesten. Alle brukere benytter overskrifter og mellomtitler for å skumlese innhold uavhengig av om de bruker hjelpemidler.
- Sidetittel skal være
<h1> - Rekkefølgen på nivåene skal gå ett steg om gangen
- Brødtekst skal være
<p>
Lenker
Inndata
Endring av verdien i et skjemalement skal ikke resultere i at det automatisk blir betydelige endringer på siden. Bruker må bli varslet om kontekstendringer på forhånd. Et eksempel på korrekt bruk er at bruker aktivt må trykke "Send inn", "Gå videre" eller lignende før man blir servert nytt innhold.
- Bruk attributen autocomplete hvis mulig
- Obligatoriske felter må merkes
- 3:1 kontrast på rammen på inndataelementer
Validering
For feil som oppdages automatisk:
- Vis en tekstbeskrivelse av feilen og marker hvor den oppsto
- Vis forslag til hvordan feil kan rettes opp I
- Farge er ikke eneste virkemiddel for å vise feil/suksess/advarsel
Forhindring av feil
For sider med juridiske forpliktelser må det være mulig å kunne angre, kontrollere eller bekrefte dataene som sendes inn. Et av følgende punkter gjelder
- Mulighet for å angre eller reversere innsendingen. For eksempel ved at brukeren får beskjed om hvordan de angrer innsendingen.
- Inndata fra bruker skal valideres og brukeren gis mulighet til å rette opp eventuelle feil
- Det finnes en mekanisme for gjennomgang, bekreftelse og oppretting av informasjon før den sendes
Ledetekster eller intruksjoner
Sørg for at ledetekster og overskrifter beskriver emne eller formål. Mer info om ledetekster ved inndatafelter finnes i artikkelen om inndatafelter.
- Det skal være beskrivende ledetekster eller instruksjoner
Tastatur
Alle skjemaelementer må være mulig å bruke med kun tastaturnavigasjon. Det er viktig at ingen elementer fungerer som en tastaturfelle – se artikkelen om tastaturfeller.
Fokus
- Alle skjemaelementer må ha synlig fokus
- Fokushåndtering må foregå i en logisk rekkefølge
En endring i fokus må aldri automatisk medføre en betydelig endring. Bruker må gjøres oppmerksom på slike handlinger på forhånd.
Lenke
Formålet med en lenke skal kunne fastslås fra selve lenketeksten eller lenketeksten kombinert med programmeringsmessig bestemt lenkekonstekt.
- Inkluder dokumenttypen i lenketeksten. "Eksempel (PDF)"
Se artikkelen om lenker.
Lenker
- Hvis en feil oppdages automatisk skal bruker få en feilmelding
Feilmeldinger i skjema skal identifisere feltet med feil, beskrive feilen og være synlig uten at brukeren må gjøre ekstra handlinger.
Feilmeldingen skal være mulig å oppfatte uavhengig av fargesyn:
- Farge skal aldri være eneste virkemiddelet for å formidle at det er en feilmelding.
- I tillegg til farge kan man bruke tekst eller ikoner.
Feilmeldingen skal være tekstlig og så spesifikk som mulig: "Dette feltet er obligatorisk" er ikke lov. Skriv heller "Du må fylle inn et navn".
Så langt det er mulig skal feilmeldingen inneholde et forslag til hvordan brukeren kan løse det.
Lenker
I Norge er loven slik at alle tjenester skal treffe WCAG AA-kravene. For vanskelige ord, forkortelser, fagspråk og idiomer gjelder WCAG AAA. Dette er derfor ikke et lovpålagt krav, men i Fremtind har vi bestemt oss for at vi skal være mestere i klarspråk.
Så langt det lar seg gjøre skal man derfor unngå overkomplisert språk, men dersom det ikke er mulig å komme rundt dette må det eksistere mekanismer som:
- Gjør det mulig å se definisjonen av uvanlige/vanskelige ord eller uttrykk
- Gjør det mulig å se den fullstendige formen til en forkortelse
Retningslinjer for språk og skriveråd finner du på Jøkuls profilside for "Stemmen vår".
Tabeller skal utelukkende brukes til å presentere data, ikke for å styre layout/utseende.
Overskrift
- Bruk
<caption> hvis tabellen har en tittel
I tillegg til overskrift for tabellen i sin helhet er det viktig at elementet <th> er tatt i bruk på celleoverskrifter (overskriften på rader/kolonner). Dette er nødvendig for at skjermlesere skal gi fullverdig informasjon i hver enkelt celle. Dersom det er overskrifter på både kolonner og rader må du spesifiere hvilken retning de peker med attributen scope="col" eller scope="row".
Komplekse tabeller
En kompleks tabell er en tabell som har flere nivåer med celleoverskrifter. Dette er et spesielt tilfelle som kan dypdykkes i på difi sin oversikt over komplekse tabeller
Lenker
Tastaturnavigasjon
- Navigasjon
- Tekstinnhold
- Modal/Dialog
- Skjema
- Innlogging
- Media (lyd/video)
All funksjonalitet skal være mulig å bruke med et tastatur. Dette er noe som treffer superbrukere og brukere med nedsatt motorikk I armer og hender, både varig og midlertidig. Samtidig vil dette sikre at bruken av skjermleser blir enklere.
Innholdet skal være presentert på en måte som gjør at sekvensiell navigering med tastatur føles logisk og intuitiv.
Tastaturfeller
Hvis bruker kommer til et sted på siden hvor tastaturnavigasjon hverken kan ta deg videre eller tilbake så har brukeren havnet i en tastaturfelle. Dette kan typisk oppstå som følge av modal/dialog som er feil implementert.
Det er viktig at tjenesten i sin helhet blir testet med kun tastaturnavigasjon.
Lenker
Tekststørrelse og avstander
- Tekstinnhold
- Skjema
- Tabell
- Lister
- Bilder
- Modal/Dialog
- Innlogging
- Navigasjon
- Animasjon
Tekstblokker
Sørg for at tekstblokker enkelt kan leses av alle brukere.
- Bredden er ikke mer enn 80 tegn
- Teksten er ikke blokkjustert ('justified')
- Linjeavstanden er minst 1,5 innenfor avsnitt
- Avstanden mellom avsnitt er minst 1,5 ganger større enn linjeavstanden
Tekst
- Linjehøyden er minst 1,5 ganger større enn tekststørrelsen
- Avstand mellom tegn er minst 0,12 ganger tekststørrelsen
- Avstand mellom ord er minst 0,16 ganger tekststørrelsen
Størrelse på tekst skal kunne bli endret opp til 200% uten tap av innhold eller funksjon. Det samme gjelder for å zoome inn 200% på nettsiden. Tekst skal ikke kuttes, bli vanskeligere å lese eller forsvinne selv om brukeren har justert tekststørrelsen.
Lenker
Dersom tjenesten inkluderer en tidsbegrensning gjelder minst et av følgende
Brukeren kan slå av tidsbegrensningen
Brukeren kan øke tidsbegrensningen med minst 10 ganger standardverdi
Brukeren varsles før tiden går ut og skal få minst 20 sekunder til å forlenge* den minst 10 ganger. Feks "Trykk på mellomromstasten"
Tidsbegr. er en nødvendig del og det finnes ikke noe alternativ (feks auksjon)
Tidsbegr. varer lenger enn 20 timer
Lenker