3.3.6 Använd flexibla måttenheter

Prioritet: 1

WCAG 1: 3.4

En av grundtankarna för hög tillgänglighet är att användaren själv ska kunna anpassa presentationen av innehållet utifrån sina önskemål och förutsättningar. Ett exempel är att användaren kanske har svårt att läsa texten och vill öka textstorleken. Webbplatser som använder flexibla måttenheter ökar möjligheten för användaren att anpassa presentationen av innehållet. Detta gäller både textstorlek och layout.

De måttenheter som bör användas är em, ex eller %. Textstorlekar kan även anges med nyckelord.

Måttenheter som bör undvikas, särskilt för att ange textstorlek, är till exempel px och pt. Den huvudsakliga anledningen är att den just nu vanligast förekommande webbläsaren, Internet Explorer 6 för Windows, inte på ett enkelt sätt kan förstora text angiven med dessa enheter.

Att välja textstorlek är något av ett dilemma. Det går helt enkelt inte ange en textstorlek som passar alla som använder en webbplats. Det går att välja en storlek och ange den på ett sätt som passar de flesta, men inte alla. Därför är det mycket viktigt att göra det möjligt för de användare som behöver större (eller mindre, men det är inte så vanligt) text att använda deras webbläsares inbyggda funktionalitet för att ändra textstorlek.

Några tips

  • Utgångsläget bör vara att så mycket som möjligt är byggt med flexibla mått. Det gäller även layout-ytor, som kan behöva expandera när texten blir större. Eftersom delar av innehållet (till exempel bilder) ofta har en fast storlek blir slutresultatet i de flesta fall en kombination av fasta och flexibla mått. Se även 3.3.3 Skapa en design som fungerar oavsett fönster- och skärmstorlek.
  • Naturligtvis behöver man göra någon form av gränsdragning för hur mycket texten ska kunna förstoras utan att layouten faller sönder eller innehållet börjar överlappa. 150% får anses vara ett absolut minimum, men ju större texten kan göras, desto bättre.
  • Bra information om olika värden och hur de fungerar i olika webbläsare finns i artikeln Sane CSS typography. Med utgångspunkt från informationen i den artikeln och de relaterade dokumenten kan man använda följande grund:

    body {
    font:76%/1.6 Verdana, Arial, Helvetica, sans-serif;
    }

    Just 76% ger i stort sett samma resultat i alla webbläsare som är inställda på defaultstorlek. Sedan handlar det om att justera texten (i de flesta fall uppåt) med hjälp av em:

    h1 {
    margin:0 0 0.5em;
    font-size:1.8em;
    line-height:1.1;
    }
    h2 {
    margin:0;
    font-size:1.3em;
    }

Om man vill ha mindre text bör man inte gå under 0.94em eftersom texten då tenderar att bli svårläst.

Mätbarhet

Webbläsare som Firefox och Opera kan förstora text oavsett vilken måttenhet som används. Använd Internet Explorer 6 för Windows för att kontrollera att alla användare kan förstora det textbaserade innehållet på webbplatsen. Ändra inställningarna för textstorlek i menyn Visa, Textstorlek och kontrollera att:

  • Alla typer av text blir större, inklusive rubriker, ledtexter, samt text i fält och knappar.
  • Text inte blir oläslig eller försvinner vid förstoring, vilket kan inträffa om delar av layouten inte anpassar sig till den ökade textstorleken.

Senast uppdaterad 2008-12-21