Recommended
More Related Content
Featured
Featured (20)
Vegard Haugstvedt - Universelt for alle! Hvordan hele teamet kan ha et forhold til universell utvikling
- 1. UNIVERSELT FOR ALLE! VEGARD HAUGSTVEDT HVORDAN HELE TEAMET KAN HA ET FORHOLD TIL UNIVERSELL UTVIKLING
- 2. 26.10.2016 / 2 1. juli 2014 @IT_VEGARD
- 3. Alle skal med! 26.10.2016 / 3@IT_VEGARD
- 4. Hvilke brukere trenger universell utforming? 26.10.2016 / 4@IT_VEGARD
- 5. Når vi bruker telefonen i sterkt dagslys… 26.10.2016 / 5@IT_VEGARD
- 6. … knekker armen… 26.10.2016 / 6@IT_VEGARD
- 7. … eller blir gammel… 26.10.2016 / 7@IT_VEGARD
- 8. … TRENGER DU OG JEG UNIVERSELL UTFORMING! 26.10.2016@IT_VEGARD / 8
- 9. Verktøykasse for designere • Alltid valider designet ditt • Adobe Photoshop: Color Universal Design (CUD) • Sjekk uu.difi.no • «Mobil først» – flott for universell utforming også! 26.10.2016 / 9@IT_VEGARD
- 10. Personas • Navn: Ola Normann • Alder: 24 • Bosted: Oslo 26.10.2016@IT_VEGARD / 10
- 11. Personas • Navn: Ola Normann • Alder: 24 • Bosted: Oslo • Interesser: – Slalom – Svømming Beskrivelse: «Ola er ute i naturen så ofte han kan. På grunn av en aktiv livsstil har han ofte en brukket arm, fot eller finger.» 26.10.2016@IT_VEGARD / 11
- 12. Verktøykasse for utviklere Kunnskap • Bruk HTML5 • Gjør deg kjent med WAI-ARIA Metodikk • Valider koden med verktøy i nettleseren • Dropp mus når du tester siden 26.10.2016 / 12@IT_VEGARD
- 13. Verktøykasse for testere • Bruk automatiserte verktøy i nettleseren • Test nettsiden uten mus • Bare glem å teste med skjermleser! 26.10.2016 / 13@IT_VEGARD
- 14. Firefox - Fangs 26.10.2016 / 14@IT_VEGARD
- 16. Chrome - Accessibility Developer Tools 26.10.2016 / 16@IT_VEGARD
- 17. Chrome and IE – WAVE 26.10.2016 / 17@IT_VEGARD
- 18. Internet Explorer – Web Accessibility Toolbar • Bra for struktur • Gjør det lett å finne ressurser, tips og verktøy 26.10.2016 / 18@IT_VEGARD
- 20. SPØRSMÅL? TWEET MEG PÅ @IT_VEGARD ELLER SNAKK MED MEG I PAUSEN 26.10.2016 / 20@IT_VEGARD
Editor's Notes
- [10 min] Vegard - Full stack utvikler i Itera, med størst interesse for frontend Rød-grønn fargeblind og jobbet på et av de første store prosjektene som gikk live etter loven om universell utforming trådte i kraft Kommer ikke til å gå inn på de spesifikke reglene, men heller fokusere på hvordan vi kan jobbe for å bake universell utforming inn i hele utviklingsprosessen.
- [9 min] Loven om universell utforming trådte i kraft 1. juli 2014 Sier at alle offentlige og private nettsider og automater som er laget etter den datoen skal være universelt utformet. Eneste unntak er arbeidsverktøy man bare har tilgang til om man er ansatt i bedriften, som intranett, timeføringssystemer og lignende.
- [8 min] Formålet med loven er å sørge for at alle skal kunne delta i samfunnet på like vilkår. Tiden der man måtte tåle at det var steder en ikke kunne dra, boliger man ikke skal kunne kjøpe eller tjenester en ikke kunne bruke er forbi. På samme måte skal nettløsningene vi lager være tilgjengelig for alle.
- [7 min] Normalt tenker vi bare på rullestolbrukere, blinde og døve når vi tenker på universell utforming. Disse har behov for å bruke nettsider uten tastatur, med skjermleser eller såkalt leselist, osv. De er de samme som trenger spesialtilpasninger ute i den fysiske verden. Selv om det er disse som har mest nytte av UU, så vil jeg at dere skal tenke på noen andre grupper også…
- [6 min] Bytt raskt
- [5:50 min] Bytt raskt
- [5:40 min] Bytt raskt
- [5:30 min] … så nyter vi godt av universell utforming. Faktisk trenger du ikke å ha noen som helst begrensninger for å ha hjelp av universell utforming. I rommet her er det utviklere, testere og andre som bruker de samme systemene dag ut og dag inn. Som ekspertbrukere foretrekker mange av oss å bruke tastaturet til å navigere og utføre kommandoer, og dermed er vi helt avhengig av universell utforming. Poenget mitt er at vi alle på et eller annet tidspunkt får nytte av universell utforming, og det bør vi huske på når vi lager løsninger for sluttbrukere.
- [5 min] Som med testing og feilretting er det billigere å bygge universell utforming i en tidlig fase av prosjektet. Designere og de som skal godkjenne designet bør derfor ha UU i tankene fra starten av. Mine tips til designere er: Valider designet ditt – Adobe Color Universal Design er et verktøy for å validere designet du lager i Photoshop. Om du ikke har gjort det før: sjekk ut uu.difi.no – masse tips og god oversikt over regelverket Jeg vil også anbefale å bruke mobile first-tankegangen, da design bygget for touchskjermer som regel fungerer bedre for de med dårlig motorikk også. Og så anbefaler jeg bruk av personas… [forts.]
- [4 min] – [3:40 min] Personas er allerede mye brukt. Du setter et fjes på brukeren, og har dermed en «virkelig» person å tenke på når du designer eller utvikler. Så hvorfor ikke legge til en eller annen grunn til å trenge universell utforming?
- [3:40 min] Her har jeg gitt personasen en aktiv livsstil. Personen er mye ute i friluft og har en over middels sjanse for å brekke noe. Plutselig har vi ankepunkter å tenke på når vi lager løsningen: Den må fungere når Ola er ute i skarpt dagslys og gjerne uten mus eller på mobil med én hånd når han brekker hånden. Slik kan vi ved hjelp av de samme personasene vi allerede har aktualisere behovene knyttet til universell utforming.
- [3 min] For utviklere er det viktigste vi kan gjøre å sette oss inn i reglene vi må følge, samt hvilke teknikker som finnes. Følger vi standardene, så er vi langt på vei. Sett deg derfor inn i HTML5-spekken og WAI-ARIA. Om du ikke vet hva det er, så Google det i pausen. [2:40 min] Men vi må også tilpasse utviklingsmetodikken vår. Jeg anbefaler å jevnlig kjøre en eller annen form for validator i nettleseren. Jeg skal vise eksempler straks. [2:20 min] Og til slutt anbefaler jeg å kutte ut musen fra tid til annen. Bruk tastaturet for å komme deg gjennom skjemaene du lager. For å navigere deg i menyen. Og så videre. Møter du på problemer, så bør du se over koden din.
- [2 min] – [1:15 min] Når det kommer til testing av universell utforming, så har jeg tre tips: Først og fremst: bruk automatiserte verktøy i nettleseren Dette bør være obligatorisk i enhver systemtest/akseptansetest De hjelper deg mye, men tar selvfølgelig ikke absolutt alt. Som for utviklere: Test også uten mus Dropp å teste selv med skjermleser: Du er ikke trent i det, og det vil oppleves mye mer tungvint enn for en blind person som har brukt det i årevis.
- [1:15 min] Begynner å gå tom for tid, men jeg vil bare raskt peke ut noen nyttige verktøy. Fangs er en add-on i Firefox som lar deg se siden slik den blir lest opp av en skjermleser. Selv om det ikke er 100%, så er det et veldig nyttig verktøy for å luke ut feil, og mye bedre enn å prøve en ekte skjermleser.
- [1 min] Et annet verktøy for Firefox er Ainspektor, som lar deg metodisk analysere nettsiden opp mot WCAG-standarden. Gir gode tips til forbedringer til hver enkelt feil.
- [0:50 min] I Chrome kan du bruke en plugin som integreres i DevTool På samme måte som for Ainspector validerer den siden opp mot WCAG-standarden og gir deg graderte tilbakemeldinger.
- [0:40 min] WAVE er enda et verktøy som finnes både for Chrome og IE. Peker ut og markerer feil på selve nettsiden.
- [0:30 min] Og så er det et verktøy som heter Web Accessibility Toolbar for IE. Denne er ironisk nok ikke like god på validering, men er nyttig for å analysere sidestruktur og har også lenker til ressurser for å lære mer.
- (0:15 min) Helt til slutt vil jeg tipse om Blindeforbundet De tilbyr Kurs, workshoper, rådgivning og best av alt Brukertesting med blinde personer. Skal du bli god kommer du ikke utenom «den ekte greien».
- [0:00 min]