Sensus ApS Torvet 3-5, 2.tv. DK-3400 Hillerød Telefon: +45 48 22 10 03 CVR nr.: DK11130976 www.sensus.dk sensus@sensus.dk Tilgængelighedsmanual til CMS et for Københavns Kommunes hjemmeside Version 1.2 Status: Arbejdsdokument
Indhold 1 INDLEDNING... 3 2 BILLEDER... 4 2.1 KOMPLEKSE BILLEDER... 7 2.2 BRUG AF FARVER... 8 2.3 GRAFISK TEKST / BILLEDER AF TEKST... 9 3 TEKST... 10 3.1 OVERSKRIFTER OG SIDETITEL... 10 3.2 LISTER... 12 3.3 LINKTEKSTER... 13 3.4 BESKRIVELSER, DER GØR BRUG AF SENSORISKE EGENSKABER... 14 3.5 DATATABELLER... 15 3.6 LAYOUTTABELLER... 17 2
1 Indledning Web Content Accessibility Guidelines 2.0 fra W3C er de internationale retningslinjer for tilgængelighed. Alle kriterier for tilgængelighed kan du finde på http://www.w3.org/tr/wcag20/. Overholdelse af disse retningslinjer på niveau AA (indebærer overholdelse af samtlige succeskriterier mærket A og AA) er en obligatorisk del af Åbne Standarder fra IT- og Telestyrelsen http://www.itst.dk/itarkitektur-og-standarder/standardisering/abne-standarder. Det betyder, at offentlige myndigheder skal overholde WCAG 2.0 på niveau AA. Dette dokument beskriver, hvorledes et udvalg af succeskriterierne kan sikres, når man producerer webindhold via CMS. Succeskriterierne omtalt i dette dokument er udvalgt ud fra, om de er relevante for webmastere og redaktører og samtidig skal de kunne sikres i Københavns Kommunes nuværende CMS, SiteCore 5. 3
2 Billeder Fotos og grafik Billeder skal have et alternativ, der læses op for skærmlæserbrugere (blinde og svagsynede), når de ikke kan se billedet. Alternativet skal beskrive formålet for billedet. Alternativet skal ikke beskrive eksempelvis hvad billedet forestiller. Et formål kan eksempelvis være, om billedet linker til en anden side. Det kan også være, at billedet er en instruktion. Mange billeder har ikke et formål, men er blot til dekoration. I sådanne tilfælde skal alt-teksten være så kort som mulig 1 samtidig med, at den skal være meningsfuld. Det samme billede kan have mange forskellige formål alt afhængig af, i hvilken sammenhæng det bruges. Blinde og svagsynede kan ikke se billedet, men skal have de samme informationer, som seende. Hvis billedet er et link, skal også blinde og svagsynede vide, hvilket formål billedlinket har, inden de klikker på det. Giv billedet en god alt-tekst som beskrevet nedenfor. Når du uploader et billede, er det obligatorisk at skive en alt-tekst, men denne tekst er mindre vigtig den skal senere ændres til det formål hvert enkelt billede har, de steder, du vælger at bruge det. Det samme billede kan anvendes på vidt forskellige måder alt afhængig af, om det er en illustration, et link eller dekoration. 1 Billeder hvis eneste formål er dekoration skal iht. retningslinjerne have en tom alttekst, men dette er ikke muligt i dette CMS, hvorfor det anbefales, at alt-teksten skal være kort. 4
Når du indsætter et billede i din artikel, skal du skrive en alt-tekst, der passer til det formål, billedet har i denne sammenhæng. Det gør du ved at indsætte billedet og derefter højreklikke på det. Herved fremkommer en menu, hvor du vælger Set Image Properties. 5
Det er nu, du skal overveje hvilket formål, dit billede har i denne artikel. I det vindue, der fremkommer, skal du skrive din alt-tekst, der bliver alt-teksten for billedet i denne artikel. (Bemærk: Dette vil ikke ændre den alt-tekst, der blev skrevet, da billedet blev uploadet i mediebiblioteket.) 6
2.1 Komplekse billeder Nogle billeder indeholder meget kompleks information, der kun dårligt kan beskrives i en kort, alternativ tekst. Det drejer sig eksempelvis om grafer eller en kompleks instruktion. Nogle gange har man et billede, der udtrykker en kompleks relation på en enkel måde for mennesker med normalt syn. Blinde og svagsynede skal have samme information blot på en anden måde. Blinde og svagsynede kan ikke aflæse billeder, men de skal alligevel have samme information. Sørg for, at den information, som billedet udtrykker, også er tilgængelig på en anden måde. Det er sjældent muligt at få alle tal fra en graf ind i sin brødtekst på en god måde. Men du kan eksempelvis beskrive nøgletallene fra en graf i brødteksten, således: Fra 2005 til 2010 er befolkningstilvæksten i København x tusinde. Det er en stigning fra y tusinde i 2005 til z tusinde i 2010. Den alternative tekst til billedet af grafen kan så være: Graf over befolkningstilvækst fra 2005-2010 nøgletal er beskrevet ovenfor / nedenfor / her på siden. 7
2.2 Brug af farver Farver, der anvendes som eneste måde at formidle noget på eller som eneste måde at skelne et element. Det er eksempelvis kort eller grafer, der udelukkende med farver skelner forskellige områder eller udelukkende med farver angiver linjer. Det gælder naturligvis også, hvis det er tekst, men det er sjældent en redaktørskabt problematik. Der er en del mennesker, der har et andet farvesyn end det mest normale. Op mod 8 % af alle mænd er medfødt farveblinde. Det samme gælder for ca. 0,4 % af kvinder. Nogle mennesker ændrer sidens farver for bedre at kunne læse indholdet. Mennesker med forskellige funktionsnedsættelser på synet kan have foretrukne farver at få vist hjemmesider med eksempelvis hvid på sort eller gul på sort. De vil ikke kunne anvende information, der udelukkende baserer sig på farve. For at give så mange brugere som muligt mulighed for at anvende siden, bør man ikke udelukkende anvende farve til at formidle noget. Anvend eksempelvis skraveringer i stedet for farver. Anvend eksempelvis forskellige stiplede linjer i stedet for linjer af forskellig farve. Se også afsnittet som Beskrivelser, der gør brug af sensoriske egenskaber. 8
2.3 Grafisk tekst / billeder af tekst Grafisk tekst er et billede af tekst i eksempelvis jpg- eller gif-format. Du bør så vidt det er muligt ikke anvende grafisk tekst. Det er et brud på retningslinjerne, hvis samme præsentation vil kunne opnås med almindelig tekst. Logoer er accepterede. De oplæsningsværktøjer, som ex. ordblinde anvender, kan ikke markere og oplæse grafisk tekst. Grafisk tekst pixelerer, når svagsynede brugere skalerer den op, så de kan dårligere læse den. En skærmlæser, som den blinde brugere anvender, kan ikke læse, hvad der står på med grafisk tekst. Skærmlæserbrugere kan dog i stedet læse billedets alt-tekst. Giv billedet en alt-tekst, der beskriver formålet for billedet som beskrevet ovenfor. Oftest vil denne alt-tekst skulle være lig den grafiske tekst. Men det er stadig vigtigst at tænke på formålet for billedet først. I så fald skal dette formål og ikke logoteksten fremgå af den alternative tekst. 9
3 Tekst 3.1 Overskrifter og sidetitel En overskrift er noget tekst, der er opmærket som en overskrift. Dette opmærker du i CMS et. En overskrift skal inddele din side i logiske afsnit. Overskrifter er en måde programmeringsmæssigt at inddele din side på. Overskrifter må ikke anvendes til at formatere tekst med. Du må altså ikke anvende et overskriftniveau blot for visuelt at fremhæve noget tekst, der ikke er en overskrift. Omvendt bør du heller ikke bruge eksempelvis fed skrift til at angive en overskrift den skal opmærkes ved hjælp af overskriftniveauerne i CMS et. Bemærkning mht. sidetitel Titel-feltet må ikke være tomt, da teksten også anvendes som sidetitel for hele siden. Sidetitlen er den, der vises allerøverst i browservinduet. Alle sider skal have en sidetitel, da det hjælper mange brugere med at navigere mellem flere vinduer. Eksempelvis anvender blinde og svagsynede skærmlæsebrugere disse overskriftniveauer til at få et overblik over siden. Hvis der ikke er nogen overskrifter på siden, må de læse hele siden for at finde ud af, hvad der står. Opmærk overskrifter som beskrevet nedenfor. Den tekst, du skriver i titel-feltet bliver automatisk overskrift niveau 1 på din side. Samtidig bliver den sidetitlen for siden og må ikke være tom, idet der også minimum skal være én overskrift på niveau 1 på hver side. 10
Hvis du ønsker flere overskrifter på din side, kan du gøre dette i din editor. Husk at det niveau, din overskrift får, skal afspejle sidestrukturen. Nedenfor ser du et eksempel, hvor der er i gang med at blive lavet en overskrift på niveau 2 på siden. 11
3.2 Lister Lister er enten nummererede eller markeret med punkter. Lister fortæller noget om strukturen af teksten. Denne struktur skal være tilgængelig for alle. Hvis listen ikke er opmærket korrekt, vil en skærmlæserbruger ikke få oplysning om, at teksten er en liste, og teksten kan derfor være uforståelig. Du skal opmærke lister ved hjælp af de funktioner, der er i CMS et. Du må ikke selv lave en liste ved selv at skrive tallene eller lave punkter med et tegn (eksempelvis - eller >) eller et billede. 12
3.3 Linktekster Linkteksten er den klikbare tekst i et link. Skærmlæserbrugere kan for at få et overblik over siden og navigationen bede skærmlæseren om at præsentere alle links på en side. Linkteksterne vises i linkoversigten udelukkende for skærmlæserbrugeren som den tekst, der er klikbar - linkteksten. Hvis denne tekst blot er her, klik her, læs mere eller tilmeld dig, er denne liste ubrugelig og skærmlæserbrugeren skal finde linket i teksten for at kunne forstå hvad linket kan bruges til. Sørg for at de linktekster, du laver, fortæller om linkets formål også selvom det læses for sig selv. Nedenfor er eksempler på acceptable linktekster sammen med deres kontekst. Linkteksten er markeret med understregning: Der er meget, du skal tænke på, når du skal af med dit husholdningsaffald. Læs mere om dagsrenovation Der er meget, du skal tænke på, når du skal af med dit husholdningsaffald. Læs mere om dagsrenovation Du kan se bestyrelsesreferatet fra bestyrelsesmødet d. 2. maj 2010 her Københavns Kommune afholder endnu en konference for alle miljøinteresserede. Tilmeld dig konferencen Grønt Miljø d. 1.3.2010 13
3.4 Beskrivelser, der gør brug af sensoriske egenskaber En beskrivelse, der gør brug af sensoriske egenskaber, henviser eksempelvis til et elements størrelse, form, farve, visuelle placering /orientering eller lyd. Det kan eksempelvis være beskrivelser som: læs mere i menuen til venstre, find mere information i den store, blå boks, de medvirkende kommuner er markeret med grønt på landkortet. Der er mange alternative måder at opfatte en side på. De fleste skyldes en funktionsnedsættelse, men nogle teknologier kan også ændre præsentationen af siden. Skærmlæserbrugere får siden læst op som ét langt dokument og kan ikke bruge instruktioner såsom til venstre, højre etc. til noget. De opfatter heller ikke farve eller form. Farveblinde og mennesker med forskellige funktionsnedsættelser på synet har en anden farveopfattelse end den normale, og kan ikke navigere efter farver. Mennesker med andre funktionsnedsættelser på synet kan ændre farverne for at gøre dem mere læsevenlige. Nogle foretrækker eksempelvis at læse hvidt på sort eller gult på sort. Disse brugere kan heller ikke navigere efter en farvebeskrivelse. Det er okay at anvende beskrivelser, der gør brug af sensoriske egenskaber så længe disse beskrivelser suppleres af noget, som alle brugere kan forstå. Tekst er i denne forbindelse et sikkert pejlemærke. Det er således ikke i orden at skrive: Du kan læse mere om byens udvikling i menuen til venstre. Men det er i orden at skrive: Du kan læse mere om byudvikling i menuen til venstre under punktet byudvikling. Det er ikke i orden at skrive: Du kan finde links til flere publikationer i den store, blå boks. Men det er i orden at skrive: Du kan finde links til flere publikationer i den store, blå boks under overskriften Læs mere om klimaforandringerne 14
3.5 Datatabeller En datatabel er en tabel, der udtrykker en relation imellem indholdet i cellerne. Den kan være mere eller mindre kompleks. Eksempel på en simpel datatabel ses nedenfor. Fødselsdagsbarn Dato År Anton 5. maj 4 år Emma 23. maj 4 år Sofie 27. maj 5 år Tabel 1 Fødselsdage i maj måned i Solsikken De relationer, som datatabellen udtrykker, skal opmærkes korrekt, så de også fremgår programmeringsmæssigt og ikke kun visuelt. Nogle vil blot markere tabeloverskrifterne med fed, men det er kun den visuelle del af det. Opmærker man tabeloverskrifter programmeringsmæssigt korrekt, vises de automatisk som fed. Datatabellen skal opmærkes, så skærmlæserbrugere eksempelvis kan forstå hvad der er overskrift for hvad. Når du anvender en datatabel, skal du opmærke tabeloverskrifterne og angive en caption. Caption er en tekst, der vises sammen med tabellen, der fortæller, hvad tabellen indeholder en slags titel for tabellen. I ovenstående tilfælde er caption: Tabel 1 Fødselsdage i maj måned i Solsikken. Når du har indsat en tabel, kan du under fanen Accessibility angive, om der er rækkeoverskrifter og / eller kolonneoverskrifter i din tabel. Under denne fane skal du også skrive din caption. 15
Tabellen i dette eksempel har både en række- og kolonneoverskrift (angivet med fed skrift) samt en caption, og den ser ud som nedenfor: 16
3.6 Layouttabeller Layouttabeller er tabeller, der blot visuelt sørger for positionering af tekst. Nedenfor er et eksempel på en layouttabel, hvor tabelformatet blot er brugt til at positionere tekst på en pæn måde. Fødselsdage i maj måned i Solsikken: Anton fylder 4 år d. 5. maj Sofie fylder 4 år d. 23. maj Emma fylder 5 år d. 27. maj Husk at alle fødselsdagsbørn skal fejres på behørig vis. En tabel er beregnet til at præsentere data i en datatabel, og bør derfor anvendes som sådan. En layouttabel lineariseres, når den læses af en skærmlæser. Hvis man anvender en tabel til visuelt at positionere indholdet, og der er en meningsfuld rækkefølge at læse indholdet i, kan denne mening gå tabt for brugeren, hvis tabellen læses på en anden måde. Derfor er det sikrest slet ikke at anvende layouttabeller, selvom det ikke direkte strider mod et succeskriterium. Hvis du alligevel anvender en layouttabel, må du ikke anvende tabeloverskrifter og caption, og du skal sikre dig, at indholdet ikke mister sin mening, hvis tabellen lineariseres række for række. 17