Måttenheter

Vi bygger webbsidor för många typer av enheter och användaren har ibland behov att förstora text vid behov. Därför behöver de flesta måtten vara relativa i förhållande till body-taggens storlek.

Man bör använda relativa mått när man bygger tillgängliga webbsidor eftersom det möjliggör en mer flexibel och responsiv design som är anpassningsbar till olika enheter och skärmstorlekar.

Relativa mått, till exempel procent eller em-enheter, definierar storleken på en element relativt till dess omgivning. Detta betyder att när en webbsida öppnas på en enhet med en annan skärmstorlek eller upplösning, kommer elementen på sidan att skalas proportionellt och bibehålla förhållandet till varandra.

Att använda relativa mått är en viktig princip för tillgänglighet eftersom det möjliggör en mer responsiv design som är anpassningsbar för personer med olika funktionsnedsättningar. Personer som använder en skärmläsare eller annan hjälpmedel för att navigera på webbsidor kan behöva justera textstorleken eller zooma in på en sida för att läsa innehållet. Genom att använda relativa mått blir detta enklare och mer effektivt och inga texter klipps eller döljs bakom andra element.

Måttenheter i designskisser

När en design tas fram eller uppdateras kan enheter anges i pixlar. För att omvandla en designskiss i pixlar till em för utveckling av webbsidan behöver man veta vilken basstorlek som ska användas för att definiera 1em.

Vanligtvis används 16px som basstorlek på grund av dess enkelhet att använda för beräkningar, eftersom det är enkelt att dela upp i andra enheter som 2, 4 eller 8.

För att omvandla en designskiss i pixlar till em kan man använda följande formel:

em = pixelvärde / basstorlek

Exempel på beräkning

Antag att vi har en designskiss som visar en text som är 24px stor. För att omvandla detta till em med en basstorlek på 16px, skulle vi använda följande formel:

em = 24 / 16 = 1.5em

Så, texten skulle i detta fall definieras som 1.5em i CSS-koden för att uppnå samma storlek som i designskissen.

Det är också viktigt att komma ihåg att em är ett relativt mått och dess storlek beror på det närmaste överordnade elementets storlek. Om den överordnade elementet definieras med en annan font-storlek, kan det påverka storleken på em på de underordnade elementen. Det är därför viktigt att ha en konsistent användning av relativa mått i hela webbsidan för att skapa en enhetlig design.

Formatmallar och texter

Ange alltid texter i em för att göra det möjligt för användaren att förstora texen vid behov.

Fasta höjder

Fast höjd i px kan användas vid utveckling av en tillgänglig webbplats när det finns en giltig anledning att begränsa höjden på en viss komponent eller element på sidan, till exempel en bild som har en fördefinierad storlek.

Däremot är det viktigt att använda fast höjd i px sparsamt och endast när det är nödvändigt, eftersom det kan orsaka problem för tillgängligheten på webbsidor.

Om höjden på ett element definieras med en fast höjd i px, kan det leda till att text eller innehåll kapas om det inte får plats i det fördefinierade utrymmet. Det kan också göra sidan mindre användbar för personer med funktionsnedsättningar, som kanske behöver anpassa textstorlek eller zooma in för att kunna läsa innehållet.