LÄRARHANDLEDNING TILLGÄNGLIGA WEBBSIDOR

Transkript

1 UPPDRAGSGIVARE: IT-CENTER VÅR REFERENS: STEFAN JOHANSSON TEL.: E-POST: INNEHÅLL: LÄRARHANDLEDNING TILLGÄNGLIGA WEBBSIDOR _ Funka Nu AB Finnbodavägen 2, NACKA e-post: kontakt@funkanu.se

2 2 Innehåll Val av editor... 3 Rekommendation... 3 Grundregler... 4 Tillgänglighet... 4 Vilka är problemen?... 4 Hjälpmedel... 5 Språk och texter... 5 Enkel checklista Använd html-kod på rätt sätt Märk grafiska objekt med attributet ALT Använd H1, H2, H3 korrekt Ramar Tabeller Layout -generella regler Navigering Nya fönster Sidinformation Formulär Dynamisk html Nedladdningsbara filer... 8

3 3 Val av editor Det program du använder för att skapa webbsidor är avgörande för hur god tillgängligheten blir. Vissa editorer skapar exakt den kod du själv anger när du arbetar. Andra editorer lägger till kod utöver den du själv anger. För den som använder webbsidor på vanligt sätt, d.v.s. tittar på dem är det här inget problem. För den som har ett funktionshinder kan den extra koden ("skräpkoden") vara antingen omöjlig eller outhärdlig. Det har att göra med att vissa hjälpmedel måste gå in i koden och tolka sidorna den vägen. Rekommendation Vi rekommenderar antingen Homesite eller Dreamweaver. Båda editorerna håller bra ordning på koden och du kan också få stöd för tillgänglighet och kvalitetssäkring av din kod.

4 4 Grundregler För att förstå varför en webbsida kan vara svår att använda för en elev med funktionshinder måste man känna till vissa grunder. Det här materialet ger dig kännedom om några enkla grundregler. Du kommer inte att skapa helt perfekta webbsidor efter att ha läst materialet. Syftet är snarare att du ska undvika det som skapar de största problemen. Tillgänglighet Med tillgänglighet menas att även personer med funktionshinder ska kunna använda webbplatsen. Idag finns brister i webbplatsernas tekniska, pedagogiska och strukturella utformning. Dessa brister gör det svårt eller omöjligt för många personer med funktionshinder att använda webbplatsen. Störst är problemen för blinda, synsvaga, dyslektiker, rörelsehindrade, och kognitivt funktonshindrade. Problem finns även för psykiskt funktionshindrade och för medicinskt funktionshindrade. Vilka är problemen? Enkelt uttryckt kan man säga att de problem ett funktionshinder (i IT-sammanhang) skapar är att användaren kan ha svårt att: se höra tala läsa styra datorn (klicka, skriva text etc..) förstå behålla koncentrationen Tillgänglighet handlar om att den information man presenterar ska kunna användas även om man har en bristande förmåga enligt någon av punkterna ovan. En individ kan ha problem med ett eller flera av dessa områden. Den som utvecklar webbsidor måste då tänka på att skapa ett alternativ. Om en elev t.ex. är helt blind så kan han eller hon inte se en bild. Däremot kan man mycket väl läsa text, via syntetstikt tal eller omvandling av text till punktskrift. Det är därför man måste märka grafiska objekt med dolda texter i en webbsida.

5 5 Med grafiska objekt menas i det här sammanhanget meningsbärande grafiska objekt. Det kan vara bilder (fotografier, illustrationer, animeringar etc.) men det kan också vara filmer, produktioner i Flash m.m. Pilar, punkter, streck etc. som används för den grafiska formen är sällan meningsbärande och behöver inte märkas. Hjälpmedel Vissa elever kan behöva hjälpmedel för att använda material på webben. Det är antingen hjälpmedel som hjälper eleven att tolka vad som finns på sidan och/eller att styra datorn och datorns olika program Några exempel på hjälpmedel är: Talsynteser för personer som behöver få text uppläst med automatik Skärmläsarprogram som tolkar det som syns på en bildskärm Förstoringsprogram, som förstorar det som syns på en bildskärm Lässtödsprogram för dyslektiker Utrustning som ersätter mus och tangentbord för den som är rörelsehindrad För att hjälpmedlen på ett korrekt sätt ska kunna tolka en webbsida har det utvecklats internationella riktlinjer. Det är då viktigt att den som skapar sidorna följer dessa regler. Reglerna presenteras i sin helhet på webbplatsen Språk och texter Förutom de åtgärder du vidtar är språket en mycket viktig faktor. Grundregeln är att man ska skriva så rakt och enkelt som möjligt, utifrån syftet med webbplatsen. Läsning på bildskärm skiljer sig dessutom ganska mycket från läsning på papper. Texterna behöver vara korta, strukturerade och kanske med fler stycken och mellanrubriker än om samma sak hade presenterats på papper.

6 6 Enkel checklista Nedanstående punkter ger dig en checklista som gör att du tar bort de största problemen. Dina sidor kommer inte att uppnå full tillgänglighet och om du vill fördjupa dig i ämnet finns hela det regelverk som tagits fram på 1. Använd html-kod på rätt sätt. Det finns verktyg som kan validera om du använt koden rätt. Ibland finns det stödet i den html-editor du använder. Annars kan du hitta valideringsverktyg på Validering innebär att man testar sin webbsida i ett verktyg. Verktyget fångar upp om man gjort fel i koden. 2. Märk grafiska objekt med attributet ALT Meningsbärande grafiska objekt (foton, illustrationer etc.) ska märkas med hjälp av attributet ALT. Med hjälp av ALT skriver man en beskrivning av objektet/bilden. Ett exempel: img alt="animerad teckning av ett kuvert" src="bilder/aslide.gif". Bilden föreställer ett kuvert. Den som inte kan se bilden får istället informationen "Animerad teckning av ett kuvert". Det du skriver som bildbeskrivning kommer att synas i en gul ruta för den som pekar på bilden. Vad du skriver är viktigt. Det räcker inte med "Fotot". Du måste beskriva bilden, t.ex: "Foto av elefant som medverkar i cirkusföreställning. Fotograf: B. Nilsson" 3. Använd H1, H2, H3 korrekt Rubriksättning är mycket viktig för att skapa struktur i ett dokument. För att kunna göra det för en person som använder skärmläsare måste du använda rubrikerna för sitt rätta syfte och i en hierarkisk struktur. Rubrikerna får då "värden" eller "valörer" som gör att de kan inordnas i en kapitelstruktur. H2 förutsätter därför att det tidigare har funnits en H1. Annars blir läsaren förvirrad ("Har jag missat den nya kapitelrubriken?"). 4. Ramar Om din sida innehåller ramar är det viktigt att du ger ramarna tydliga namn så att användaren vet vilken uppgift respektive ram har. Använd inte tomma ramar för att skapa sidans layout.

7 7 5. Tabeller Om du använder tabeller för att skapa sidans layout är det mycket vikigt att du har en enkel tabellstruktur. Du ska undvika att lägga tabeller i tabeller. Om du publicerar tabeller i form av kolumner och rader gäller att komplexa tabeller ska sammanfattas i en separat text. 6. Layout -generella regler En konsekvent layout är mycket viktig. Webbplatsens olika ytor ska användas för skilda syften. Dessa ska konsekvent presenteras på samma sätt genom hela strukturen. Detta såvida inte starka skäl talar för en förändring vad gäller särskild del i strukturen. Relativa mått ska användas så långt det är möjligt. Om du använder relativa mått kan användaren själv ändra textstorlek, radlängder etc. Det betyder att olika måttuppgifter, så långt det är möjligt, ska sättas i procent och inte i fasta värden. Om storlek på text är satt i relativa mått kan användaren förstora texten genom att ändra inställningar i sin egen webbläsare. Text och bakgrunder ska ha hög kontrastskillnad Strukturtext och innehållstext ska skiljas åt typografiskt. Det betyder att den text som presenterar navigeringen (menyer och länkar) ska skilja sig från den text som presenterar sidornas innehåll (rubriker, löpande text etc.) Använd inte enbart färg för att skapa en meningsbärande skillnad t.ex. mellan text och länkar 7. Navigering Navigering ska kunna ske med tangentbordet. Samtliga länkar ska beskrivas med TITLE. Det gäller länkar för navigering men även t.ex. "läs mer-länkar". 8. Nya fönster Nya fönster används sparsamt. När de används förhandsinformeras användaren om att nytt fönster öppnas. Nya fönster förses med tydlig "stäng-fönstret-knapp" 9. Sidinformation Meningsfulla sidtitlar på webbsidorna/-dokumenten ska finnas. Kontaktinformation ska vara lätt att komma åt. Kör eleven fast med något ska det vara enkelt att få kontakt med någon som kan hjälpa till Datumformat ska inte presenteras sammanskrivna (då läser talsynteserna datum som numeriska värden; "20 miljoner istället för 2002")

8 8 10. Formulär Komplettera inmatningsfält med TITLE-attribut med kortfattade beskrivningar. Knyt ihop ledtexter med rätt inmatningsfält med attributet LABEL Om användaren hanterar formuläret fel är följande viktigt: Användaren ska informeras om fel, hur många fel, var felen gjorts. 11. Dynamisk html Dynamisk HTML ska undvikas. Innehåll som t.ex. rullar fram på sidan är mycket störande för t.ex. dyslektiker och omöjligt att "fånga upp" för blinda. 12. Nedladdningsbara filer Länk till nedladdningsbar fil ska innehålla information om filtyp och filstorlek. Om man dessutom kompletterar med ikonen som anger vilken sort fil det är (Word, PDF etc.) så blir det ännu bättre.