03. HTML

Tillgänglighet för alla.

2009-10-24 15:19 #0 av: johan-ahlback

När du kollar på en hemsida ser du menyer och annat grafiskt material på sidan, men hur är det när man är blind? Eftersom internet ska vara tillgängligt för alla så måste vi anpassa våra sidor så att människor med olika handikapp kan läsa den information vi har på våra sidor.

Har du någonsin testat att använda ett uppläsningsprogram? Om du provar det ska du ha ögonbindel på dig och försöka surfa. Då får du en uppfattning om hur svårt det är att surfa på internet när man har dålig eller ingen syn alls. Problematiken ligger i att skaparna av hemsidor ofta lägger sin html-struktur i en ologisk ordning. Till exempel kan menyer ligga under innehållet, och sen är det styrt med css att menyn ska ligga överst eller på sidan av innehållet. Men uppläsningsprogramvaror kan inte tolka css.

Lite saker att tänka på.
En sak som man alltid bör göra hela tiden är att låta css styra layout och utseende. Till exempel bilder som tillhör designen ska visas genom css. Det är för att röstuppläsare inte ska behöva berätta att det finns en bild där som egentligen är onödig.

En annan sak man bör göra är att lägga huvudmenyn så högt upp man kan i html dokumentet. Då kommer röstuppläsare att kunna läsa länkarna innan den börjar på innehållet. Du kan lätt se hur en röstuppläsare kommer att läsa av din sida om du stänger av stilmallen. Då kommer din sida att visas med enbart text, och du kan då lätt se hur det ser ut.

En tredje sak att tänka på är att aldrig, och jag menar aldrig, skriva med stora bokstäver, att använda frames för att skapa en hemsidas layout. Det finns många skäl till det men de största är att många röstuppläsare inte vet vilken ordning den ska läsa i. Det betyder att den kan hoppa fel när man ska läsa i en annan frame.

Tänk också på att lägga till alt-attributet i img-taggar då röstuppläsare läser av den för att ta reda på vad bilden visar. Skriv en kort beskrivande förklaring.

Lite andra tips och trick.

När jag skapar en sida och är nöjd så börjar jag anpassa den. Det är oftast bara små saker. Som att lägga till en länk som länkar till där innehållet börjar så man slipper menyn, man kan kalla den "skipp navigation" eller "hoppa över navigering".

Om jag använder en logga som länkas in med css så gör jag en h1 tagg där jag skriver namnet på personen/företagen. Dessa länkar och h taggar döljer jag med display:none; i css. Eftersom röstuppläsare inte kan tolka css så kommer de länkarna och rubrikerna att synas för dem.

Är det svårt att anpassa en sida?
Nej och det tar inte lång tid heller. Om du ska anpassa en sida kan du visa den utan att använda css. Då ser du nog vad du ska fixa. Det kan vara allt från att lägga till en extra länk till att lägga till alt-attribut till bilder.

Men om du använder css för att lägga ut designen så har du kommit en bra bit till att göra internet tillgängligt för alla. För då krävs det en ganska logisk uppbyggnad i html-dokumentet för att det ska bli bra.

Så här bör en sida se ut (på ett ungefär) utan stilmall (css):en sida utan stilmall. lätt för röstuppläsare.

Har du tips på hur man kan anpassa en sida för olika funktionshinder som påverkar ens surfande så lägg dem gärna i en kommentar och dela med dig.
Gör internet tillgängligt för alla, utelämna ingen.

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2009-10-24 18:09 #1 av: IdaL

Jättebra skrivet! Glad

Anmäl
2009-10-24 18:18 #2 av: DesK

Jättetoppen skrivet, Johan!  Glad

Ett litet tips är att när det, som här, finns fördefinierade smajlisar så ska man använda dessa istället för att skriva egna.

Désirée

Anmäl
2009-10-24 20:05 #3 av: Jojaton

Jättebra artikel!

Johanna
@bellasantorino på Instagram

Anmäl
2009-10-24 20:46 #4 av: Ulla

Jättebra! Många enkla saker också som jag inte har tänkt på. Som det med bilderna tex.

Sajtvärd för Keramik ifokus


Anmäl
2009-10-26 11:53 #5 av: IdaL

Jag vet att en del använder bilder som meny, detta kan väll inte vara så vänligt mot skärmläsare heller? Hur reagerar läsaren på det?

Anmäl
2009-10-26 11:56 #6 av: DesK

#5 Om man bara har en alttext som talar om vad bilden föreställer så funkar det tror jag  Glad

Désirée

Anmäl
2009-10-26 11:59 #7 av: IdaL

#6 Jo, det är sant Flört Men dom flesta jag har sett har tyvärr inte det, då blir det väll i princip omöjligt för dom att ta sig vidare på sidan..? Eller reagerar läsaren på länkar?

Anmäl
2009-10-26 12:01 #8 av: DesK

Vet inte riktigt, jag frågar SvenA  Glad

Désirée

Anmäl
2009-10-26 13:30 #9 av: Stephanie

Så vitt jag vet, kan man väl få upp en lista med alla länkar som finns på sidan med något kortkommando? En kompis till mig ser inte så bra, och brukar öppna något sånt, där skärmläsaren läser upp länkarna.

Anmäl
2009-10-26 13:58 #10 av: johan-ahlback

Bilder som används till länkar ser ju ut så här. <a href="länk"><img src="bild.jpg" alt="klicka här för att komma dit" /></a> eller på liknande sätt. Och då ska det fungera. Men man kan också se till att lägga bildlänkar långt ner i html dokumentet och lägga normala länkar högst upp i dokumentet som man döljer med css.

Om ni förstår vad jag menar.

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2009-10-26 16:17 #11 av: DesK

Är det någon som kan lägga en länk till en sajt som är gjord så? Så ska jag be en synskadad att gå in på den.

Désirée

Anmäl
2009-10-26 20:10 #12 av: DesK

#10 Kan du lägga in en länk till någon sajt som har detta?

Skulle väl vara bra att få bekräftat att det fungerar!  Glad

Désirée

Anmäl
2009-10-26 20:16 #13 av: johan-ahlback

Du menar med bilder och alt attribut? Då jag inte brukar använda bilder ur tillgänglighetssynpunkt kan jag tyvär inte det. Jag brukar bara använda en bild till mina menyer som jag lägger som bakgrund i css sen lägger jag på länkar över det. Men jag kan göra en tills imorgon kväll och skicka en länk. För jag vill också veta om det fungerar som det sägs att det ska.

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2009-10-26 20:23 #14 av: DesK

#13 Jättetoppen! Tack! Glad

Som sagt det är ju intressant att veta hur det funkar i verkligheten.

Grattis till ditt medarbetarskap!  Glad Jag tror att du har mycket att ge!

Désirée

Anmäl
2009-10-29 19:00 #15 av: DesK

Knack, knack förlåt om jag stör, men vill bara påminna Johan om detta!  Glad

Désirée

Anmäl
2009-10-29 20:23 #16 av: johan-ahlback

Ja jag har haft så mycket i skolan. men jag sitter med håller på med en sida nu Glad den är klar om en liten stund. inte så snygg att kolla på kanske Flört

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2009-10-29 21:27 #17 av: DesK

Skola och jobb går alltid före!  Glad

Nu var vi ju inte ute efter skönheten utan hur det hela funkar i praktiken.

Ha det gott!  Glad

Désirée

Anmäl
2009-10-31 01:47 #18 av: johan-ahlback

http://mercs.game-host.org/johan/test/

Där är ett exempel. jag vill gärna veta vad uppläsaren säger vid varje länk. för jag vet inte om den prioriterar title eller alt.

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2009-10-31 09:20 #19 av: DesK

Toppen jag har nu skickat det vidare. Ska bli intressant att läsa svaret. Jag gissar att skärmläsaren prioriterar title framför alt, men vi får snart se.

Désirée

Anmäl
2009-10-31 11:30 #20 av: [SvenA]

Skärnläsaren startar med första raden

Test för uppläsning

sedan kommer 3 länkar som inte leder någonstams

så all text läses upp

Anmäl
2009-10-31 13:03 #21 av: [SvenA]

Har nu läst santliga inlägg här och följer ni artikelföfattarens råd som kommer det att fungera bra

Att läsa samtliga lämkar är ingen bra lösning för länkarna säger inget om innehållet på den sida länken hänvisar till

Det är bättre att man hamnar på första rubriken

Anmäl
2009-10-31 13:15 #22 av: IdaL

#21 Tack så mycket för du tagit dig tid att hjälpa oss Glad Det underlättar både för oss när vi bygger upp våra hemsidor och även för dig som besökare så tack så mycket säger jag!

Anmäl
2009-10-31 15:32 #23 av: johan-ahlback

Jag har kommit på en till sak som kanske kan vara bra. Jag satt och provade en wwac webläsare och satt igång tal funktionen. efter ett tag viste jag inte på vilken sida jag var. Så en rubrik som berättar var man är för någon stans skadar nog inte.

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2009-11-01 11:09 #24 av: [SvenA]

#23 Det äer så rättt så det underlättar betydligt

Man ska även tänka på att rörliga bilder på sidorna kanstöra skärmläsarren den får svoårt att hitta fokus och hoppar fram och tillbaka

Anmäl
2009-11-06 18:33 #25 av: [SvenA]

Hantera inlägg

Varför så många onödiga noment

Varför ska det behövas så många onödiga moment för att vi som läser medskärnläsare ska kunna läsa innehållet

i inläggen

De flesta sidor är uppdelade i tre rader

den vänstra har i rege en innehållsförteckning där man klickar på det man vill läsa och sedan flyttar man musen till det man vill läsa som kommer upp i mittspalten

Nen för oss som läser med skärnläsare så måste vi i regel starta om från början på sida och förflytta oss med tab eller piltangenterna tills vi kommer till mittspalten där den text som vi vill lläsa finns

Vi borde även vi kunna komma direkt till innehållet som alla seende kan göra genom att flytta musen ett steg

Vi kan behöva enda up till 15 steg för samma sak det verkar vara väldigt onödigt

Sajtvärd på: Synskadade ,Rörelsehinder och Hälsa i fokus Ett samhälle för alla måste vi få

Anmäl
2009-11-06 22:04 #26 av: johan-ahlback

Det går att lägga till länkar som kallas ankare. Då kan man använda id attributet för att länka till en rubrik. jag brukar alltid lägga till ett ankare som heter "hoppa till innehållet" eller skip navigation. och sen har jag en länk efter innehållet som heter länk till menyn eller liknande,

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2009-11-07 06:25 #27 av: [SvenA]

Du verkar i alla fall förstå hur det är att läsa med skärnläsare

Tänk om alla som bygger hemsidor tänkte som du

då skulle det bli betydligt lättare

Anmäl
2009-11-07 07:54 #28 av: johan-ahlback

#27 Som sagt har jag försökt att surfa med en wwac läsare.Glad Vilket jag tycker att alla som bygger hemsidor ( i alla fall de som jobbar med det) boede göra.

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2009-11-07 10:30 #29 av: [SvenA]

Inte ens Synskadades Riksförbund har en sida som är bra

Där får man hela tiden börja om från start och klicka neråt en massa gånger för att komma till innehållet

Så det är allt för dålig tillgänglighet för osss som läser med skärnläsare så jag blev verkligen glad när jag sågdin artikel om tillgänglighet

Ni borde ha den artikeln som en låst tråd och alltid synlig så att alla uppmärksammar detta med tillgämglighet för oss med skärnläsare

Anmäl
2009-11-07 10:50 #30 av: DesK

Sven du skulle ju kunna säga åt dem på Synskadades Riksförbund att läsa denna sidan och kanske även be Johan om hjälp att fixa till sidan.

Jag undrar om det skulle underlätta om alla länkar låg högst upp på sidan under sidhuvudet och horisontellt istället för lodrätt? Förutom det som Johan beskriver ovan.

Désirée

Anmäl
2009-11-07 10:59 #31 av: [SvenA]

Jag tror att bara man följer Johans råd så kan det bli riktigt bra

Jag håller på och skriver till SRF om deras sida

där jag hänvisar till dennna artikel

Länklistor kan liga undervarandra det spelar igen roll för man förflyttar sig rumt med tab eller piltangenterna

Anmäl

Det finns en till kommentar till den här diskussionen. Den är bara synlig för medlemmar på iFokus. För att läsa kommentaren, logga in eller registrera dig på iFokus.