Logotyp vetenskapsrådet
logo_mobile

Grafisk form och interaktion

Använd kontraster och grafisk form för att skapa tydlighet i gränssnittet.

Använd tillräckliga kontraster i komponenter och grafik

Personer med nedsatt syn har ofta svårt att uppfatta kontrasten mellan exempelvis en symbol och dess bakgrund, och riskerar därför att missa information. Designa därför alla komponenter efter Vetenskapsrådets rekommendationer, vilket ger dem tillräckliga kontraster. Som komponenter räknas till exempel knappar och formulärfält.

Exempel:

  • Ge alla komponenter tydliga visuella gränser.
  • Använd god kontrast.

Anpassa webbplatsen för små skärmar

Många använder mobiltelefoner och andra enheter med små skärmar. Anpassa därför formulären för alla typer av skärmar.

Utveckla formulär som går att hantera med tangentbord

Alla formulär ska gå att fylla i med hjälp av enbart tangentbord, utan krav på hastighet. Till exempel ska ingen funktionalitet vara beroende av att användaren klickar på en viss koordinat, utför en viss rörelse eller drar ett objekt till en specifik plats. Vissa användare navigerar med hjälp av tangentbord eller andra inmatningsenheter som i turordning kan flytta fokus mellan sidans olika element (snarare än direkt via koordinater som en mus eller pekskärm gör). Det vanligaste är att tab-tangenten används.

  • Testa formuläret genom att endast använda tangentbordet.

Markera tydligt vilket fält eller element som är i fokus

Användare som navigerar med till exempel tab-tangenten behöver få veta var tangentbordets fokus ligger. Standardmarkeringen är ofta en tunn streckad linje som är svår att se, särskilt om omgivningen är spräcklig eller på annat sätt gör den streckade linjen mindre uppenbar.

Exempel:
Använd CSS för att tydligt visa vilket element som är i fokus.

CSS: a:focus, input:focus {border: solid #727272 3px;}