Startsida / Kurs/ Fakta-serien / Webbplatser med tillgnglighet

FAKTA - Webbplatser med tillgnglighet

Audience: beginners-advanced

Objective: Pverka presentationen p innehllet i en webbsida genom att erbjuda en anpassningspanel.

Keywords: tillgnglighet, anpassning, WCAG, Lsarkommentarer

Date of publish: 2006-01-01

Author: johan.sundstrom@mdh.se
 

1 WCAG's tredje riktlinje

"Anvnd kodning och formatmallar (style sheets) och gr det rtt"

  • 3.1 [Prioritet 2] Nr lmpligt kodningssprk finns tillgngligt, anvnd kodningen snarare n bilder. Undvik allts att gra en klickbar bild som frestller en navigeringsmeny.

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

  • 3.3 [Prioritet 2] Anvnd formatmallar fr att styra layout och presentation

  • 3.4 [Prioritet 2] Anvnd relativa snarare n absoluta enheter i kodningens attributvrden och i formatmallarnas egenskapsvrden.

  • 3.5 [Prioritet 2] Anvnd element i HEAD-delen av dokumentet fr att ange dokumentstrukturen och anvnd dem som specificerat. Anvnd t.ex. H2 som undersektion till H1 och inte fr att skapa typsnittseffekter.

  • 3.6 [Prioritet 2] Koda listor och listposter rtt. Anvnd OL, UL och DL rtt.

  • 3.7 [Prioritet 2] Koda citat. Anvnd inte QUOTE fr att skapa formatteringseffekter, som indrag.

WCAG riktlinje 3 handlar mycket om presentationen av innehllet. Jag kommer att g genom vad som praktiskt kan gras fr presentationen av ett givet informationsmaterial.

2 Presentationen i praktiken

Informationen

Nr det gller presentation av ett givet informationsmaterial med villkoret att informationen inte fr frndras ska vi snart se att det gr att pverka rtt mycket.

Skert har dessa steg redan tagits genom strukturen av informationen:

  • Meningsfulla rubriker
  • Kontrollera texten noga efter eventuella felstavningar eller grammatiska fel
  • Frklara definitioner, tekniska termer osv.
Strukturen

Exempel p hur struktur kan pverkas:

  • Bryt upp informationen i flera stycken, frsk hlla ett budskap per stycke.
  • Anvnd hellre punktlista n upprkningar
  • Omvnda pyramidens skrivstt. Det viktigaste frst, drefter underbyggande information.
Presentationen

Exempel p hur presentationen kan pverka tillgngligheten:

  • Radlngd
  • Vnster- eller marginaljusterad text
  • Radavstnd
  • Avstnd mellan tv stycken
  • Kontrast
  • Teckenstorlek
  • Minskat bakgrundsljus
  • Anvndarkontroll

I denna vning kommer vi att fokusera p hur anvndaren sjlv kan pverka teckenstorlek, kontrast och val av typsnitt.

3 Anvndarkontroll

Vi brjar i nden med anvndarkontroll och arbetar oss bortt.

Med anvndarkontroll menas antingen att anvndaren/beskaren fr en liten panel dr innehllet kan pverkas eller att knda snabbkommandon anvnds fr att pverka presentationen.

Exempel p anvndarkontrollpaneler i skala 1:1 r:


regeringen.se


tibo.se


uu.se

...osv.

I ovanstende exempel visas tydligt det jag r ute efter, det saknas en standard fr hur anvndarkontroller 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" behver f en prominent plats p skrmen lngt frn "hungriga skrollnings-troll". 

Hr r mitt frslag som jag kommer att jobba p i denna presentation tillsammans med lite exempeltext:

ppna anpassa-panelen i nytt fnster

Anpassningspanelen skapade jag s hr:

<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 fr designen r fljande:

  • HTML och CSS bygger upp utseendet (WCAG riktlinje 3.1, 3.3)
  • Anvnder relativa mttenheter dr sdana ska anvndas (WCAG Riktlinje 3.4)
  • Anvnder slutenhetens- eller konturlagen med ramen runt
  • Anvnder likhetslagen med stor- mellan och lilla "A".
  • Visar kontrastskiftesmjligheten med exempel
  • Den svarta bakgrundsfrgen r inte helt svart fr att undvika fr dovt mrker
  • Texternas nyanserade gra frg syns med hg kontrast
  • Rubrik som namnger panelen

4 Textens storleksanpassning

Det finns flera metoder fr att jobba med personlig anpassning. Jag visar den enkla som bygger p att anvndaren, genom att klicka p textstorleksanpassning, helt enkelt byter ut aktuell formatmall.

Det lter enkelt, men det som mste fungera inuti "svarta ldan" r att man genom lnkklicket tar med sig nskad storlek och sparar denna anvisning i en Cookie. Det gr att man inte behver stlla om textstorleken fr varje sida som besks p webbplatsen.

Cookie r en liten fil (max 4096 byte enligt RFC 2109, men oftast mindre) som sparas i anvndarens dator och innehller den information som programmeraren bestmmer. Anvndaren kan dock neka att spara Cookie'n s det gr inte att lita till 100% p funktionen.

Nr anvndaren har valt en storlek p texten och instllningen sparats i cookie'n, anvnds den drefter p alla efterfljande webbsidor inom webbplatsen.

Observera att ett anvndarval pverkar inte webbsidans utseende fr alla beskare, utan endast fr den som gjort sin instllning.

5 Lyssna p anvndaren

Eftersom vi vill undvika att stta stilar med HTML, d det lser mjligheten att pverka presentationen, s mste presentationen sttas med formatmallar (CSS).

Ls mer om formatmallar CSS i FAKTA-serien.

Med ASP skriptteknologi r det mjligt att gra dynamisk webbkod och drmed skapa dynamiska webbsidor. Det mesta med anvndarval kretsar kring att vi ska komma t det som anvndaren valt (klickat).

En lnk som innehller data ser ut s hr

<a href="webbsida.htm?variabel=vrde">Lnk</a>

Det som tillkommer i ovanstende exempel r ngot som kallas QueryString.

En QueryString inleds alltid med ett frgetecken, fljt av en godtycklig variabel samt dess vrde.

url?variabel=vrde

Vid fler variabler, avgrnsas dessa med ett &-tecken, enligt nedanstende exempel:

url?variabel1=vrde1&variabel2=vrde2 osv...

Undersk vilka variabler och vilka vrden som anvnds i fljande exempel:

ppna anpassa-panelen i nytt fnster

Besvara fr dig sjlv:
Vilka variabler hittade du?
Vilka var dess vrden?

6 Vad gr beskaren?

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

Nr anvndaren klickat p t.ex. A+ kommer, i vrt fall, lnken att lnka tillbaka till samma sida.

P den sidan ska vi lsa av QueryString'en och se vad anvndaren begrt.

Vi lser av genom att anvnda ASP - skriptteknik. Kom ihg att s fort vi ska anvnda oss av ASP, mste filndelsen vara .ASP samt exekveras frn en webbserver.

Se p fljande fil som r dpt till fil.asp.

ppna anpassa-panelen i nytt fnster

Vlj att visa kllan till ovanstende fil. Notera att HTML-koden innehller samma information som finns i QueryString'en.

Frenklat stadkoms ovanstende genom fljande:

HTML-kod...
<%
response.write request.queryString("textStorlek")
%>
HTML-kod... 

Mitt bland HTML-koden kan man "lmna" HTML-kod fr att g ver till ASP-kod genom <% och avsluta med %> Mellan dessa ASP-avgrnsare skriver man sitt serverskriptsprk, jag har valt det enklaste, VisualBasic Script.

  • Response.write - betyder skriv ut fljande till webblsaren
  • request.queryString("textStorlek") betyder ls variabeln textStorlek's vrde frn frgestrngen.

Allts, skriv ut textStorlek vrdet och visa det i webblsaren

Vi har nnu inte uppntt teckensnittsfrndring, men vi r nra nu.

7 Mer om Cookies

Nr vi nu anvndaren har gjort ett anpassningsval br vi spara det fr kommande visningar inom webbplatsen. Vi sparar genom att lagra det i en cookie.

Hr sparas alla anpassningsval under ett gruppnamn som jag valt att heta anpassa (frsta delen efter response.cookies).

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

Vrdet p variabeln textStorlek som nu finns p URL'en (frgestrngen) ska matas in i en cookie. Dr lagras vrdet p variabeln textStorlek under ett gruppnamn som heter anpassa.

Vi lser cookien p samma stt

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

Istllet fr response, anvnds nu istllet kommandot request.

ppna anpassa-panelen i nytt fnster

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

8 ASP styr CSS som styr presentationen

Nu har vi alla pusselbitar, det r dags att lgga ihop dessa.

  1. Lnkar tar med vrden <a href="fil.htm?data=11">
  2. Vi lser av frgestrngen i URL (webbadressen)
    <% request.queryString("data") %>
  3. Vi lagrar vrden i cookies <% response.cookies("data")=11 %>
  4. Vi terlser frn cookies <% request.cookies("data")
  5. Vi lter cookie's vrden pverka en dynamiskt utformad formatmall (CSS). Se nedan

Prova den hr koden

<%
'hmta vrden
if len(request.serverVariables("QUERY_STRING")) > 0 then
  For Each Item In request.queryString
    response.cookies("anpassa")(Item) = request.queryString(Item)
  next
end if
 
'ls frn 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="Strre 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="Hgre 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 hr lngt.

ppna anpassa-panelen i nytt fnster

9 Slutputs

terstr att infra ovanstende p projektsidan "Mnskliga rttigheter".

Slutresultatet

ppna anpassa-panelen i nytt fnster

Givetvis finns det mer att nska av denna sida, t.ex bttre frgkombinationer vid hgkontrast, men det medger inte tiden just nu.

10 Lsarkommentarer

10.1 Kommentera sjlv

  • Hr finns mjlighet att komplettera informationen, stlla frgor eller kommentera detta dokuments mlgruppsanpassning eller utformning.

Kommentar:

Namn (frivilligt)

  • Mälardalens högskola |
  • Box 883 |
  • 721 23 Västerås/Eskilstuna |
  • 021-10 13 00, 016-15 36 00 |
  • info@mdh.se |
  • Om webbplatsen