2009-03-05
Ett fenomen som uppstått är att webbutvecklare använder måttenheten em för att styra sina grafiska gränssnitt. Vi ska reda ut varför denna em inte ska användas för styrning av annat än textstorlek i detta tips.

Em är en enhet som ska styra textstorlek. En em är höjden av en versal i den teckenstorlek som är vald i besökarens webbläsare. Något som har visat sig vara mycket avgörande för dem som valt att använda denna måttenhet till andra saker än text.

Utgångspunkten är att vi har en dator, vars skärm har upplösningen 800*600 bildpunkter. Personen vid datorn är synsvag och använder ZoomText för att förstora innehållet på skärmen. Förstoringsgraden är 4x. Det innebär att endast en fjärdedel av skärmen syns och att användaren får föra musen runt på skärmen för att få se önskade delar av den.

Besökaren kommer in på en webbplats som har ett grafiskt gränssnitt styrt till att vara 40em (40 gånger höjden av en versal i den teckenstorlek användaren valt i sin webbläsare).

Låt oss nu tänka på följande faktorer och se vad effekten blir.

• Användaren har en låg upplösning.
• Användaren har valt textstorleken störst (200%) i sin webbläsare.
• Användaren använder ZoomText och ser bara en del av skärmens innehåll åt gången.

Effekten av dessa faktorer kan göra att besökaren inte kan ta till sig innehållet på ett bra vis, med anledning av följande:

• Ju större text som väljs i webbläsaren, desto bredare blir det grafiska gränssnittet.
• Om det grafiska gränssnittet löper utanför skärmens högra kant (får en horisontell rullningslist) så blir det mycket besvärligt för en som använder förstoringsprogram, då denna besökare får läsa tills texten döljs i höger kant, bläddra sig ner, ut åt sidan och upp igen för att få läsa den sista delen av raden.

Summan av detta blir alltså att enheten em inte ska användas till annat än just text.

En enkel tumregel kan vara att använda följande måttenheter när man arbetar med webbaserat innehåll:

• Använd % (procent) för att ange bredd, max-bredd och min-bredd för grafiska gränssnitt (layout).
• Använd em eller % (ger samma resultat i detta fall) för att ange textstorlek. Glöm inte att se till att texten enligt WCAG 2.0 ska kunna förstoras till 200% av ordinarie storlek, utan att något innehåll slutar fungera eller döljs.
• Bilder är pixlar, om de inte är vektorbaserade. Ett gott råd kan vara att för dekoration försöka använda bakgrundsbilder istället för inbäddade bilder. För bilder som innehåller information (ska ha samma information i alternativtext) styrs storlek med pixlar. Med fördel används inte bilder som överskrider måtet min-width för moderelementet.
• Inner- och yttermarginaler styrs lämpligen med %, så att de harmonerar med gränsnittets måttangivelser.

Vad är då orsaken till att em plötsligt börjat användas för grafiska gränssnitt? Man styr bilders storlek med em, kolumners bredd med mera. Orsaken verkar vara att man vill upprätthålla storleksförhållandet mellan bilder och dess omgivande information. Något som förvisso är en god tanke, men som får förödande effekt för stora målgrupper.