O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Digital Accesibility seminar

57 visualizações

Publicada em

20% of Denmark's population can’t use your website – we'll show you how to fix it.


Adapt and Siteimprove are hosting a seminar on Digital Accessibilit, where you get answers to the following questions:

- How do you give your visitors a better experience?
- How do you create a website that is easier to use and understand?
- Is your website updated according to global web accessibility standards?
- Is your website prepared for the new EU directive's rules that will come into force in September?
- How is accessibility related to a good SEO ranking?
- Get concrete tips and tools for identifying accessibility challenges on your site - and get started with the optimization of your website.

Who is the seminar relevant to?
The seminar is aimed at digital editors, digital managers, webmasters, UX designers, digital designers, and for those who would like to optimize and improve their website in terms of accessibility with the help of specific tools.

Publicada em: Educação
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Digital Accesibility seminar

  1. 1. Digital Tilgængelighed Seminar - 18. september 2018
  2. 2. 20 % af Danmarks befolkning kan ikke bruge dit website.
  3. 3. 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
  4. 4. Intro til Siteimprove
  5. 5. Søren Bak Jepsen Executive VP Sales, Siteimprove
  6. 6. 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.
  7. 7. Siteimprove Intelligence Platform™ Alt i én platform SEOContent & Accessibility Analytics GDPR
  8. 8. Anne Thyme Nørregaard Digital Accessibility Product Expert, Siteimprove
  9. 9. Intro til Adapt
  10. 10. Kresten Wiingaard CEO, Adapt
  11. 11. +140 Medarbejdere i 5 lande 1998 Grundlagt +2000 Digitale løsninger
  12. 12. Shaping Tomorrow’s User Experience Boston Barcelona Copenhagen Vilnius Kaunas Berlin
  13. 13. Elin Linding Jørgensen UX Lead & Strategist, Adapt Heidi Mønnike Jørgensen UX Lead & Strategist, Adapt
  14. 14. Introduktion til webtilgængelighed
  15. 15. Tilgængelighed er det... ETISKE valg ● Inkluderende samfund, lige adgang, menneskerettigheder etc. SMARTE valg ● Bedre (generel) brugeroplevelse ● Højere indtjening
  16. 16. 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
  17. 17. Mennesker er forskellige ● Forskellige præferencer ● Forskellige behov
  18. 18. 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
  19. 19. Fokus i WCAG 2.1 Mobil Kognitiv Nedsat syn
  20. 20. Inklusivt design = tilgængelighed + usability
  21. 21. 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.
  22. 22. Funktionsnedsættelser ift. alder Family Resources Survey 2015/2016
  23. 23. Der bliver flere ældre (over 65 år) Kilde: Danmarks Statistik
  24. 24. “Hvor mange blinde er der egentlig i Danmark?” Aldring Lovgivning Situations- bestemt
  25. 25. EU-direktiv og dansk lov om tilgængeligheden af offentlige organers websites og mobil-applikationer
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. 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.”
  30. 30. 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.
  31. 31. 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
  32. 32. Hvad får din forretning ud af at arbejde med tilgængelighed?
  33. 33. Øget markedsandel
  34. 34. 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
  35. 35. Søgemaskineoptimering
  36. 36. 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
  37. 37. Øget brugervenlighed
  38. 38. Kontrast
  39. 39. Kontrast
  40. 40. Ikoner
  41. 41. Mobil
  42. 42. Øget konvertering
  43. 43. Grøn CTA
  44. 44. Inaktiv knap
  45. 45. Struktureret og fremtidssikret kode
  46. 46. Navigation
  47. 47. Kundeloyalitet
  48. 48. Link tekster & farver
  49. 49. Hvad sker der, hvis du ikke gør noget?
  50. 50. 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
  51. 51. 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
  52. 52. 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
  53. 53. 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
  54. 54. 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
  55. 55. 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
  56. 56. 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
  57. 57. Sådan kan du bruge Siteimprove
  58. 58. PAUSE 10 min
  59. 59. Sådan kommer du igang
  60. 60. Fra ambition til handling 1. Ambitions-niveau 2. Review 3. Handlingsplan 4. Eksekvering 5. Måling af effekt
  61. 61. Ambitions-niveau ● Forretningsmål ● Målgruppe ● Drivers - hvorfor tilgængelighed? ● Tidshorisont / budget 1
  62. 62. 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.
  63. 63. 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.
  64. 64. Tilgængeligheds-review ● Identificering af problemer ● Brug en række værktøjer ● Revidering af ambitionsniveau 2
  65. 65. Handlingsplan ● Inddeling af problemer i spor ● Prioritering (ift. kompleksitet og værdiskabelse) ● Konkret plan for eksekvering 3
  66. 66. 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
  67. 67. Eksekvering ● Udspecificering af konkrete arbejdsopgaver ● Estimater + status 4
  68. 68. 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
  69. 69. 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
  70. 70. Til forskellige faggrupper
  71. 71. Hvis du er web-ansvarlig eller redaktør
  72. 72. 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)
  73. 73. 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)
  74. 74. 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)
  75. 75. 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)
  76. 76. 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)
  77. 77. 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)
  78. 78. 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.
  79. 79. Hvis du er designer
  80. 80. Farve-kontraster og kombinationer Autentisk men læsbart indhold Hover og animationer Det funktionelle formål i et link Beskrivende Call-To-Action
  81. 81. Farve-kontraster og kombinationer Autentisk men læsbart indhold Hover og animationer Det funktionelle formål i et link Beskrivende Call-To-Action
  82. 82. Farve-kontraster og kombinationer Autentisk men læsbart indhold Hover og animationer Det funktionelle formål i et link Beskrivende Call-To-Action
  83. 83. Farve-kontraster og kombinationer Autentisk men læsbart indhold Hover og animationer Det funktionelle formål i et link Beskrivende Call-To-Action
  84. 84. Farve-kontraster og kombinationer Autentisk men læsbart indhold Hover og animationer Det funktionelle formål i et link Beskrivende Call-To-Action
  85. 85. Farve-kontraster og kombinationer Autentisk men læsbart indhold Hover og animationer Det funktionelle formål i et link Beskrivende Call-To-Action
  86. 86. 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.
  87. 87. Hvis du er bureau / har ansvar for dialog med bureau
  88. 88. Analyser tilgængelighedsniveau Klarlæg redaktørbehov Hav en plan for hvordan krav sikres Opgaver og estimater Test løbende under udvikling
  89. 89. Analyser tilgængelighedsniveau Klarlæg redaktørbehov Hav en plan for hvordan krav sikres Opgaver og estimater Test løbende under udvikling
  90. 90. Analyser tilgængelighedsniveau Klarlæg redaktørbehov Hav en plan for hvordan krav sikres Opgaver og estimater Test løbende under udvikling
  91. 91. Analyser tilgængelighedsniveau Klarlæg redaktørbehov Hav en plan for hvordan krav sikres Opgaver og estimater Test løbende under udvikling
  92. 92. Analyser tilgængelighedsniveau Klarlæg redaktørbehov Hav en plan for hvordan krav sikres Opgaver og estimater Test løbende under udvikling
  93. 93. Analyser tilgængelighedsniveau Klarlæg redaktørbehov Hav en plan for hvordan krav sikres Opgaver og estimater Test løbende under udvikling
  94. 94. 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.
  95. 95. 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
  96. 96. Sådan arbejder forskellige virksomheder med tilgængelighed
  97. 97. Danmarks Evalueringsinstitut
  98. 98. 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/
  99. 99. 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
  100. 100. Ældre Sagen ‘Målgruppe først’ ved design-valg til medlems-app. Brug af simulations-briller under design og udvikling.
  101. 101. Hvad I kan tage med hjem
  102. 102. 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
  103. 103. 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
  104. 104. 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
  105. 105. 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
  106. 106. 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
  107. 107. 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
  108. 108. Q&A
  109. 109. Vil du høre mere?
  110. 110. 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
  111. 111. Tak for i dag

×