Rekommendationer för konfigurerbarhetLänk hit

• Kom ihåg att vissa användare behöver skräddarsy presentationen.
• Försök att inte hindra att användarens inställningar slår igenom.
  • Använd relativa måttenheter om det är möjligt
  • Var försiktig med css-uttrycket !important

Kom ihåg att vissa användare behöver skräddarsy presentationenLänk hit

Den som exempelvis på grund av nedsatt syn behöver skräddarsy textstorlek, färger, teckensnitt, kontraster eller fokusmarkör kan göra det på olika sätt:

• Med inställningar i operativsystemet.
• Med inställningar i webbläsaren.
• Med tilläggsprogram i webbläsaren.
• Med så kallade bookmarklets.
• Med användar-css.
• Med eventuella inställningar som webbplatsen eller appen erbjuder.
• Med hjälpmedelsprogram eller specialiserad hårdvara

Försök att inte hindra att användarens inställningar slår igenomLänk hit

Ibland kan webbplatsens inställningar för utformning av innehållet (främst i form av css-regler) stå i vägen för inställningar som användaren gör. Försök att undvika detta! Om en användare gör sig besväret att ställa in någon särskild formgivning så är det ju troligt att den inställningen fungerar bättre.

Använd relativa måttenheter om det är möjligt

Ett exempel på formgivning som skulle kunna bryta mot detta kriterium är när webbplatsens css anger textstorlekar i css-pixlar (px). Detta innebär nämligen att vissa webbläsare inte respekterar förändringar av textstorlek som användaren gör med hjälp av webbläsarens inställningar.

Använd istället relativa måttenheter såsom rem, em, % eller small/large om det går (och det går nästan alltid). För de flesta användare innebär detta ingen skillnad alls, men för den som behöver anpassa storleken på text kan det vara avgörande.

Det kan dock finnas situationer där det trots allt är lämpligt att använda absoluta måttenheter (såsom px) för textstorlek, eller relativa måttenheter som utgår från fönsterstorlek snarare än grundinställningar för text. Exempelvis för rubriker som redan utan förstoring är mycket stora, eller för text vars storlek som så långt som möjligt behöver anpassas efter storleken på bilder. Exempelvis för den som vill bygga upp grafik med hjälp av text, css och bildelement istället för bara en bild (för att så långt som möjligt efterleva R128. Använd text, inte bilder, för att visa text). Och måttangivelser i cm eller pt kan vara rimligt i css avsedd för utskrift.

Storlekar som vh, vw, vmin och vmax anges i förhållande till viewport (oftast motsvarar det fönsterstorlek) och de är alltså relativa, men inte i förhållande till en textstorlek som användaren kan kontrollera. Var noga med att testa hur väl förstoring fungerar om du använder dessa.

Wiki-sajten Webbling har en sida om måttenheter i css som du själv kan hjälpa till att redigera.

En viss del av ansvaret för att respektera användares inställning av textstorlek (oavsett vilka måttenheter sajterna använder) ligger på webbläsarutvecklare. I skrivande stund hanteras detta på olika sätt i olika webbläsare: Firefox låter användaren förstora eller förminska text oavsett om webbplatsen angivit teckenstorlek i absoluta eller relativa mått, medan Chrome endast låter användarens inställningar slå igenom om webbplatsen anger relativa mått.

Var försiktig med css-uttrycket !important

Det finns inget förbud mot att använda kraftfullare verktyg än vad uppgiften kräver, men i allmänhet är det en bra princip. Inom webbdesign är css-uttrycket !important en sorts trumfkort. Det är bra att kunna ta till om inget annat fungerar, men om du gör det finns risk för att du sätter användarens inställningar ur spel.

Exempelvis om användaren kan välja eller redigera ett så kallat ”skin”, eller har en användar-stilmall (user side css) med en inställning att rubriker ska visas i gul text mot svart bakgrund, men webbplatsens css innehåller följande rad:

Då ”vinner” nämligen webbplatsens css (och rubrikens presentation blir med svart text mot svart bakgrund), såvida inte motsvarande regel i användarens egen css också använder !important.

Det är svårt att förutspå vilka inställningar användaren kan tänkas vilja göra, som möjligen kan ”krocka” med sajtens formgivning, och därmed nästan omöjligt att testa. Var därför försiktig med att använda css-direktivet !important.

Ibland (exempelvis när en webbplats använder sig av tredjepartsfunktioner som kommer med egen css) kan det vara svårt att klara sig utan, men det finns oftast alternativ till !important. Det kan exempelvis räcka att se till att sajtens egna css-regler läses in efter eventuella tredjeparts-css för att sajtens regler ska få genomslag.

Verktygsutvecklare måste också ta ansvar

I vissa fall kan inte den som utformar webbsidan ta ansvar för presentationen.
Om exempelvis användaren gör inställningar på operativsystemnivå men om webbläsaren ignorerar dessa. Eller om användaren aktiverar en så kallad läsvy (på engelska reader mode) som förekommer både som tilläggsprogram och som standardfunktion i vissa webbläsare.

Ansvaret för att användarens inställningar ska respekteras ligger då på den som utvecklar användarens verktyg.

Om du utvecklar verktyg rekommenderar vi att du tittar närmare på W3C-standarden UAAG (User Agent Accessibility Guidelines), som är besläktad med WCAG.

Relaterade riktlinjerLänk hit

Denna riktlinje är nära besläktad och delvis överlappande med R127. Se till att text går att förstora utan problem.

Även vissa andra riktlinjer är relevanta för att användarinställningar ska fungera. Exempelvis R124. Använd inte enbart färg för att förmedla information (om användaren ställer in en egen färgskala är det ju viktigt att informationen ändå når fram) och R93. Använd Javascript för att öka tillgängligheten – inte tvärtom (javascript kan ju till exempel användas för att modifiera eller bygga ny funktionalitet som inte tar hänsyn till användarinställningar).

Vad säger standarder och lagar om denna riktlinje?Länk hit

Enligt DIGGs föreskrifter (§4) ska digital service som omfattas av lagen om tillgänglighet till digital offentlig service vara möjlig att uppfatta, vara hanterbar, begriplig och robust.

Eftersom dessa principer är svåra att utan vägledning tillämpa i enskilda detaljer erbjuds i §5 ett konkret sätt att uppfylla dem: Kriterierna i bilaga A i standarden EN301549 v2.1.2 (pdf). Denna webbriktlinje är ett försök att förklara och exemplifiera kriteriet ”11.7 Användarpreferenser”.

TerminologiLänk hit

Css-pixlar (px) motsvarar ungefär verkliga pixlar (bildpunkter) men definitionen av px kompenserar för att renodlade pixelstorlekar blir väldigt små på skärmar med mycket hög upplösning.

Användar-css eller Användar-stilmall heter på engelska ”User css” eller ”User side css”.

Fokusmarkör eller muspekare kallas på engelska och i css för cursor.

Termen användarpreferenser är hämtad från den senaste svenska översättningen av standarden EN301549, och motsvarar den engelska termen User Preferences.