Tilgjengelige nettsteder

1. Tilgjengelige nettsteder 23. August 2007 Kirsten Ribu

2. Gruppeoppgave i dag • Begynn å planlegge nettstedet. • Hva skal det inneholde? • Hvor mange sider? • Hvordan skal navigeringen være? • Tegn opp hvordan man lenker mellom sidene, og ut til referanser og andre nettsteder.

3. Fordel roller i gruppa • Fordel oppgaver og roller  i gruppa: • Redaktør: Ansvarsområde: ledelse, innkalling til møter, ansvar for at arbeidet gjøres, frister overholdes, oveordnet ansvar for innhold og utforming • Utvikler: Ansvar for HTML og CSS • Tester: Ansvar for at sidene validerer og er tilgjengenlige • Innholdsansvarlig: Ansvar for tekst, både innhold og presentasjon • Designer: Ansvar for visuell utforming, valg av utseende på tekst og lenker, farge og presentasjon.

4. Skrekkeksempler • www.webpagesthatsuck.com

5. En del ting å tenke på • Ta hensyn til hjelpemidler og programvare for tilpasninger!

6. Leselist Satellite fra Bojo as

7. Skjermlesere, talesyntese og leselist Skjermleseren kan ved hjelp av talesyntese, (tekst-til-tale system), lese opp titler, menyer, innhold og brukerens egne inntastinger. • Navigasjonen blir enklere dersom innholdet er strukturert.

8. Opplesningsutstyr • For personer med lesevansker. • Det kan installeres mulighet for opplesning på flere språk. • Opplesningsprogrammer er ofte avhengig av at det er mulig å kopiere tekst til utklippstavlen. • Hvis teksten ligger som grafikk, er det ikke mulig.

10. Forstørringsprogrammer For vanskeligheter med å se og lese det som står på en skjerm Disse programmene gjør det mulig å zoome inn det område av skjermen der markøren befinner seg.

11. Forstørringsprogrammer • Vanskelig å holde oversikten over sider som er låst i stor størrelse med scrolling både vannrett og loddrett. • Tekst som vises som et bilde, for eksempel på en logo, eller knapp fungerer dårlig for personer med sterkt nedsatt syn.

12. Manglende tekst til bilder • Utstyrer bilder, grafikk, tabeller, lenker m.m. med en alternativ tekst - ”alt-tekst”. • Brukes til å beskrive hva bilder forestiller, hva grafer inneholder eller hvor lenkene sender deg.

13. Ikke-skalerbar tekst • Behovene varierer fra bruker til bruker. • Noen foretrekker å få vist teksten med små skrifttyper slik at de får se mest mulig av teksten. • Brukere med nedsatt syn har behov for store skrifttyper for å kunne lese teksten.

15. Når det som er klikkbart blir for smått

18. Lyd og video • Vidoesnutter kan tekstes og tekstversjoner av lydklipp/video kan legges ut. • Tilsvarende problemer oppstår også ved bruk av andre filformater, som for eksempel PDF-dokumenter og Flash-filer.

19. Vanskelige tekster • ALL-undersøkelsen, som ble presenteret av Nasjonalt senter for leseopplæring og leseforskning i 2003, anslår at 30 prosent av den voksne befolkningen i Norge har en leseferdighet som er utilstrekkelig i forhold til kravene i dagens arbeids- og hverdagsliv.

21. Begrensinger på teksten • Lange ord, faguttrykk og forkortelser fører til problemer for brukere som får teksten lest opp ved hjelp av skjermleser • Skjermleseren ofte får problemer med å uttale spesielle ord. • Det er også et problem dersom sidene på nettstedet er tettpakket med tekst. I en slik situasjon er det vanskelig å få oversikt.

22. Komplisert oppbygging av sidene • Et nettsted inneholder ofte store mengder med informasjon. • Informasjonen er ofte ordnet i en rekke forskjellige kategorier og på ulike sider. Det er derfor svært viktig at strukturen er ordnet og ensartet. • Dette gjelder både nettstedet som helhet og den enkelte siden. • For personer som har en hjerneskade eller som leser langsomt, er det en stor belastning dersom nettstedet ikke er bygd opp på en enkel og logisk måte.

24. Tilgjengelige nettsider – hvem har ansvar?

25. Praktiske råd • 21 råd …. • Noen av dem: -> Husk at ca 40 prosent av den voksne befolkningen har en leseferdighet som ikke er bedre enn nivået på 6.skoletrinn. • Skriv derfor enkelt med korte, direkte og aktive setninger.

26. Sørg for enhetlig layout på nettstedet • Sørg for en enhetlig layout på nettstedet. Designelementer bør gjenbrukes på alle sider.

27. Skriv inn alternative tekster for grafiske elementer • Beskriv alle bilder med det som kalles ”alt-tekst”. • ”Alt” står for ”alternativ”, og ”alt-teksten” er den teksten som leses opp eller vises for de brukere som ikke kan se bildene.

28. Bruk overskrifter for å vise strukturen • De brukerne som er avhengig av systemer som leser opp sider, navigerer ofte ved hjelp av overskriftene på en nettside. • Dersom overskriftene bare består av uthevet tekst, får disse brukerne problemer. • Av samme grunn er det viktig at bare virkelige overskrifter markeres som overskrifter. Overskriftstagger skal ikke brukes til å lage stor og iøynefallende tekst.

30. Lær forskjellen mellom avsnitt og linjeskift • Avsnitt begynner med koden ”<p>”og slutter med ”</p>” • Linjeskift vises som ”<br>” eller ”<br />”

31. Kjenn taggene og bruk dem riktig • En vanlig feil er å bruke HTML-tagger som ”<blockquote>” eller ”<dd>” for å lage tekstinnrykk. • Taggen ”<blockquote>” er beregnet på å angi sitater og vil av en skjermleser bli lest opp som et sitat. • Taggen ”<dd>” er beregnet på definisjoner og vil gi HTML-feil dersom den brukes isolert og ikke sammen med den tilhørende termen i en ”<dt>”-tagg.

32. Datatabeller må gjøres forståelige • Gjør tabeller så enkle som mulig, helst ikke mer avansert enn en timeplan. • Lag heller flere enkle tabeller enn én stor og kompleks tabell. • Sørg for at rad- og kolonneoverskriftene er markert som tabelloverskrifter. • Gi tabellen en egen overskrift og lag eventuelt et tekstlig resymé som klargjør de viktigste konklusjonene man kan trekke av tabellen.

33. Bruk meningsbærende lenketekster • Lenker er selve limet som binder nettsider sammen, og må kunne brukes av alle. • Et vanlig eksempel er de lenkene som er utstyrt med teksten ”Les mer”. Navigerer man ved å hoppe fra lenke til lenke, eller ved å få lest opp en liste over samtlige lenker på en side, gir ikke ”Les mer” fem ganger etter hverandre mening.

34. 9. Unngå lenker som åpner sider i nye vinduer • Et nytt vindu dekker for det eksisterende. • Brukeren kan heller ikke benytte nettleserens tilbake-knapp for å komme tilbake til startsiden. • Problemet er stort for personer med forståelsesvansker og personer som bruker skjermlesere.

35. 10. Strukturer teksten • Tekster som er vanskelige å lese og å forstå, er et problem for alle. • Det blir vanskelig å finne den informasjonen man søker, og brukeren vil bruke lang tid for å få det ønskede utbyttet. • Personer med lesevansker og brukere av skjermlesere har spesielt store problemer med lange og vanskelige tekster.

36. Både enkel og full versjon • Del opp siden i to deler: En del med korte hovedpoenger fra teksten med lenke til den andre delen som inneholder den fullstendige teksten. • Når en bruker kommer til den første delen skal han/hun kunne avgjøre om informasjonene er tilstrekkelig. • Mange vil dessuten foretrekke å skrive ut fullversjonen i og med at det er anstrengende å lese lange tekster på skjerm.

37. 17. PDF – ikke tilgjengelig for alle • PDF står for ”Portable Document Format”, • PDF er populært fordi det bevarer dokumentenes opprinnelige utseende. • Mange PDF-dokumenter er ikke tilgjengelig for alle, og det bør derfor suppleres med andre formater.

38. PDF • Velger dere å bruke PDF-filer, bør de suppleres med en HTML-utgave med det samme innholdet. • Det må legges ut godt synlige henvisninger til hvordan man henter og aktiverer programmet. • Det må ikke legges ut PDF-filer der innholdet er skannet inn.

39. 21. Bruk testverktøy • Kontroller alle ferdigstilte sider. • Det finnes verktøy på nettet som programvare på din egen PC. • Det finnes også verktøy som du kan teste sidene dine uten at du selv installererenkelt kan installere og som du kan bruke til å sjekke sider som ikke er lagt ut.

40. Testing • Det er oppgaven som avgjør hvilke verktøy du skal benytte. • Har du installert Accessibility Toolbar kan du kontrollere at selve HTML-koden er korrekt. • Det gjør du ved å velge Validation > W3C HTML Validator, og deretter velge det som passer til situasjonen.

41. W3C og WAI • Du bør sørge for å følge de retningslinjer og standarder som finnes hos W3C (World Wide Web Consortium). • Det er viktig å teste nettstedet ved å la faktiske brukere prøve det ut og gi tilbakemelding.

42. W3C og WAI • Det mest anerkjente og hyppigst benyttede grunnlaget for arbeid med tilgjengelighet er retningslinjene fra Web Accessibility Initiative (WAI). • WAI er en undergruppe i W3C.

43. WAI • WAI arbeider på 3 områder med tilgjengelighet: • innhold på nettsider: Web Content Accessibility Guideline (WCAG). • utviklingsverktøy: Authoring Tool Application Guideline (ATAG). • nettlesere: User Agent Accessessibility Guideline (UAAG). • www.w3.org/WAI/

44. Ressurser • WCAG 1.0 finner du på adressen: www.w3.org/TR/WCAG10/ • Teknikker tilpasset WCAG 1.0 finner du på: www.w3.org/TR/WCAG10-TECHS/ • HTML-teknikkene tilpasset WCAG 1.0 finner du på: www.w3.org/TR/WCAG10-HTML-TECHS/ • CSS-teknikker tilpasset WCAG 1.0 finner du på: www.w3.org/TR/WCAG10-CSS-TECHS/

45. Ressurser • Det finnes flere nettsteder som beskriver hvordan retningslinjene kan implementeres i praksis. • Et slikt nettsted er Accessify www.accessify.com, som har samlet en rekke linker og verktøyer som er nyttig for å kunne kontrollere og forbedre tilgjengeligheten.

46. Ressurser • På www.webaim.org/ finner du også mange gode råd og verktøy. • Nettsteder og tilhørende URLer ikke alltid like lett å finne tilbake til. Derfor har Deltasenteret www.shdir.no/deltasenteret/ og Norge.no www.norge.no egne sider som gir deg oppdatert informasjon om tilgjengelighet og arbeidet med å fremme tilgjengelighet i Norge.

47. HTML-verktøy • W3Schools • W3Schools er en referansemanual for HTML. Her kan du se hvilke HTMLtagger som er i bruk og hvilke attributter som finnes. • Her kan du også finne ut hvilke tagger som hører til i hvilke HTML-versjoner, hva taggene kan brukes til og hvilke nettlesere de fungerer i. • W3Schools er integrert i Accessibility Toolbar. Se menypunktet References > Language references, eller på adressen: http://www.w3schools.com/tags/

48. W3C HTML validator • W3C’s HTML-validator kan brukes for å teste hvorvidt nettsiden overholder en valgt HTML-standard. Dersom HTML-koden ikke er riktig, er det stor sannsynlighet for at nettsiden heller ikke er tilgjengelig. Testing av nettsider bør derfor alltid starte med en test av HTML-koden. • HTML-validatoren er integrert i Accessibility Toolbar, men finnes også på adressen: validator.w3.org • Med HTML-validatoren kan man både teste sider som er lagt ut på nettet og laste opp og teste sider som ennå ikke er lagt ut.

49. HTML Tidy • HTML Tidy er et program som rydder opp i HTML-dokumenter. • Programmet kan fjerne spesielle koder som blir satt inn når Microsoft Word brukes til å generere HTML-dokumenter. HTML Tidy er integrert i Accessibility Toolbar, men du finner den også på adressen: infohound.net/tidy/

50. WCAG-retningslinjene • WCAG-retningslinjene deler opp kravene til tilgjengelighet i tre nivåer: • Krav som må oppfylles, utgjør ”nivå 1” eller ”A”. • Krav som bør oppfylles, utgjør ”nivå 2” eller ”AA” . • Krav som kan oppfylles og som forbedrer tilgjengeligheten ytterligere, utgjør ”nivå 3” eller ”AAA”.