Prinsipper og krav
Oslo kommunes nettsider har innbyggere og næringsliv som sine målgrupper. Med over 658 390 innbyggere og over 50 000 ansatte representerer dette svært mange ulike mennesker som skal få gjort sine oppgaver på sidene.
Denne siden ble sist oppdatert 09.03.2017. Vi jobber hele tiden med å gjøre designguiden bedre, og ønsker tilbakemeldinger. Har du kommentarer, finner feil eller er uenig i noe, ta kontakt. Du kan sende en e-post til web@uke.oslo.kommune.no eller bruke “Fant du det du leter etter” nederst på siden. Husk å legge ved e-postadresse hvis du ønsker svar.
Universell utforming og tilgjengelighet
Et overordnet prinsipp er at vi skal søke å ikke ekskludere noen fra bruk av sidene, og prioritere tilgjengelighet og universell utforming. Dette går på mange ulike aspekter:
- God ytelse - sidene skal kunne brukes enten brukeren sitter med PC/MAC på raskt nettverk på jobb, eller sitter med en mobil på togstasjonen. Dette gir f. eks føringer for størrelsen på sidene og antall kall sidene gjør (requests).
- Søk/SEO - Mellom 60-70 % av brukerne komme til sidene via Google. Da er det viktig at innholdet er lesbart og "forståelig" for Google
- Ulike enheter og plattformer - Det dreier seg om at sidene skal fungere enten brukeren velger å være på mobil, nettbrett, pc, mac i Safari, Internet Explorer, Firefox eller annet. Sidene skal være responsive og tilpasse seg brukerens enhet.
- KlarSpråk - KlarSpråk er kanskje det viktigste enkelttilaket, og gir sider som er lettere å forstå for alle. Oslo har mange innbyggere med annet morsmål enn norsk, og da er tydelig og klart språk med på å gjøre det enklere og å finne frem og forstå sidene.
- Nedsatt funksjonsevne - Det kan være dårligere syn etter som man blir eldre, dysleksi og andre lese-skrive-vansker, motoriske problemer, synshemming, hørselshemming og så videre. Tiltak her kan være alt fra KlarSpråk, gode kontraster, god struktur, store nok trykkflater, riktig koding, forutsigbarhet og så videre.
- Noen ganger kan konteksten brukeren sitter i gi utfordringer tilsvarende en nedsatt funksjonevne. Han eller hun sitter i et støyende miljø hvor det er vanskelig å høre, har lav konsentrasjon fordi man forsøker å fylle ut et skjema mens barna vil ha oppmerksomhet, man ser dårlig fordi man sitter med mobilen i sterkt sollys eller annet.
Prinsipper
- La brukerne styre betjeningen av grensesnittet. Ikke utfør handlinger på vegne av brukerne som de kan velge å oppnå på egen hånd. F. eks skal ikke lenker åpnes opp i nye sider eller faner uten at brukeren selv aktivt velger å gjøre dette.
- Forutsigbarhet, struktur og konsistens. F. eks at åpningstider ser like ut og er gjenkjennbare på tvers av løsningen, eller at søkefeltet skal opptre på samme sted hele veien.
- Eliminer unødig kompleksitet, både i språk og design. Det skal være enkelt å forstå og bruke.
Lovkrav
Nettsidene må følge Diskriminerings- og tilgjengelighetsloven. Forskrift om universell utforming av IKT-løsninger definerer hva loven krever i praksis. Forskriften krever at nettløsninger som retter seg mot allmennheten minst utformes i samsvar med standard Web Content Accessibility Guidelines 2.0 (WCAG 2.0) på nivå A og AA med unntak for suksesskriteriene 1.2.3, 1.2.4 og 1.2.5. Hvis punktene i sjekklisten oppfylles for alle sider, oppfylles også kravene i forskriften. For enkelte kriterier har Oslo kommune valgt å støtte AAA-kravet. Disse er med i sjekklisten nedenfor merket med *.
| # | Suksesskriterium | Beskrivelse |
|---|---|---|
| 1.1.1 | Ikke-tekstlig innhold (A) | Gi tekstalternativer til alt ikke-tekstlig innhold. Unntak for «pynt». |
| 1.2.1 | Bare lyd og bare video (forhåndsinnspilt) (A) | Gi tilgang til et alternativt medium (f. eks tekst for lyd) |
| 1.2.2 | Teksting (forhåndsinnspilt) (A) | Undertekster for video med lyd. |
| 1.3.1 | Informasjon og relasjoner (A) | Informasjon, struktur og relasjoner som formidles via presentasjonen, kan bestemmes programmeringsmessig eller gjøres tilgjengelig(e) som tekst. |
| 1.3.2 | Meningsfylt rekkefølge (A) | Når rekkefølgen som innholdet presenteres i, påvirker meningsinnholdet, kan en korrekt leserekkefølge bestemmes programmeringsmessig. |
| 1.3.3 | Sensoriske egenskaper (A) | Instruksjoner som gjelder for forståelse og betjening av innhold, er ikke utelukkende avhengige av komponentenes sensoriske egenskaper, for eksempel form, størrelse, visuell plassering, orientering eller lyd. |
| 1.4.1 | Bruk av farge (A) | Farge blir ikke benyttet som det eneste visuelle virkemiddelet for å formidle informasjon, angi en handling, be om respons eller skille ut et visuelt element. |
| 1.4.2 | Styring av lyd (A) | Hvis lyd på en webside spilles av automatisk i mer enn 3 sekunder, finnes det enten en mekanisme for å stoppe lyden helt eller midlertidig, eller en mekanisme som kan regulere lydstyrken uavhengig av det generelle systemvolumet. |
| 1.4.6 * | Kontrast (forbedret) (AAA) | Den visuelle presentasjonen av tekst og bilder av tekst har et kontrastforhold på minst 7:1. Stor skriftstørrelse (over 18 punkter) har et kontrastforhold på minst 4,5:1. Logo er unntatt. Lovkravet i henhold til 1.4.3 – Kontrast (minimum) er 4,5:1 for vanlig tekst og 3:1 for stor tekst. |
| 1.4.4 | Endring av tekststørrelse (AA) | 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. |
| 1.4.5 | Bilder av tekst (AA) | Ikke benytt bilder av tekst, hvor tekst kan benyttes. Logo er unntatt. |
| 2.1.1 | Tastatur (A) | Nettstedet skal kunne navigeres kun ved hjelp av tastatur |
| 2.1.2 | Ingen tastaturfelle (A) | Tastaturbrukere må ikke bli “sittende fast”. |
| 2.2.1 | Justerbar hastighet (A) | Nettsider med tidsbegrensning har tidskontroller, f. eks mulighet for å forlenge tidsbegrensningen. |
| 2.2.2 | Pause, stopp, skjul (A) | For bevegelse, blinking, rulling (som varer mer enn 5 sek) eller automatisk oppdatering av informasjon må det finnes kontroller med mulighet for å pause, stoppe eller skjule den. |
| 2.3.1 | Terskelverdi på maksimalt tre glimt (A) | Nettsiden må ikke blinke mer enn 3 ganger per sekund. |
| 2.4.1 | Hoppe over blokker (A) | Det finnes en mekanisme for å omgå blokker med innhold som gjentas på flere websider. |
| 2.4.2 | Sidetitler (A) | Websider har titler som beskriver den aktuelle sidens emne eller formål |
| 2.4.3 | Fokusrekkefølge (A) | Nettsiden navigeres i en logisk rekkefølge |
| 2.4.4 | Formål med lenke (i kontekst) (A) | Formålet med en lenke er klart utfra lenketeksten. |
| 2.4.5 | Flere måter (AA) | Tilby flere måter å finne sidene på nettstedet. |
| 2.4.6 | Overskrifter og ledetekster (AA) | Overskrifter og ledetekster beskriver emne eller formål. |
| 2.4.7 | Synlig fokus (AA) | Sikre at tastaturfokus er synlig |
| 2.4.8 * | Plassering: Det gis informasjon om hvor brukeren befinner seg innenfor et sett av websider. (Nivå AAA) | |
| 2.4.10 * | Deloverskrifter (AAA) | Deloverskrifter brukes til å organisere innholdet |
| 3.1.1 | Språk på siden (A) | Språk er definert for siden |
| 3.1.2 | Språk på deler av innhold (AA) | Fortell når språket på en side endres. |
| 3.2.1 | Fokus (A) | Når en komponent kommer i fokus, medfører det ikke kontekstendring. |
| 3.2.2 | Inndata (A) | Inndata endrer ikke konteksten til elementer. |
| 3.2.3 | Konsekvent navigering (AA) | Bruk menyer på de samme stedene gjennom nettstedet |
| 3.2.4 | Konsekvent identifikasjon (AA) | Komponenter som har samme funksjonalitet innenfor en samling av websider, identifiseres på en konsekvent måte. |
| 3.3.1 | Identifikasjon av feil (A) | Hvis en inndatafeil oppdages automatisk, identifiseres elementet som feilen berører, og brukeren får en tekstbeskrivelse av feilen. |
| 3.3.2 | Ledetekster eller instruksjoner (A) | Det vises ledetekster eller instruksjoner når innholdet krever inndata fra brukeren. |
| 3.3.3 | Forslag ved feil (AA) | Bruker får forslag til hvordan feil kan rettes |
| 3.3.4 | Forhindring av feil (juridiske feil, økonomiske feil, datafeil) (AA) | Det benyttes teknikker for å redusere risiko for inndatafeil. |
| 4.1.1 | Parsing (oppdeling) (A) | HTML-koden validerer uten store feil. |
| 4.1.2 | Navn, rolle, verdi (A) | Alle elementer bygges for tilgjengelighet (f. eks egenutviklede knapper) |