GUIDEN / TILGÆNGELIG WEB FOR WEBUDVIKLERE

GUIDEN / TILGÆNGELIG WEB FOR WEBUDVIKLERE VÆRKTØJET TIL TILGÆNGELIG WEB CENTER FOR LIGEBEHANDLING AF HANDICAPPEDE

INDHOLD / MAINSTREAMING AF HANDICAPOMRÅDET TILGÆNGELIGHED OG WEBDESIGN Brug CSS Brugen af tabeller Layout af tekst og indhold Farvevalg Hierarkisk opbygning af overskrifter 27 27 29 30 31 34 INTRODUKTION 3 TILGÆNGELIGHED OG BRUGEN AF BILLEDER OG GRAFIK 36 TILGÆNGELIGHED OG KONSTRUKTION AF HJEMMESIDER 6 Tilknyt en Alt -tekst til billeder m.m. Tilknyt en Alt -tekst til indlejret grafik m.m. 36 38 Brugen af W3C-teknologier Valid HTML Metadata Angiv sproget på webstedet Browser Brugen af frames (rammer) Brugen af java script Brugen af formularer 6 6 7 9 9 10 12 13 TILGÆNGELIGHED OG BRUGEN AF MULTIMEDIER Lydfiler Videoklip Animationer Brugen af Flash 42 42 42 42 43 TILGÆNGELIGHED OG NAVIGATION 16 Sitemap og linktekster Design af navigationsstrukturer Undgå blinkende, flimrende og urolig tekst/elementer Undgå automatisk åbning af vinduer Navigering med både mus og tastatur 16 16 18 21 22 23

INTRODUKTION Denne guide er målrettet webudviklere, der beskæftiger sig med at konstruere og udvikle websteder. Derfor fokuserer guiden på viden om de tekniske specifikationer, som er relevant for dette arbejde. Guiden kan for eksempel bruges til at udvikle et websted, hvor tilgængeligheden allerede er indtænkt - eller den kan hjælpe webudviklere med at gøre et websted tilgængeligt. Guiden kan også bruges som en introduktion til emnet for de medarbejdere, der har fået til opgave at indgå i et samarbejde med en ekstern webleverandør omkring udvikling af et nyt websted, der skal være tilgængeligt. Her kan medarbejderens opgave for eksempel være at sikre, at webleverandøren lever op til kravene om tilgængelighed jf. kravspecifikationen. Hvis medarbejderens viden omkring tilgængelig web som udgangspunkt er begrænset, kan guiden introducere til emnet og være med til at kvalificere kommunikationen mellem den eksterne webleverandør og kommunen. Det skal dog bemærkes, at fagområdet tilgængelig web er meget omfattende og kompliceret. Det kan derfor være meget svært at få overblikket over fagområdet, hvis man ikke allerede i udgangspunktet har en specifik baggrundsviden om emnet. Hvis man ikke selv har den fornødne ekspertise på området, kan det derfor anbefales, at man inddrager en ekstern tilgængelighedsekspert i hele udviklingsprocessen af et nyt websted. Ønsker du at vide mere om, hvordan man sikrer tilgængeligheden af indholdet på websteder, kan du læse guiden Guiden Tilgængelig web for webredaktører. 2 3

Hvad er WAI? World Wide Web Consortiet (W3C) arbejder med et bredt område inden for world wide web. Inden for W3C findes en gruppe, der arbejder for større tilgængelig på webben, der hedder WAI (Web Accessibility Initiative). Selve guidelinen, der angiver de konkrete tekniske retningslinjer for tilgængelig web, hedder WCAG 2.0 (Web Content Accessibility Guideline). WCAG 2.0 er inddelt i tre niveauer WCAG 2.0 angiver tre niveauer for tilgængelighed. Niveau 1 (kaldet A i WCAG) er retningslinjer som skal overholdes for, at mennesker med funktionsnedsættelse kan få adgang til information på netstedet. Niveau 2 (AA) er retningslinjer, der bør opfyldes for, at størstedelen af brugere med funktionsnedsættelse kan få adgang til information på netstedet. Niveau 3 (AAA) er retningslinjer, som kan opfyldes, hvis man ønsker, at alle brugere med funktionsnedsættelse har adgang til information på netstedet. Den generelle holdning i Danmark, såvel som i EU er, at websteder skal overholde niveau 1 og 2. Krav til tilgængelighed I Danmark, EU, Canada og Australien følger man de retningslinjer for tilgængeligt webdesign, som World Wide Web Consortium (W3C) har opstillet. I USA følger man sine egne lovbefæstede retningslinjer kaldet Section 508. På nogle områder svarer disse retningslinjer til WCAG 2.0 og på andre gør de det ikke. Læs mere om tilgængelighed på: www.itst.dk/it-arkitektur-og-standarder/tilgengelighed Læs mere om WAI, WCAG 2.0 på: www.w3.org. Læs en dansk oversættelse af WCAG 2.0 på: www.wcag20.dk/wcag20- da/ 4 5

TILGÆNGELIGHED OG KONSTRUKTION AF WEBSTEDER Brugen af W3C-teknologier Brug standarder fra World Wide Web Consortium (W3C)! W3C anbefaler, at man bruger den senest understøttede version af W3C teknologier. W3C udvikler standarder inden for brugen af f.eks. HTML, CSS osv. Ved at bruge disse standarder sikrer man, at der anvendes teknologier, hvor tilgængeligheden er medtænkt i standarden. Hvorfor følge standarder? Brugen af de nævnte standarder har især betydning for, at diverse hjælpemidler fungerer optimalt. Dernæst har det betydning for, at webstedet vises ens af forskellige browsere. Læs mere om WCAG 2.0 på: www.w3.org. Læs mere om W3C teknologier og retningslinjer på: www.itst.dk/it-arkitektur-og-standarder/tilgengelighed. Valid HTML Brug valid HTML! HTML er valid, hvis den overholder de standarder, som W3C har angivet. Hvad er HTML? HTML er et eksempel på et sprog, som hjemmesider kan være opbygget af. Det er en forkortelse af Hypertext Markup Language. Markup Language kombinerer tekst og information om tekstens struktur og præsentation, som for eksempel angivelse af tekstens overskrifter, brødtekst, lister, links, billeder osv. Hvorfor bruge valid HTML? Valid HTML er vigtigt, for at webstedet kan læses i alle typer browsere, f.eks. Internet Explorer, Mozilla Firefox, Opera, Netscape osv. Valid HTML er desuden vigtigt, fordi skærmlæsere er udviklet ud fra en forudsætning om at websteder er opbygget af valid HTML. Hvis et websted ikke er udviklet ud fra denne standard, kan man risikere, at skærmlæsere ikke kan læse webstedet. Du kan teste, om du har brugt valid HTML kode på: www.w3.org. Læs mere om valid kode på: www.itst.dk/it-arkitektur-og-standarder/ tilgengelighed Metadata Udfyld metadata! Selv om metadata ikke har helt den samme betydning, som den tidligere har haft, kan det alligevel anbefales, at metadata medtages. Dog vil det være mindre relevant at medtage metadata for kommunale websteder end for webestedsejere, der gerne vil score højt på søgemaskinernes hjemmesider. De kommunale hjemmesider vil oftest være kendt af brugerne, og derfor har de ikke de samme interesser i forhold til søgemaskiner. Hvad er metadata? Metadata beskriver kortfattet webstedets formål og indhold m.m. Oplysningerne placeres i HTML koden i head delen. Der er mulighed for at udfylde titel, keywords og description. Titel skal angive webstedets formål. Keywords skal angive ord, som er karakteristiske for indholdet på webstedet. Description beskriver i korte sætninger, hvad projektets formål er, f.eks. hvilke services og produkter man udbyder. 6 7

Eksempel <head> <titel> </titel> <meta name= description content= > <meta name= keywords content=. > </head> Hvis undersider på webstedet har et andet indhold end indekssiden, kan det anbefales at skrive metadata på alle undersider, der har et specifikt formål. Hvorfor udfylde metadata? Udfyldelse af metadata er en af metoderne blandt flere til at komme til at rangere højt på søgemaskinernes resultatliste. Udfyldelse af metadata har således ikke nogen direkte indflydelse på tilgængelig web, men har betydning i forhold til brugernes muligheder generelt for at kunne finde de websteder, som de leder efter. Læs mere om metadata på: www.itst.dk/it-arkitektur-og-standarder/ tilgengelighed. Læs mere om søgemaskineoptimering på: www.wikipedia.org. Det er muligt at standardisere brugen af metadata ved at bruge værktøjer som Metamaten: www.metamaten.dk eller Dublin Core: http://dublincore.org. Angiv sproget på webstedet Angiv sproget i metadata Der bør på alle webstedets sider stå hvilket sprog (dansk, engelsk osv.) webstedet er skrevet på. Det kan for eksempel anføres i metadata. Hvis webstedet også findes i en anden sprogversion, er det vigtigt at sørge for, at også alle alt og title attributter bliver oversat. Læs mere om angivelse af sprogkoder og se eksempler på: www.itst.dk/ it-arkitektur-og-standarder/tilgengelighed. Browser Webstedet skal fungere i forskellige browsere! Webstedet skal kunne anvendes af forskellige browsere også ældre versioner. Selv om Internet Explorer er den mest anvendte browser, er der mange brugere, som anvender andre browsere. Dertil kommer, at også Internet Explorer findes i mange versioner med forskellige funktionaliteter. Test webstedet i forskellige browsere! Du kan teste om webstedet fungerer i forskellige typer browsere ved at downloade forskellige typer browsere og herefter teste om webstedet fungerer optimalt i dem alle. 8 9

Det skal dog nævnes, at eksperter inden for området kender alle de faldgruber og svagheder i de forskellige typer browsere. Derfor kan det som ikke-ekspert være svært at sikre sig, at webstedet overholder dette punkt. Download Internet Explorer på: www.microsoft.com. Download Mozilla Firefox på: ww.mozilla-europe.org. Download Opera på: www.opera.com. Download Netscape på: http://browser.netscape.com. Brugen af frames (rammer) Brug titler, hvis du bruger frames En webside opbygget af frames er i praksis en samling af sider, der vises i separate vinduer. Frames var tidligere meget udbredt at bruge til at opbygge et websted med. Efterhånden er man gået bort fra det af flere forskellige årsager: Brug koden NOFRAMES ved brugen af frames Selv om det er de færreste browsere, der ikke understøtter frames, er det en god idé at informere brugerne om alternative løsningsmuligheder via koden NOFRAMES. Hvad er NOFRAMES? NOFRAMES er en kode, der kan bruges til at modvirke de problemer, der opstår ved brugen af frames. Koden læses af browsere, der ikke forstår frames. I praksis skriver man en tekst i NOFRAMES koden, der informerer brugeren om, hvilke muligheder han/hun har, når browseren ikke understøtter frames. Læs mere om frames og NOFRAMES på: www.w3.org. Læs mere om brugen af frames på: www.itst.dk/it-arkitektur-og-standarder/tilgengelighed/tilgengelighed. Læs mere om frames på: www.webaim.org. Du kan ikke bookmarke til en side, der er lavet i frames Søgemaskinerne har svært ved at indeksere siderne Der kan være problemer med at udskrive siderne Det er derfor mere hensigtsmæssigt at bruge CSS, når du konstruerer et websted. Hvis du vælger at bruge frames, så husk at give hver frame et sigende navn (name) og titel (title). 10 11

Brugen af java script Java script skal bruges på den rigtige måde Java script kan både hindre og understøtte tilgængelighed. Som så meget andet er det måden, den bruges på, der er afgørende for, om den er hensigtsmæssig eller ej. Desuden sker der en meget stor udvikling inden for java script, hvilket betyder, at hvad der den ene dag er god skik og brug, er helt forældet den næste. Tjek derfor nedenstående links for yderligere viden omkring emnet, hvis du ønsker at bruge java script på et websted. Der vil desuden være funktionaliteter, der udelukkende kan laves ved hjælp af java script. Endvidere vil der være færre og færre brugere, der har slået java script fra, hvorfor man med tiden ikke længere behøver at tage højde for dette faktum, når man konstruerer et websted. Hvad er java script? Java script er et computersprog, der ligger indlejret i HTML-dokumentet. Det bruges typisk i forbindelse med funktioner på et websted, der interagerer med brugeren, som f.eks. når brugeren efter indtastning af et tekstfelt, får besked på, at beskeden er sendt osv. Det kan også bruges i forbindelse med animationer på websteder. Fordelen ved at bruge java script er, at det er et mere enkelt sprog at lære end Java, C#, PHP osv. NB: Selv om man ud fra navnet skulle tro, at java script har noget at gøre med java (programmeringssprog), er dette ikke tilfældet. Det er to forskellige computersprog, der måske nok har nogle lighedstræk, men de bruges til forskellige opgaver. Brug java script med alternativer En del brugere har java script slået fra af sikkerhedsmæssige grunde. Eller måske benytter de en browser, som ikke understøtter java script. Derfor er det vigtigt at anvende java script, der medtager alternativer eller anvender server-side scripts med angivelse af NOSCRIPT option med et tilgængeligt alternativ. Tjek om hjælpemidler virker uden java script Hvis du bruger java script på et websted, er det vigtigt at tjekke, at webstedet også fungerer, hvis java script er slået fra. Og det er vigtigt at tjekke, at funktionaliteten virker i forbindelse med brugen af hjælpemidler. Læs mere om java script på: www.w3.org. Læs mere om java script på: www.itst.dk/it-arkitektur-og-standarder/ tilgengelighed. Brugen af formu larer Udfyldelse af formularer er ét af de områder, hvor der er de største problemer med tilgængelighed for brugere, der anvender skærmlæser og/ eller tastatur. En af forklaringerne er, at formularer ofte er layoutet i tabeller, som ikke er opmærkede. Det betyder, at skærmlæseren ikke kan læse overskriften for kolonner og række for det felt, som brugeren står i. Og dermed ved brugeren ikke, hvad der skal indtastes i feltet. Formularer kan ligge gemt bag trykknapper (f.eks. knapper hvor du klikker på send eller reset i forbindelse med udfyldelse af et spørgeskema), radiobuttons (f.eks. cirkler eller firkanter, hvor du krydser dit svar af), grafiske knapper (f.eks. billeder), tekstbokse, valgmenuer (f.eks. dropdown-menuer, hvorfra du foretager valg) m.fl. 12 13

Tilgængelige formulerer Opmærkning af en formular kan foretages med HTML-elementet <Label>, som linker teksten til det rette <INPUT>-element ved hjælp af attributten id. Selve formularens udseende bør layoutes med CSS. Desuden bør alle elementer i formularen tildeles attributten tabindex for at sikre, at brugeren tabber sig gennem formularen i den ønskede rækkefølge. Det kan desuden anbefales, at curseren placerer sig i det første inputfelt, når man kommer ind på formularen. <FORM action= http://example.com/adduser method= post > <FIELDSET> <LEGEND>Personal information</legend> <LABEL for= firstname >First name: </LABEL> <INPUT type= text id= firstname tabindex= 1 > <LABEL for= lastname >Last name: </LABEL> <INPUT type= text id= lastname tabindex= 2 >...more personal information... </FIELDSET> <FIELDSET> <LEGEND>Medical History</LEGEND>...medical history information... </FIELDSET> </FORM> Kilde: www.w3.org. Læs mere om labels og formularer på: www.itst.dk/it-arkitektur-ogstandarder/tilgengelighed. 14 15

TILGÆNGELIGHED OG NAVIGATION Sitemap Sitemap - eller alfabetisk indholdsfortegnelse Et websted bør have et sitemap eller en alfabetisk indholdsfortegnelse, der giver brugeren et overblik over webstedets indhold. Sitemappen eller indholdsfortegnelsen skal både informere om indholdet og den generelle struktur på webstedet. I forbindelse med præsentationen af webstedet kan det også være en god idé at informere brugeren om, hvilke krav til tilgængelighed webstedet opfylder. Læs mere om sitemaps på: www.itst.dk/it-arkitektur-og-standarder/ tilgengelighed. og linktekster Linkteksten skal kunne forstås uden for sin kontekst Når du skriver links på en hjemmeside, skal linkteksten kunne forstås uden for sin kontekst. Det vil sige, at linkteksten skal være beskrivende for den side, du sender brugeren videre til. Det er for eksempel ikke nok, at du skriver Klik her, Læs mere her osv. En sådan information vil en blind bruger ikke have megen glæde af. I stedet skal du skrive teksten i linket, så linket kan forstås uden for sin kontekst. Eksempler: Klik her for at downloade blanketten vedrørende flyttemeddelelse til Folkeregistret. Læs mere om teaterfestivalen her. Undgå at skrive hele url-adressen i linket Du skal undgå at skrive hele url-adressen i linket, fordi en skærmlæser vil læse hele teksten op, hvilket kan være tidsrøvende for brugeren. Skriv i stedet en kort beskrivende tekst, som nævnt ovenfor ved hjælp af attributten title. Eksempel: <a href= http://www.social.dk/ministeriets_omraader/handicap/nye_ og_nemmere.html title= Åbner i et nyt vindue target= _blank >Læs mere om Projekt Nye og nemmere veje her</a> Husk at give brugeren besked, hvis han/hun sendes til en ny side Hvis du sender brugeren til en ny side via linket, skal du oplyse brugeren om det. I praksis kan det gøres ved at bruge attributten title. Content management systemer vil ofte have indbygget en funktion til netop dette formål, hvor du kan skrive en supplerende tekst, når du vælger at henvise brugeren til en ny hjemmeside. Eksempel: Skriv for eksempel i tekstfeltet: Åbner i nyt vindue. Undgå at bruge enslydende linktekster der henviser til forskellige steder Du bør undgå, at den samme linktekst viser forskellige steder hen. Det vil forvirre mange brugere, fordi man ikke ud af indholdet i linkteksten kan gennemskue, hvor man bliver vist hen. Læs mere om links på: www.itst.dk/it-arkitektur-og-standarder/tilgengelighed. 16 17

Design af navigationsstrukturen En klar, konsistent og logisk opbygning af navigationsstrukturen Grundreglerne for design af websteder er, at man tilstræber en konsistent og logisk opbygning. Det vil sige, at man benytter sig af ensartede navigationsmåder, symboler, grafisk opbygning osv., der gør det nemt for brugeren at få overblik over hjemmesiden, såvel som at huske den. Overholder man disse mål, gør man det samtidig nemt for brugeren at lære at bruge hjemmesiden. Disse grundlæggende regler er endnu vigtigere at overholde, når man taler om tilgængelig web. For en bruger med en kognitiv funktionsnedsættelse vil det for eksempel være meget vigtigt med en enkel, logisk og overskuelig opbygning af hjemmesiden, såvel som klar, konsistent og logisk navigationsstruktur. Det indebærer, at websiden vil være langt nemmere at forstå og bruge. Man sikrer en klar, konsistent og logisk opbygning af navigationsstrukturen ved at være opmærksom på følgende punkter: Billeder og ikoner skal have en konsistent betydning gennem hele webstedet. Man bør opbygge alle siderne på stort set samme måde. Bruges der billeder, skal de placeres de samme steder på siderne. Brugergrænsefladen skal være ensartet Når brugergrænsefladen skal være ensartet indebærer det, at det design, som man har valgt til forsiden, er genkendelig på alle siderne. Man kan godt afvige lidt fra designet, men brugeren må ikke være i tvivl om, at han/hun stadig befinder sig på det samme websted. Menuer skal være synlige hele tiden Menuerne skal være placeret de samme steder, så brugeren altid ved, hvor han/hun skal navigere fra. Brug samme navigationsmetode på hele sitet! Man skal fastholde den samme navigationsmetode gennem hele webstedet, så brugere ikke skal til at lære at bruge flere navigationsmetoder i forbindelse med brugen af webstedet. Informationsstruktur og funktionaliteter skal være ensartede Det er også vigtigt, at informationsstrukturen er opbygget ensartet, således at man kan se logikken i den måde, man kan søge informationer på webstedet. Og det er vigtigt, at funktionaliteter er ensartede, dvs. at download, udfyldelse og afsendelse af formularer foregår på samme måde på hele webstedet. Læs mere om navigation på: www.itst.dk/it-arkitektur-og-standarder/ tilgengelighed. Bruges der ikoner eller symboler, skal de have den samme betydning og funktion på alle siderne. Navigationsstrukturen skal være ensartet. Brugergrænsefladen, menuer, navigationsmetoder og funktionaliteter bør være opbygget ens på alle siderne. 18 19

Undgå blinkende, flimrende og urolig tekst/elementer Undgå tekst eller indhold, der bevæger sig Nogle mennesker med kognitive funktionsnedsættelser er ikke i stand til at læse tekst, der bevæger sig. Desuden kan bevægelser eller en flimrende skærm distrahere så meget, at de heller ikke er i stand til at koncentrere sig om at læse teksten på siden. Også mennesker med synsnedsættelse kan have svært ved at læse tekst, der bevæger sig. Derudover kan skærmlæsere ikke opfatte tekst, der bevæger sig. Undgå flimrende skærme Indholdet på en hjemmeside må ikke få skærmen til at flimre. Flimrende skærm kan skyldes, at der er tekst eller objekter, der bevæger sig, eller hvis hjemmesiden bliver opdateret automatisk. Undgå rullende tekster Rullende tekster bør så vidt mulig undgås, fordi en lang række brugere med syns- og læseproblemer kan have svært ved at læse disse tekster. Hvis en side indeholder rullende tekster, bør der være en funktion, hvor brugeren kan fastfryse bevægelser og opdateringer. Undgå blinkende tekster Blinkende tekster, objekter eller andre elementer bør undgås, fordi de kan være svære at opfatte for nogle mennesker med funktionsnedsættelse. Undgå blinkende indhold på websider Blinkende indhold kan forårsage anfald hos mennesker med fotosensitiv epilepsi. Anfald kan fremprovokeres, hvis indholdet flimrer med en høj intensitet og med en frekvens mellem 2-55 Hz. 20 21

Læs mere om uroligt indhold på: www.itst.dk/it-arkitektur-og-standarder/tilgengelighed. Undgå automatisk åbning af vinduer Undgå automatisk åbning af vinduer Det er vigtigt at undgå automatisk åbning af nye vinduer, f.eks. ved at musen kører hen over et element på skærmen. Det kan virke meget forvirrende for brugere med nedsat syn eller kognitiv funktionsnedsættelse. Gør i stedet sådanne valg til en aktiv handling, som brugeren selv vælger. Du skal altid gøre brugeren opmærksom på, at siden åbnes i et nyt browservindue, f.eks. i forbindelse med klik på eksterne links. Undgå at benytte automatiske pop-up vinduer Undgå at benytte pop-up vinduer eller andet, der automatisk kommer frem på brugerens skærm ved aktivering. Læs mere om uroligt indhold på: www.itst.dk/it-arkitektur-og-standarder/tilgengelighed. Navigering med både mus og tastatur Navigering uden brug af mus Det skal være muligt at bevæge sig rundt på et websted også uden brug af mus. Denne funktionalitet er målrettet de brugere, som ikke kan bruge en mus på grund af en motorisk funktionsnedsættelse eller som anvender skærmlæsere på grund af en synsnedsættelse. Hvis man udelukkende bruger tastaturet, skal det være muligt at tabbe sig gennem alle menuer og links såvel som at disse skal kunne aktiveres ved brugen af Enter. Rækkefølgen af menuer og links bør være logisk, så de vigtigste menuer og links står først og mindre vigtige står til sidst. NB: Hvis du slår CSS fra, kan du få et indtryk af, hvilken rækkefølge brugeren får præsenteret linksene i. Hvis der bruges pop-up vinduer eller andet, bør disse være forsynet med en luk-funktion, der giver brugeren mulighed for at lukke vinduet. Vær også opmærksom på, at luk-knappen er tilgængelig, dvs. at den ikke er så lille, at den er vanskelig at ramme for mennesker med nedsat syn eller bevægelseshandicap. Luk-funktionen skal desuden være tilgængelig via brug af tastaturet. I det hele taget kan det være uhensigtsmæssigt at benytte sig af popup vinduer, fordi mange brugere gennem deres sikkerhedsindstillinger på computeren har fravalgt pop-up vinduer. Derfor skal man ikke skrive vigtig information i et pop-up vindue. I stedet kan du lade den stå som et link, som brugeren kan vælge at åbne. 22 23

Java scripts kan have betydning for funktionaliteten Hvis der er brugt java scripts i konstruktionen af webstedet, kan det indebære, at man ikke kan bruge tastaturet til at navigere rundt på sitet med. Eller hvis man som bruger har slået brugen af java scripts fra, kan det betyde at muligheden for at navigere via tastaturet er slået fra. Navigering via overskrifter Man bør give brugeren mulighed for at navigere i indholdet på en side uden at behøve at få alt læst op. Dette kan gøres ved at bruge heading tags, <h1>, <h2>, <h3> osv. til alle overskrifter. Overskrifterne sorteres i forhold til deres hierarki, således at heading 1 placeres øverst, mens heading 2 placeres efterfølgende og heading 3 placeres efter heading 2 osv. Denne metode giver et godt overblik over indholdet på webstedet, og giver brugeren mulighed for at tabbe sig frem fra overskrift til overskrift. Tilbyd en skip-menu funktion Det kan anbefales, at give brugeren mulighed for at springe den faste menu over. Det kan for eksempel gøres ved at placere et skip menu-link umiddelbart før menuen. Det vil være tidsbesparende for brugere, der bruger skærmlæsere, og som gerne vil undgå at få læst en menu op, som de har hørt 117 gange før. Det kan også være en fordel for brugere, der kun bruger tastaturet, ikke at skulle tabbe sig igennem en menu, som de i forvejen kender. Læs mere om navigering og skip-menu funktionen på: www.itst.dk/itarkitektur-og-standarder/tilgengelighed. 24 25

TILGÆNGELIGHED OG WEBDESIGN Brug CSS (cascading style sheets)! Det optimale er at styre layout og præsentation ved at bruge CSS. Hvad er CSS? CSS er et sprog, som styrer al layoutet af et websted. Man kan for eksempel kontrollere fonten, fontstørrelsen, fontfarve, afstanden mellem bogstaverne, hvorvidt teksten skal være med lige kanter eller venstre/ højrestillet, hvilken position et objekt skal have på siden, baggrundsfarve osv. Brug en ekstern style sheet Style sheeten kan tilknyttes webstedet på flere måder: 1) Det kan ligge indlejret direkte i HTML dokumentet som en del af HTML-koden (inline styles). 2) Det kan stå i <head>-delen af et HTML dokument (internal styles). 3) Det kan gemmes i en separat fil, der hentes ind i HTML dokumentet (external styles). Den sidstnævnte metode er den mest hensigts mæssige måde at bruge. Via denne fil henter webstedet al sin in formation om layoutet af siden. Det indebærer samtidig, at du kun skal rette layout anvisningerne ét sted, og det vil have konsekvenser for alle sider på webstedet. Det er således en nem, effektiv og over skuelig måde, hvorpå du kan vedligeholde og foretage små og store ændringer af webdesignet. Brug gerne flere style sheets Der kan være flere style sheets tilknyttet et webstedet. Det kan for eksempel være en fordel at adskille layout af tekst og indhold fra layout af printversionen. I det tilfælde vil man så gemme informationen i to forskellige filer. 26 27

Hvis et websted har brugt CSS kan du se det i webstedets header i kildekoden. Koden kan for eksempel se sådan ud: <link rel= stylesheet href= default.css type= text/css /> <link rel= stylesheet href= print.css type= text/css /> OBS. Webstedets kildekode kan altid tjekkes ved i Internet Explorer at gå ind under menuen Side og vælge Vis kilde eller ved at højreklikke på musen og vælg Vis kilde. Webstedet skal give mening uden brug af CSS Du skal være opmærksom på, at ældre browserversioner ikke kan læse CSS. Desuden kan forskellige browsere have forskellige evner til at læse CSS. Derfor skal webstedet helst designes således, at det kan læses uden brug af CSS. Derfor bør du altid teste, hvordan webstedet ser ud uden brug af CSS, dvs. man slår CSS fra og tjekker, hvordan siden ser ud. Virker siden optimalt, skal brugeren kunne danne sig mening af indholdet på trods af, at CSS er slået fra. Læs mere om CSS på: www.w3.org. Læs mere om CSS på: www.itst.dk/it-arkitektur-og-standarder/tilgengelighed. Læs mere om at læse hjemmesider uden brug af CSS på: www.itst.dk/ it-arkitektur-og-standarder/tilgengelighed. Få inspiration til webdesign og brugen af CSS på: www.csszengarden. com. Valider CSS dokument på: http://jigsaw.w3.org/css-validator. Du kan for eksempel bruge AIS web Accessibility Toolbar til at teste, hvordan webstedet ser ud uden brug af CSS. AIS web Accessibility Toolbar kan downloades på: www.visionaustralia.org.au. Brugen af tabeller Brug ikke tabeller til layout af indhold! Tabeller har traditionelt været brugt på to måder: til præsentation af data og til præsentation af indhold. I sidstnævnte tilfælde bruger man altså tabeller til formatering og layout af indholdet. Det er dog en rigtig dårlig idé, da man risikerer, at brugere, der anvender en skærmlæser, får webstedet præsenteret på en meget uhensigtsmæssig måde. I stedet bør man altid bruge CSS til layout og formatering af indholdet. Brug kun tabeller til præsentation af data! Tabeller bør kun bruges til præsentation af data. En datatabel er en tabel, der præsenterer data, f.eks. præsentation af regnskab, statistik, køreplaner osv. Datatabeller kan være opbygget simpelt eller komplekst. Sådan oplæser en skærmlæser en tabel En skærmlæser oplæser en tabel linært, dvs. den vil læse hver enkelt celle i tabellen fra venstre mod højre, linje for linje. I nogle tilfælde er siden måske layoutet så denne rækkefølge er logisk for en bruger med skærmlæser. Men ofte vil det indebære en tilfældig oplæsning af tekstblokke, der ikke giver nogen mening for brugeren. Hvis man af én eller anden grund insisterer på at anvende tabeller til layout, kan man teste om tabellen giver mening, når den læses lineært ved hjælp af tekstbrowseren Lynx og det kan testes ved hjælp af Web Accessibility Toolbar. Læs mere om forskellige typer af tabeller og tilgængelighed til tabeller på: www.w3.org. Læs mere om Lynx på: http://lynx.browser.org. 28 29

Download AIS, Web Accessibility Toolbar, som kan downloades på: www.visionaustralia.org.au. Læs mere om opmærkning af datatabeller i guiden Tilgængelighed for webredaktører på www.handicapmainstreaming.dk. Layout af tekst og indhold Brug CSS til layout af tekst Det anbefales at bruge CSS til layout af tekst. Det indebærer, at du kan bestemme alle fonte og fontstørrelse i dit style sheet. Og hvis du på et senere tidspunkt ønsker at ændre designet, kan det gøres ved blot at ændre det ét sted. CSS har også den fordel, at brugeren selv kan angive, hvilken font-familie webstedet skal vises med. Valg af font Det anbefales at bruge en font uden seriffer, f.eks. Verdana eller arial, når du skriver elektroniske tekster, da denne font er mere læsevenlig på skærmen. Fontens størrelse Fonten bør ikke være for lille, dvs. ikke under 10 pkt. Hvis der er brugt relative enheder ved konstruktionen af webstedet har brugeren dog muligheden for selv at skalere tekststørrelsen op og ned. Når der er brugt relative enheder vil al tekst og elementer flytte sig i forhold til hinanden. Det indebærer, at brugere, der ønsker webstedet i større end en 100% kan forstørre og formindske alt indholdet på webstedet efter behov. Tip. Du kan forstørre/formindske en side på et websted ved at bruge CRTL og scroll knappen på musen - eller i browseren via menuen vælge Vis/tekststørrelse. Brugere, der kun bruger tastaturet, kan anvende: CTRL og +/-. Læs mere om relative enheder på: www.itst.dk/it-arkitektur-og-standarder/tilgengelighed. Farvevalg Webstedet skal kunne læses uden farver En del brugere er farveblinde. Derfor skal webstedet kunne læses uden brug af farver. Undgå derfor også at bruge farvekombinationerne: rød/ grøn og blå/grøn, da de ofte vil skabe problemer for denne gruppe brugere. Også mange svagsynede ændrer webstedet til visning i s/h, da dette giver optimale kontrastforhold. Brug relative enheder til layout af tekst Brug altid relative enheder, når der skal angives tekststørrelsen. Det vil sige, at tekststørrelsen angives i % eller enheder ( em ) i style sheeten. Brugen af relative enheder indebærer, at brugeren kan forstørre/formindske tekststørrelsen efter behov. Brug relative enheder til layout af indhold Det anbefales, at man også til andet indhold end teksten på webstedet anvender CSS til at styre layout og præsentation med, f.eks. elementer som rammer, kolonner osv. 30 31

Brug kun få farver i teksterne på webstedet! Det kan virke forvirrende, hvis teksten er skrevet med mange forskellige farver. Brug derfor kun 1-2 forskellige farver til teksten. Desuden er der den fordel ved brugen af CSS, at brugeren selv kan skifte skriftfarve, hvis han/hun har svært ved at læse den valgte. Kontrast mellem for- og baggrund Forskellen mellem for- og baggrundsfarve (tekst og baggrund) skal være tilstrækkelig stor for, at teksten bliver læselig for svagsynede og farveblinde. Det er også vigtigt, at for- og baggrundsfarver er tilstrækkeligt kontrastfyldte i forhold til præsentation af grafer, diagrammer osv. Kontrasten kan måles med forskellige former for værktøjer (se eksempel under link henvisningerne). Det er ikke altid, at det er muligt at se med det blotte øje, om kontrasten er tilstrækkelig stor mellem to farver, da det ofte er marginaler, der gør forskellen. Derfor vil det næsten altid være muligt at finde en nuance af den ønskede farve, der har en tilstrækkelig kontrast i forhold til en anden farve. Det er dog ikke muligt at vælge et design med meget douce farver, hvis du også ønsker at opfylde kravene til tilgængeligt web. Brug baggrund uden mønstre eller andet forstyrrende Man bør benytte en baggrund, der er uden mønstre eller andre forstyrrende elementer. En enkel og ensfarvet baggrund er med til at øge læsbarheden af et websted. Brug ikke udelukkende farver som navigationsmetode Det antages, at én ud af 20 brugere har en form for nedsat opfattelse af farver. Derfor må man ikke udelukkende bruge farve som navigationsmetode, fordi brugere, der er farveblinde og andre brugere med synshandicap ikke vil være i stand til at navigere på baggrund af farver. I praksis indebærer det, at man ikke må bruge grafiske elementer eller tekster, der alene gennem deres farve angiver en form for information eller funktionalitet. For eksempel kan du ikke bruge en navigationsform, hvor en rød knap angiver en stop - funktion og en grøn knap, der angiver en fortsæt - funktion. Her bliver man nødt til også at skrive henholdsvis Stop og Fortsæt på knappen. Hvis man bruger farver som navigationsmetode, bør informationen også være tilgængelig via tekst (mark-up). Læs mere om farver og farveblindhed på: www.itst.dk/it-arkitektur-ogstandarder/tilgengelighed. Via værktøjet AIS, Web Accessibility Toolbar kan du simulere farveblindhed. Værktøjet kan slå farverne fra, hvilket giver mulighed for se, hvordan hjemmesiden ser ud uden brug af farver. Værktøjet giver også mulighed for at måle kontrasterne. Værktøjet kan downloades på: www.visionaustralia.org.au. Det anbefales endvidere, at man ikke bruger en ren hvid (#FFFFFF) som baggrund, da den kan være meget skarp for øjnene at kigge på og kan resultere i at bogstaverne flyder sammen. 32 33

Hierarkisk opbygning af overskrifter Overskrifter bør være hierarkisk opbyggede Overskrifter H1, H2 osv. bør opbygges hierarkisk, således at de vigtigste overskrifter navngives med en H1, og hvor de underliggende overskrifter navngives alt efter deres hierarkiske betydning blandt overskrifterne. Navngivningen skal være konsistent gennem hele webstedet. Menuer kan for eksempel navngives med H1, overskrifter (rubrikker) på artikler med H2, underoverskrifter (underrubrikker) nede i artiklen med H3 osv. Denne hierarkiske opbygning hjælper brugere med skærmlæser til at få overblik over sidens indhold og de forskellige teksters vigtighed i forhold til hinanden. Læs mere om hierarkisk opbygning af overskrifter på: www.itst.dk/itarkitektur-og-standarder/tilgengelighed. 34 35

TILGÆNGELIGHED OG BRUGEN AF BILLEDER OG GRAFIK Tilknyt en Alt -tekst (alternativ tekst) til billeder m.m. Hvad er en alternativ tekst? ( alternative text equivalent ) Alternativ tekster - eller Alt -tekster, som de kaldes i daglig tale - er en mulighed for indsætte tekst ved de elementer, som en blind eller svagsynet bruger ikke kan se. Det kunne f.eks. være i forbindelse med billeder eller grafiske elementer, f.eks. navigationsknapper, knapper til download af filer/lydfiler/videoklip eller image maps (klikbare billedkort e.l.). Hvad skal en alternativ tekst bruges til? En Alt -tekst gør det muligt for en skærmlæser at læse teksten op for brugeren. Det kan også være en fordel for de brugere, der har slået visningen af billeder og grafik fra, da de ved hjælp af Alt -teksterne kan se, hvad hjemmesiden indeholder. NB. Nogle brugere har slået visningen af billeder og grafik fra for ikke at bruge tid på at downloade billedfiler og grafiske elementer. De fleste brugere har dog efterhånden så stor en båndbredde, at det ikke længere er relevant at gøre. Hvad skal en alternativ tekst indeholde? Alt -teksten skal være klar og kortfattet. Dens indhold vil afhænge af elementets betydning. Hvis elementet har en illustrerende funktion, skal Alt -teksten kort beskrive, hvad elementet forestiller. Hvis elementet fungerer som en navigationsmetode, skal Alt -teksten forklare funktionaliteten. Og hvis grafikken linker til en anden side, skal der indsættes en title-attribut som beskriver linket. Alt -teksten må ikke være for lang Vær opmærksom på, at Alt -teksten ikke bliver længere end højst nødvendig, da det vil være tidskrævende for brugere af skærmlæsere at sidde og vente på at få læst alenlange tekster op. Hvis du ønsker at indsætte en længere beskrivelse, kan longdesc-attributten anvendes. Hvordan indsættes Alt -teksten i praksis? Hvis hjemmesiden er opbygget i et CMS (Content Management System) vil der sandsynligvis være et Alt -tekst felt integreret i systemet, hvor du kan skrive teksten ind. Hvis der er tale om en hjemmeside med adgang til HTML-koden, skrives Alt -teksten ind i HTML en i forbindelse med det element (f.eks. et billede), som Alt -teksten skal tilknyttes: <a href:.><img scr= Københavns_havn.jpg width = 200 height= 150 alt= Billede af Københavns havn /> NB. Det er desuden god skik at give billedfilen et sigende navn. Det vil ofte ikke være nødvendigt at skrive Billede af i Alt - teksten, fordi skærmlæseren automatisk fortæller brugeren, at der er tale om et billede. Det er dog forskelligt alt efter, hvilken skærmlæser man bruger, i hvilket omfang programmet automatisk læser op, om der er tale om et billede, en knap osv. Indsæt en tom Alt - tekst, hvis billedet ikke indeholder information Billeder, der udelukkende er illustrerende eller skal udtrykke noget symbolsk, kan enten have tilknyttet tomme Alt -tekster, dvs. alt= (der må ikke være mellemrum mellem de to citationstegn) eller man kan indsætte en kort beskrivelse af billedet. Du kan også vælge i første omgang at beskrive billedet kort med henvisning til en fil med en længere beskrivelse. Så kan brugeren selv vælge, hvorvidt han/hun ønsker at høre den lange beskrivelse. 36 37

Husk Alt -tekst i forbindelse med client-side image map (billeder med links) Hvad er client-side image map? En client-side image map er et billede (img element), som har tilknyttet en form for funktionalitet. Et image map kan være et landkort eller en menu, der har klikbare felter, der linker videre til andre sider. Der skal tilknyttes en Alt -tekst til billedet, der beskriver selve kortet, såvel som alle klikbare elementer på kortet. Ofte vil det være mest hensigtsmæssigt, at Alt -teksten svarer til teksten på kortet. Men den kan også være både kortere eller længere alt efter konteksten. Desuden skal du være opmærksom på, at image mappen ikke kun skal være tilgængelig for skærmlæsere, men også for brugere, der anvender tastaturet til at tabbe sig igennem menuerne. NB. Client-side image map kaldes sådan, fordi det er browseren, der er the client - og det er den, som skal håndtere resultatet af, at brugeren klikker på billedet. Læs mere om Alt -tekster på: www.itst.dk/it-arkitektur-og-standarder/tilgengelighed. Læs mere om Alt -tekster på: www.webaim.org. Læs mere om Alt -tekster i forbindelse med client-side image maps på: www.webaim.org. Tilknyt en Alt -tekst (alternativ tekst) til indlejret grafik m.m. Billeder, der fungerer som knapper Når du bruger billeder, der fungerer som en knap, skal Alt -teksten beskrive funktionaliteten. Er der for eksempel tale om en søgeknap, skal Alt-teksten blot hedde Søg. Billeder der er indlejret i layoutet På nogle websteder er der brugt tomme billedfiler til at få layoutet til at se ud på en ganske bestemt måde. Disse filer er ikke synlige for brugeren. For at give skærmlæseren besked på, at disse filer er tomme, indsættes følgende Alt -tekst: alt= (der må ikke være mellemrum mellem de to citationstegn). Billedfiler kan også bruges til at skabe forskellige former, som for eksempel buer, bogstaver osv., der indgår som en del af designet på webstedet. Disse skal også blot have indsat en tom Alt -tekst. Det vil dog være sjældent, at man ser denne måde at layoute websteder på, efterhånden som design og layoutmetoder overtages af CSS. Grafer, diagrammer o.l. Grafer, diagrammer o.l. kan indeholde flere informationer end der kan stå i en Alt -tekst. I disse tilfælde kan du skrive et resumé af grafens resultater i XHTML en. Beskrivelsen kan for eksempel via attributten longdesc i forbindelse med <img> taggen: longdesc= longdescriptions.html#graf1 >. Derudover skal du tilføje en Alt -tekst, der beskriver selve grafen som element. 38 39

Tekster, der ligger indlejret i grafikken Hvis for eksempel en menutekst er indlejret i et grafisk element eller et billede, kan en skærmlæser ikke læse teksten. Derfor kræver denne form for navigation en Alt -tekst. Det vil dog være mere hensigtsmæssigt at bruge CSS til at opnå denne effekt, fordi man ikke kan forstørre en tekst, der ligger indlejret i et grafisk element. Den grafiske tekst vil blot blive mere utydelig, når den forstørres. Læs mere om indlejrede elementer på: www.itst.dk/it-arkitektur-ogstandarder/tilgengelighed. 40 41

TILGÆNGELIGHED OG BRUGEN AF MULTIMEDIER Lydfiler Lydfiler bør ligge som tekster Hvis en hjemmeside tilbyder lydfiler, skal indholdet transkriberes, således at lydfilen gøres tilgængelig for brugere, der er døve eller har en hørenedsættelse. I praksis placeres linket til filen med transkriptionen ved siden af linket til lydfilen. Denne funktion er først og fremmest rettet mod brugere med nedsat hørelse. Men den kan også bruges af brugere, der sidder i et meget støjende miljø, hvor man ikke vil være i stand til at høre lyden. Eller brugere, der sidder i et stille miljø, hvor man ikke må forstyrre andre. Desuden betyder transkriptionen af video- og lydfiler, at teksten er tilgængelig for alle, der måtte søge information om emnet, såvel som at denne funktion er med til at optimere søgemaskinernes søgeresultater på hjemmesiden. Videoklip Videoklip bør have alternative repræsentationer Hvis der ligger videoklip på hjemmesiden, bør der ligge en alternativ repræsentation af det visuelle spor, der beskriver indholdet for blinde brugere. Desuden bør der tilbydes en transkription af det auditive spor for brugere med hørehandicap. Animationer Undgå animationer Du skal så vidt muligt undgå animationer som f.eks. animerede giffer eller blinkende grafisk tekst, hvis hjemmesiden skal være tilgængelig. Især hvis der er tilknyttet en form for funktionalitet til disse, kan det være svært for brugere, der ikke kan se eller bruge musen at manøvrere via disse, såvel som for gruppen af læsesvage brugere. Også brugere uden funktionsnedsættelse kan opleve animationer som forstyrrende. Hvis du alligevel bruger animerede giffer eller blinkende grafisk tekst på hjemmesiden, skal de have tilknyttet en Alt -tekst og/eller mulighed for at stoppe eller fastfryse bevægelsen. Brugen af flash Flash kan gøres tilgængelig Flash har ikke tidligere være tilgængelig for skærmlæsere, såvel som at hjemmesider konstrueret i Flash ikke har været tilgængelige for brugere, der udelukkende kunne bruge tastaturet. Det er nu ved at ændre sig, således at Flash i mange henseender nu er fuldt tilgængeligt. Principper for tilgængelighed i Flash I forbindelse med flash-filer gælder de samme principper som for tilgængelighed til hjemmesider generelt: Der skal skrives Alt -tekster til ikke-tekstlige elementer, som f.eks. billeder grafik, videoklip, animationer osv. Hvis der bruges lydfiler med tale, skal indholdet gengives i tekst format. Hvis der bruges musik, skal du være opmærksom på, hvordan den fungerer med skærmlæserens læsning. Det skal være muligt at navigere med og uden mus Du bør undgå animationer af tekst, knapper og inputfelter. 42 43

Læs mere om bruge af multimedier på: www.itst.dk/it-arkitektur-ogstandarder/tilgengelighed. Læs mere om tilgængelighed og Flash på: www.adobe.com. Udgiver: Center for Ligebehandling af Handicappede Tekst: Inger Hindhede Kjær / Layoutkoncept: Designbolaget Layout: Inger Hindhede Kjær /September 2009 / 1. Udgave. ISBN 9788791888663/ Folderen kan hentes på www.handicapmainstreaming.dk og www.clh.dk 44 45

CENTER FOR LIGEBEHANDLING AF HANDICAPPEDE Bredgade 25F, 4. sal 1260 København K Tlf.: 33 11 10 44 Fax: 33 11 10 82 Mail: clh@clh.dk Web: www.clh.dk