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
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%
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.