Universell utforming er godt håndtverk
•
3 likes•968 views
En presentasjon om universell utforming på web, med utgangspunkt i nye nav.no.
Recommended
Recommended
More Related Content
Similar to Universell utforming er godt håndtverk
Similar to Universell utforming er godt håndtverk (20)
Recently uploaded
Recently uploaded (20)
Universell utforming er godt håndtverk
- 1. UNIVERSELL UTFORMING = GODT HÅNDTVERK ANDERS SKIFTE https://flic.kr/p/fwveVk
- 2. AGENDA • IKT-hjelpemidler • Praktiske tips fra nav.no • Testverktøy
- 3. The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. – Tim Berners-Lee, W3C director and inventor of the world wide web
- 5. ACCESS GRANTED WELCOME TO PARADISE "Success Kid" Photograph (c) Laney Griner / Used with Permission
- 16. Hook iPod Switch Access http://www.liberator.co.uk/hook-ipod-switch-access.html
- 18. 6X
- 19. JAWS VoiceOver NVDA Window-eyes SuperNova
- 20. %?
- 21. 0AT 0a11y API Browser Google Analytics
- 22. 1000
- 23. 3000
- 24. 10000
- 25. FEM TIPS ——
- 26. 1
- 27. Overskrifter Søk i side Lenker Landemerker Les alt Foretrukket metode for å finne ønsket informasjon i en innholdsrik side 66% 10% 15% 3%7%
- 28. Veldig nyttig Nyttig Ikke spesielt nyttig Unyttig Vet ikke Når du navigerer vha overskrifter, hvor nyttige er da overskriftsnivåene? 48% 12% 35% 4%2%
- 32. 3 FARGE OG KONTRAST ———— https://flic.kr/p/FEjQW
- 36. 4
- 37. Start with the small screen first, Then expand until it looks like shit. Time for a breakpoint! Stephen Hay
- 39. 1em = 16px
- 40. 1em = 32px
- 41. 1em = 64px
- 42. WAI-ARIA —— Gir skjermleseren beskjed om endringer i grensesnittet Kan overstyre semantikk 5
- 43. WAI-ARIA IS MY SECRET INGREDIENT
- 44. ARIA LANDMARKS <nav role="navigation"> <main role="main"> <form role="search"> <aside role="complementary"> <footer role="contentinfo">
- 50. open.bekk.no
- 52. Takk for oppmerksomheten! @skifte anders.skifte@bekk.no
Editor's Notes
- Photo: https://flic.kr/p/fwveVk
- Bakteppe for alt vi gjør. Internettets styrke er at det er universelt. Tilgjengelighet for alle er essensielt, uavhengig av funksjonsevne. FN-konvensjonen: Basic human right
- Access denied! For mange er dette virkeligheten. Hva om dette var hva du så, eller følte hver gang du åpnet en nettside? Fundamentalt galt. Ikke det som er meninga med weben. Photo: https://www.flickr.com/photos/jakecaptive/140456336/ https://flic.kr/p/dpSLY
- Welcome to paradise! Her vil vi være. Internett fjerner barrierer som mange ellers møter i det fysiske rom. Internett er for alle. Alle skal få. Men Hvor starter en for å komme hit? Success kid Photograph (c) Laney Griner https://www.flickr.com/photos/sammyjammy/1285612321/. Used with permission.
- Bevisstgjøring og busting av myter. #FiveWordTechHorrors
- Bevisstgjøring og busting av myter. #FiveWordTechHorrors
- Bevisstgjøring og busting av myter. #FiveWordTechHorrors
- Bevisstgjøring og busting av myter. #FiveWordTechHorrors
- Bevisstgjøring og busting av myter. #FiveWordTechHorrors
- Bevisstgjøring og busting av myter. #FiveWordTechHorrors
- Bevisstgjøring og busting av myter. #FiveWordTechHorrors
- Ok, alle er på nett. Men hvorda bruker de nettet? Assistive tech: Gjør livet enklere for funksjonshemmede. I tillegg til mus, trackpad og touch har vi ..
- One hand keyboard http://www.maltron.com/media/hi-res/right_hand_single/rh_single_in_use2.jpg
- Head stick + keyboard http://www.maltron.com/media/hi-res/head_mouth_stick/hm_stick_in_use1.jpg
- En enkelt knapp for å bruke iPhone / PC. Kan ha flere knapper. Brukes til Playstation osv. Hvorfor relevant? Keyboard events også på mobil / touch! Fokus-stiler etc.
- Hodemus & eye/gaze tracking, styrer alt med hode / øyne http://www.tobii.com/en/footer-pusher/group-footer/news-media/#/latest_media/tag/assistive-technology-solutions
- 6x skjermforstørring på 15 mac, retina. Flere forstørrer opp til 16x. Da ser du 1/16 av skjermen. Viktig at ting som logisk hører sammen, står nærme hverandre (input og submit / feilmelding, overskrift og brødtekst etc)
- Hva hvis en er blind? Hva er en skjermleser? Kobler seg på browserens Accessibility API. Text to speech. Ymse kompatibilitet med browser. + GOOGLE
- Mange hjelpemidler. Omfang: Hvem og hvor mange tilrettelegger vi for? Hvor stor andel av de besøkende bruker en slags form for hjelpemiddel? Og hvilke hjelpemidler? Ikke enkelt å tracke —>
- Skjermleseren kjører i OS-et, det er ikke en egen browser. Teknisk mulig å tracke de ved å f.eks lytte på kjente tastekombinasjoner. Men: Personvernissues? NOE kan vi uansett tracke —>
- Omtrentlig for én mnd. 20% av focus events på skip links kommer fra mobil. Brytere i bruk?
- Mange får lest opp innhold. Lesevansker? Fremmedspråklig? Svaksynt? Glemt briller?
- Flere trykker høykontrast - Til tross for at nav.no i utgangspunktet har veldig bra kontraster.
- Fem tips! UU = UX og godt håndtverk! Fem tips.
- Bruk HTML5, og bruk det ordentlig! Gir et bedre utgangspunkt for å lage tilgjengelige nettsider. Bruk semantisk og korrekt HTML. Overskrifter. Knapp vs lenke. Også bra for SEO.
- Webaim screen reader survey 2014. Økt bruk av overskrifter (71% av ekspertbrukere)
- Ikke velg overskrift etter hvordan de ser ut, men utfra semantisk betydning. http://webaim.org/projects/screenreadersurvey4/#finding
- Tilrettelegg for bruk av tastatur! Alt som har onclick handlers / mouseover må kunne nås fra tastatur. Photo: https://flic.kr/p/8eoDkK
- :focus Annet triks for å sjekke struktur og naturlig TAB-rekkefølge —>
- Se siden uten CSS. Gir strukturen mening? Enkelt å se TAB-rekkefølge / tabindex + generell struktur på innhold HTML: Struktur, rekkefølge, viktigste først. Vises her slik en skjermleser og søkemotor i utangspunktet «ser» siden.
- Vær obs på farger og kontraster! 8% av norske menn sliter med fargesyn. Aldri basere seg kun på farge som virkemiddel for å skille ting fra hverandre. Photo: https://flic.kr/p/FEjQW
- Noen som ser et problem med lenka? Understreking på lenker, farger er ikke nok. Kan gjøres unntak for samlinger av lenker i menyer o.l.
- Slik kan det se ut hvis dårlig kontrastsyn / fargesyn
- Husk Understreking på lenker I “løpende tekst”, å skille ting fra hverandre vha farger er ikke nok.
- Vær responsiv! Tilgjengelig på alle flater. Samme side - ikke forskjellige sites per device, som m.domene.no osv. Fort gjort å henge seg opp i spesifikke skjermstørrelser. Ikke smart —>
- Ikke ta utgangspunkt i en spesifikk skjermstørrelse, men brekk om der det trengs. Future friendly! Vi vet ikke skjermstørrelse på framtidens devicer (Apple watch, iPhone 6, iPhone 6 plus). RWD er mye mer enn «ombrekking». Mange glemmer å tilrettelegge for dynamisk font! Relative enheter —>
- OBS! Bredder og media queries satt i px, og font i EM, kan gi utfordringer slik som her. Her er det 100% økning i fontstørrelse. 1em blir dobbelt så stor. 1px er fortsatt 1px. Hvordan løse? Bare bruke px? Bruke relative enheter til alt!
- 1em = 16px, default.
- 1em = 32px (100% økning), samme skjerm/vindusbredde
- 4 x forstørring.1em = 64px! Bruk EM til alt! Alt baseres på font size. Alt skalererer smooth. Forstørrer en nok, trigges mobil layout. Ikoner er PNG, og forstørres ikke. Kan løses med SVG og background-size.
- Web Accessibility Initiative - Accessible Rich Internet Applications W3C Overstyre semantikk: «Lurer» skjermleseren til å f.eks lese opp en <div> som en knapp. Bruk heller native HTML på en ordentlig måte! Det meste kan styles med CSS.
- ARIA kan ses på som den krydderhylla en trenger når oppskrifta i WCAG og råvarene fra HTML ellers ikke strekker til for å gi en kulinarisk opplevelse. Photo: http://pixabay.com/hu/megjel%C3%B6l%C3%A9s-fekete-ikon-%C3%A9lelmiszer-29205/
- Enkle ting! Muliggjør alternativ måte å navigere på. Overlapper med HTML5. Kan dra på med mer avanserte greier også (ARIA states)
- Mer avansert ARIA Demo starter rett på «aria states» - VO sier «minimert popupkobling», ref kode, når den er lukket - Går ned i lenkene og opp igjen - Dropdown leses nå som «utvidet popupkobling». Åpner den et par ganger - følg med på kodeendringene til høyre.
- I tillegg til brukertest o.l _er_ det mye manuell teknisk testing og verifisering, men noe kan også testes automatisk. Verktøyene blir bedre og bedre.
- Byggeskjerm hos NAV - flere testverktøy kjører mot nav.no. Blant annet Chrome accessibility dev tools, Totalvalidator og HTML-inspector. * Noen som ser et problem med skjermen her? Evt ikke ser det?
- Tenon.io - Javascript friendly! Eget API. Helt nytt og veldig lovende testverktøy (beta).
- WCAG contrast checker
- Mer om UU og nav.no på open.bekk.no
- To veldig gode utgangspunkter for å lære mer om universell utforming generelt. a11yproject.com og uu.difi.no.