Tilgængelighed København Kommune Maria Barrett Sensus ApS 10. januar 2011 l
Program 9.00 – –En kort introduktion til webtilgængelighed –Web Content Accessibility Guidelines 2.0 –WCAG og det redaktionelle arbejde –Århus Kommune – –Hvordan kan der svares på borgerrådgiverens brev?
Formålet med kurset Introduktion til alle succeskriterierne i WCAG 2.0, niveau AA Fokus på de succeskriterier der er afhængige af det redaktionelle arbejde i jeres CMS Hvorledes tilgængeligheden kan sikres i forhold til det redaktionelle arbejde – konkrete anvisninger Særlige forhold ved jeres CMS
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
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
Mennesker med funktionsnedsættelser Syn, hørelse, bevægelse, tale, kognition, sprog, læring, neurologiske Kombinationer af disse Kortvarige, længerevarende eller permanente Op mod 25 % af befolkningen oplever tilgængelighedsproblemer
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
Tilgængelighed i Danmark Danske beslutninger Åbne standarder incl. tilgængelighed obligatorisk (2008)Åbne standarder incl. tilgængelighed obligatorisk FN FN’s handicapkonvention om handicappedes rettigheder (2009)FN’s handicapkonvention
Retningslinjer og prioriteter Internationale retningslinjer fra World Wide Web Consortium (W3C) –Web Accessibility Initiative (WAI) –Web Content Accessibility Guidelines (WCAG) –Authoring Tools Accessibility Guidelines (ATAG) –User Agents Accessibility Guidelines (UAAG) Brugeren oplever tilgængelighed UAAG Browsere, Media players ATAG Redigerings- værktøjer, editors, CMS WCAG Indhold, struktur, layout, interaktion
Retningslinjer og prioriteter W3C prioriteter og overholdelse –Prioritet 1 – Skal overholdes (niveau A) –Prioritet 2 – Bør overholdes (niveau AA) –Prioritet 3 – Kan overholdes (niveau AAA) Niveau AA (prioritet 1 og 2) er minimum; niveau AAA er ikke altid realistisk Danske retningslinjer fra IT- og Telestyrelsen EU anvender ligeledes W3C/WCAG
Retningslinjer og prioriteter Ikke-W3C retningslinjer –Ikke-W3C teknologier Indhold fra eksempelvis Microsoft (Office), Adobe (PDF, Flash), Open Office, andre Dokumenterne skal følge retningslinjerne for det pågældende format Leverandører er på vej med WCAG 2 supplement til sikring af tilgængeligheden til fx Word og PDF
Web Content Accessibility Guidelines 2.0 – og hvordan de anvendes i Københavns Kommunes CMS Maria Barrett Sensus ApS
Net-dokumenter Web Content Accessibility Guidelines Den danske oversættelse af retningslinjerneDen danske oversættelse af retningslinjerne
4 principper for tilgængelighed 1.Opfattelig (perceivable) – information og brugergrænseflader skal præsenteres for brugere på måder, som de kan opfatte 2.Anvendelig (operable) – brugergrænsefladen og navigationen skal være anvendelig 3.Forståelig (understandable) – information og brugergrænsefladen skal være forståelig 4.Robust (robust) – indholdet skal være tilstrækkelig robust til at det kan præsenteres pålideligt på en bred vifte af brugeragenter, herunder kompenserende teknologier
OPFATTELIGHED Succeskriterier der vedrører indholds
WCAG A Ikke-tekstbaseret indhold: Alt ikke-tekstbaseret indhold, der præsenteres for brugeren, har tilknyttet et tekstbaseret alternativ som har samme formål. Fx: –Tidsafhængigt media –Grafik –Dynamisk indhold –Rammer
Billeder Alle billeder skal have et tekstligt alternativ, der svarer til billedets formål
Jeres CMS Jeres version af SiteCore understøtter ikke tomme alt-tekster Kompromis: hvis billedet ikke er betydningsbærende skal alt-teksten være så kort som mulig Billeder der er lagt ind af udviklere skal have en alt-tekst, der beskriver billedets formål – det kan også være en tom alt-tekst.
Ø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
SÅDAN ARBEJDER I MED TILGÆNGELIGHEDEN TIL BILLEDER
Upload billede
Indsæt billede
Skriv en ny alt-tekst i image properties
Komplekse billeder Eksempelvis grafer, instruktioner etc. Flere løsningsmuligheder –Beskriv billedets formål i alt-teksten (ikke for langt) –Beskriv billedets formål i teksten og skriv i alt-teksten at dette er gjort –Link til en anden fremstillingsform og beskriv i alt-teksten at denne løsning er valgt
WCAG A Rent lydindhold (audio only) og rent videoindhold (video only) (forudindspillet): For forudindspillet rent lydindhold og forudindspillet rent videoindhold gælder følgende, undtagen når video eller lyd udgør et mediealternativ til tekst og klart er markeret som sådan.
WCAG A Forudindspillet rent lydindhold: Der skal leveres et alternativ til tidsafhængige medier, som præsenterer information, der svarer til forudindspillet rent lydindhold.
WCAG A Forudindspillet rent videoindhold: Der skal leveres enten et alternativ til tidsafhængige medier eller et lydspor, som præsenterer information, der svarer til forudindspillet rent videoindhold.
WCAG A Undertekster (forudindspillet): Der skal leveres undertekster til alt forudindspillet lydindhold i synkroniserede medier, undtaget når medier fungerer som medie- alternativ til tekst og er klart markeret som sådan.
WCAG A Synstolkning eller mediealternativ (forudindspillet): Der skal leveres et alternativ til tidsafhængige medier eller synstolkning af forudindspillet videoindhold i synkroniserede medier, undtagen når medierne er mediealternativ til tekst og er klart markeret som sådan.
WCAG AA Undertekster (live): Der skal leveres undertekster til alt lydbaseret live- indhold i synkroniserede medier.
WCAG AA Synstolkning (forudindspillet): Der skal leveres synstolkning til alt forudindspillet videoindhold i synkroniserede medier.
SÅDAN ARBEJDER I MED TILGÆNGELIGHEDEN TIL A/V-INDHOLD
Beslutninger: På hvad niveau I vil arbejde med dette (fuld overholdelse, delvis overholdelse, nødløsning: skrive sig ud af problemet) Hvor meget I vil købe jer fra (eksempelvis undertekster, manuskript, synstolkning) Et tekstligt alternativ kan en redaktør producere. Det øvrige kræver værktøjer og uddannelse
Jeres CMS A/V-indhold skal have et teknisk alternativ (det, der svarer til en alt- tekst). Hvis det er en redaktør, der lægger indholdet på siden, understøtter SiteCore ikke dette Hvis det er udviklere, der lægger indholdet på, skal det have et teknisk alternativ Afspilleren skal være tilgængelig
WCAG A Information og relationer: Information, struktur, og relationer der formidles via præsentationen, kan bestemmes programmeringsmæssigt eller er tilgængelige som tekst.
1.3.1 gælder eksempelvis: Sammenknytning af etiketter til kontroller i formularer Overskrifter Tabelinformation Listeelementer
WCAG – A: Formularer En etiket skal knyttes eksplicit til hver kontrol Det skal gøres sådan kodemæssigt: Fornavn: vejpark?&ArrStartday=14&ArrStartmonth=Januar&ArrStartyear=2011&Area=K%C3%B8benhavn %20%C3%98-postby&StedMark=Kbhplads&periode=1
WCAG A – citater og sprogskift Begge dele bør opmærkes Skærmlæsere anvender sprogskift til at skifte mellem talesynteserne Der er to typer citater: inline-citater og blok-citater. Browseren renderer som udgangspunkt blokcitater med linjeskift og indrykning Jeres CMS understøtter ikke opmærkning af sprogskift og citater
WCAG – A: Overskrifter H-elementer må ikke bruges til at opnå et bestemt visuelt udtryk men skal bruges til at markere forskellige niveauer af overskrifter. Niveauet skal svare til den funktion, indholdet har
SÅDAN ARBEJDER I MED TILGÆNGELIGHEDEN TIL OVERSKRIFTELEMENTER
Overskrifter Skal nestes korrekt, således at der ikke springes niveauer over Titlen for siden bliver også en H1-overskrift Overskrifterne skal inddele siden i logiske afsnit Overskrifter må ikke bruges til styling af tekst – eks. manchettekster Hvis noget tekst er visuelt fremhævet som en overskrift (med eksempelvis fed skrift), så overvej om det ikke bør have et overskriftniveau
Lister Skal opmærkes med de dertil egnede funktioner –Brug ikke almindelige tegn til punkter - eks. - eller > –Skriv ikke numrene selv i en nummereret opstilling –Brug ikke punkter fra tidligere dokumenter –Anvend ikke billeder af punkter
SÅDAN ARBEJDER I MED TILGÆNGELIGHEDEN TIL LISTER
Lister Design-guidelines og:
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
SÅDAN ARBEJDER I MED TILGÆNGELIGHEDEN TIL DATATABELLER
Datatabeller – et eksempel København Århus Odense Oversigt over…
Note vedr. layouttabeller Layouttabeller er blot en visuel positionering af tekst, men udtrykker ikke et forhold imellem cellerne Brug layouttabeller med forsigtighed – de skal give mening, når de lineariseres Ved layouttabeller, skal der ikke anvendes tabeloverskrifter og caption
WCAG A Meningsfuld rækkefølge: Når den rækkefølge, som indhold præsenteres i, påvirker indholdets mening, kan en korrekt læserækkefølge bestemmes programmeringsmæssigt.
WCAG A Sensoriske egenskaber: Instruktioner, der vedrører forståelse og betjening af indhold, er ikke udelukkende afhængige af komponenternes sensoriske egenskaber såsom form, størrelse, visuel placering, orientering eller lyd.
Sensoriske egenskaber i instruktioner Hvad er den tilgængelighedsmæssige forskel mellem disse 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
SÅDAN ARBEJDER I MED TILGÆNGELIGHEDEN TIL INSTRUKTIONER (TEKST)
Sensoriske egenskaber i instruktioner Brug ikke instruktioner, der kun er afhængig af brugerens sanseopfattelse –Eksempelvis farve, størrelse, placering etc. Suppler med universelle informationer (primært tekst)
WCAG A Anvendelse af farve: Farve er ikke det eneste visuelle middel, der anvendes til at formidle information, gøre opmærksom på en handling, anmode om respons eller udskille et visuelt element. CBA /0/Badeforbud.pdf
WCAG A Kontrol af lyd: Hvis eventuel lyd på en webside spiller automatisk i mere end tre sekunder, skal der enten være en mekanisme, som kan anvendes til at afbryde lyden helt eller midlertidigt, eller der skal findes en mekanisme, som kan regulere lydstyrken uafhængigt af systemets generelle lydniveau.
WCAG AA Kontrast (minimum): Den visuelle præsentation af tekst og billeder af tekst skal have et kontrastforhold på mindst 4,5:1, undtagen i følgende situationer: –Stor tekst: Forstørret tekst og billeder af forstørret tekst har et kontrastforhold på minimum 3:1. –Ikke betydningsbærende –Logoer
SÅDAN ARBEJDER I MED TILGÆNGELIGHEDEN TIL KONTRAST
Kontrast De faste typografier skal rumme tilstrækkelig kontrast (design-fasen) Ændr ikke manuelt typografi i det redaktionelle arbejde Brug ikke billeder af tekst
WCAG AA Ændring af tekststørrelse: Tekst kan, med undtagelse af undertekster og billeder af tekst, forstørres op til 200 % uden brug af kompenserende teknologi uden tab af indhold eller funktion.
WCAG AA Billeder af tekst: Hvis de anvendte teknologier kan håndtere den visuelle præsentation, anvendes tekst frem for billeder af tekst til formidling af information, undtagen i følgende tilfælde: –Kan tilpasses: Billedet af tekst kan tilpasses visuelt til at imødekomme brugerens krav; –Nødvendig: En særlig præsentation af tekst er nødvendig for den information, der formidles. havnere/HistoriskStatistik/Skatter.aspx
ANVENDELIGHED Succeskriterier der vedrører indholds
WCAG A Tastatur: Alle indholdets funktioner kan betjenes via en tastaturgrænseflade uden at der er behov for specifik tidsindstilling af individuelle tastetryk, undtaget tilfælde, hvor den underliggende funktion kræver input, der er afhængige af at kunne følge hele rækken af brugerens bevægelser og ikke blot slutpunkterne.
WCAG A Ingen tastaturfælde: Hvis tastaturfokus kan flyttes til en af sidens komponenter ved hjælp af en tastaturgrænseflade, kan fokus fjernes fra denne komponent udelukkende ved hjælp af en tastaturgrænseflade. Hvis det kræver mere end utilpassede pile- eller tab-taster eller andre standard lukkemetoder, skal brugeren rådgives om metoden til at fjerne fokus.
WCAG A Man skal skulle ændre tidsindstillinger: For hver tidsbegrænsning, der er givet i indholdet, gælder mindst et af følgende punkter:
WCAG – A: fortsat Slå fra: Brugeren kan slukke for tidsbegrænsningen, før den udløber; eller Tilpasse: Brugeren kan tilpasse tidsbegrænsningen, før den udløber, over en bred skala, der er mindst ti gange varigheden af standardindstillingen; eller Udvide: Brugeren advares, før tiden udløber, og får mindst 20 sekunder til at forlænge tidsbegrænsningen ved hjælp af en simpel handling (for eksempel ”tryk på mellemrumstasten”), og brugeren har mulighed for at forlænge tiden mindst ti gange; eller
WCAG – A: fortsat Undtagelse ved real-time: Tidsbegrænsningen er en nødvendig del af en begivenhed i real-time (for eksempel en auktion), og der findes ikke noget muligt alternativ til tidsbegrænsningen; eller Nødvendig undtagelse: Tidsbegrænsningen er nødvendig, og en forlængelse vil gøre handlingen ugyldig; eller 20 timers undtagelse: Tidsbegrænsningen varer længere end 20 timer.
WCAG A Pause, stop, skjul: Ved bevægelse, blinken, rulning eller automatisk opdatering af information gælder samtlige følgende punkter:
WCAG – A: fortsat Bevægelse, blinken, rulning (scrolling): Ved enhver form for bevægelse, blinken eller rulning (scrolling) af information, der (1) starter automatisk, (2) varer mere end 5 sekunder og (3) præsenteres samtidigt med andet indhold, findes der en mekanisme, så brugeren kan stoppe skjule eller sætte informationen på pause, medmindre bevægelsen, blinket eller rulningen (scrolling) er en del af en handling, hvor dette er nødvendigt; og
WCAG – A: fortsat Automatisk opdatering: Ved enhver form for automatisk opdatering af information, der (1) starter automatisk og (2) præsenteres samtidigt med andet indhold, findes der en mekanisme, som gør det muligt for brugeren kan stoppe skjule eller sætte opdateringen på pause, eller at kontrollere opdateringsfrekvensen, medmindre den automatiske opdatering er en del af en aktivitet, hvor dette er nødvendigt.
WCAG A Grænseværdi på tre glimt eller derunder: Intet indhold på en webside glimter mere end tre gange på et sekund, eller glimtet ligger under grænseværdien for generelt glimt og rødt glimt.
WCAG A Spring over blokke: Der findes en mekanisme til at springe over blokke af indhold, der gentages på flere websider.
WCAG A Sider har titler: Websider har titler, der beskriver emne eller formål
WCAG A Fokusrækkefølge: Hvis der kan navigeres sekventielt på en webside, og hvis navigationssekvenserne påvirker mening eller betjening, skal fokuserbare komponenter opnå fokus i en rækkefølge, der bevarer meningen eller betjeningsmulighederne.
WCAG A Formål med links (i kontekst): Formålet med ethvert link kan bestemmes ud fra link-teksten alene eller ud fra link-teksten sammen med den link-kontekst, der er programmeringsmæssigt bestemt; undtaget herfra er tilfælde, hvor linkets formål vil forekomme flertydigt for alle brugere.
Tekst - Linktekster Den tekst, der er klikbar skal beskrive formålet for linket, når den læses for sig selv
Tekst - Linktekster
SÅDAN ARBEJDER I MED TILGÆNGELIGHEDEN TIL LINKTEKSTER
Linktekster Sørg for at hver enkelt linktekst beskriver formålet for linket uden den kontekst, linket står i. Alt- tekster er linktekst for billeder, der linker Overvej eksempelvis følgende linktekster alle fra – –Fakta om gadebelysning –Pige på cykel over langebro
WCAG AA Flere måder: Der findes mere end en måde at lokalisere en webside på inden for en samling af websider. Undtaget er tilfælde, hvor websiden udgør et resultat af eller et trin i en proces.
WCAG AA Overskrifter og ledetekster: beskriver emne eller formål.
WCAG AA Synligt fokus: Enhver tastaturbetjent brugergrænseflade har en betjeningstilstand, hvor tastaturfokusindikatoren er synlig
FORSTÅELIGHED Succeskriterier der vedrører indholds
WCAG A Sproget på siden: Det menneskelige standardsprog for hver side kan bestemmes programmeringsmæssigt. Dette gøres med lang og / eller xml:lang
WCAG AA Sprog, der anvendes til dele af indhold: Det menneskelige sprog, der anvendes i hver passage eller frase i indholdet, kan bestemmes programmeringsmæssigt; undtaget herfra er egennavne, tekniske termer, ord med ubestemmeligt sproglig baggrund samt ord eller vendinger, der er blevet en del af sprogbrugen i den tekst, de umiddelbart indgår i.
Jeres CMS Understøtter ikke sprogskift
WCAG A I fokus: Når en komponent kommer i fokus, medfører dette ikke en ændring af kontekst.
WCAG A Ved input: Ændring af indstillingerne i en hvilken som helst brugergrænsefladekomponent medfører ikke automatisk ændring af kontekst, medmindre brugeren er blevet advaret herom, inden komponenten anvendes.
WCAG AA Konsekvent navigation: Navigationsmekanismer, der gentages på flere websider inden for en samling af websider, skal optræde i samme relative rækkefølge, hver gang de gentages, medmindre brugeren selv foretager en ændring.
WCAG AA Konsekvent identifikation: Komponenter med samme funktion inden for en række websider skal defineres konsekvent.
SÅDAN ARBEJDER I MED KONSEKVENT IDENTIFIKATION
Konsekvent identifikation Ændr ikke selv udseende for overskrifter, links, lister etc.
WCAG A Identifikation af fejl: Hvis en inputfejl registreres automatisk, skal det fejlbehæftede element identificeres, og fejlen beskrives for brugeren ved hjælp af tekst
WCAG A Ledetekster eller instruktioner: Der findes ledetekster eller instruktioner, når indhold kræver brugerinput
WCAG AA Fejlforslag: Hvis en inputfejl registreres automatisk, og der findes forslag til retning af fejlen, skal forslagene præsenteres for brugeren, medmindre dette ville undergrave sikkerheden eller indholdets formål.
WCAG AA Forhindring af fejl (juridisk, økonomisk, data): For websider som medfører juridiske forpligtelser eller økonomiske transaktioner for brugeren, som tilpasser eller sletter data, som kan kontrolleres af brugeren i datalagringssystemer, eller som afleverer svar på test udført af brugeren, skal mindst et af følgende punkter gælde:
WCAG – AA (fortsat) Reversibel: Det sendte er reversibelt. Tjek: Data, der indtastes af brugeren, tjekkes for inputfejl, og brugeren får mulighed for at rette fejlene. Bekræftelse: Der findes en mekanisme som gør det muligt at gennemse, bekræfte eller rette information, før forsendelsen afsluttes.
ROBUSTHED Succeskriterier der vedrører indholds
WCAG A Parsing: I indhold, der er implementeret ved hjælp af markup- sprog, har elementer afsluttede start- og slut-tags, elementer er nestet efter deres specifikationer, de indeholder ikke attribut-dubletter og ID’er er unikke; undtaget herfra er tilfælde, hvor specifikationerne tillader disse funktionaliteter
WCAG A Navn, rolle, værdi: For alle brugergrænsefladekomponenter gælder det, at navn og rolle kan bestemmes programmeringsmæssigt. Tilstande, egenskaber og værdier, der kan indstilles af brugeren, kan indstilles programmeringsmæssigt, og besked om ændringer i disse elementer kan tilgås af brugeragenter, herunder kompenserende teknologier.
Århus Kommune: SiteCore 6 Alt-tekst defineres på den enkelte artikel frem for ved upload Understøtter tomme alt-tekster Tilgængelige alternativer til kort Flere niveauer af overskrifter (H2-H4) Opmærkning af citater – langt citat og kort citat Opmærkning af lokale sprogskift (dansk og engelsk) HTML-validering af hver side – en side kan ikke publiceres med fejl i koden
Spørgsmål, kommentarer ?!
Dokumenter efter kurset –Slides fra i dag –Tilgængelighedsmanual