Digital Accesibility seminar

Digital Tilgængelighed
Seminar - 18. september 2018

20 % af Danmarks
befolkning kan ikke
bruge dit website.

Agenda
Velkommen & Intro
Introduktion til webtilgængelighed
Hvad får din forretning ud af det?
Demo af Siteimprove Accessibility
Sådan kommer du i gang
Case-eksempler
Q&A

Søren Bak Jepsen
Executive VP Sales, Siteimprove

Siteimproves rejse
2007
US-etablering med
kontor i Minneapolis.
2012
Etablering i Berlin,
Tyskland.
2017
こんにちは
Siteimprove i Japan.
2003
Siteimprove grundlagt i
København, Danmark.
2009
Etablering i UK og SE.
2015
Etablering i Canada,
Østrig og Australien.
2018
10 kontorer servicerer
dagligt 20 lande og
forventer at der
kommer flere til.

Siteimprove Intelligence Platform™
Alt i én platform
SEOContent &
Accessibility
Analytics GDPR

Anne Thyme Nørregaard
Digital Accessibility Product Expert,
Siteimprove

+140
Medarbejdere i 5 lande
1998
Grundlagt
+2000
Digitale løsninger

Shaping Tomorrow’s
User Experience
Boston
Barcelona
Copenhagen
Vilnius
Kaunas
Berlin

Elin Linding Jørgensen
UX Lead & Strategist, Adapt
Heidi Mønnike Jørgensen
UX Lead & Strategist, Adapt

Introduktion til
webtilgængelighed

Tilgængelighed er det...
ETISKE valg
● Inkluderende samfund, lige adgang,
menneskerettigheder etc.
SMARTE valg
● Bedre (generel) brugeroplevelse
● Højere indtjening

Webtilgængelighed handler om de
principper og teknikker, man skal
anvende, når man udvikler websites og
andre tekniske løsninger, så de kan
anvendes af alle brugere, herunder
brugere med handicap.
Digitaliseringsstyrelsen

Mennesker er forskellige
● Forskellige præferencer
● Forskellige behov

WCAG 2
An international standard from W3C
Principper
Guidelines
Opfattelig
(Perceivable)
Anvendelig
(Operable)
Forståelig
(Understandable)
Robust
(Robust)
X antal guidelines under hvert princip.
X antal succeskriterier under hver guideline. A, AA, AAA
Her ligger arbejdet
Succeskriterier
WCAG 2.1:
12 nye successkriterier på niveau A + AA
(+ 5 AAA)
Web Content Accessibility Guidelines

Fokus i WCAG 2.1
Mobil Kognitiv Nedsat syn

Inklusivt design
=
tilgængelighed
+ usability

1
33.9%
3
18.8%
4
11.2%
2
22.9%
5
6.6%
6
13.9%
8
3.9%
7
1.9%
9
0.2%
Kun ⅓ af folk med en
funktionsnedsættelse har en enkelt
funktionsnedsættelse.
Over 40% af folk med en
funktionsnedsættelse har 3 eller mere.

Funktionsnedsættelser ift. alder
Family Resources Survey 2015/2016

Der bliver flere ældre (over 65 år)
Kilde: Danmarks Statistik

“Hvor mange blinde er der egentlig i Danmark?”
Aldring Lovgivning Situations-
bestemt

EU-direktiv og dansk lov om
tilgængeligheden af offentlige
organers websites og
mobil-applikationer

Hvem gælder loven for?
Offentlige organer
Staten, regionale myndigheder, lokale
myndigheder, offentligretlige organer,
skoler og daginstitutioner skal:
● Sikre at deres websites og
mobilapplikationer er tilgængelige for
alle
● Offentliggøre en
tilgængelighedserklæring
Digitaliseringsstyrelsen
Digitaliseringsstyrelsen skal:
● Monitorere niveau af tilgængelighed på
offentlige websites og håndhæve
loven (mulighed for at give påbud)
● Rapportere til EU

Tidsplan for EU-direktiv
Gennemførsel Udførsel
2016 2017 2018 2019 2020 2021
22. December 2016:
Træder i kraft
23. September 2018:
Gennemførsel i
medlemsstater
Medlemsstaterne
sætter de
nødvendige love og
administrative
bestemmelser i kraft
for at efterkomme
dette direktiv
23. December 2018:
Gennemførelsesrets
akter (fra
EU-komissionen)
23. September 2019
“Nye” websites
Offentlige sektors
websites
offentliggjort EFTER
23. September 2018
skal være
tilgængelige
23. September 2020
“Gamle” websites
Offentlige sektors
websites
offentliggjort FØR
23. September 2018
skal være
tilgængelige
23. Juni 2021
Mobilapplikationer
Offentlige sektors
mobilapplikationer
skal være
tilgængelige

Kravene til webtilgængelighed
● WCAG 2.1 niveau AA
○ Ikke helt nyt:
WCAG 2.0 AA har været gældende for offentlige
hjemmesider siden 2008 ved aftale mellem
regering, KL og Danske Regioner fra 2007
● Europæiske standard EN 301 549

Tilgængelighedserklæring
”§ 4. De offentlige organer skal offentliggøre og ajourføre en detaljeret, udtømmende og klar
tilgængelighedserklæring i et tilgængeligt format om deres websites og mobilapplikationers
overholdelse af denne lov.
Stk. 2. Tilgængelighedserklæringen skal offentliggøres på det offentlige organs website. For så
vidt angår mobilapplikationer kan tilgængelighedserklæringen i stedet offentliggøres sammen
med andre oplysninger, der fremgår, der hvor applikationen downloades.
Stk. 3. Ministeren for offentlig innovation kan fastsætte nærmere regler for
tilgængelighedserklæringen, herunder regler om udformning, standarder, indhold,
opdateringsfrekvens m.v.”

Håndhævelse
Digitaliseringsstyrelsen kan ved overtrædelse meddele påbud om,
at det offentlige organ skal:
1. Gøre konkret indhold tilgængeligt,
2. Sikre en fyldestgørende og opdateret tilgængelighedserklæring, eller
3. Anvise konkret tilgængeligt alternativ.

European Accessibility Act
(“en europæisk lov om tilgængelighed”)
Vil sandsynligvis påvirke:
● Computere og operativsystemer
● Hæveautomater, billet- og checkin-maskiner
● Smartphones
● TV-udstyr relateret til digitale tv-services
● Telefonservices og relateret udstyr
● Audiovisuelle medieservices såsom
fjernsynsudsendelser og relateret forbrugerudstyr
● Services relateret til luft- bus-, tog- og vandbåret
passagertransport
● Bankservices
● E-bøger
● E-handel

Hvad får din forretning
ud af at arbejde med
tilgængelighed?

Vi er alle udfordrede
Permanent Midlertidig Kontekstuel
Perception Svagtseende Ens briller er væk Sol på skærm
Bevægelse Parkinson Brækket arm Bussen ryster
Kognition Ordblindhed Fuld Fremmedsprog

SEO
● Headings tags (H1, H2 etc)
● Sigende overskrifter
● Et simpelt sprog, der matcher, hvad brugerne søger på / kan forstå
● Visuelt indhold med alt-tekst
● Beskrivende link-tekster

Struktureret og
fremtidssikret kode

Hvad sker der, hvis du
ikke gør noget?

Hvad sker der, hvis du ikke gør noget:
Mindre markedsandel
Lav placering på Google
Ringe brugervenlighed
Dårlig konvertering
Ustruktureret og uholdbar kode
Kundeflugt

Sådan kan du
bruge Siteimprove

Fra ambition til handling
1. Ambitions-niveau 2. Review 3. Handlingsplan
4. Eksekvering 5. Måling af effekt

Ambitions-niveau
● Forretningsmål
● Målgruppe
● Drivers - hvorfor tilgængelighed?
● Tidshorisont / budget
1

Eksempel: Offentlig organisation
Ambitions-niveau
Drivers Forretningsmål Målgruppe Tidshorisont/ budget
Offentlige institutioner
er underlagt et
EU-direktiv.
Imødekomme behov fra
samtlige borgere, der
ønsker at rette
henvendelse digitalt
eller betjene sig selv.
Stigning af andel af
borgere, der betjener
sig selv på 20 % inden
2020.
Digitale løsninger skal
overholde level AA fra
2018.
Alle voksne
danskere over 18
år.
Bred målgruppe
med mange
forskellige behov.
Konkret projekt der sættes
igang d. 1/10 skal overholde
level AA ved lancering.
Der er sat 15 % af samlet
budget af til overholdelse.
Tilgængeligheds-indsatsen
er en kontinuerlig proces.

Eksempel: Privat virksomhed
Ambitions-niveau
Drivers Forretningsmål Målgruppe Tidshorisont/ budget
Vækstpotentiale
gennem øget trafik
og konvertering.
Samfundsansvar
overfor alle typer
kunder.
Fokus på SEO. Mål om at
ligge top 3.
Mål om øget konvertering
gennem brugervenlighed
+ trafik.
Nuværende
primære: Voksne
danskere i alderen
18-55 år.
Ønsket udvidelse:
voksne i alderen
55-75 år.
Optimering af nuværende
løsning inden udgangen af
året.
Der er afsat 400.000 DKK i
næste kvartal.

Tilgængeligheds-review
● Identificering af problemer
● Brug en række værktøjer
● Revidering af ambitionsniveau
2

Handlingsplan
● Inddeling af problemer i spor
● Prioritering (ift. kompleksitet og værdiskabelse)
● Konkret plan for eksekvering
3

Eksempel på handlingsplan
Fokusområder Ansvarlig Prioritet Deadline
Spor 1: Farve/kontrast-optimeringer Designer 1 1/11-2018
Spor 2: Optimering af købsflow Designer/UX/udvikler 1 1/11-2018
Spor 3: Keyboard navigation Udvikler 2 1/12-2018
Spor 4: Redaktionelle tilpasninger og oplæring Redaktør/webafdeling 2 1/12-2018
Spor 5: Semantiske forbedringer i koden Udvikler 3 1/2-2019

Eksekvering
● Udspecificering af konkrete arbejdsopgaver
● Estimater + status
4

Arbejdsopgaver Ansvarlig Estimat Status
Tilpasninger til kontrast i menu Designer/UX/frontend 10 timer OK
Tilpasninger til tekst-farve i formularer Designer/UX/frontend 10 timer OK
Finde ny farve til faktabokse Designer/UX/frontend 15 timer
Ny løsning ved tekst på billeder Designer/UX/frontend 20 timer
Redaktionelle tilpasninger ift. ovenstående
ændringer
Redaktør 25 timer
Spor 1: Farve & kontrast

Måling af effekt
● Support / kundeservice
● Tilgængeligheds-score
● Udvikling i antal problemer
● SEO - kan vi se en ændring?
● KPI’er - Fx konverteringsgrad.
● Brugertest før/efter
5

Hvis du er
web-ansvarlig eller
redaktør

Målgruppe - hvem taler vi til?
Farvekontraster og -kombinationer
Tekstalternativer til billeder og ikoner
Beskrivende og let-forståelig tekst
Brug korrekte H-tags (overskrifter)

Succeskriterier
Vi anbefaler, at en medarbejder får ansvaret for
digital tilgængelighed.
Alle redaktører skal oplæres i principper.
Det er afgørende med et værktøj som
eksempelvis Siteimproves Accessibility Tool.

Farve-kontraster og kombinationer
Autentisk men læsbart indhold
Hover og animationer
Det funktionelle formål i et link
Beskrivende Call-To-Action

Tilgængelighed vs. brand
farver?
Der vil måske være “kompromisser” i designet -
og måske visse steder visuelle identitet og CVI.
Det er en forudsætning at web, marketing og IT
samarbejder.

Hvis du er bureau /
har ansvar for dialog
med bureau

Analyser tilgængelighedsniveau
Klarlæg redaktørbehov
Hav en plan for hvordan krav sikres
Opgaver og estimater
Test løbende under udvikling

Udvikling
● Både komplet og delvis overholdelse af
WCAG 2.0 vil tilføje ekstra timer til
udviklingen.
● Vores erfaring er 10-15 % af
udviklingsbudgettet vil gå til overholdelse
af WCAG 2.0 level AA.

Værktøjsliste
● Siteimprove Intelligence Platform™
● SiteImprove Accessibility Checker (plugin til Chrome)
● ChromeLens (plugin til Chrome)
● ColorBlinding (plugin til Chrome)
● Accessibility Developer Tools
● Cmd F5 - Activate Screen Reader (Mac)
● Contrast checker (Colorblind tool)
● The Accessibility Cheat Sheet:
https://bitsofco.de/the-accessibility-cheatsheet/
● Simulations-briller fra fx Ballast: www.ballastcph.dk/
● WCAG 2.1: www.w3.org/TR/WCAG21

Sådan arbejder
forskellige virksomheder
med tilgængelighed

As a visitor ➡ I want to navigate the site by using
a menu ➡ so I can find what I am looking for.
Acceptance Criterias:
● Menu is responsive (see attached images)
● On mobile: the menu will slide in from right
https://projects.invisionapp.com/d/main#/co
nsole/10408939/221194086/preview
● EVA logo is purple
● When I click the EVA logo I will be taken to
the frontpage
● Text in menu are links and the editor can
determine where they link to
● When hover: grey instead of purple
● When click: purple
Accessibility
● Text should be able to zoom 200%
● Use “alt” attribute on visual media (logo)
● Possible to navigate by keyboard only
● Page hierarchy and structure should be
reflected in code
● Provide a “skip navigation” link . Place link
at the top of webpages, before navigation
links http://webaim.org/techniques/skipnav/

Gentofte
Kommune
Redaktører tilføjer løbende indhold
– make it or break it
Et godt udgangspunkt:
● Styr på templates
(udviklere og konsulenter i 2012)
● Værktøjer til kortlægning
For redaktører:
● Uddannelse
● Materiale på intranet
● Checklister
● Rette egne fejl

Ældre Sagen
‘Målgruppe først’ ved
design-valg til medlems-app.
Brug af simulations-briller
under design og udvikling.

Fastlæg et ambitionsniveau
Læg en handlingsplan
Prioritér opgaver og indsats
Invester i en række værktøjer
Løbende opfølgning er nødvendig
Hvad I kan tage med hjem

Kontakt Adapt eller Siteimprove
Adapt
Mail: hello@adaptagency.com
Tlf: 33 41 10 50
Siteimprove
Tina: tgr@siteimprove.com og 3122 3059
Kristian: kfp@siteimprove.com og 3119 7477

Digital Accesibility seminar

Recommandé

Recommandé

Contenu connexe

Similaire à Digital Accesibility seminar

Similaire à Digital Accesibility seminar (20)

Digital Accesibility seminar