Tilgængelighedsmanual Århus kommunes hjemmeside

Transkript

1 Sensus ApS Torvet 3-5, 2.tv. DK-3400 Hillerød Telefon: CVR nr.: DK Tilgængelighedsmanual Århus kommunes hjemmeside Version 1.4

2 Indhold 1 GRUNDLÆGGENDE BILLEDER INDSTILLINGER FARVETEMA KORTDATA SIDETYPER SIDELEMENTER Logo INDHOLDSSIDE INDHOLDSSIDE MED IFRAME SØGERESULTATBILLEDE KORTSIDE ROTERENDE BILLEDSPOT DOWNLOADSPOT EMNESPOTS LINKSPOT LISTESPOT TEKSTSPOT TEKSTREDIGERING SKRIVEREGLER OVERSKRIFTER LISTER CITATER SPROGSKIFT INDSÆTTELSE AF BILLEDE LINKS TABELLER VALIDERING

3 1 Grundlæggende Denne manual beskriver, hvorledes du publicerer tilgængeligt webindhold i jeres CMS. Dette dokument beskriver sidetyper og indhold, hvor du skal være opmærksom på tilgængeligheden. Hvis de samme elementer optræder på andre sidetyper end de beskrevne, gør de samme kriterier dig gældende. Alle kriterier for tilgængelighed er at finde på som er Web Content Accessibility Guidelines (WCAG) (på dansk: Retningslinjer for Tilgængeligt Webindhold), de internationale retningslinjer for tilgængelighed. WCAG er en del af krav om Åbne Standarder og dermed obligatorisk for netsteder, der tilhører offentlige myndigheder. 1.1 Billeder Når du anvender billeder, skal du altid sørge for at forholde dig til en alternativ tekst. Den alternative tekst skal knyttes til billedet via en ALT-tekst. ALT betyder alternativ. En alternativ tekst til et billede har den funktion, at det er netop et alternativ for brugere som ikke kan se billedet. En alternativ tekst vil derfor afhænge af billedets funktion. Når du skriver en alternativ tekst, skal du derfor spørge dig selv hvad billedets funktion er. Her er et forslag til forskellige funktioner, som billedet kan have: Hvis billedet er ren dekoration og anvendes til at give en visuel association til den kontekst, som billedet optræder i, så skal den alternative tekst være tom. Hvis billedet indeholder information, som har betydning for konteksten, skal denne information beskrives i den alternative tekst. Billedet kan eksempelvis være en model, en graf eller vise en instruktion. Hvis billedet linker, så er det vigtigt at beskrive denne funktion, så brugere, som ikke kan se billedet, stadig kan udlede fra alt-teksten hvad som sker, når de klikker på billedet. NB: Man bør ikke anvende billeder som indeholder tekst (grafisk tekst), med mindre det er umuligt at anvende andet. Det kan eksempelvis være et billede af et logo. Den alternative tekst til sådan et billede skal stadig afspejle billedets funktion. Hvis logoet linker til en anden hjemmeside, skal denne funktion fremgå af den alternative tekst. Ofte vil den alternative tekst til grafisk tekst skulle være lig teksten på billedet. 3

4 2 Indstillinger 2.1 Farvetema Når du vælges farvetemaer til netstedet er det væsentligt at tekstfarven og baggrundsfarven er i høj nok kontrast til hinanden. Det øger læsbarheden. Kontrasten kan måles med redskaber og kontrasten skal være 4,5:1 for normal tekst og 3:1 for stor tekst. Stor tekst er i denne sammenhæng tekst på 18 punkt eller derover eller fed tekst på 14 punkt eller derover. Kontrastforholdene kan du fx måle på hvor det angives hvorvidt konstrastforhold overholdes eller ej: Du kan også bruge et værktøj med pipette, som kan samle farverne op og sammenligne dem, såfremt du ikke har farvekoder. Sådan et redskab kan eksempelvis findes her: 4

5 2.2 Kortdata Når du opretter markører, skal du udfylde den alternative tekst, fordi det er den, som vises i tilgængelighedsvisningslisten: 5

6 3 Sidetyper 3.1 Sidelementer Logo Når du indsætter logoer, er det vigtigt, at den alternative tekst til logoet beskriver formålet for logoet. Hvis logoet eksempelvis linker til forsiden, beskrives dette i den alternative tekst. 3.2 Indholdsside Se i afsnittet Tekstredigering, hvad du skal gøre for at skabe tilgængelig tekst på dine indholdssider. 6

7 3.3 Indholdsside med iframe På sider med iframe er det vigtigt at du udfylder titlen til den ramme, som bliver sat ind. Her beskriver du kort, hvad der er indholdet for rammen i feltet iframe titel: 3.4 Søgeresultatbillede Når du lægger søgeresultatbillede ind, er det vigtigt at forholde dig til den alternative tekst til billedet. Når du har indsat billedet til søgeresultat skal du forholde dig til, hvorvidt billedet har en funktion. Hvis billedet udelukkende er til pynt, skal feltet Alternativ tekst være tomt. Hvis det er væsentligt at beskrive billedet for brugere som ikke kan se billedet, angives en tekst som beskriver billedet i feltet Alternate text 7

8 3.5 Kortside Når du indsætter kortsider, er det vigtigt, at du vælger en af de visningstyper, som er tilgængelige: 8

9 Det betyder, at du vælger en af de typer kort, som er med tilgængelighedsliste. 3.6 Roterende billedspot Når du lægger billedspot ind, er det vigtigt at forholde dig til den alternative tekst til billedet. Da alle billeder linker til en side, er det vigtigt at beskrive hvilken side man kommer til, hvis man klikker på billedet. Derfor skal den alternative tekst altid udfyldes, når man indsætter billedspots i feltet Alternate text: 9

10 3.7 Downloadspot Det er vigtig at skrive en titel, som giver mening for det, som man kan downloade. 10

11 3.8 Emnespots Det er vigtig at give en titel, som overordnet beskriver emnerne. 11

12 3.9 Linkspot Når du indsætter linkspots, er det vigtigt at links giver mening i dig selv altså også når man læser dem uden den tekst, de står sammen med. Nogle skærmlæserbrugere navigerer ved hjælp af linkteksten alene, og derfor skal man alene ud fra denne tekst kunne udlede hvortil linket fører Listespot Når du indsætter listespots, er det vigtigt, at links giver mening i dig selv altså også når man læser dem uden den tekst, de står sammen med. Nogle skærmlæserbrugere navigerer ved hjælp af linkteksten alene, og derfor skal man alene ud fra denne tekst kunne udlede hvortil linket fører. 12

13 3.11 Tekstspot Når du indsætter tekstspots, er det vigtigt, at du overvejer et alternativ til billedet. Når du har indsat billedet til tekstspot skal du forholde dig til, hvorvidt billedet har en funktion. Hvis billedet udelukkende er til pynt, skal feltet Alternate text være tomt. Hvis det er væsentligt at beskrive billedet for brugere, som ikke kan se billedet, angives en tekst som beskriver denne funktion i feltet Alternate text: 13

14 4 Tekstredigering 4.1 Skriveregler Der er nogle kriterier, du skal forholde dig til, når du skriver tekst. Dette sikrer, at det indhold, du producerer, er tilgængeligt. Du må ikke kun anvende en instruktion, der er afhængig af sansemæssige egenskaber. Mange mennesker har funktionsnedsættelser i forbindelse med sanseapparatet, og derfor vil de ikke kunne anvende instruktionen. Hvis du anvender denne type formulering, skal du supplere med information, hvor brugeren ikke er afhængig af sanserne, for at kunne forstå den. Dette vedrører fx instruktioner, der henviser til form, størrelse, visuel placering, orientering eller lyd. Det betyder eksempelvis, at du skal undgå at bruge beskrivelser såsom: i menuen til venstre / højre, i det store / lille felt og i den grønne / røde / grønlyseblå boks. Skærmlæserbrugere opfatter siden lineært og tekstbaseret og kan ikke finde venstre eller højre på siden. De kan heller ikke skelne mellem store og små former eller farver. Nogle mennesker har ikke et normalt farvesyn og kan ikke se forskel på nogen farvekombinationer. Hvis du bruger sådanne formuleringer, skal du kombinere det med en tekst såsom: under overskriften xx eller under menupunktet y. Alle brugere kan nemlig finde denne tekst. Har du en lang tekst, er det vigtigt at du deler denne op i logiske afsnit med overskrifter. Det er vigtigt, at du ikke bruger funktionen for fed skrift til at angive en overskrift, men at du bruger de indbyggede funktioner i systemet. I det nedenstående beskrives de kriterier du skal overholde i jeres hjemmesideredigering. 4.2 Overskrifter Overskrifter ud over den overskrift du har indsat på selve siden, som er en overskrift 1, indsættes via rich text editoren. Når du har skrevet din overskrift, vælger du hvilket niveau den skal være i komboboksen: 14

15 Som oftest til det være overskrift 2 du sætter ind, da din side allerede automatisk har fået en overordnet overskrift 1. Har du yderligere underoverskrifter til en overskrift 2, skal disse være overskrift 3 etc. Der kan også sagtens være flere overskrift 2 ere på din side husk bare, at du aldrig må springe niveauer over. Du må altså ikke gå direkte fra overskrift 2 til overskrift Lister Når du skal indsætte en liste, bruger du rich text editor og klikker på ikon for enten unummereret liste eller nummereret liste: 15

16 4.4 Citater Når du indsætter et citat, er det vigtigt, at du markerer den tekst, som er citat, og vælger kort citat eller langt citat i komboboksen. (Langt citat laver et linjeskift og indrykker den citerede tekst): 16

17 4.5 Sprogskift Hvis du har et stykke tekst, som er på et andet sprog, end resten af den tekst du skriver (eksempelvis vil du indsætte noget engelsk tekst på en ellers dansk side) er det vigtigt, at du markerer teksten og vælger sprog fra komboboksen. Denne opmærkning får skærmlæsere til at ændre den stemme, der oplæses med. Engelsk tekst er nærmest uforståelig, hvis den oplæses med en dansk stemme: 17

18 4.6 Indsættelse af billede Når der indsættes billeder er det som nævnt i indledningen vigtigt, at billedet bliver forsynet med en alternativ tekst, hvis billedet har en funktion. Den alternative tekst er et alternativ for de brugere, der ikke kan se billedet. Hvis billedet udelukkende er til pynt/ornamentering skal feltet til den alternative tekst være tomt. Hvis billedet har en betydning for konteksten, skal betydningen skrives til blinde og svagsynede brugere. Hvis du indsætter et link på billedet, er det obligatorisk at have en alternativ tekst, og den skal beskrive det sted brugeren kommer hen, når han / hun klikker på billedet. I editoren er det i feltet Alt: Via egenskaber er det i feltet Alternate text: 18

19 4.7 Links Når du indsætter links på siden, er det vigtigt, at det stykke tekst, som du gør til link, giver mening når det læses uden den tekst, det står sammen med. Nogle skærmlæserbrugere navigerer ved hjælp af linkteksten alene, og derfor skal man alene ud fra denne tekst kunne udlede hvortil linket fører. Eksempel: I teksten Du kan finde mere information om Århus Festuge vil du gerne lave et link til en side som handler om Århus festuge. En dårlig linktekst vil være mere information : Hvis man læser linkteksten mere information alene, så ved man ikke, hvad man kommer til information om. En bedre linktekst vil være Århus festuge. Læser man denne tekst alene, forventer man at komme til en side, som omhandler Århus festuge. Via Rich Text editor: 19

20 4.8 Tabeller Når du skal indsætte en tabel med data, er det vigtigt at vælge enten Tabel wizard eller indsætte din tabel og højreklikke for at få tabelegenskaber frem: I fanebladet Accessibility indtaster du antal af rækker med overskrifter og / eller antallet af kolonner med overskrifter i felterne Heading rows og Heading columns: 20

21 Hvis du har mere end 1 række overskrifter (Heading rows) eller mere end en række kolonneoverskrifter (Heading columns) eller du har både rækkeoverskrifter og kolonneoverskrifter (Heading row og Heading column), skal du sætte flueben ud for "Associate cells with headers". I feltet Caption skriver du en kort overskrift til tabellen. Denne vises for alle brugere. Du kan i feltet Summary vælge at angive en beskrivelse og forklaring til tabellen til brugere som ikke kan se, hvis dette er nødvendigt for at danne dig overblik over tabellen. Denne vises kun for brugere, der beder om det eksempelvis skærmlæserbrugere. Det kan eksempelvis være godt til komplicerede tabeller med flere niveauer af overskrifter. 4.9 Validering Hvis firkanten i højre hjørne bliver rød, betyder det, at der er en fejl i din kode. Du kan ikke publicere en side som har kodefejl. Hold derfor hele tiden øje med firkanten i højre hjørne og undgå at den bliver rød: Når du har indsat din sidste tekst på siden, skal du lave et linjeskift. Hvis der ikke er linjeskift til sidst, kan det forsage en valideringsfejl. 21