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:
Det kan ligge indlejret direkte i HTML dokumentet som en del af HTML-koden (inline styles).
Det kan stå i -delen af et HTML dokument (internal styles).
Det kan gemmes i en separat fil, der hentes ind i HTML dokumentet (external styles). Den sidstnævnte metode er den mest hensigtsmæssige måde at bruge. Via denne fil henter webstedet al sin information 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 overskuelig måde, hvorpå du kan vedligeholde og foretage små og store ændringer af webdesignet.
Bruge 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.
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.
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.
Links
Læs mere om tekstbrowseren Lynx her >>
AIS, Web Accessibility Toolbar kan downloades her >>
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.
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. 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 +/-’.
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 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.
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.
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).
Links
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.
AIS, Web Accessibility Toolbar kan downloades her >>
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.