Velkommen 08.55: 09.00: 09.05: 09.45: 10.00: 10.45: Alle slides bliver delt bagefter

Transkript

1 Velkommen 08.55: Vi sætter os ned (ikke før) 09.00: Velkommen 09.05: Jens: Hvad er tilgængelighed og hvad gør vi i UX Fasen 09.45: Pause alle strækker ben 10.00: Martin: Tilgængelighed i designprocessen 10.45: Tak for i dag Alle slides bliver & & Co

2 Jens Poder Innovationsdirektør Konceptudvikling UX Design Facilitering

3 Målet for i dag Hvad er tilgængelighed? Hvad indebærer det at leve op til? Hvordan indtænker vi det i vores UX og Design proces? Hvordan kan I begynde at teste jeres sites og få overblik over udfordringerne?

4 The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Tim Berners-Lee, W3C Director, Inventor of the World Wide Web

5 Hvor mange har brug for at vi tager hensyn? blinde eller stærkt svagtseende 4000 døve 7% ordblinde 8% af mænd er farveblinde har problemer med hørelsen 20% af danskerne er over 65 år

6 Og apropos EU... Vi fik et nyt tilgængelighedsdirektiv: European Accessability ACT Sider lavet efter 23. sept leve op til de nye tilgængelighedsregler fra 23. sept Sites lavet før har indtil 23. september 2020 De deadlines gælder for alle offentlige sites. Men reglerne omfatter også private sites.

7 WCAG 2.1 Web content accessability guidelines AA

8

9 Men hvad rager det egentlig os?

10 Det påvirker bredere end man tror... Der er situationer, hvor god tilgængelighed hjælper os alle sammen Permanent behov for tilgængelighed Midlertidig behov Situationelt behov

11 Masser af situationer: Jeg er stresset Jeg sidder ude i skarpt solskin Min musearm driller Jeg ligger i sengen efter hjernerystelse Jeg vil gerne se en video uden lyd

12 Og så er der jo robotterne

13

14 Nye teknologier gør det strategisk smart af være tilgængelig Online som det burde være Vi kan tænke på tilgængelighed, som for 10 år siden, da SEO pludselig begyndte at fylde rigtig meget. Semantisk opbygget HTML blev standard Mærkelige navigationsmetoder - flash og mystiske ting med javascript

15 Et site anno 1999 præ-seo Sat op i tabeller Ekstensiv brug af font-face tag Form-dropdown bruges som navigation Go-knap er erstattet af grafik Ingen sprog-indstillinger eller meta-data i det hele taget Før internet-design var modnet

16 Lad os prøve at se, hvordan standarder hjælper en læser med en skærmlæser

17

18

19

20 Ordentlig struktureret HTML Brug af Headers (H1, H2, H3) i stedet for Bold Brug af område-labels i dokumentet Links med mere info end læs mere Billeder med ALT-tekster

21

22 Hvis vi hjælper Lars løser vi 80% af problemerne

23 WCAG Det er ikke så svært Link til reference-cheatsheet Perceivable: Information and user interface components must be presentable to users in ways they can perceive. Operable: User interface components and navigation must be operable. Understandable: Information and the operation of user interface must be understandable. Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

24 Lad os lige prøve at kigge på det...

25 Tværfagligt samarbejde UX, design og frontend samarbejder igennem hele designprojektet

26 Tilgængelighed i UX Arbejdet Informationsarkitektur Organisering af indhold og overordnet navigerbarhed Konsistens i principper på tværs af site Wireframes Keyboard-navigerbar Hvordan ville denne side være med skærmtester Mindful ved brug af nye koncepter Tidlige prototyper og test af nye koncepter Siteimprove test Brugertest

27 Informationsarkitektur Landmarks og konsistens af disse på tværs Rækkefølge af tab-navigation på tværs af sider Opbygning af menu Tilgængelighed af site-træ Skip intro

28 Wireframes Keyboard navigerbarhed: Tabs og Focus Hvordan ville denne side skulle navigeres med en skærm-læser Brug af ikke-konventionel navigation Pop-Ups og Modals - advarsler før? Captchaer og andre robot-hegn kan en blind komme forbi? Læs Mere links? Pagination - eller uendelig scroll Advarsler ved links der downloader

29 Nye koncepter > Tidlig HTML prototype

30 Hvordan får jeg overblik over udfordringerne?

31 Automatiske check: Siteimprove test Pro: Brug dem for at få valideret koden tidligt i produktionen (Sikkerhedsstyrelsen) Con: Kan give falsk sikkerhed på et projekt

32 Oversigt over antal og typer af problemer i prioriteret rækkefølge A AA AAA Fejl: 17 Advarsler: 5 Fejl: 2 Fejl: 4

33 Inputfelt har ingen beskrivelse Problem Indtastningsfeltet skal altid indeholde en beskrivelse, som er eksplicit tilknyttet til feltet, for at sikre, at brugere, der anvender hjælpeteknologier, også ved, hvad feltet er til for. A

34 A Løsning Hvis indtastningsfeltet har en tydelig beskrivelse, der indikerer feltets formål, bør denne beskrivelse være eksplicit forbundet med indtastningsfeltet enten med en HTML-etiket eller ved brug af WAI-ARIA-attributten 'aria-label'. Hvis det ikke er muligt at tilføje en synlig beskrivelse, så skal der enten tilføjes en mouseover-tekst ('title'-attribut) til indtastningsfeltet eller oprettes en usynlig etiket ved brug af WAI-ARIA-attributten 'aria-label'. Brug en af følgende teknikker fra WCAG 2: ARIA4, ARIA14, ARIA16, G167, H44 eller H65

35 Link kun vist med farve Problem Kun farve, indikerer at der er tale om et link. Hvis links i tekstblokke kun identificeres ved farve, skal farvekontrastforholdet mellem link-teksten og den omgivende tekst være mindst 3:1. Det er ikke tilfældet her. A

36 A Løsning Sørg for, at der er andre visuelle indikatorer på links ud over farven, såsom understregning og fed skrift. Eller sørg for, at linksene har et kontrastforhold på mindst 3:1 til den omgivende tekst, og at der er andre visuelle signaler, når man peger med en mus eller flytter tastaturfokus til linket. Bemærk at farvekontrastforholdet 3:1 for links, der udelukkende identificeres af farve, skal være målt som tekst mod tekst og ikke som tekst i forhold til baggrund. Brug en af følgende teknikker fra WCAG 2: F73, G183

37 Premiere: Få det testet på rigtige brugere Institut for blinde og svagtsynede har hjulpet os med at stable et ganske særligt brugerpanel af på benene. Konkurrence: Vær det første site der bliver testet

38 Vedligeholdelse af tilgængelighed Det er ikke nok at det virker når det bliver leveret Nyt indhold skal fortsat være tilgængeligt

39 PAUSE (alle & & Co

40 Design

41 Tilgængeligt design Tilgængeligt design = godt design Det handler om at understøtte den gode brugeroplevelse - uanset om brugeren har brug for støtte undervejs

42 Et par eksempler

43

44

45 Hvilket menupunkt er valgt?

46

47 Grundregler

48 Navigation

49 Navigation Fokus (på <tab>) Gælder for: Navigation, inputfelter, knapper og alle andre interaktive elementer. Brugeren skal kunne orientere sig og komme igennem siden på en naturlig måde uden brug af mus.

50 Navigation Eksempel Hvordan er turen gennem DR.dk?

51 Navigation Eksempel Hvordan er turen gennem DR.dk?

52 Navigation Eksempel Hvad med Berlingske.dk?

53 Navigation Skip to content link. Brugeren behøver ikke gå gennem menuen hver gang

54 Navigation Eller en ekstra menu med genveje

55 Navigation Knapper og links En knap skal ligne en knap Links - understreg, hover og fokus

56 Inputelementer Labels på formelementer Ikke labels i feltet

57 Inputelementer Husk at vise fokus

58 Inputelementer Give feedback ved fejl Ikke nok med en farve

59 Typografi

60 Typografi Visuel præsentation Max 80 tegn/linje

61 Typografi Visuel præsentation Aldrig højrestillet

62 Typografi Visuel præsentation Eller centreret...

63 Typografi Visuel præsentation Gør plads til zoom (200% uden at skulle scrolle til siden)

64 Typografi Kontrast Forskel mellem tekstfarve og baggrundsfarve WCAG 2.0 AA siger 4.5:1 (AAA siger 7:1) Større tekst kan afhjælpe en del af problemet

65 Farver

66 Farver Farveblinde - 8% af alle mænd! (0,5% af kvinder) Rød/Grøn er den mest almindelige

67 Farver Sæt labels på farver

68 Farver Sæt labels på farver

69 Farver Sæt labels på farver

70 Case: Fjordforbindelsen Frederikssund

71 Udgangspunktet En simpel designguide Farver Typografi Fokus/værdiord Moderne og enkel Brugervenlig og tilgængelig

72 Designguide

73 Farvetest

74 Udvidet farvepalette

75 Typografi

76

77 Navigation Gruppering af indhold Opret dig til automatisk betaling Til brugere der ikke skal oprette sig Kampagneindgang FAQ Nyheder

78 Tab-order Prioriteret flow gennem siden

79 Tydeligt interaktionsdesign Fortællende labels på knapper og links

80 Tydeligt interaktionsdesign Aktive elementer vises klikbare

81 Tydeligt interaktionsdesign Navigation ligger altid samme sted og opfører sig ens

82 Labels på formfelter

83 Headings foran alle afsnit

84 Kontrast og skriftstørrelser

85 Til frontend

86 Vi sikrer en: Klar heading struktur Logisk <Tab>-order Markering af indhold med ARIA landmarks

87 Links til værktøjer

88 Værktøjer Contrastchecker - contrastchecker.com Farveblind tester - Canvasflip Siteimprove - siteimprove.com WCAG guidelines Wave - wave.webaim.org/extension Funkify - Chrome extention

89 Tak for i dag (husk at aflevere & & Co