1 WCAG's tredje riktlinje

"Använd kodning och formatmallar (style sheets) och gör det rätt"

• 3.1 [Prioritet 2] När lämpligt kodningsspråk finns tillgängligt, använd kodningen snarare än bilder. Undvik alltså att göra en klickbar bild som föreställer en navigeringsmeny.

• 3.2 [Prioritet 2] Skapa dokument som kan valideras i formella kodningssystem.

• 3.3 [Prioritet 2] Använd formatmallar för att styra layout och presentation

• 3.4 [Prioritet 2] Använd relativa snarare än absoluta enheter i kodningens attributvärden och i formatmallarnas egenskapsvärden.

• 3.5 [Prioritet 2] Använd element i HEAD-delen av dokumentet för att ange dokumentstrukturen och använd dem som specificerat. Använd t.ex. H2 som undersektion till H1 och inte för att skapa typsnittseffekter.

• 3.6 [Prioritet 2] Koda listor och listposter rätt. Använd OL, UL och DL rätt.

• 3.7 [Prioritet 2] Koda citat. Använd inte QUOTE för att skapa formatteringseffekter, som indrag.

WCAG riktlinje 3 handlar mycket om presentationen av innehållet. Jag kommer att gå genom vad som praktiskt kan göras för presentationen av ett givet informationsmaterial.

2 Presentationen i praktiken

Informationen

När det gäller presentation av ett givet informationsmaterial med villkoret att informationen inte får förändras ska vi snart se att det går att påverka rätt mycket.

Säkert har dessa steg redan tagits genom strukturen av informationen:

• Meningsfulla rubriker
• Kontrollera texten noga efter eventuella felstavningar eller grammatiska fel
• Förklara definitioner, tekniska termer osv.

Strukturen

Exempel på hur struktur kan påverkas:

• Bryt upp informationen i flera stycken, försök hålla ett budskap per stycke.
• Använd hellre punktlista än uppräkningar
• Omvända pyramidens skrivsätt. Det viktigaste först, därefter underbyggande information.

Presentationen

Exempel på hur presentationen kan påverka tillgängligheten:

• Radlängd
• Vänster- eller marginaljusterad text
• Radavstånd
• Avstånd mellan två stycken
• Kontrast
• Teckenstorlek
• Minskat bakgrundsljus
• Användarkontroll

I denna övning kommer vi att fokusera på hur användaren själv kan påverka teckenstorlek, kontrast och val av typsnitt.

3 Användarkontroll

Vi börjar i änden med användarkontroll och arbetar oss bortåt.

Med användarkontroll menas antingen att användaren/besökaren får en liten panel där innehållet kan påverkas eller att kända snabbkommandon används för att påverka presentationen.

Exempel på användarkontrollpaneler i skala 1:1 är:

regeringen.se

tibo.se

uu.se

...osv.

I ovanstående exempel visas tydligt det jag är ute efter, det saknas en standard för hur användarkontroller ska se ut och vilka val som ska erbjudas.

Min andra erfarenhet är att dessa paneler är så små att de som har behov av presentationsanpassning ofta har problem med att hitta dem.

Vi kan slå fast att "panelerna" behöver få en prominent plats på skärmen långt från "hungriga skrollnings-troll". 

Här är mitt förslag som jag kommer att jobba på i denna presentation tillsammans med lite exempeltext:

Öppna anpassa-panelen i nytt fönster

Anpassningspanelen skapade jag så här:

<style>

fieldset {font: normal 1em verdana; width: 100px;}

legend {font: normal 0.9em verdana; color: #000; }

.anpassa {text-align: center; padding-bottom:20px;}

.normaltext {background-color: #ffffee; color: black;}

.kontrasttext {background-color: #333333; color: #ffff00;}

</style>

...

<fieldset>

<legend>Anpassa&nbsp;</legend>

<div class="anpassa"><span style="font: normal 0.8em Arial">-A</span>&nbsp;&nbsp;&nbsp;<span style="font: normal 1em Arial">A</span>&nbsp;&nbsp;&nbsp;<span style="font: normal 1.3em Arial">A+</span></div>

<span class = "normaltext">&nbsp;Text&nbsp;</span>&nbsp;&nbsp;<span class = "kontrasttext">&nbsp;Text&nbsp;</span>

</fieldset>

Min motivering för designen är följande:

• HTML och CSS bygger upp utseendet (WCAG riktlinje 3.1, 3.3)
• Använder relativa måttenheter där sådana ska användas (WCAG Riktlinje 3.4)
• Använder slutenhetens- eller konturlagen med ramen runt
• Använder likhetslagen med stor- mellan och lilla "A".
• Visar kontrastskiftesmöjligheten med exempel
• Den svarta bakgrundsfärgen är inte helt svart för att undvika för dovt mörker
• Texternas nyanserade gråa färg syns med hög kontrast
• Rubrik som namnger panelen

4 Textens storleksanpassning

Det finns flera metoder för att jobba med personlig anpassning. Jag visar den enkla som bygger på att användaren, genom att klicka på textstorleksanpassning, helt enkelt byter ut aktuell formatmall.

Det låter enkelt, men det som måste fungera inuti "svarta lådan" är att man genom länkklicket tar med sig önskad storlek och sparar denna anvisning i en Cookie. Det gör att man inte behöver ställa om textstorleken för varje sida som besöks på webbplatsen.

Cookie är en liten fil (max 4096 byte enligt RFC 2109, men oftast mindre) som sparas i användarens dator och innehåller den information som programmeraren bestämmer. Användaren kan dock neka att spara Cookie'n så det går inte att lita till 100% på funktionen.

När användaren har valt en storlek på texten och inställningen sparats i cookie'n, används den därefter på alla efterföljande webbsidor inom webbplatsen.

Observera att ett användarval påverkar inte webbsidans utseende för alla besökare, utan endast för den som gjort sin inställning.

5 Lyssna på användaren

Eftersom vi vill undvika att sätta stilar med HTML, då det låser möjligheten att påverka presentationen, så måste presentationen sättas med formatmallar (CSS).

Läs mer om formatmallar CSS i FAKTA-serien.

Med ASP skriptteknologi är det möjligt att göra dynamisk webbkod och därmed skapa dynamiska webbsidor. Det mesta med användarval kretsar kring att vi ska komma åt det som användaren valt (klickat).

En länk som innehåller data ser ut så här

<a href="webbsida.htm?variabel=värde">Länk</a>

Det som tillkommer i ovanstående exempel är något som kallas QueryString.

En QueryString inleds alltid med ett frågetecken, följt av en godtycklig variabel samt dess värde.

url?variabel=värde

Vid fler variabler, avgränsas dessa med ett &-tecken, enligt nedanstående exempel:

url?variabel1=värde1&variabel2=värde2 osv...

Undersök vilka variabler och vilka värden som används i följande exempel:

Öppna anpassa-panelen i nytt fönster

Besvara för dig själv:
Vilka variabler hittade du?
Vilka var dess värden?

6 Vad gör besökaren?

Ok, vi har panelen - Anpassa klar. Nu är det dags att ordna funktionerna.

När användaren klickat på t.ex. A+ kommer, i vårt fall, länken att länka tillbaka till samma sida.

På den sidan ska vi läsa av QueryString'en och se vad användaren begärt.

Vi läser av genom att använda ASP - skriptteknik. Kom ihåg att så fort vi ska använda oss av ASP, måste filändelsen vara .ASP samt exekveras från en webbserver.

Se på följande fil som är döpt till fil.asp.

Öppna anpassa-panelen i nytt fönster

Välj att visa källan till ovanstående fil. Notera att HTML-koden innehåller samma information som finns i QueryString'en.

Förenklat åstadkoms ovanstående genom följande:

HTML-kod...

<%

response.write request.queryString("textStorlek")

%>

HTML-kod...

Mitt bland HTML-koden kan man "lämna" HTML-kod för att gå över till ASP-kod genom <% och avsluta med %> Mellan dessa ASP-avgränsare skriver man sitt serverskriptspråk, jag har valt det enklaste, VisualBasic Script.

• Response.write - betyder skriv ut följande till webbläsaren
• request.queryString("textStorlek") betyder läs variabeln textStorlek's värde från frågesträngen.

Alltså, skriv ut textStorlek värdet och visa det i webbläsaren

Vi har ännu inte uppnått teckensnittsförändring, men vi är nära nu.

7 Mer om Cookies

När vi nu användaren har gjort ett anpassningsval bör vi spara det för kommande visningar inom webbplatsen. Vi sparar genom att lagra det i en cookie.

Här sparas alla anpassningsval under ett gruppnamn som jag valt att heta anpassa (första delen efter response.cookies).

<%
response.cookies("anpassa")("textStorlek") = request.queryString(Item)
%>

Värdet på variabeln textStorlek som nu finns på URL'en (frågesträngen) ska matas in i en cookie. Där lagras värdet på variabeln textStorlek under ett gruppnamn som heter anpassa.

Vi läser cookien på samma sätt

<%
request.cookies("anpassa")("textStorlek")
%>

Istället för response, används nu istället kommandot request.

Öppna anpassa-panelen i nytt fönster

Mer om cookies, ASP-request och ASP-response.

8 ASP styr CSS som styr presentationen

Nu har vi alla pusselbitar, det är dags att lägga ihop dessa.

1. Länkar tar med värden <a href="fil.htm?data=11">
2. Vi läser av frågesträngen i URL (webbadressen)
<% request.queryString("data") %>
3. Vi lagrar värden i cookies <% response.cookies("data")=11 %>
4. Vi återläser från cookies <% request.cookies("data")
5. Vi låter cookie's värden påverka en dynamiskt utformad formatmall (CSS). Se nedan

Prova den här koden

<%

'hämta värden

if len(request.serverVariables("QUERY_STRING")) > 0 then

For Each Item In request.queryString

response.cookies("anpassa")(Item) = request.queryString(Item)

next

end if

'läs från cookie

Storlek = "font-size: " & request.cookies("anpassa")("textStorlek") & "em; "

select case request.cookies("anpassa")("textKontrast")

case "normal" kontrastColor = "background-color: #ffffee; color: #000000; "

case "kontrast" kontrastColor = "background-color: #333333; color: #ffff00; "

end select

select case request.cookies("anpassa")("textStil")

case "serif" Stil = "font-family: Georgia; "

case "sans-serif" Stil = "font-family: Verdana ; "

end select

%>

<html>

<head>

<title>Anpassa</title>

<%

with response

.write "<style>" & vbCRLF

.write "h1, h2, p, li { " & Storlek & "}" & vbCRLF

.write "body { " & kontrastColor & Stil & "}" & vbCRLF

.write "</style>"

end with

%>

</head>

<body>

<a href="mr66.asp?textStorlek=0.8" title="Mindre text">Liten</a>&nbsp;|&nbsp;

<a href="mr66.asp?textStorlek=1" title="Normal text">Normal</a>&nbsp;|&nbsp;

<a href="mr66.asp?textStorlek=1.2" title="Större text">Stor</a>&nbsp;|&nbsp;

<a href="mr66.asp?textKontrast=normal" title="Normal kontrast">Normal kontrast</a>&nbsp;|&nbsp;

<a href="mr66.asp?textKontrast=kontrast" title="Högre kontrast">kontrast</a>&nbsp;|&nbsp;

<a href="mr66.asp?textStil=serif" title="Teckensnitt med serif">Serif</a>&nbsp;|&nbsp;

<a href="mr66.asp?textStil=sans-serif" title="Teckensnitt utan serif">Utan serif</a>

<h1>Detta är en H1 exempelrubrik</h1>

<p>Detta är ett P exempelstycke</p>

</body>

</html>

Prova filen så här långt.

Öppna anpassa-panelen i nytt fönster

9 Slutputs

Återstår att införa ovanstående på projektsidan "Mänskliga rättigheter".

Slutresultatet

Öppna anpassa-panelen i nytt fönster

Givetvis finns det mer att önska av denna sida, t.ex bättre färgkombinationer vid högkontrast, men det medger inte tiden just nu.

10 Läsarkommentarer

10.1 Kommentera själv

• Här finns möjlighet att komplettera informationen, ställa frågor eller kommentera detta dokuments målgruppsanpassning eller utformning.

Kommentar:

Namn (frivilligt)

Publicerad av:

Johan Sundström