Användarvänlig, Tillgänglig Layout

När man ska skapa sin sidas layout vill man kanske först och främst att den ska se snygg och tilltalande ut. Japp, rätt tänkt!

Men många av de tekniker som fungerar tiptop för oss vanliga besökare - som surfar med vanliga grafiska webläsare - kan ställa till problem för dem som har någon typ av funktionshinder.

Faktiskt! Det är inte alls speciellt svårt att göra sin sida tillgänglig för alla - samtidigt som den blir snygg och tilltalande för de flesta.

På den här sidan följer några enkla tips som är bra att ha som utgångspunkt när man skapar sin sida.

De undanröjer de vanligaste problemen för dem med funktionshinder samtidigt som man inte behöver göra några större avkall på den konstnärliga utformningen för alla oss andra vanliga dödliga.

Inledning

För många funktionshindrade är datorn och webben ett fantastiskt hjälpmedel som ger stor möjlighet till ett mer självständigt liv. Men en del behöver använda hjälpmedel för att det ska funka.

Är det inte synd att utestänga dem från den här fantastiska världen?

Din uppgift som webside-byggare är alltså att se till att din sida är användarvänlig och tillgänglig även för dem!

Men! Gå för all del inte till överdrift! Det vimlar av sidor på nätet nu för tiden som är helt omöjliga att tillägna sig därför att de är så anpassade att de är fullkomligt oläsliga för oss med vanliga webläsare och lite högre upplösning. Flertalet av dina besökare har inte några som helst problem att ta del av din sida visuellt!

Sidan ska alltså funka för ALLA. Design är också viktigt! De enkla riktlinjer som följer nedan räcker långt för att de med funktionshinder och olika hjälpmedel ska kunna ta del av din sida på ett bra sätt.

Redskap & Hjälpmedel

Grafiska webläsare

De flesta vanliga grafiska webläsare har funktioner för att underlätta för personer med funktionshinder som t.ex. nedsatt syn eller färgblindhet. Man kan förstora texten manuellt eller helt enkelt "stänga av" eventuell formgivning som skapats med CSS. På så sätt kan man själv styra storlek på text, bestämma färger och utseende på länkar - antingen med en egen stilmall eller genom att ändra webläsarens grundinställningar. Den Norska webläsaren Opera hanterar det här på ett mycket bra sätt.

Möss & Tangentbord

De flesta websidor är uppbyggda för att man ska kunna klicka sig runt med musen. Men om man har problem att använda en vanlig mus finns specialanpassade lösningar. De fungerar som vanliga "möss" men styrs på ett anpassat sätt.

Det är inte heller ovanligt att föredra tangentbordet när man surfar - och kan man inte använda musen är det ofta ett utmärkt alternativ.

Men många klarar av olika anledningar inte av att använda ett vanligt tangentbord. För dem finns speciellt anpassade varianter.

När man vill ta del av en websidas innehåll med tangentbordet använder man oftast tabb-tangenten, pilarna för "upp och ner" (eller motsvarande) kombinerat med olika snabbkommandon.

Textläsare

Textläsare presenterar websidan utan layout. Bara texten - uppifrån och ner - från A till Ö så att säga. Vissa textläsare visar ramar / frames som de är tänkta - medan andra får problem att tolka layouter som är uppbyggda av med ramar / frames.

Skärmläsare

En skärmläsare tolkar det som visas på skärmen och omvandlar det till andra uttryck. Men alla har inte exakt samma behov. Därför fungerar inte alla skärmläsare likadant - de är anpassade för olika grupper och deras speciella funktionshinder.

Men gemensamt för de flesta skärmläsare är att de - precis som Textläsare - tolkar sidans innehåll i den ordning det skrivits in på sidan. Därför har skärmläsare svårare att förstå layouter som är konstruerade med tabeller. De har också problem att hitta in på sidor uppbyggda med ramar / frames.

Skärmläsare med talsyntes

En skärmläsare med talsyntes förvandlar text på en sida till tal. Är man blind är det här förstås ett ovärderligt hjälpmedel!

Skärmläsare med punktskriftsfunktion

Punktskrift är ju ett alfabet som gör det möjligt att med känseln tolka bokstäver och för att läsa. Kan man varken se eller höra är en skärmläsare med punktskriftsfunktion enda möjligheten att ta del av en websidas innehåll.

Kontrast & Förstoring

Med hjälp av speciella program som skärper kontasterna och / eller förstorar innehållet på skärmen kan personer med nedsatt syn eller färgblindhet själva styra hur innehållet på en websida presenteras. Här kan man anpassa förstoringsgrad, teckensnitt och färger så att det passar ens egna speciella behov.

Det är också vanligt att man som synskadad - med program eller speciell utrustning - kan ställa in skärmen så att den visar innehållet med en lägre upplösning än vad som annars är möjligt.

 Till Toppen 

Riktlinjer i stort som underlättar för alla!

Här följer några enkla riktlinjer som är bra att hålla sig till när man bygger websidor. De underlättar för alla och gör din sida användarvänlig.

Anpassa sidan till flertalet Webläsare

Se först och främst till att din sida fungerar och ser ut på samma sätt för alla surfar med vanliga grafiska webläsare. Alla har inte möjlighet att själva bestämma vilken webläsare de vill använda. Många använder offentliga datorer - kanske på skolan, arbetsplatsen eller ett internetcafé. Du gör dig själv en tjänst genom att se till att de har samma tillgång till din sida som alla andra.

Offentliga datorer har ofta en högre säkerhetsnivå vilket till exempel kan innebära att de har javascript avstängt eller att det inte finns möjlighet att visa "flash". Du måste inte nödvändigtvis avstå från att använda sådana finesser - men du bör tänka på att sidan ska fungera på ett tillfredsställande sätt även utan dem!

Anpassa alltså sidan så att den fungerar på samma sätt för de flesta. Håll dig till de koder som är korrekt enligt standard och kontrollera din sida i flera webläsare - vartefter du kodar.

För att det här inte ska bli alltför ansträngande är mitt förslag att du använder: Mozilla Firefox och Internet Explorer. Om din sida ser bra ut i både FF och IE kommer den förmodligen att fungera i de flesta andra webläsare också. Dessutom täcker du in flertalet surfare på webben eftersom 90% använder antingen FF eller IE.

Här kan du hämta Internet Explorer och Mozilla Firefox - båda är gratis!

 Till Toppen 

Använd DOCTYPE och ange språk

En DOCTYPE överst på sidan och en ISO-upplysning i sidans huvud gör det lättare för vilken webläsare som helst att tolka dina sidor. För webläsare med talsyntes underlättar det otroligt om man dessutom anger språket även i HTML-taggen.

Så här t.ex. - om du skriver på svenska och använder HTML 4.01 Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="sv">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Sidans titel</title>
</head>
<body> :::: </body>
</html>

Om du sedan på sidan har ett avsnitt skrivet på t.ex. engelska är det bra att märka ut det direkt i koden.

Så här t.ex:

<p lang="en">Hallo Baby! You are looking good tonight!</p>

Eller så här:

<p>Hon sa: <span lang="en">Hallo Baby! You are looking good tonight!</span></p>

På  W3C:s webbplats  kan du hitta fler språkkoder och på NinetNet kan du läsa mer om olika DOCTYPE's här: HTML / Doctype & Validering

Och för guds skull! Skriv inte SW (med dubbel-v) om du skriver på svenska - för då tror webläsaren för sjuttsingen att det är Swahili... Ha ha - Smily!

 Till Toppen 

Ge dina dokument tydliga, unika titlar

Sidans titel skrivs ju inom head mellan <title> och </title>. Se till att titeln beskriver innehållet på sidan på ett tydligt sätt. Använd inte heller samma titel på fler än ett dokument.

Skärmläsare börjar med att presentera sidans titel. Titeln är alltså det första de kommer i kontakt med på sidan och därför väldigt viktig.

Det skadar inte heller att ha tydliga mapp och filnamn. Det gör det lättare att tolka sidans sökvägar och alla får en bättre uppfattning om hur webplatsen är uppbyggd.

 Till Toppen 

HTML för Innehåll & Struktur

Använd HTML's korrekta taggar för att strukturera innehållet på sidan och märk upp texten på ett logiskt sätt.

Det här underlättar för alla typer skärmläsare - som annars får problem att tolka vad som är t.ex. rubriker och vad som är vanlig brödtext.

Att uteslutande använda CSS för att få samma effekt fungerar hjälpligt för oss som kan se vad som är vad - men för andra blir innehållet en enda sörja!

Här hittar du en lista över taggarna i HTML och hur de ska användas: w3schools.com.

 Till Toppen 

Placera innehållet tillgängligt

Man bör också försöka placera sidans huvudinnehåll så tidigt som möjligt i själva HTML-koden och dessutom - om det är möjligt - placera menyn längst ner. Det underlättar för dem som använder skärmläsare. De får ta del av själva innehållet först - vilket ju ofta är det man är ute efter - och sedan länkarna som leder vidare.

En sådan struktur åstadkommer man lättast genom att använda CSS för att placera innehållet på sidan.

CSS för Layout & Placering

Använd CSS för att placera och stajla din sidas utseende. Undvik så långt det är möjligt koder som styr sidans utseende i själva HTML-filen.

Det underlättar för alla med funktionshinder samtidigt som det underlättar för dig själv och gör koden renare och sidan lättare att ladda.

 Till Toppen 

Textstorlek

För att förenkla för dem med nedsatt syn bör man ange textstorleken med ett relativt mått som em eller procent. Det gör det möjligt att på ett enkelt sätt förstora texten i alla webläsare.

Brödtextens storleken på sidan bör också i utgångsläget vara så stor att de flesta besökare kan läsa den utan problem. Då undviker man dessutom att alla och en var förstorar texten - och layouten visas för de flesta som den är tänkt att vara. Som regel anses det som motsvarar teckensnittet Verdana med 12 pixlar vara en normal textstorlek.

Texten i den här rutan är skriven med teckensnittet Verdana i storlek 12 pixlar. De flesta tycker att det är en textstorlek som är bekväm att läsa!

Färger & Kontrast

Kontrasterande färger för bakgrund och text underlättar läsbarheten för alla. Mörk text mot ljus bakgrund är oftast den bästa kombinationen - oavsett om man har synproblem eller inte.

Men när du väljer färger bör du också tänka dig in i hur det skulle ta sig ut om du var färgblind. Vissa färger upplevs som om de kontrasterar mot varandra - men för en färgblind kan de i själva verket uppfattas som en och samma färg. Se därför till att använda färger med olika "mättnad" - eftersom likartad mättnad kan uppfattas som samma grå ton för en färgblind.

Gör sidan färgoberoende - den ska fungera oavsett om man kan urskilja färgerna eller inte. Se alltså till att färg inte är det enda som skiljer sidans olika delar från varandra. Använd inte heller endast färg för att visa vad som är t.ex. en rubrik eller en länk. Olika storlekar på rubriker och understrykningar på sidans länkar är alltså ingen dum idé.

På Webaim kan du få en uppfattning om hur färgblinda upplever färger.

 Till Toppen 

Anpassa Länkarna

Länkar skrivs ju som bekant mellan <a> och </a>. För att underlätta för dem som använder hjälpmedel när de surfar ska en länk alltid kombineras med attributet "title" där man kortfattat beskriver länken.

Så här t.ex.:

<a href="sida1.html" title="Beskrivning">Sida 1</a>

För dem som surfar med olika typer av text och skärmläsare bör du också se till att själva länktexten tydligt beskriver vart länken leder.

NIX:

<a href="sida1.html">Klicka här</a> för att komma till Sida 1.

JAPP:

Här är en länk till <a href="sida1.html" title="Beskrivning">Sida 1</a>.

Om man använder target=_blank - för att öppna sidan i ett nytt fönster - bör man upplysa om detta så att det inte blir förvirrande. Man bör också göra tydligt om en länk leder utanför den egna webplatsen.

Så här kanske:

<a href="http://www.ninetnet.com" title="Till Ninetnet / Extern länk / Nytt fönster" target="_blank">NinetNet's Hemsideguide</a>

Använder man javascript för att öppna sidor i ett nytt fönster (vilket är vanligt om man kodar strict) bör om man särskilt upplysa om det eftersom de som surfar med den funktionen avstängd inte kommer att se sidan i ett nytt fönster...

Då kan det se ut så här i stället:

title="Till Ninetnet / Extern länk / Med Javascript: Nytt fönster"

 Till Toppen 

Bilder & Alt-text

Bilder som är viktiga för innehållet ska infogas med: <img>. Ibland kan det vara frestande att använda bakgrundsbilder för att visa en bild - men då kommer bilden vanligtvis inte att uppfattas av text och skärmläsare.

Dessutom måste man infoga en beskrivning av bilden med attributet: alt - för att bilden ska kunna tolkas även av dem som inte kan se den.

Så här kanske:

<img src="blommor.jpg" alt="Blåsippor i närbild">

Det gäller även när man använder en bild som länk.

Så här t.ex.:

<a href="http://www.google.com" title="Länk till sökmotorn Google"><img src="google.gif" alt="Googles logotype"></a>

De bilder som inte har någon betydelse för innehållet - som finns på sidan bara för designens skull - ska innehålla ett alt-attribut utan innehåll. Det gör att skärmläsare helt enkelt hoppar över en sådan bild!

Så här:

<img src="designbild.gif" alt="">

 Till Toppen 

Förkortningar

Vill man underlätta för skärmläsare att tyda förkortningar kan man särskilt ange direkt i HTML-koden att det rör sig om en förkortning och dessutom med attributet title skriva in en förklaring. Här använder man: <abbr> eller <acronym>.

När det handlar om text-förkortningar som: t.ex. o.s.v. etc. bl.a. - används <abbr>.

Så här:

Till pajen kan man <abbr title="till exempel">t.ex.</abbr> servera glass eller vaniljsås.

I en del webläsare visas en ruta med förklaringen när man håller muspekaren över förkortningen, i andra inte. Men <abbr> är i första hand till för dem med text / skärmläsare som har nytta av den här funktionen.

För förkortningar i stil med: SAS, SJ, EU, SMHI - används <acronym>.

Så här:

Standarder från <acronym title="World Wide Web Consortium">W3C</acronym>

Med <acronym> visas alltid en ruta med förklaringen när man håller muspekaren över förkortningen. Därför är det vanligt att man stajlar den här typen av förkortningar med CSS på det här sättet:

acronym { cursor: help; border-bottom: 1px dashed inherit; }

Så här skulle det kunna se ut på sidan:

Standarder från W3C

Håll muspekaren över W3C ovan!

 Till Toppen 

Undvik Tabell-layouter

Att använda tabeller för att skapa sin sidas layout är inte bara en teknik som anses ålderdomlig nu när alla webläsare kan tolka placering med CSS på ett bra sätt. Det gör dessutom din sida mindre tillgänglig för dem som inte surfar på samma sätt som folk gör mest.

En tabell läses av skärmläsare "rad för rad - cell efter cell" och en tabell-layout får många gånger inte alls samma struktur för dem som inte uppfattar tabellen med blotta ögat. Tänk också på att man i en del webläsare enkelt kan stänga av tabell-visning manuellt!

Undvik därför tabell-layouter så långt som det bara är möjligt. Om du måste ta till en tabell ska strukturen vara enkel. Endast: <table>, <tr> och <td> - och absolut inga nästlade varianter!

En tabell med endast en cell uppfattas i de flesta fall inte som någon tabell - vilket den ju på sätt och vis inte heller är... Av skärmläsare tolkas en sådan tabell oftast precis som om det vore en "box".

Men! Har en layout-tabell mer än en cell bör man infoga attributet: "summary" i tabellens start-tagg och ange värdet: "design".

Så här:

<table summary="design">::</table>

Mer om tabeller för layout finns under rubriken: HTML / Tabeller.

Skapa tillgängliga Data-tabeller

En tabell tolkas alltså från vänster till höger - rad för rad - cell efter cell. Så skulle också tabellen läsas av en skärmläsare med talsyntes - vilket kanske inte är optimalt...

Vill man göra sin sida till gänglig för alla måste man alltså göra sina tabeller mer användarvänliga!

Hur det går till hittar du under rubriken: HTML / Tabeller.

 Till Toppen 

Undvik Ramar / Frames

Över lag finns det ju en hel del nackdelar med att använda Ramar / Frames för att strukturera innehållet på en websida. Men för dem som använder skärmläsare med talsyntes blir det extra besvärligt! De kommer nämligen att hamna på frameset-sidan och sen kan det vara stopp!

Väljer man att använda ramar trots allt - måste man länka till framesetet's sidor inom <noframes> och dessutom namnge ramarna med title i <frame>.

Så här kanske:


<html lang="sv">
<head>
<title>Sidans titel</title>
</head>
<frameset cols="20%, 80%">
<frame src="meny.html" title="Navigering: Meny" name="meny">
<frame src="start.html" title="Startsida: Innehåll" name="start">
<noframes>
<p>Detta frameset innehåller:</p>
<ul>
<li><a href="menu.html">Navigering: Meny</a></li>
<li><a href="start.html">Startsida: Innehåll</a></li>
</ul>
</noframes>
</frameset>
</html>

En annan variant är att inledningsvis inom <noframes> presentera en länk till en användarvänlig "sitemap" - och se till att det enkelt går att nå webplatsens alla sidor därifrån.

Så här t.ex:

<noframes>
<p>Om du vill slippa Ramarna / Framesetet:</p>
<ul>
<li><a href="sitemap.html">Användarvänlig Sitemap</a></li>
</ul>
<p>Detta frameset innehåller:</p>
<ul>
<li><a href="menu.html">Navigering: Meny</a></li>
<li><a href="start.html">Startsida: Innehåll</a></li>
</ul>
</noframes>
 Till Toppen 

Jaha! Själv, då - Klantskalle?!

Jaa, jag veeet... NinetNet har MYCKET övrigt att önska vad det gäller tillgänglighet och koderna är inte alls "enligt senaste standard" på många håll!

Till mitt försvar vill jag anföra att grunden till den här sidan skapades 1998! Sedan dess har det hänt en hel del på webdesignfronten...

NinetNet är bara en liten hobby jag pysslar med på lediga stunder - därför att jag tycker att det är kul att dela med mig av mina egna upptäckter på webdesignfronten. Från början innehöll den några sidor som hade en eller två besökare om dan. Men nu har den liksom vuxit... EN HEL DEL...

Jag är i full färd med att fräscha upp koderna och anpassa sidorna så att de blir mer användarvänliga och dessutom uppdatera guiderna så att de blir mer "up to date" enligt den standard som gäller numer. Men jag är bara en liten ensam stackare - och tiden räcker inte riktigt till! Men det är på gång. JAG LOVAR!

Men det är ett jätte-jobb att fixa till eftersom det blivit så MÅÅNGA sidor med tiden... Så lär av mina misstag!

Alltså! Bygg din sida enligt riktlinjerna ovan från början - så slipper du hamna i samma idiotiska och tidskrävande situation som jag!   Blinkande Smily

 Till Toppen