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

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

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

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

Brugere er forskellige •Hvis man er blind bruger man skærmlæser •Hvis man ser dårligt bruger man forstørrelse •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

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

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

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

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

Ø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

Upload billede

Indsæt billede

Skriv en tekst eller ”” i feltet Image Alt Text

Billeder - Andre typer af billeder •Komplekse billeder •Billeder af tekst –Alt-teksten skal også her have samme formål som billedet –Oftest vil alt-teksten være lig den grafiske tekst

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

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 miOgPlanlaegning.aspx

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

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 betaling/Takster-2011.aspx

Datatabeller – et eksempel København Århus Odense Oversigt over…

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

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

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

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

Farve •Brug ikke farve som eneste måde at fortælle brugeren noget på.

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

Tekst - Linktekster

Opgave •Gå ind på –Opgave.doc –Billeder til brug for opgaveløsningen

Spørgsmål, kommentarer ?!

Dokumenter efter kurset • –Slides fra i dag –Kort præsentation om baggrunden for tilgængelighed, link til retningslinjer mv.