1 Vad är tillgänglighet?

Människor förutsättningar är olika på följande viktiga områden

• fysiska förmågor
• sensoriska egenskaper
• kognitiv förmåga
• olika kunskaps- eller tekniknivåer et cetera

Tillgänglighet (accessibility) på webbinnehåll är när webbplatser utformas för människor...

• med nedsatt eller ingen syn
• med nedsatt eller ingen hörsel
• med nedsatt rörelseförmåga
• med nedsättningar i förmåga att läsa
• med nedsatta förmågan att omvandla intryck från sinnen till meningsfull information, perception

Förutom mänskliga nedsättningar kan tillgänglighetsanpassningar göras för människor i speciella miljöer och förutsättningar, t.ex. för människor...

• utan hjälp av, eller förmåga att använda, t.e x. mus eller tangentbord
• som inte behärskar språket som används på webbsidan
• som befinner sig i en informationsrik (bullrig) miljö
• med olika webbläsare, operativsystem eller datorer som t.ex. handdatorer

Hög tillgänglighet är kort när webbsidan eller -platsen utformas med hänsyn till ovanstående.

2 WCAG's riktlinjer

• Inom World Wide Web Consortium (W3C) driver man utvecklingen av webbstandarder.
• Inom W3C driver Web Accessibility Initative (WAI) utvecklas riktlinjer och strategier för hur man kan uppnå webbtillgänglighet.
• WAI riktlinjer för tillgänglighet på webben heter Web Content Accessibility Guidelines (WCAG).
• De aktuella riktlinjerna uppnådde status Rekommendation redan 1999 och har versionsnumret 1.0.
• WAI arbetar f.n. WCAG ver.2.0 som idag (feb 2006) har status Working Draft.
• WCAG ver. 1.0 innehåller 14 riktlinjer för att kvalitetssäkra hög tillgänglighet.
• Varje riktlinje i WCAG ver.1.0 har tre prioriteringsgrader.
• Prioritet 1 (P.1) betyder att riktlinjen måste uppfyllas, prioritet 2 bör uppfyllas och prioritet 3 kan uppfyllas.
• Om alla Prioritet 1-riktlinjer uppfylls har man nått Nivå A, om Prioritet 1 och 2 uppfyllts når man Nivå AA. Om slutligen samtliga prioriteringar är uppfyllda har man nått Nivå AAA.

2.1 WCAG - Riktlinje 1

"Tillhandahåll motsvarande, alternativ information för auditoriskt (röst och ljud) och visuellt innehåll"

• 1.1 [Prioritet 1] Använd "alt" tillsammans med IMG-element
• 1.2 [Prioritet 1] Använd "longdesc" för att beskriva en komplex IMG
• 1.3 [Prioritet 1] Tillhandahåll uppläst information

WCAG riktlinje 1.3 handlar om uppläst information, det kommer nedanstående information att handla om.

3 Uppläsning

3.1 Praktiskt fall

Förberedelser, läs FAKTA-sidorna och faktasidan Webbsida med CSS så är du redan med i grundresonemanget för hur sidan om webbexemplet Mänskliga rättigheter struktureras.

Många säger att det går utmärkt att HTML-koda exempelvis färg på bakgrund och färg på text direkt i HTML. Det gör i sin tur att man blandar ihop struktur och presentation.

Se på följande informationsmängd: 

Mänskliga rättigheter. "Alla människor är födda fria och lika i värde och rättigheter." Så inleds FN:s allmänna förklaring om de mänskliga rättigheterna. För den svenska regeringen är det en prioriterad uppgift att stärka de mänskliga rättigheterna, och respekten för dem. Det gör vi i det politiska arbetet i Sverige och det gör vi i utrikespolitiken. Frågor om mänskliga rättigheter genomsyrar de flesta politikområden. Vad är mänskliga rättigheter? De rättigheter som inryms i FN:s allmänna förklaring om de mänskliga rättigheterna från 1948 innehåller, enkelt uttryckt 1) de grundläggande friheterna, såsom rätten att hysa eller uttrycka åsikter, att utöva en religion, att bilda eller gå med i en organisation eller att ordna möten 2) rätten till skydd mot övergrepp, till exempel rätten att inte bli godtyckligt arresterad eller utsättas för tortyr 3) rättigheter för att tillgodose de grundläggande behoven, till exempel rätten till en tillfredsställande levnadsstandard, till hälsovård och till utbildning. Under de drygt femtio år som gått sedan den allmänna förklaringen antogs har rättigheterna slagits fast i ett antal internationella konventioner. Konventionerna tillförsäkrar enskilda olika rättigheter gentemot statsmakten. Sverige har ratificerat de centrala konventionerna om mänskliga rättigheter, vilket innebär att vi förbundit oss att respektera konventionernas regler. Den svenska utrikespolitiken ska bidra till att människor också i andra länder får del av de mänskliga rättigheterna. Regeringens webbplats om mänskliga rättigheter.

Efter att ha analyserat texten ser man att den går att strukturera. Det finns naturliga avdelningar i texten som blir rubriker, stycken och uppräkningar som kan lösas med punktlistor. Detta låter sig enkelt göras med HTML. Här är mitt förslag på HTML-struktur. Öppna länken och välj att visa källa (se koden).

Separera delarna

Jag har redan nämnt det, en bra förutsättning för att påverka användbarhet är att skilja på

• information (text)
• struktur (html), stycken, rubriker osv.
• presentation (css),

Separation av strukturen innebär för helheten att strukturen kan anpassas till olika 

4 Ljud i Windows

Uppläsning

För att erbjuda uppläsning som komplement till text på en webbsida, kan man skapa en ljudfil där man antingen läser upp texten själv eller spelar in en skärmuppläsares röst. Resultatet är det samma, en ljudfil. Jag tar dig med praktiskt hur detta kan gå till.

Skapa ljudfiler i Windows

Windows har en applikation som heter Ljudinspelaren. Den fungerar rätt bra om man bara kommer över några trösklar i förståelse.

1. Starta Windowsprogrammet. Om du inte hittar det, klicka Start - Kör och skriv:
   
   %SystemRoot%\System32\sndrec32.exe
   
   
    
2. Första utmaningen är att Ljudinspelaren endast verka kunna spela in max 60 sekunder. Filosofin bakom det problemet är att Ljudinspelaren har en blank startfil på 60 sekunder att spela in på.
    
3. För att spela in en längre ljudfil på exempelvis 3 minuter (180 sekunder) måste man infoga fil. Skapa först en helt ljudlös fil, spara denna fil men namnet 60sBlank.wav.
   
   
    
4. Välj därefter Redigera - Infoga fil - 60sBlank.wav. Upprepa punkt 4 tills man har längd 180.00 sek om tre minuter behövs för projektet.
   
   
    
5. Nästa utmaning som kan uppstå är att inget ljud spelas in när man vill det. På de flesta ljudkort har man flera kanaler. Man har t.ex. Mic, Line in, Line out eller USB enheter osv. Vilken kanal som för tillfället används visas genom att klicka på Redigera - Ljudegenskaper
   
   
    
6. Observera att detta kan se olika ut beroende på vilka förutsättningar datorn har. Klicka på knappen Volym under Inspelning av ljud.
   
   
    
7. Om endast ett få antal kanaler visas och inte de som förväntades klickar man på Alternativ - Egenskaper. Då visas alla de möjliga kanaler som ljud kan inspelas från. Bocka för de som behövs i projektet.
   
   
    
8. Välj därefter för den ljudkanal som du kommer att använda i projektet och ställ in önskad volym, exempelvis mikrofon. Efter detta går det bra att stänga kontrollfönstret.
   
   
    
9. Nu är det klart att börja spela in ljudet från den önskade kanalen.
   
   
    
10. Provlyssna resultatet, se till att vågspektrat inte slår i botten, gör nya justeringar på volym om det behövs. Det är inte helt ovanligt att punkt 9 och 10 för göras om tills man är nöjd med resultatet.
11. Om det blir tyst en bit i början eller slutet av ljudfilen, klipps detta bort genom att man spelar fram till platsen för önskat klipp, stoppar och väljer Redigera - Ta bort före/efter aktuell position.
    
    
     
12. Ett förslag på resultatet av ljudfilen så här långt
     
13. Om man behöver komprimera filen ytterligare kan man konvertera wav-filen till MP3 genom någon lämplig konverterare. Jag laddade ner ett program och konverterade filen till MP3 med fomatet VBR som är variabel komprimering. Filen blev då ca halva storleken, men kan också komprimeras mycket mer som MP3-fil.

5 Uppläsning med HTML - enkel variant

Dagens datorer har goda multimediala förutsättningar, dock inte alla. Att skapa en länk för ljud kan gå till så här:

1. Leta upp en ikon som får användaren att förstå möjligheten att få texten i webbläsaren uppläst. Sök själv på Google. Spara ikonen på din webbserver.
    
2. Länka därefter ljudet till ikonen eller bilden genom exempelvis följande i en befintlig webbsida:
   
   <a href="manskliga_rattigheter.mp3"><img src="logo.gif" border="0" alt="L&auml;s upp texten" style="position: relative; float: right; border: 0;"></a>
   
   
   

Vi skulle kunna stoppa där och vara nöjda men jag vill gärna visa en lite mer funktionell variant. Vad sägs om att ha spelaren inbyggd i webbsidan?

6 Uppläsning med ASP, HTML - avancerad variant

Inbäddad mediaspelare

Så här kan en inbäddad mediaspelare se ut på en webbsida.

Din webbläsare stöder inte detta plug-in

Exakt hur ovanstående kommer att se ut på webbsidan beror på vilken mediaspelare man har installerat på sin dator. Så vi är redan ute på hal is här om vi exakt vill styra hur spelaren kommer att se ut. Vi studerar detta endast som ett exempel.

Vi åstadkommer ovanstående på det enklaste sättet genom den kontroversiella koden <embed ...> i HTML. Kontroversiell därför att koden inte är en del av HTML 4 eller XHTML 1 specifikationen, ändå stöds den väl av moderna webbläsare. Så använd denna metod med den insikten.

<embed src="manskliga_rattigheter.mp3" width="300" height="42" volume="50" autostart="false" loop="false" controls="playbutton">
<noembed>Din webbl&auml;sare st&ouml;der inte detta plug-in</noembed>

Nu får vi dock tänka till, om en mediaspelare är synlig på bildskärmen kommer den att innebära stor lockelse även för de som inte behöver få texten uppläst. Den kommer att störa helhetsintrycket genom att tillföra brus. Lösningen på det problemet blir då att dölja spelaren tills dess att den ska användas.

Det vore också smurt(?) om man kunde ha en webbsida som hanterade uppläsningen utan att behöva bygga in det på varje HTML-sida. Det kan lösas genom att webbsidan som man önskar få uppläst, länkar till ett FRAMESET med textwebbsidan i merparten av FRAMSET'et och en webbsida med mediaspelaren i den mindre, nedre delen.

Så här kanske...

En tydlig stoppknapp visar att man kan avsluta och återgå till webbsidan som man ville ha uppläst. Stoppknappen måste därför länkas dynamiskt till den sida som anropade den, om man vill kunna använda skärmuppläsning på flera sidor.

I detta flödesdiagrammet ser vi att flera sidor (sida1.htm - sida3.htm) kan

1. länka till funktionen Läs upp!
2. Ett Frameset startar och läser in anropande sida (sida som begärde uppläsning) tillsammans med
3. reader.htm (uppläsningssidan). När användaren väljer att
4. avsluta uppläsningen länkas man tillbaka till utgångssidan (sida1.htm-sida3.htm).

Frameset

Detta är ett förslag på lösning om man vill använda FRAMESET som i exemplet ovan.

1. Från din sida som ska kunna läsas upp, lägg till följande tre kodrader på lämpligt ställe:
   
   rad 1: <a href="start.asp?read=manskliga_rattigheter.wav&redir=
       <% =Request.ServerVariables("PATH_INFO") %>">
rad 2: <img src="screenreader.gif" width="32" height="32"
       alt="L&auml;s upp texten" style="position: relative;
       float: right; border: 0;">
rad 3: </a>;
2. Skapa en webbsida med namnet start.asp och följande innehåll: 
   
   <html>
<head>
  <title>Skärmläsare</title>
</head>
<frameset rows="*,46" frameborder="yes" border="1" framespacing="0">
  <frame name="main" src="<% =request.querystring("redir") %>" noresize>
  <frame name="topp" src="reader.asp?read=<% =request.querystring("read") %>" noresize>
</frameset>
</html>
   
   Kort förklaring om FRAMESET: En FRAMESET-fil är en HTML fil utan BODY.

   Den lite blåare texten visar FRAMESET deklarationen. Observera att variabler för dynamiskt innehåll används. REDIR använder jag som variabel för uppgift om webbsidan man utgick ifrån när man ville ha texten uppläst. READ är variabeln som innehåller namnet på den aktuella ljudfil som blir infil till mediaspelaren.
    

   • frameset rows="*, 46" - anger första ramen med ospecificerad höjd (*). 46 anger antalet pixlar i höjd för andra ramen (mediaspelarens höjd)
   • frameborder="yes" - anger att en 3D-kantlinje skiljer ramerna åt
   • border="1" - anger att kantlinjen är 1 pixel hög
   • framespacing="0" - används när frameborder är "no"
      
   • frame name="main" - anger första ramens namn
     noresize - anger att användaren inte kan förändra ramarnas höjd, vilket annars är möjligt

Mer om FRAMESET

Active Server Pages (ASP)

ASP möjliggör att programmera serverskript. Det behöver du inte kunna behärska utan ta bara hjälp av exemplen. Dessa kan kopieras.

I FRAMSET's andra och tredje rad, markerat med röd text, återfinns:
<% =request.querystring("redir") %> och
<% =request.querystring("read") %> vilket är ASP skriptteknologi som inte har med FRAMES att göra. Raden gör det möjligt att skicka data från en webbsida till annan m.h.a. formulärpostteknik. Mer om det på annat ställe.

Ett krav för att ASP's skriptteknologi ska fungera är bl.a. att

• filerna har filändelsen .asp
• filen exekveras (körs) från webbservern

Prova hur min version fungerar så här långt.

Textinformation till bild

För att uppfylla samliga riktlinjer i WCAG's första riktlinje, skall bilder även få textinformation.

Eftersom det ligger en bild med en glad pojke som gör ett V-tecken med fingrarna så lägger jag till det i koden och reder samtidigt ut vad fingertecknet betyder.

<img src="mr_happykid2.jpg" alt="Glad, lekande pojke som g&ouml;r segertecknet"/>

Jag passar samtidigt på att ge länken till "Regeringens webbplats" i vänsterdelen en alternativ text.

<a hef="http://www.manskligarattigheter.gov.se/" title="Regeringens webbplats om m&auml;nskliga r&auml;ttigheter">webbplats</a>

Återstår att införa ovanstående på slutliga filen.

Se slutresultatet och kontrollera XHTML-giltighet genom att klicka på flaggan.

7 Läsarkommentarer

7.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