Teknisk fordypning Torbjørn Helland Solhaug Twitter:

Presentasjon om: "Teknisk fordypning Torbjørn Helland Solhaug Twitter:"— Utskrift av presentasjonen:

1 Teknisk fordypning Torbjørn Helland Solhaug torbjorn@funkanu.se torbjorn@funkanu.se Twitter: @solhell@solhell

2

3 Kategorier innen UU på skjerm ► Teknikk Pedagogikk Innhold PDF Flash Web-TV Publiseringsverktøy Revisjonens ulike deler

4 Utgangspunktet for Funkas revisjon WCAG 2.0 www.w3.org/TR/WCAG20/ www.w3.org/TR/WCAG20/ WAI-ARIA www.w3.org/TR/wai-aria/ www.w3.org/TR/wai-aria/ Vår lange erfaring

5 WCAG ikke nok Sterk på teknikk, svakere på pedagogikk og nesten fraværende på innhold Omtaler ikke bruk av mus eller flerpekeskjerm Praktisk testing nødvendig

6 Hva er Design for alle?

7 Grunnkonstruksjonen Bruk teknikker med støtte for UU Bruk korrekt kode Bruk effektiv kode Skill mellom innhold (HTML) og presentasjon (CSS)

8 Grunnkonstruksjonen T1 – Kodekvalitet a)Dokumenttype er korrekt angitt

9 Grunnkonstruksjonen T1 – Kodekvalitet b)Tegnsett er korrekt angitt

10 Grunnkonstruksjonen T1 – Kodekvalitet c)HTML-koden validerer korrekt mot angitt standard http://validator.w3.org/ 100 sider om gangen (ikke HTML5): http://www.htmlhelp.com http://www.htmlhelp.com

11 Grunnkonstruksjonen T1 – Kodekvalitet d)CSS-koden validerer korrekt http://jigsaw.w3.org/css-validator/

12 Grunnkonstruksjonen T1 – Kodekvalitet e)HTML- og CSS-koden bør være kortest mulig

13 Grunnkonstruksjon T2 – Separasjon av innhold og design a)Layouttabeller benyttes ikke

14 Grunnkonstruksjon T2 – Separasjon av innhold og design b)CSS brukes for all presentasjon

15 Grunnkonstruksjon T2 – Separasjon av innhold og design c)CSS- og HTML-koden er separert.ikkeslik { font-family: Verdana, Geneva, sans- serif; } <div style="color:... <p style="size:...

16 Grunnkonstruksjon T2 – Separasjon av innhold og design d)Innholdet er organisert slik at det er lesbart uten CSS

17

18 Grunnkonstruksjon T2 – Separasjon av innhold og design e)Dekorasjonsbilder bør være plassert i CSS-koden #navigation { background: url(cssimg/bg_navigation.gif) #BF2600 0px 100% repeat-x; }

19 Grunnkonstruksjon T3 – Grensesnittets fleksibilitet a)Nettstedet er fullt brukbart og lesbart ved forstørring

20 Grunnkonstruksjon T3 – Grensesnittets fleksibilitet b)Grensesnittet fungerer bra i ulike skjermbredder

21

22 Grunnkonstruksjon T4 – Rammer a)Rammer får bare brukes dersom det finnes spesielle årsaker

23

24 Grunnkonstruksjon T4 – Rammer b)Formålet til hver ramme er beskrevet i attributtet title

25 Grunnkonstruksjon T4 – Rammer c)Ved bruk av nettlesere som ikke støtter rammer, får brukeren informasjon om hvorfor det har oppstått et problem og hva brukeren ellers kan gjøre Nettleseren din støtter dessverre ikke rammer...

26 Script Bruk script for å øke brukernytten Grunnleggende funksjonalitet må fungere uten script Tydelig info ved manglende støtte Må fungere med hjelpemiddel Supplér med WAI-ARIA

27 Script T5 – Komplekse teknikker (Script, Flash m.m.) a)Komplekse teknikker som Java, Flash og script benyttes for å øke brukerverdien

28 Eksempel: Script T5 – Komplekse teknikker b)Om en kompleks teknikk benyttes, finnes også relevant hjelp eller informasjon dersom den aktuelle teknikken ikke støttes Du har ikke javascript! Bra informasjon i feilmeldinger

29

30

31

32 Script T5 – Komplekse teknikker (Script, Flash m.m.) c)Bruk av komplekse teknikker skaper ikke problemer for brukere med hjelpemiddel

33 Script T5 – Komplekse teknikker (Script, Flash m.m.) d)Når nye elementer legges inn i siden, skal de plasseres på rett plass både visuelt og strukturelt i DOM

34 Script T5 – Komplekse teknikker (Script, Flash m.m.) e)Bruk WAI-ARIA attributter for å forbedre opplevelsen med skjermlesere

35 Støtte i skjermlesere 2014

36 Script T5 – Komplekse teknikker (Script, Flash m.m.) f)Grunnleggende funksjoner som menyer og søk skal fungere uten komplekse teknikker

37 Menyer og navigasjon Kunne bruke mus, tastatur og berøringsskjerm Logisk tab-rekkefølge Synlig fokus med mus og tastatur Store klikkeflater Snarveier for tastaturnavigering

38 Menyer og navigasjon T6 – Navigasjon a)Brukeren kan velge fritt mellom mus og tastatur for navigasjon

39

40 Menyer og navigasjon T6 – Navigasjon b)Tab-rekkefølgen er logisk

41

42 Menyer og navigasjon T6 – Navigasjon c)Fokus er visuelt tydelig når brukeren flytter seg med tastaturet og musen a:hover { border-bottom: 0.5em solid #bdbdbd; } a:focus{ border-bottom: 0.5em solid #bdbdbd; }

43

44 Menyer og navigasjon T6 – Navigasjon d)Klikkbare flater er tilstrekkelig store

45 Eksempel: Menyer og navigasjon T6 – Navigasjon e)Nye vindu og dekkende lag åpnes ikke uten at brukeren har valgt å gjøre det Reklame rett i fleisen

46 Eksempel: Menyer og navigasjon T6 – Navigasjon f)Når et dekkende lag åpnes får brukeren direkte fokus på relevant sted i dette laget h)Snarveier finnes for å muliggjøre raskere navigering med tastaturet Registreringsskjema i lightbox Snarvei til innhold

47 Menyer og navigasjon T6 – Navigasjon g)Lenkegrupper og informasjonsområder er gruppert

48 Menyer og navigasjon T6 – Navigasjon i)Det bør finnes hurtigkommandoer for navigering

49 Menyer og navigasjon T7 – Automatiske hendelser a)Automatiske oppdateringer av sider brukes bare om det finnes særskilte årsaker b)Automatisk videresending av besøkere skjer ikke på klientsiden c)Tidsgrenser benyttes bare om det finnes spesielle årsaker d)Om automatiske hendelser eller tidsgrenser brukes, varsles brukeren om dette, og det bør finnes en mulighet til å forlenge tidsintervallet

50

51

52 Menyer og navigasjon T7 – Automatiske hendelser e)Om automatisk utlogging brukes, skal om mulig data som brukeren har fylt inn, lagres og finnes igjen når brukeren logger inn neste gang f)Om et område oppdateres uten at siden lastes om bør dette være markert med WAI-ARIA attributtet aria-live

53 Eksempel: Skjemaer og e-tjenester T8 – Skjemaer skal være korrekt konstruert a)Ledetekster er knyttet til respektive skjemaobjekt, og redegjør tydelig for skjemaobjektets funksjon b)Seksjoner i skjemaer er gruppert Etikett ikke kodet som etikett Etikett uten kobling

54 Skjemaer og e-tjenester T8 – Skjemaer skal være korrekt konstruert c)Skjemalignende objekt er konstruert med teknikker for skjema

55 Struktur T9 – Bruk riktig element til rett formål a)Overskriftselement brukes for å formidle dokumentets informasjonsstruktur med korrekt hierarki

56 Struktur T9 – Bruk riktig element til rett formål b)Lister er korrekt kodet og brukes på rett måte

57 Struktur T9 – Bruk riktig element til rett formål c)Avsnitt er laget med elementet p og brukes på rett måte

58 Struktur T9 – Bruk riktig element til rett formål d)Sitat er markert med q eller blockquote e)Forkortelser og akronymer er forklart med henholdsvis abbr og acronym

59 Struktur T10 – Datatabellers konstruksjon a)Tabelloverskrifter identifiseres ved hjelp av th og caption Folkemengde, etter alder. Per 1. januar

60

61 Struktur T10 – Datatabellers konstruksjon b)Avanserte tabeller forklares kort med hjelp av attributtet summary c)Tabellceller anvendes utelukkende for tabelldata

62 Struktur T10 – Datatabellers konstruksjon d)Komplekse tabeller kompletteres med relevant kode Ryk og Reis Airlines Ingen avgang

63 Lenker T11 – Lenkers funksjon og beskrivelse a)Lenker er konstruert slik at de er fremtredende uavhengig av innstillinger i nettleseren

64

65 Lyd, bilde og komplekse medieformat T12 – Bruk ulike format til det de er tenkt å brukes til a)Tekst presenteres som tekst, ikke som bilder av tekst

66

67 Lyd, bilde og komplekse medieformat T13 – Beskrivelser av bilder a)Likeverdige tekstbeskrivelser finnes for alle meningsbærende grafiske element på nettstedet

68 Lyd, bilde og komplekse medieformat T13 – Beskrivelser av bilder b)Bildekart er klientbaserte, og har tekstbeskrivelser både for lenker og for bilder

69 Lyd, bilde og komplekse medieformat T14 – Håndtering av lyd a)Informasjon som presenteres som lyd er forklart i tekst b)Bakgrunnslyd kan enkelt stenges av manuelt, eller avsluttes automatisk innen 3 sekunder

70 Lyd, bilde og komplekse medieformat T15 – Håndtering av komplekse medieformat (PDF, Flash etc.) a)Det finnes en passende tekstbeskrivelse av materiale i komplekse format i tilknytning til dette materialet b)Materiale som presenteres med komplekse medieformat har blitt tilgjengelighetssikret

71

72 Visuell presentasjon T16 – Farger og kontraster a)Brukerens evne til å oppfatte ulike farger påvirker ikke forståelsen av innholdet

73

74 Visuell presentasjon T16 – Farger og kontraster b)Forgrunns- og bakgrunnsfarger gir til sammen tilstrekkelig kontrast

75

76 Visuell presentasjon T16 – Farger og kontraster c)Nettstedet blokkerer ikke brukerens mulighet til å gjøre egne innstillinger for farger og skrifttype i nettleseren

77 Visuell presentasjon T16 – Farger og kontraster d)Tekst bør ikke presenteres mot bakgrunn som skifter i farge eller nyanse

78 Eksempel: Visuell presentasjon T17 – Bevegelser i grensesnittet a)Nettstedet presenteres uten forstyrrende skjermflimmer, og uten bevegelige og blinkende elementer som ikke kan stoppes Karusell som ikke stopper

79 Informasjon og hjelp T18 – Beskrivelse av sider a)Sidene har unike og relevante sidetitler

80 Informasjon og hjelp T18 – Beskrivelse av sider b)Metadata består av informasjon som har betydning for siden og nettstedet <meta name="keywords" <meta name="description" <meta name="DC.Title"

81 Informasjon og hjelp T18 – Beskrivelse av sider c)Sidens hovedspråk er angitt i koden

82 Informasjon og hjelp T18 – Beskrivelse av sider d)Språk som avviker fra sidens hovedspråk angis

83 Informasjon og hjelp T18 – Beskrivelse av sider e)Forklaringer for hvordan funksjoner skal håndteres må være koblet sammen med funksjonen det gjelder

84 Responsive Design og uu

85 Universell utforming betyr Design for alle Ta utgangspunkt i de som har det vanskeligst Ta menneskers ulikheter i betraktning Lage 1 løsning som fungerer for ALLE

86 Responsive design betyr Design for alle (ulike enheter) Lag det slik at det fungerer for de med de enkleste enhetene Lag 1 løsning som fungerer for ALLE Kombineres ofte med progressiv forbedringprogressiv forbedring

87 Her er det likheter som vi bare må ivareta!

88 12 3 4 56 7

89 12 3 4 5 6 7 6

90 1 2 3 4 5 6 7 6 5 http://www.responsinator.com/

91 Utfordrende områder Sidehode Navigasjonen Størrelse vs. Plass Tekst Innmating

92 Sidehode

93

94

95 Navigasjonen

96

97

98

99

100

101

102

103 Størrelse vs. Plass

104 Tre ganger så mange synes at det er vanskelig å klikke på et objekt på websider, enn de som synes at det er vanskelig å klikke på et objekt i apps, i mobilen

105

106

107 Tekst

108

109

110 Innmating

111

112 Opprinnelig er Responsive Design bra, men vi står overfor mange utfordringer

113 Pass på å… Prioritere, spesielt i sidehode Tenke igjennom navigasjonskonseptet Ikke la objektene bli for små og ikke høyrejuster Skjul, men ikke fjern Minimere innmatingen 1 løsning for ALLE

114 HTML5

115 HTML5 og uu Varierende støtte i nettleserne – www.html5test.comwww.html5test.com Varierende tolking av hvordan HTML5 skal brukes Hjelpemidler ikke oppdatert til å håndtere de nye elementene

116 Bra i HTML5 Flere input-typer Større muligheter for å strukturere Støtter WAI-ARIA Støtter video og lyd Bedre støtte for utvikling rettet mot mobile enheter

117 Problemer med HTML5 Krever ofte fallback grunnet manglende kompatibilitet Elementene Article og Section skaper krøll med overskriftsnivåer for opplesende hjelpemidler Se også http://blog.paciellogroup.com/2012/08/not es-on-html5-accessibility-support-in-ie-10/ http://blog.paciellogroup.com/2012/08/not es-on-html5-accessibility-support-in-ie-10/

118 WAI-ARIA Accessible Rich Internet Applications

119 Eksempler: Hva er ARIA Økt tilgjengelighet i RIA: Landmarks Navigation, Search, Main Live regions Off, Polite, Assertive, Rude Aria-controls Assosiere en kontroll med et område WAI-ARIA

120 Eksempler: Hva er ARIA Aria-describedby Assosiere en beskrivelse med et område Role: Alert For meldinger som dukker opp Role: Alertdialog For meldinger som dukker opp og krever et valg WAI-ARIA

121 Å skjule objekter visibility:hidden display:none Aria-hidden left: -20000px;

122 Oppdateringer Varsle brukeren Viktig <> mindre viktig Visuelt Lyd? Informasjon?

123 HTML5 og WAI-ARIA HTML5 elementWAI-ARIA role articlemain footercontentinfo headerbanner navnavigation Tanken er at HTML5 skal erstatte WAI-ARIA

124 HTML5 og WAI-ARIA Kombiner HTML5 og WAI-ARIA Eksempel: Bruk elementet nav i html 5 og legg rollen/landmerket "navigation" direkte i nav-elementet.

125 Progressiv forbedring Innhold og navigering først – HTML Tilpassing av presentasjon og navigering for ulike plattformer – CSS Tilleggsfunksjoner for å forbedre brukeropplevelsen – RIA/ARIA

126 Tips og triks Validering av kode – WDG HTML Validator WDG HTML Validator Verktøy for sjekk av nettsteder – Accessibility Toolbar (IE) Accessibility Toolbar (IE) – Accessibility Evaluation Toolbar (Firefox) Accessibility Evaluation Toolbar (Firefox) – Web Developer Toolbar (Firefox) Web Developer Toolbar (Firefox) Evaluering av farger – Color Contrast Analyser Color Contrast Analyser Opplesende hjelpemiddel – JAWS 14.0 JAWS 14.0 Eksempel WAI-ARIA – http://test.cita.illinois.edu/aria/index.php http://test.cita.illinois.edu/aria/index.php Eksempel Ajax – www.oaa-accessibility.org/examples/ www.oaa-accessibility.org/examples/ Lesestøtte – Talende Web Talende Web

127 Det finnes ingen gjennomsnittsbrukere