Tilgængelighed København Kommunes hjemmeside Maria Barrett Sensus ApS l.

Præsentationer af emnet: "Tilgængelighed København Kommunes hjemmeside Maria Barrett Sensus ApS l."— Præsentationens transcript:

1 Tilgængelighed København Kommunes hjemmeside Maria Barrett Sensus ApS l

2 Program •En kort introduktion til webtilgængelighed •Udpluk af tilgængelighedsretningslinjerne og hvordan Sitecore anvendes til at skabe tilgængeligt indhold •Opgave

3 Tilgængeligt Webdesign ”Web’ens styrke ligger i, at den er universel. Det er helt grundlæggende, at alle mennesker — uanset funktionsnedsættelser — har adgang” Tim Berners-Lee Opfinder af WWW, direktør for W3C Tilgængelighed er et spørgsmål om at give flest mulige mennesker i flest mulige situationer og fra flest mulige browser-teknologier adgang til web-baseret information

4 Det officielle fokus 1.Tilgængelighed af hensyn til mennesker med en række handicaps: –Syn, hørelse, bevægelse, tale, kognition, sprog, læring, neurologiske –Kombinationer af disse 2.Tilgængelighed af hensyn til ældre mennesker med aldersbetingede behov 3.Tilgængelighed af hensyn til brugere i al almindelighed Op mod 25 % af befolkningen oplever tilgængelighedsproblemer

5 Brugere er forskellige •Hvis man er blind bruger man skærmlæser http://www.kk.dk/ http://www.kk.dk/ •Hvis man ser dårligt bruger man forstørrelse http://www.kk.dk/ http://www.kk.dk/ •Hvis man har et motorisk handicap kan man måske ikke anvende mus eller tastatur •Nogle (ex. ordblinde) har svært ved at læse http://www.kk.dk/ http://www.kk.dk/

6 Type af problemer (Web) •Nogle problemer skabes af systemerne og af udviklerne –Fx layouttabeller, HTML-fejl, genbrug af linktekster, utilgængelige scripts, faste dimensioner, valg af CMS … •Andre skabes af designerne –Fx ringe kontrast, små bogstaver, dårlig navigation, … •Atter andre problemer skabes af redaktørerne –Fx dokumentproduktion, billeder uden ALT, dårlige linktekster, manglende overskrifter

7 Web Content Accessibility Guidelines 2.0 •Word Wide Web Consortium (W3C) –WCAG 2.0 anvendes i hele Danmark, EU samt mange lande uden for EU

8 Hvordan sikrer du tilgængelighed med Sitecore? Maria Barrett Sensus ApS

9 Billeder •Alle billeder skal have et tekstligt alternativ, der svarer til billedets formål •Billeder, der kun er til dekoration skal have en blank alt-tekst: ”” •Ret ikke blanke alt-tekster bagud, men brug det fremadrettet http://www.kk.dk/Borger/ByOgTrafik.aspx http://www.kk.dk/Borger/ByOgTrafik.aspx

10 Øvelse •Samme billede, men forskellige alt- tekster til forskellige situationer: 1.Billedet er et link til en artikel om nyt sundhedshus 2.Billedet er en illustration til en artikel om genoptræning i Københavns Kommune 3.Billedet er en illustration på en side, der sælger yogabolde 4.Billedet er illustration på en instruktion til en fysisk øvelse

11 Upload billede

12 Indsæt billede

13 Skriv en tekst eller ”” i feltet Image Alt Text

14 Billeder - Andre typer af billeder •Komplekse billeder http://www.kk.dk/Nyheder/2009/December/KSStatistikBefolkUdvikl3Kvt09.aspx •Billeder af tekst –Alt-teksten skal også her have samme formål som billedet –Oftest vil alt-teksten være lig den grafiske tekst http://www.kk.dk/PolitikOgIndflydelse/DinIndflydelse.aspx http://www.kk.dk/PolitikOgIndflydelse/DinIndflydelse.aspx

15 Billeder – Billeder af tekst •Brug ikke billeder af tekst, hvis det kan undgås •Ordblinde kan ikke markere og få læst teksten højt •Svagsynede, der forstørrer siden meget, får pixeleret skrift •Logoer er accepterede http://www.kk.dk/

16

17 Tekst - Overskrifter •Titlen for siden bliver også en H1-overskrift •Manchettekst / Resumé bliver ikke en overskrift •Overskrifterne skal inddele siden i logiske afsnit •Hvis noget tekst er visuelt fremhævet som en overskrift (med eksempelvis fed skrift), så overvej om det ikke bør have et overskriftniveau http://www.kk.dk/FaktaOmKommunen/Forvaltninger/Boerneforvaltningen/Organisering/Oekono miOgPlanlaegning.aspx

18

19

20

21 Tekst - Lister •Skal opmærkes med de funktioner, der er i SiteCore. Brug ikke tegn (- eller >, skriv ikke numrene selv og brug ikke punkter fra tidligere dokumenter http://kk.dk/Nyheder/2010/August/KoebenhavnGoerSkolevejeneTrygge.aspx

22 Datatabeller •Anvend kode til at skelne dataceller fra overskriftceller •TD til dataceller •TH til at identificere tabeloverskrifter •Anvendt caption såfremt tabellen har en titel /overskrift http://www.kk.dk/Nyheder/2010/December/Affald_SkaldekonvoyOnsdag.aspx http://www.aarhuskommune.dk/borger/familie-boern-og-unge/Skole/SFO/Takster-og- betaling/Takster-2011.aspx

23 Datatabeller – et eksempel 200720082009 København10.00015.00012.000 Århus10.000 12.000 Odense5.0002.5005.000 Oversigt over…

24

25

26 Layouttabeller •Brug helst ikke layouttabeller •Layouttabeller er blot en visuel positionering af tekst, men udtrykker ikke et forhold imellem cellerne •Hvis du anvender en layouttabel, må du ikke anvende tabeloverskrifter og caption

27 Eksempler på layouttabeller Bente MøllerBjarne Kristensen Telefonnummer: 12345678 Torben HansenReceptionen Telefonnummer 12345678 Morgenmad og velkomst08.00 – 09.00 Første faglige oplæg09.00 – 11.30 Frokost11.30 – 12.30 Andet faglige oplæg12.30 – 15.00

28 Tekst - formuleringer Hvad er den tilgængelighedsmæssige forskel på følgende to formuleringer? •Læs mere om trafik ved at klikke på linket, du finder til højre •Læs mere om trafik ved at klikke på linket ”Trafikken i København” du finder til højre http://www.ballerup.dk/get/46695.html

29 Tekst - formuleringer •Brug ikke kun instruktioner, der er afhængig af, at brugerens sanser. Eksempelvis farve, størrelse, placering etc.

30 Farve •Brug ikke farve som eneste måde at fortælle brugeren noget på. http://www.iu.dk/politiske-rammer/bologna-processen

31 Tekst - Linktekster •Den tekst, der er klikbar skal beskrive formålet for linket, når den læses for sig selv

32 Tekst - Linktekster http://www.kk.dk/Borger/DetSocialeOmraade/UdsatteBoernOgFamilier/Familiepleje.aspx

33 Opgave •Gå ind på www.sensus.dk/kursus/kk_red –Opgave.doc –Billeder til brug for opgaveløsningen

34 Spørgsmål, kommentarer ?!

35 Dokumenter efter kurset •www.sensus.dk/kursus/kk_redwww.sensus.dk/kursus/kk_red –Slides fra i dag –Kort præsentation om baggrunden for tilgængelighed, link til retningslinjer mv.