Universell utforming
Universell utforming bygger på tanken om at tjenester skal være tilgjengelige for alle, uavhengig av alder, funksjonsevne, bakgrunn og utdanning. Likeverd og like forutsetninger er grunnleggende for et demokrati og er vel så viktig i en digital hverdag. EUs webdirektiv om universell utforming av nettsteder og mobilapplikasjoner (WAD) er nå en del av norsk rett. Forskrift om universell utforming av ikt peker på minimumskrav for nett og mobilløsninger. Dette er krav vi har hatt i Norge siden 2014 og fra 1. februar 2023 er det standarden WCAG 2.1 som er gjeldende.
Krav for design
Det er mange regler å sette seg inn i, og det kan være vanskelig å få en oversikt over hvordan man skal forholde seg til dem og hvilket nivå man skal legge seg på. Aneo har et krav om å følge alle suksesskriteriene som ligger under WCAG 2.0 og 2.1. Noen av disse kravene går direkte på design, utforming, funksjon og flyt. Mens andre krav går på kode, oppsett og håndtering.
Kort oppsummert skal alle interaktive elementer ha en god kontrast mot bakgrunn, det skal være tydelige og riktige “states”. Tekst skal være lesbart uavhengig av plassering. Design og funksjonalitet skal fungere på tvers av størrelser og orientering av skjerm. Navigasjon og flyt skal være konsekvent i alle flater og funksjonalitet skal være riktig merket. Under finner du en mer utdypende liste over de viktigste krav og regler som gjelder for design.
Design
Kontrast
Tekst og bilder av tekst må ha en stor nok kontrast mot bakgrunnsfarger, uavhengig om det er i en knapp eller et tekstfelt. Det må ha minimum et kontrastforhold på 4.5:1 mot bakgrunn.
Unntak:
- Stor skriftstørrelse og bilder av stor skriftstørrelse må ha et kontrastforhold på minst 3:1.
- Tekst eller bilder av tekst som representerer en inaktiv komponent, som er ren dekorasjon, som ikke er synlig(e) for noen, eller som utgjør en del av et bilde som inneholder annet vesentlig visuelt innhold.
- Tekst som utgjør en del av en logo eller et varemerkenavn, er ikke underlagt kontrastkrav.
Tydelige tilstander
Design slik at det er enkelt å identifisere komponenter og viktige grafiske elementer og hvilken tilstand de er i. For eksempel endring av utseende ved mouse-hover, touch, drag eller fokus-markering. Sørg for at navngivning av stiler er konsekvent på tvers av plattform. Det er et krav om at alt interaktivtinnhold får synlig fokus når du navigerer med tastatur. Det er også et krav om at ikke-tekstlig innhold skal ha et kontrastforhold på minst 3:1 mot farger som ligger ved siden av.
Unntak:
- Inaktive komponenter
- Grafiske objekter som ikke formidler nødvendig informasjon eller kun er til pynt
- Bilder
- Endringer av utseende som er styrt av brukeren
Bruk av farge
Selv om farge kan være nyttig for å presentere informasjon på en enkel måte, skal det ikke være den eneste måten man kan få med seg informasjonen. Når man bruker farge for å skille mellom elementer skal det alltid være andre elementer som tekst eller form som hjelper brukeren å identifisere forskjellen.
Bilder av tekst
Hvis teknologien som brukes kan håndtere den visuelle presentasjone, brukes det tekst i stedet for bilder av tekst til å formidle informasjon.
Unntak:
- Bildet av tekst kan visuelt tilpasses til brukerens krav
- En bestemt presentasjon av tekst er nødvendig for informasjonen som skal formidles
Navigasjon
Titler og overskrifter
Det er viktig å ha nyttige og tydelige sidetitler. De skal være beskrivende for hvor du er i en flyt eller hvilket innhold man kan forvente. Sammen med tydelige overskrifter og beskrivende ledetekster skaper dette et grunnlag for navigasjonen på web og app. Husk at det er forskjell på et internspråk og hva brukerne opplever som forståelig.
Konsekvent navigering
Navigeringsmekanismer som gjentas på app og web, må opptre i samme relative rekkefølge hver gang de gjentas, med mindre brukeren selv foretar en endring. Dette er også viktig å tenke på konsekvent plassering av navigasjonselementer. Dette kan være å alltid ha breadcrumbs og stepper på samme sted, og rekkefølgen på elementer i undermenyen er den samme på tvers.
Inkonsekvent navigering kan være når menypunkter endrer plassering ut i fra hvor du befinner deg.
Konsekvent identifisering
Elementer som har samme funksjonalitet på tvers av flere sider er utformet likt, dette gjelder både web og app. Der hvor det brukes ikke-tekstlige elementer hvor elementet kan brukes til ulik funksjonalitet er det viktig med tilleggstekst for å skille mellom dem.
Skjemaelementer som ser like ut, trenger tydelig emneknagg slik at det er enkelt å skille dem fra hverandre.
Formål med lenke
Formålet med hver lenke kan fastslås ut fra bare selve lenken eller ut fra lenketeksten kombinert med programmeringsmessig bestemt lenkekontekst. Unntaket er hvis formålet med lenken ville vært flertydig for alle brukere.
Flere måter å navigere
Det finnes mer enn én måte å finne frem til en side på innenfor et begrenset område. Unntaket er hvis siden utgjør resultatet av, eller et trinn i, en prosess. Eksempler på bruk kan være søkefunksjon, alfabetisk liste eller nettstedskart som støtter opp under navigasjonen i header og på undersidene. I app kan det for eksempel være en inngang fra hamburger-menyen sammen med bunn-meny eller søkefunksjon.
Layout
Visningsretning
Brukeren må få velge om innholdet skal vises i liggende eller stående retning. Formålet er å sikre at innhold på mobile flater blir vist i den retningen som brukeren foretrekker, enten portrett eller landskap. Kravet sikrer at innholdet vises i den samme retningen/visningen som enheten er i.
Unntak:
- Tilfeller der en bestemt skjermretning er nødvendig (banksjekk, piano-app, lysark i en presentasjon).
- VR, AR, spill og annen funksjonalitet hvor det ikke er hensiktsmessig å snu skjermretningen.
Tekststørrelse og tekstavstand
Tekst kan bli endret til 200% størrelse uten tap av innhold eller funksjon. Med unntak av teksting og bilder av tekst kan tekst forstørres opp til 200 % uten bruk av kompenserende teknologi og uten at innhold eller funksjonalitet går tapt.
Tekstavstanden skal kunne overstyres for å gjøre teksten lettere å lese. Formålet er å sikre at brukere kan overstyre for å gjøre teksten lettere å lese. Dette gjelder linjehøyde, avstand etter avsnitt, avstand mellom bokstaver i en linje eller blokk og avstand mellom ord.
Unntak:
- Språk eller alfabet som ikke baseres på linjeavstand eller avtand mellom ord
- Tekst som ikke blir påvirket av å justere style properties i HTML. For eksempel canvas i HTML regnes som bilde av tekst
- Teksting av video og annen media
Dynamisk tilpasning (Reflow)
Målet er å sikre at brukere kan forstørre innholdet og lese det i én enkelt kolonne. Når innholdet er zoomet inn til 400 prosent-visning, brekkes innholdet om til én kolonne. Da er det ikke nødvendig å rulle i mer enn en retning og innholdet blir lettere å lese. Dersom innholdet strekker seg utover rammene på nettleservinduet/skjermen, må brukeren rulle horisontalt for å lese innholdet.
Støtte for «reflow» er også kjent som responsivt design.
Unntak:
- Grafikk og video
- Datatabeller
- Brukergrensesnitt som har verktøylinjer
Handling
Identifikasjon av feil
For feil som oppdages automatisk må du vise hvor feilen har oppstått og gi en tekstbeskrivelse av feilen. Hvis en inndatafeil oppdages, identifiseres elementet som feilen berører, og brukeren får beskjed.
Forhindring av feil
For tjenester som medfører juridiske forpliktelser eller krever økonomiske transaksjoner fra brukeren, som endrer eller sletter brukerstyrte data i datalagringssystemer, eller som sender svar på tester utført av brukeren, gjelder minst ett av følgende punkter:
- Reverserbarhet: Sendeprosesser kan reverseres.
- Kontroll: Det kontrolleres om data som angis av brukeren, inneholder inndatafeil, og brukeren gis mulighet til å rette opp eventuelle feil.
- Bekreftelse: Det finnes en mekanisme for gjennomgang, bekreftelse og oppretting av informasjon før den sendes.
Statusbeskjeder
Brukeren skal få statusbeskjeder om viktige endringer på nettsiden uten at det gir kontekstendring. Det gjelder spesifikt for tilfeller der nytt innhold blir lagt til på siden, uten at det gir brukeren en kontekstendring. Kontekstendringer avbryter brukeren nettopp gjennom å endre fokus, og tar brukerens oppmerksomhet.
Det er to kriterier som til sammen avgjør om noe er definert som en statusbeskjed. 1. Beskjeden gir brukeren informasjon om noe (en handling som er gjennomført, en ventetilstand i innholdet, framdrift av en prosess eller at det finnes feil). 2. Beskjeden er ikke levert via en kontekstendring.
Eksempler på statusbeskjeder:
- Antall søketreff
- Feilmelding ved utfylling av informasjon
- Deler av innholdet holder på å laste
- Skjema er sendt inn