Retningslinjer for webdesign

Formål og Indhold

Dette er et tillæg til Aalborg Kommunes designlinje, som er rettet specifikt mod design og udvikling af brugervenlige hjemmesider, apps og andre webløsninger.

Formålet er at sikre sammenhæng på tværs af Aalborg Kommunes brugergrænseflader. Vi skal skabe let digital adgang for alle borgere og virksomheder, som anvender vores digitale løsninger. Derfor skal vi altid:

• leve op til gældende lovkrav for webtilgængelighed
• følge kommunens designlinje
• have brugerperspektivet i centrum ved tænke og handle "udefra og ind", hvilket er vedtaget med visionen om let digital adgang i Aalborg Kommune. 
• anvende almen faglig praksis for udvikling af gode og brugervenlige løsninger

Webtilgængelighed er med til at skabe en bedre brugeroplevelse for alle uanset forudsætninger. Det er vigtigt, at tænke ind i designprocessen fra start, da vores digitale løsninger skal være brugbare, uanset om brugeren for eksempel er ordblind, befinder sig et sted med meget støj, har brækket en arm, har ADHD, stress, er svagtseende eller har nedsat motorik i fingrene som følge af alder.

Læs mere om webtilgængelighed på digitaliseringsstyrelsens hjemmeside

Designprocessen - kom godt fra start

Det er vigtigt, at du altid har brugerne for øje, når du vælger og prioriterer i designprocessen.

Følg disse trin for at komme godt fra start:

1. Forstå
2. Definér
3. Skitsér
4. Test

Forstå

Du skal altid fokusere på brugerne, når du udvikler en ny webløsning. 
Derfor skal du som det første få en god forståelse for dine brugere:

• Hvem er brugerne af løsningen?
• Hvad er deres mål med at besøge websiden?
• Hvad er deres behov?

Det kan du gøre ved at:

1. Undersøge de data, du har til rådighed om brugerne.
   • Analysér statistik fra hjemmesiden
2. Spørg brugerne
   • Lav fokusgrupper
3. Sæt dig i brugerens position
   • Brug din fantasi og kreativitet til at forholde dig kritisk og se tingene fra brugerens vinkel. Hvad er det for en virkelighed, de skal navigere i?

Definér

Når du har fået en god forståelse for dine brugere, er det tid til at samle op på dine data. 

1. Definér brugerrejsen og lav eventuelt personas.
   • Hvor kommer brugerne fra (A), og hvor er de på vej hen (B)? Definér de forskellige trin i brugerens rejse.
   • Hvilket device bruger de? Smartphone, PC, tablet?
   • Hvad er deres behov og adfærd?
   • Er der nogle særlige karakteristika? Lav en eller flere personas

Du bør desuden undersøge, om I eller andre har arbejdet med lignende udfordringer/løsninger før:

• Er der nogle, som gør det godt på samme område, som vi kan få inspiration af?

Skitsér

Du har nu fået en god forståelse for brugerne af din løsning og defineret deres brugerrejse og behov.
Nu skal du i gang med at skitsere og udvikle løsningen. Skitseringsfasen er bred og dækker over processen fra idegenering til de endelige prototyper.
Skitseringsfasen kan derfor indeholde alt lige fra:

• idegenering
• IA workshop
• sitemapping
• wireframing
• håndtegnede skitser
• UX principper
• prototyper (for eksempel i Figma) 
• løbende brugertest

Der findes mange gode metoder, som du kan benytte dig af. Er du i tvivl om, hvordan du skal gribe det an, kan du for eksempel kontakte din leverandør. Ofte foregår denne process i tæt samarbejde med dem.
Ellers kan du kontakte webredaktionen, som kan give input til principper, metoder og fremgangsmåde.

Skriv til webredaktionen på webredaktionen@aalborg.dk 

3 gode råd

1. Tænk på mobilen først
   • Rigtigt mange brugere kommer fra en smartphone. Tænk derfor altid på mobilen først, når du skitserer og udvikler indholdet.
   • En løsning, som er brugervenlig på smartphones fungerer altid godt på desktop. Det er ofte ikke tilfældet den anden vej rundt
2. Lav kun HTML-baseret indhold
   • Drop PDF'er og dokumenter - det er meget sjældent godt webindhold
   • På den måde underbygger du den gode brugeroplevelse, gode søgeresultater og ikke mindst, at loven om webtilgængelighed overholdes.
3. Brugerne søger
   • Størstedelen af alle brugere anvender en søgemaskine - primært Google
   • Forvent at dine brugere starter med at søge på Google
   • Forvent at dine brugere søger internt i din løsning
   • Det er vigtigt, at du er skarp på hvilke ord du bruger, når du laver indhold på din hjemmeside, så de stemmer overens med de ord og vendinger brugerne anvender, når de søger (SEO).

Test

Det er vigtigt at brugerteste løsningen. Når vi inddrager brugerne, får vi indblik i, hvad de rent faktisk gør, deres adfærd og virkelighed samt deres oplevelse af løsningen. Det er helt essentielt for at udvikle en brugervenlig løsning.

En god og simpel metode til at lave brugertest er 'tænke-højt-test'. En tænke-højt-test' forgår sådan, at en række brugere stilles over for nogle testopgaver, som de skal udføre. Mens de udfører testopgaver, skal de tænke højt og sætte ord på, hvad de gør, deres indtryk, oplevelser og hvorfor de gør, som de gør.

Det skal du bruge:

• 5 brugere til at teste din løsning
• En prototype eller skitse af din løsning eller dine ideer
• En spørgeguide med 2-5 testopgaver og opfølgende hv-spørgsmål.

Gode råd:

• Brug Teams eller anden tjeneste til videoopkald
  • Tænke-højt-test kan sagtens laves online. Det kan faktisk være en fordel.
  • Få brugeren til at dele sin skærm, mens de udfører testopgaverne og lav en optagelse af mødet (spørg altid om lov først)
  • På den måde kan du nemt dokumentere testen til efterfølgende analyse.
• Rekruttering af testpersoner
  • Find testpersoner som repræsenterer løsningens målgruppe
  • Testpersonerne må ikke have et særligt forudgående kendskab til løsningen, som kan påvirke resultaterne. Du kan altså ikke bruge dig selv, en kollega som også arbejder med løsningen eller en kollega, ven eller ægtefælde som har særligt kendskab gennem fortællinger fra dig.
  • Du må gerne bruge kolleger, venner, familie, naboen og dit netværk til at rekruttere testpersoner. Det vigtige er blot, at de ikke har særligt kendskab til løsningen.
• Du behøver ikke et stort test set-up for at lave tænke-højt-test
  • En tænke-højt-test må gerne være uformel
  • Alle kan lave en tænke-højt-test
  • Du behøver ikke have stort fagligt kendskab til området eller erfaring med brugerundersøgelse
  • Vær nysgerrig, objektiv og stil åbne spørgsmål
• Spørgeguiden: det skal den indeholde
  • Formål med testen
  • Introduktion til testmetoden
  • 2-5 testopgaver, som repræsenterer de vigtigste mål brugerne har, når de anvender løsningen.
  • Opfølgende hv-spørgsmål, som du kan bruge til at spørge ind til brugerens handlinger og oplevelser. 
  • Kort afrunding
• "Det er ikke en test af dig" 
  • Fortæl dine testpersoner at det ikke er en test af deres evne til at anvende løsningen men derimod en test af løsningens funktioner.
  • Der er ingen forkerte eller dumme svar
  • Alle indtryk, oplevelser, handlinger og tanker er meget værdifulde for os - både de negative og de positive

Der findes mange gode guides til, hvordan du laver tænke-højt-test online.

Design tjekliste

• Anvender du den rigtige udgave af Aalborg Kommunes logo?
  Brug det rigtige logo. Anvender webløsningen en ældre udgave af Aalborg Kommunes logo, så skift det ud med det samme
  Download Aalborg Kommunes logo
  
  
• Anvender du den rigtige font?
  Brug altid webfonten Roboto.
  
  
• Følger du retningslinjerne for typografi?
  Brug altid et typografisystem, som definerer H1, H2, H3, H4 og så videre. Et typografisystem sikrer et godt visuelt hierarki på tværs af siden, hvilket er med til at gøre siden brugervenlig. Korrekt formatering af overskrifter er også vigtigt for webtilgængeligheden og SEO
  
  
• Anvender du designlinjens farver korrekt?
  Brug maksimalt 3 farver fra farvepaletten, og tjek at farvesammensætningen er webtilgængelig. Farverne skal altid vælges på et fagligt grundlag med udgangspunkt i sidens formål og ikke på baggrund af personlige præferencer for farver
  
  
• Følger du retningslinjerne for hjørner og skygger?
  Brug afrundede hjørner til elementer, som brugeren kan interagere med for eksempel knapper, accordion og lignende. Brug kun helt runde hjørner til interaktive elementer, som er tertiære for eksempel en 'Se alle'-knap. Brug firkantede hjørner til elementer, som er statiske for eksempel kontaktbokse eller beskeder. Anvend kun skygger, hvis det er absolut nødvendigt og brug istedet for - og baggrundsfarve til at skabe dybde
  
  
• Anvender du de rigtige ikoner og illustrationer?
  Brug Aalborg Kommunes egne illustrationer samt gerne ikoner fra fontawesome, hvis du har behov for at anvende illustrationer eller ikoner som visuelt indhold på din webløsning
  
  
• Anvender løsningen et responsivt grid system?
  Brug et responsivt grid-system for eksempel det anbefalede 12-kolonne grid-system. Din løsning skal være responsiv!
  
  
• Er løsningen webtilgængelig?
  Indtænk webtilgængelighed i løsningen fra start. Løsningen skal være webtilgængelig og du bør stille som krav, at der medfølger belæg for, at løsningen lever op loven om webtilgængelighed - for eksempel en dybdegående tilgængelighedstest lavet af et proffesionelt bureau
  
  
• Er indholdet let for målgruppen at forstå?
  Brug et let forståeligt sprog, hold det kort og hav fokus på din målgruppe:
  • ingen forkortelser
  • fremhæv de vigtigste pointer på siden i overskriften og/eller manchetten
  • skriv det vigtigste i sætningen først 
  • undgå passiver
  • skriv i du-form og brug et uformelt sprog
  • begræns fagsprog
  • gør din tekst kort og præcis, lav korte afsnit og hold dig til et emne per afsnit
  • overskueliggør og fremhæv indhold med underoverskrifter, punktopstillinger og lignende
  • hav fokus på hvad brugeren har behov for at vide og ikke, hvad du gerne vil fortælle
  • lav sigende links, som beskriver hvad der sker, når man trykker på det. for eksempel "Læs mere om webtilgængelighed på digitaliseringsstyrelsens hjemmeside"
  • videoer skal have undertekster

Farver

Aalborg Kommunes farvepalette er designet med udgangspunkt i behovet for at kommunikere bredt og differentieret. Farvepaletten består af 9 forskellige farver, som er udvalgt, så de lever op til kravene om webtilgængelighed.

Se designguiden for uddybende beskrivelse af farver, farvekoder samt farvebrug

Primær blå

Hex: 141969

Primær hvid

Hex: ffffff

Sekundær pink

Hex: d61c64

Sekundær orange

Hex: ee7027

Sekundær turkis

Hex: 5cc4b7

Sekundær gul

Hex: ffe049

Sekundær grøn

Hex: 224430

Sekundær brun

Hex: 422a14

Sekundær lyserød

Hex: fceafb

Sekundær lilla

Hex: 6e46ao

Brug maksimalt 3 farver på din hjemmeside

Udvælg 2-3 farver fra farvepaletten til den nye webløsning. Farverne udvælges med afsæt i hjemmesidens formål.

Følgende retningslinjer gælder:

• Brug altid mindst én primærfarve 
• Brug maksimalt 3 farver på én flade
• Brug kombinationsmulighederne:
  
  • 1 primær + 1 sekundær
  • 1 primær + 2 sekundære
  • 2 primære + 1 sekundær
• Farvekombinationen skal overholde AA-standarden for webtilgængelighed
  • Anvend farveoverblikket over tilgængelige kombinationer

Baggrundsfarve

Der introduceres yderligere en farve specifikt til brug på web, som kan anvendes som baggrundsfarve. Denne tæller ikke med i de udvalgte 3 farver.

Farven udspringer af den primære blå. Farven har et kontrastniveau til hvid, som gør, at der skabes god dybde, når man placere et hvidt element ovenpå for eksempel en knap eller et accordion. Det giver et dynamisk visuelt udtryk uden brug af skygger.

Som udgangspunkt skal du gøre brug af for- og baggrundsfarve til at skabe todimensionel dybde - det kaldes også flat design. Brug kun drop shadow/skygger, hvis det er nødvendigt.

Baggrund

RGB: 243, 243, 247

HEX: F3F3F7

Eksempel på anvendelse af for- og baggrundsfarve

Krav til webtilgængelighed

Kontrast

Tjek altid om kontrastforholdet mellem de farver, du bruger, er tilstrækkelig stor, så den overholder AA-standarden for webtilgængelighed. 

Se oversigt over alle webtilgængelige farvekombinationer i designguiden i afsnittet 'Farver og webtilgængelighed'

Kravene til kontrast kan varierer afhængigt af størrelsen på din tekst, og om der er tale om en tekst eller grafik.

Kontrastforholdende på Aalborg Kommunes websider skal leve op til følgende krav:

• Kontrastforholdende skal mindst være 4,5:1 undtagen
  • Hvis der bruges stor tekststørrelse (+18 pt eller +24px), så skal kontrastforholdet være mindst 3:1
  • Hvis der er et billede eller tekst, som ikke har en bærende betydning. Det vil sige elementer, som udelukkende er dekorative.
  • Hvis der er tale om et logo.

Læs mere i lovkrav 1.4.3 kontrast (minimum)

Lav din egen test

→ Kontrollér kontrastforholdet mellem farverne med en kontrastchecker på webaim.org

Farve som visuel markør

Det er vigtigt, at du ikke har information samt info- eller advarselsbokse på hjemmesiden, hvor farve er anvendt som den eneste markør til at formidle elementet, vigtighed eller karakteren af indholdet. Du skal gøre brug af andet end blot farven for eksempel en skriftlig markør: "Advarsel...", så man som farveblind også kan tolke informationen.

Når du henviser til indhold på en side, så vær ligeledes opmærksom på ikke at referere til "... i den blå boks", "...er markeret med rødt" eller ligende reference, som kun henviser til farvemarkøren.

Læs mere i lovkrav 1.4.1 Anvendelse af farve

Typografi

Til brug på web anvendes webfonten Roboto. Roboto er udviklet specifikt til brug på web og er frit tilgængeligt i forskellige CMS-systemer og softwareløsninger.

Man bør altid bruge et typografisystem i sin webløsning for at sikre et godt visuelt hierarki, der er konsekvent på tværs af løsningen. Grundreglen er at man altid anvender en brødtekst, som er minimum 16 px.

Det anbefales, at du anvender nedenstående typografisystem:

Eksempel

Krav til webtilgængelighed

Overskrifter og hierarki

Det er vigtigt, at din tekst er formateret korrekt. Du skal bruge H1, H2, H3, punktopstilling, nummereringer og andre formateringer til at gøre dine sider overskuelige og brugervenlige.

God strukturering af hierarkiet medfører, at det kan læses af både mennesker, søgemaskiner og assisterende teknologi. Det er selvfølgelig også vigtigt, at overskrifterne er nemme for brugere at forstå, så formålet med indholdet er tydeligt, og de nemt kan udføre den ønskede handling.

For at tilgodese tilgængeligheden skal du:

• Kun bruge én H1 per side
• Ikke springe trin over, når du bevæger dig ned ad i hierakiet (H1, H2, H3, H4 og så videre)
• Du må gerne springe trin over, når du bevæger dig op igen (H3, H4, H2)
• Samme H må gerne benyttes flere gange i træk

Vær opmærksom på, at teksten i et accordion element også bør formateres som en overskrift. Hvorvidt der er tale om en H2, H3 eller H4 afhænger af hierarkiet på det øvrige indhold. Oftest formateres teksten dog som en H3.

Læs mere i lovkrav 2.4.6 Overskrifter og etiketter

Zoom

Alt tekst på din hjemmeside skal kunne forstørres til 200% i browseren, uden det ødelægger information eller kontekst. Det er derfor vigtigt at være opmærksom på korrekt orddeling. Hvis ikke ordene deles korrekt, kan det hæmme læsbarheden for en svagtseende person, der anvender zoom. 

Det kan man gøre ved at markere, hvor ord skal deles, så man undgår automatisk orddeling på siden. Det gælder særligt overskrifter og lange ord med stor skriftstørrelse.

Du skal desuden undgå scroll i flere dimensioner - horisontalt og vertikalt. For eksempel skal brugeren kunne læse elementer og tekst såsom tabeller uden at være nødsaget til at scrolle frem og tilbage i forskellige retninger. Det gælder for alle devices. Dette skal overholdes ved zoom op til 400%.

Læs mere i lovkrav 1.4.4 Ændring af tekststørrelse

Læs mere i lovkrav 1.4.10 Ombrydningsvisning

→ Lav din egen test: Kontrollér at du kan zoome ind til 200% på hjemmesiden uden tab af indhold eller funktionalitet.

Linje- og tekstafstand

For at sikre at brugere kan se teksten på din side, selvom de har nedsat syn gælder følgende retninglinjer:

• Linjeafstanden skal være mindst 1,5 gange skriftstørrelsen
• Afstanden mellem afsnit skal være mindst 2 gange skriftstørrelsen
• Bogstavafstanden skal være mindst 0,12 gange skriftstørrelsen
• Afstanden mellem ord skal være mindst 0,16 gange skriftstørrelsen

Læs mere i lovkrav 1.4.12 Tekstafstand

Ikoner og grafiske elementer

Se designguiden for generelle retningslinjer for foto og illustrationer

Illustrationer

Illustrationerne kan anvendes som dekorativt indhold på din webløsning. Brug illustrationerne i stedet for billeder til at skabe særpræg, som afpejler Aalborg Kommune på din webside. Se yderligere retninglinjer for brug af illustrationerne i designguiden via ovenstående link.

Fontawesome

Brug ikoner fra Fontawesome i stilen 'light', hvis du ønsker at anvende ikoner på din hjemmeside.

Find ikoner på fontawesome.dk

Der er indkøbt et begrænset antal licenser i Aalborg Kommune. Har du spørgsmål kan du kontakte til Kommunikation og Udvikling.

Skriv til Kommunikation og Udvikling på information@aalborg.dk

Krav til webtilgængelighed

Ikke-tekstbaseret indhold

Der skal være et tekstalternativ, hvis indhold, som ikke er tekst, formidler oplysninger, med betydning for forståelse af websidens indhold. Ellers kan en skærmlæser ikke læse indholdet op. Det gælder indhold såsom billeder, animationer, videoer, iframes og lydelementer. Det er vigtigt at indholdet beskrives, så det rent faktisk er beskrivende for det indhold det formidler.

Hvis indholdet blot er dekorativt uden betydning og brugerne ikke behøver at vide noget om billedet, skal det have en tom alt-attribut (alt = ""). Du bør stille dette som krav hos din udvikler.

Læs mere i lovkrav 1.1.1 ikke-tekstbaseret indhold

→ Lav din egen test: Brug en gratis skærmlæser til at teste sidens indhold. Aktivér skærmlæseren på din smartphone eller download en gratis skærmlæser til din desktop og test: er indholdet meningsfuldt og er rækkefølgen logisk?

Kontrast

Grafiske elementer og ikke-tekstbaseret indhold skal have et kontrastforhold på 3:1, hvis det er information, som er nødvendigt for forståelsen af elementet. Det kan for eksempel være infografik eller grafer.

→ Kontrollér kontrastforholdet mellem farverne med en kontrastchecker på webaim.org

Læs mere i lovkrav 1.4.11 Kontrast for ikke-tekstbaseret indhold

Grid

Det er vigtigt at arbejde med et grid, når man udvikler webløsninger. Et grid er med til at skabe ensartethed, overblik og balance i websidens visuelle fremtoning og formsprog. 

Anvend et grid til at placere komponenterne i dit layout horisontalt, og brug eventuelt et baseline grid til at skabe en vertikal rytme på siden.

Forskellige løsninger, platforme og systemer gør, at der vil være variation i de muligheder, man har for at definere sit eget grid system. 

12 kolonner

Det anbefales at arbejde med et 12-kolonne responsivt grid, men du er velkommen til at anvende responsivt grid i det antal kolonner, der skal til i dit design. Det vigtige er at du anvender responsivt grid.

Du kan kombinere de 12 kolonner og flette dem sammen, så du ender med layout varianter, der for eksempel består af 6/6, 8/4, 4/4/4, 3/3/3/3 (se nedenstående eksempel). Alle sider bygger på den måde på det samme fundament, der bidrager til at skabe ro og overblik. 

Et par gode råd er:

• Husk whitespace! 'Luft' eller whitespace er vigtigt, når vi skal lave en brugervenligt, æstetisk og overskuelig løsning.
• Venstrestil dit indhold
• Lad dig gerne inspirere af det dynamiske halveringsprincip i designguiden

Når du anvender et responsivt grid, sørger du for, at din webløsning tilpasser sig skærmstørrelsen på det device, brugeren tilgår siden fra, uanset om det er en mindre mobilskærm eller en større stationær skærm. 

I tablet- og mobilvisninger folder layoutet sammen til 8- og 4-grid, så proportionerne passer til den pågældende skærm.

Breakpoints

Sidens breakpoints er de værdier, hvorefter siden automatisk tilpasser sig arealet. Følgende breakpoints kan med fordel anvendes:

Krav til webtilgængelighed

Aalborg Kommunes websider skal kunne bruges og forstås, når de vises med både en vandret og lodret skærmretning. De skal være responsive på tværs af skærmstørrelser og devices.

Læs mere i lovkrav 1.3.4 Retning

Hjørner og skygger

Hjørner

Afrundede hjørner (10 px)

Bruges til interaktive elementer, som opfordrer til handling.

Det anbefales at du altid bruger knapper og elementer med afrundede hjørner til primære og sekundære handlinger. Interaktive elementer skal være simple og det kan være en fordel at anvende ikoner.

Eksempler på elementer med afrundede hjørner

Knapper

Cards

Accordion

Runde hjørner 

Runde hjørner kan bruges til interaktive elementer af tertiær karakter.

De anbefales, at du kun anvender knapper eller elementer med helt runde hjørner til tertiære handlinger. For eksempel knapper, chips og tags såsom 'Se alle'  eller 'Åben alle'.

Eksempler på elementer med runde hjørner

Knapper og chips

Firkantede hjørner (0 px)

Firkantede hjørner bruges til elementer, som man ikke kan interagere med.

Brug elementer med firkantede hjørner til infobokse såsom kontaktboks. Ligeledes bør billeder, iframes (for eksempel videoer), tabeller og lignende altid have firkantede hjørner.

Skygger

Som udgangspunkt anbefales det, at du bruger principper fra flat design til at skabe dybde. Det vil sige, at du bruger kontrasten mellem for- og baggrund til at skabe dybde, fremfor skygger og drop shadow.

Hvis det bliver nødvendigt at lægge skygge på et element bør du følge anbefalingerne:

• Farve: Primær blå #141969
• Opacity: 10-15%
• x=0 px og y=5 px
• Slør/Blur: 10-20 px

Krav til webtilgængelighed

Anvendelse af tastatur

Det skal være muligt at tilgå og anvende indhold på din webside udelukkende ved brug af et tastatur. Det er derfor vigtig at sikre, at brugeren kan anvende websiden ved hjælp af TAB-tasten på tastaturet. Indhold skal have synligt fokus, når brugeren tabber sig hen på det, så brugeren ved, hvor de befinder sig på siden.

Læs mere i lovkrav 2.1.1 Tastatur

Læs mere i lovkrav 2.4.7 Synligt fokus

→ Indtænk og definer TAB-rækkefølgen tidligt i designprocessen i skitseringsfasen.

Meningsfuld rækkefølge

Indholdet på din webside skal præsenteres i en forståelig rækkefølge for brugere med og uden funktionsnedsættelse. Læserækkefølgen fastsættes i HTML-koden, så rækkefølgen er meningsfuld og logisk for brugeren. Det samme gælder synligt fokus, når brugeren anvender tastaturet til at navigere på siden. Den rækkefølge som synligt fokus følger fra et indholdselement til det næste, skal være opsat så websidens indhold er meningsfuld for brugeren.

Læs mere i lovkrav 1.3.2 Meningsfuld rækkefølge

Læs mere i lovkrav 2.4.3 Fokusrækkefølge

Tastaturfælder

Sørg for at brugeren ikke kan ende i en 'tastaturfælde', når personen bruger tastaturet at navigere på websiden. Brugeren skal let kunne komme væk fra indhold igen ved at skifte fokus eller gå tilbage med tastaturet.

→ Lav din egen test: brug TAB-tasten på dit tastatur til at navigere gennem indhold på din side og tjek at du altid kan skifte fokus eller komme tilbage (shift+TAB) uden at ende i en tastaturfælde.

Læs mere i lovkrav 2.1.2 Ingen tastaturfælder

Svævepegning (hover) og fokus

Ved elementer og knapper med hovereffekt hvor der ved hover dukker ny information eller pop-up indhold op, skal brugeren kunne fjerne og navigere væk fra dette ved hjælp af tastaturet eller klik. 

Elementer og knapper på websiden må ikke skifte kontekst, når de er i fokus. En kontekstændring kan for eksempel være at åbne et nyt vindue, at en formular automatisk udfyldes, at flytte fokus til et andet element eller gå til en ny side/give brugeren et indtryk af, at man er kommet til en ny side.

Dette er særligt aktuelt, når brugeren anvender TAB-tasten til at navigere i indholdet. De forskellige elementer er i fokus i takt med man tabber sig ned gennem indholdet og derfor må der ikke ske en ændring i konteksten ved fokus, da det kan desorientere brugeren.

De gældende kontrastforhold skal ligeledes overholdes ved hover. Det gælder både kontrasten mellem forgrund og baggrund på selve knappen, samt knappens kontrastforhold til den baggrunden, den befinder sig på.

Læs mere i lovkrav 1.4.13 Indhold ved svævepegning (hover) eller fokus

Læs mere i lovkrav 3.2.1 I fokus

Læs mere i lovkrav 1.4.3 Kontrast (minimum)

→ Lav din egen test: ved at bruge TAB-tasten til at navigere gennem din side og kontroller, at der ikke er noget indhold, som skifter kontekst, når det er i fokus.

Navngivning af knapper

Elementer eller knapper, som har en synlig tekst for eksempel 'Søg', 'Send', 'Se alle' og lignende, skal have en matchende tekst i HTML-koden, så det, der står i HTML-koden, matcher det man ser.

Læs mere i lovkrav 2.5.3 Etiket i navn

Ikoner på knapper og links

Hvis en knap har både ikon og label skal ikonet markeres som dekorativt, så det samme ikke læses op to gange, hvis en bruger anvender en skærmlæser.

Hvis en knap kun har et ikon, skal ikonet være selvforklarende for seende og have en alt-tekst eller lignende til dem, som anvender en skærmlæser. I dette tilfælde må ikonet dermed ikke markeres som dekorativt.

Vær konsekvent

Navigationselementer og komponenter med samme funktionalitet, som vises gentagne gange på websiden, skal være ens på tværs af siden. Hvis der er manglende konsistens, kan det være forvirrende for brugeren, og det kan gøre websiden vanskeligere at bruge.

Det er derfor vigtigt at sikre konsekvent identifikation (tilgængeligt navn, etiket og lignende), rækkefølge og struktur, når navigationselementer repeteres på en webside. Ligeledes skal du være konsekvent i den måde, information formidles og præsenteres på på tværs af løsningen.

Læs mere i lovkrav 3.2.4 Konsekvent identifikation