Startsidan

Tillgänglighet

HTML

CSS

Kurs

Tidigare
  artiklar

Länkar

Bli medlem!

Om Cookies
Lägg som Favorit

-Bli medlem!
-Glömt lösenordet?

Innehåll

• Introduktion
• 1. Innehållet
• 2. Visa och dölj innehållet
• 3. CSS för att höja klick- och läsbarhet
• 4. Användarkontroll av innehåll och presentation
• Sammanfattning
• Läs mer
• Kommentarer

Introduktion

Den största funktionshindrade gruppen i vårt samhälle är den med kognitiva nedsättningar och inlärningsproblem, ändå är de ofta bortglömda när det gäller att utforma tillgänglighet för webbplatser.

Klassificeringen, kognitiva nedsättningar och inlärningsproblem är så  svårtolkad att webbutvecklare ofta anser det svårt att identifiera eller avgöra vilka speciella behov som dessa individer eller grupper har.

Många direkta handikapp kan också påverka en persons förmåga att tillgodogöra sig informationen på en webbplats, några exempel

• Kognitiva nedsättningar, inkluderar perceptions- problemlösnings- och koncentrationssvårigheter. Detta kan orsakas av flera handikapp som mentala störningar, autism, hjärnskador, Parkinsons sjukdom, Alzheimers eller ålderdom.
   
• Inlärningssvårigheter, kan utgöras av minnes- perceptions- problemlösnings- och begreppsbildande färdigheter. Inlärningssvårigheter inkluderar handikapp som dyslexi, dyskalkuli och NLD (nonverbal learning disorders). Dessa är ibland kopplade till koncentrationssvårigheter och hyperaktivitet.

För webbutvecklare blir situationen än mer komplex genom det faktum att speciella användare med dessa problem kan ha väldigt skilda behov. Det är vanligt att personer med kognitiva problem på ett område kan vara högpresterande i andra. Som exempel kan en person vara en utmärkt läsare men ha väldiga problem att förstå hur en webbsida är organiserad eller bli väldigt lätt distraherad av en liten animerad bild.

Kan man då tillgodose alla dessa gruppers behov inom en webbplats? -Ja, troligtvis med hjälp av olika webbsidor.

Internet kan avsevärt öka nöjet och hjälpa människor med olika, och i vissa fall påtagligt kognitiva handikapp. Peepo projektet (nu avslutat) tillförde på ett brett område både resurser och idéer för att möjliggöra för personer med svåra inlärningproblem att själv använda och söka på Internet.

Fokus på den här artikeln ligger primärt på hur man kan förbättra webbplatser för människor som har den funktionella kapaciteten att på egen hand använda och söka på Internet. Artikeln ger i detalj förslag på hur man med enkla metoder kan höja tillgängligheten för människor som normalt tycker det är svårt att läsa och använda skriven information.

För en mer detaljerad version av denna artikel, läs An Accessibility Frontier: Cognitive disabilities and learning difficulties.

1. Innehållet
 

1.1 Rakt och enkelt innehåll

Innehåll som är välskriven uppfattas som lättare att förstå av alla även för de människor med kognitiva nedsättningar och inlärningsproblem.

• Fastställ att informationen är väl organiserad
• Håll informationen rak och enkel
• Bryt upp informationen i stycken, med ett "budskap" per stycke
• Använd hellre punktlista än uppräkningar i ett stycke
• Använd meningsfulla rubriker och underrubriker
• Kontrollera texten noga efter eventuella felstavningar eller grammatiska fel
• Förklara definitioner, tekniska termer, förkortningar och akronymer

1.2 Optimera radlängd

De flesta webbanvändare anser att det är svårt att läsa längre textrader. För människor med läsproblem kan långa textrader innebära ett hinder. Eftersom skärmupplösningar ökar med teknikutvecklingen, innebär det också att det är möjligt att få rum med fler tecken på en textrad vid en given textstorlek. Den optimala textstorleken för behaglig läsning varierar från person till person. Med det följer att det är svårt att avgöra hur många tecken den optimala textraden är, men en generell regel är att raden inte ska överstiga 70 - 80 tecken (ca. 12 sv. ord, översättarens kommentar) och att texten har marginal (luft) på vänster och höger sida.

• Exempel på väldigt lång radlängd
• Exempel på optimerad radlängd
• Webbplats med optimerad radlängd [extern länk]

1.3 "Vita floder"

En del webbanvändare med lässvårigheter har problem med text som är just marginaljusterade. Ett ojämnt utrymme mellan ord i marginaljusterad text kan orsaka "vita floder" av tomrum ner över sidorna och gör texten därför svår att läsa. Den enkla lösningen är att endast justera text till vänster.

• Exempel på marginaljusterad text
• Exempel på vänsterjusterad text

1.4 Den "Omvända Pyramidens" skrivmetod

Ett lätt sätt att göra innehåll tillgängligt är att använda sig av den "Omvända Pyramidens" skrivmetod som de flesta nyhetstidningar använder. Den bygger på att börja med en summering eller kort överblick av ämnet/innehållet och fortsätter sedan med underbyggande information och bakgrund. Detta hjälper snabbt läsaren att avgöra om informationen är intressant utan att behöva läsa hela sidan.

• Exempel på Pyramidens skrivmetod
• Den Omvända Pyramidens skrivmetod [extern länk]
• Pyramidens skrivmetod (DFL Bulletin) [extern länk]

2. Visa och dölj innehåll

För vissa webbanvändare, speciellt de med kognitiva nedsättningar och inlärningsproblem, kan stora mängder med text på en sida utgöra ett hinder. Genom att ge användaren kontroll över hur informationen presenteras kan detta potentiella problem minskas. Man kan till exempel ge användaren möjlighet att välja en enklare eller detaljerad version på flera olika sätt.

2.1 Lång och kort version av innehållet

Denna metod tillåter besökaren att välja mellan en lång eller kort version av innehållet på hela webbplatsen. Användare som valt den korta versionen kan surfa på hela webbplatsen genom att läsa den kortare textversionen på alla sidor. När man ser en sida av speciellt intresse väljer man då den fulla versionen och hela sidan laddas.

Denna metod används av Guardianship Tribunal site, Sydney Australien. En användartest med flera användarkategorier gjordes för denna webbplats inklusive de med kognitiva nedsättningar och inlärningsproblem. När användarna i testet förstod att det fanns två versioner av samma webbsida fann de flesta besökare denna funktion var till nytta. Besökare med lässvårigheter valde den versionen som de klarade att läsa och förstå. Undersökningen visade också att socionomer och läkare använde den kortare versionen som läsval eftersom det fick dessa användare att snabbare hitta den information de sökte.

• Exempel på långt och kort innehåll
• Guardianship Tribunal confidentiality page [extern länk]

2.2 Expanderande punktlistor

En liknande metod använder inledningar eller rubriker som ett sätt att ge överblick över innehållet. Dessa presenteras som en punktlista med möjlighet att genom ett klick på rubriken visa mer information. När användaren klickar på en rubrik visas den utökade versionen av informationen i rubrikens närhet.

• Exempel på expanderande punktlista

2.3 Dölj/visa innehåll i punktlistor

Denna metod använder också punktlistor för den enklare innehållet i rubriker, men med den skillnaden att det utökade innehållet visas inte under varje punkt. Istället visas den under punktlistan. Denna variant är bättre om man arbetar med större informationsmängder.

• Exempel på dold innehåll i punktlistor

2.4 Bildspel

Att använda webbsidor för att att förmedla information till användare med grava kognitiva handikapp kräver en annan "approach". En metod som föreslås är att presentera informationen i ett integrerad bildspel med separata bilder för varje informationsdel. Detta gör att varje del kan presenteras på ett enkelt och klart sätt och gör det möjligt för besökaren att gå genom informationen stegvis i egen takt.

• Exempel på bildspel

3. Öka interaktivitet och läsbarhet med CSS

En stor fördel med Cascading Style Sheets (CSS) är att det kan användas för att manipulera presentationen av innehållet utan att påverka strukturen. Här är några enkla metoder som använder CSS för att göra innehållet mer tillgängligt för människor med kognitiva nedsättningar och inlärningsproblem.

3.1 Ökat radavstånd

En del användare anser att ökat radavstånd på texten i ett stycke ökar läsbarheten.

• Exempel på ökad radhöjd

3.2 Ökat marginalavstånd efter stycken

Allmänt kan man säga att en blankrad är utrymmet mellan två stycken. Genom att öka detta till 1.5 eller 2 raders utrymme kan man öka läsbarheten för besökare.

• Exempel på ökat marginalavstånd efter stycken

3.3 Hover-effekt på länkar

Vissa besökare kan ha svårt att skilja länkar från annat innehåll. Länkar kan då ges en hover-effekt som får länkarna att ändra färg när man för musen över den.

• Exempel på hover-effekt på länkar

3.4 Förbättrad undre kantlinje på länkar

Att låta länkar ha understrykning som det normalt är, kan göra innehåll, speciellt hängande text, svår att läsa. Genom att ta bort understrykningen på länkar och använda CSS's undre kantlinje för att understryka länkar kan man bättre kontrollera avståndet mellan text och understrykningslinje.

• Exempel på förbättrad understrykningslinje med CSS

3.5 Öka det aktiva området på länkar

För användare med finmotoriska problem är det svårt att klicka på länkar. Med CSS kan det aktiva klickområdet ökas.

• Exempel på ökat aktivt område för länk

3.6 Hover-effekt på stycken, punktlistor och tabellceller

För en del läsare med lässvårigheter är det svårt att hålla ordning på var de är på raden. Med hover-effekter på stycken, rader och/eller tabellrader kan man få muspekaren att fungera som en radmarkör.

Olyckligtvis stödjer inte vissa webbläsare hover-effekter på stycken, listor eller tabellrader. Om man anser att detta är en viktig funktion för användare kan JavaScript användas för att emulera denna effekt.

• Exempel på hover-effekt på stycken
• Exempel på hover-effekt på tabellrad

3.7 Understrukna stycken

En annan metod för att underlätta för användare med lässvårigheter handlar om understrykning av texter inom ett aktuellt stycke. Idén är här att ge en effekten av en linjal som ligger under varje rad i texten. Detta ger användaren ett stöd att hålla sig på samma rad.

• Exempel på stycke med understrykning

Ett problem i detta sammanhang är att en del användare kan uppfatta linjalen som en hyperlänk. Genom CSS kan man sätta en egen stil på understrykningen, tex en röd streckad linje, för att undanröja risken för att det uppfattas som en länk.

• Exempel på stycke med understrykning

3.8 Omvända färger

Vissa besökare tycker att det är lättare att läsa om färgerna för texten och bakgrunden är omvänd, så att sidans innehåll visas med en ljus färg på mörk bakgrund.

• Exempel på omvända färger

3.9 Minskad bakgrundsljus

Somliga anser att den vita bakgrundsfärgen är för ljus och blir svår att läsa. Detta kan åtgärdas genom att göra bakgrunden off-white eller ljust gråskalig vilket ger ett minskat ljus.

• Exempel på minskat bakgrundsljus

4. Användarkontroll på innehåll och presentation

De olika tipsen som givits i denna artikel kan användas för att ge användare möjlighet att visa innehåll på det sätt som är till mest nytta för dem.

Med CSS i kombination med JavaScript eller serverskript hantering, är det möjligt för webbutvecklare att lägga in tillgänglighetsförbättringar som t ex. undre kantlinje och ökat målområde på länkar på webbplatsen. Vidare tillåta användare att påverka sidelement som:

• Innehåll lång eller kort version av informationen
• Textstorlek möjlighet att öka eller minska teckenstorlek
• Läsbarhet ändra avståndet mellan stycken och/eller hover-effekter på stycken
• Färgteman ge användaren möjlighet att påverka kontrast- omvända- eller minskad bakgrundsfärg
• Radlängd lång eller kort rad
• Radavstånd möjlighet att ändra radavstånd på stycken och länkar

• Exempel på användarkontroll [extern länk]

Sammanfattning

Dessa tips och exempel avser inte att vara den fullständiga lösningen på de problem som användare med kognitiva nedsättningar eller inlärningssvårigheter kan uppleva på en webbplats. Istället är det förslag på förbättringar som webbutvecklare som är intresserade av att göra innehållet mer tillgängligt för en bredare målgrupp. Vissa tekniklösningar är testade på användargrupper med kognitiva nedsättningar och inlärningssvårigheter, andra är helt enkelt idéer baserade på teorier och känsla.

Läs mer

• An Accessibility Frontier: Cognitive disabilities and learning difficulties
• Practical Design Guidelines for Universal Usability
• Adolescents, Autism Spectrum Disorder And Secondary School
• Inclusion Of Cognitive Disabilities in the Web Accessibility Movement Comments

Kommentera artikeln

sweeta-hk skrev (3/26/2008)
Sorry, but what is kimerikas? Jane.

margo skrev (5/23/2008)
QeEqwA f85fkalfbc63m7jgd82hk0

slimmy skrev (6/18/2008)
Last Update in my site :) Enjoy it ;)

arman skrev (6/4/2008)
socxLD fdv084y0v4t3cnfv593bv29vb

brain skrev (6/5/2008)
9ZHUFX fdf043hj93jkfjw845qgtj6fqp

teena skrev (6/6/2008)
nude preteens models hot videos is here ;)

Fpdskafn skrev (7/1/2008)
perfect design thanks hotels hotel flights cruise airline fares cheap air flight ticket 8DD

Chmtihnd skrev (7/1/2008)
Excellent work, Nice Design package to carribean cheap luxury hotels london tjn

Simaqpzx skrev (7/1/2008)
Best Site good looking hotels in san antonio cheap hotels in new york %-((

Srxgoirb skrev (7/1/2008)
I love this site anegada cheap hotel with hot htsiu

Scjfhoth skrev (7/1/2008)
good material thanks mexico cheap hotel sydney rvddf

Pcwaygsi skrev (7/1/2008)
This site is crazy :) center cheap banff hotels =-]]

Lqiklmui skrev (7/1/2008)
Punk not dead texas cervia cheap hotel :-]

Peqjbcaa skrev (7/1/2008)
Good crew it's cool :) florida cheap hotel in chicago uuigf

Mfpvhxjt skrev (7/1/2008)
It's funny goodluck london top cheapest low lowest best hotel deals prices rates 8]]

Pcholwen skrev (7/1/2008)
perfect design thanks krabi cheapest hotels venice %-OO

Qzdhnepp skrev (7/1/2008)
Very Good Site cheap cheap vacations to las vegas discount hotel air deals 1470

Pdxqnnvi skrev (7/2/2008)
Gloomy tales inclusive packages air and hotel cheap hotels by london heathrow 8-D

Laokhsfj skrev (7/2/2008)
Best Site good looking orlando zip code 32817 goletacheapest hotels 11003

Nsdbbkcw skrev (7/2/2008)
good material thanks hotel new york city cheapest hotels in south east england wluqid

Uuxfrxhu skrev (7/2/2008)
magic story very thanks discount hotels cheap hotels in %-[

Rdxseyro skrev (7/2/2008)
i'm fine good work hotels by gatwick airport cheap hotels new york city htm kku

Ifiicftu skrev (7/2/2008)
Hello good day mrytle beach cheap hotels >:]

Adazyior skrev (7/2/2008)
It's funny goodluck nevada cheap hotels manhattan new >:-PP

Riavuhlc skrev (7/2/2008)
Punk not dead nyc hotels new york cheap hotels in melbourne ouh

Vinbeyxb skrev (7/2/2008)
this post is fantastic hotel lake district cheapest air travel cancun hotel 610

Medjjime skrev (7/2/2008)
good material thanks flights hotels spain madrid bangkok cheap hotels 109

Jblgpzuk skrev (7/2/2008)
Very interesting tale airport cheap hotels with free shuttle bangkok cheap hotel 427

Yrxmqext skrev (7/2/2008)
Best Site good looking brussels cheap >:)))

Oxpftsds skrev (7/2/2008)
republic cheap kids hotels vwbgs

Cshjcgcc skrev (7/2/2008)
i'm fine good work hotels in orlando cheap hotel near bvl

Okdgplqz skrev (7/2/2008)
real beauty page family hotels bonaire cheap hotel :-[

Ftzmafym skrev (7/2/2008)
Very funny pictures hotel las vegas 20 soho cheap hotels new york 8-P

Yjoyndso skrev (7/2/2008)
arizona cheap hotels in new yoree felony lookup >:-((

Wbzturkx skrev (7/2/2008)
Best Site Good Work vegas lax airport cheap hotels with free shuttleto downtown los angeles %-DD

Zheqiydf skrev (7/2/2008)
real beauty page ride from denver airport to hotels cheap spanish hotels 8887

Fcvehkco skrev (7/2/2008)
This site is crazy :) jersey vilnius lithuania 68995

Spmpyjza skrev (7/2/2008)
magic story very thanks flights hotelrnography cheap hotels in shawnee oklahoma 55262

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