Een ander perspectief (presentatie Drupal Jam 2014)

2 mei 2014 Een ander perspec+ef: een goed bruikbare site volgens al je bezoekers Drupal Jam 2014 1. 
2. 
3. 
4. 
5. 
Voor wie maak je een website? Perspec=ef Bouwkwaliteit & seman=ek Testen Vakmanschap & impact Voor wie maak je een website? Internetgebruikers… Gemiddelde bezoeker •  Senioren •  Op tablets en mobiele telefoon • 
• 
• 
• 
• 
•  opkomst Mobile Only users •  verschillende devices Lage bandbreedte / datalimiet Geen muis Beperkte computervaardigheden Allochtonen Beperkende omstandigheden (geen muis, geluid, laatste plugins etc.) •  Func=ebeperkingen: § 
§ 
§ 
§ 
Slechthorenden en doven Blinden en slechtzienden Cogni=eve beperking Motorische beperking •  Gebruikers met zoekmachines •  Taakgericht, haast All ability is temporary De bezoeker wordt overschat… ‘internetvaardigheden van Nederlanders 'zorgwekkend’. Bron: Internetvaardigheden zorgwekkend laag, Trouw, 2010. ‘Nederlander verprutst 8% werk=jd aan ICT-‐
problemen en gebrekkige digitale vaardigheden’. Bron: Universiteit Twente over rapport Ctrl Alt Delete door Alexander van Deursen en prof. dr. Jan van Dijk 2012 Digitale toegankelijkheid •  Je maakt webpagina’s voor iedereen •  Bruikbaar voor mensen in het slechtste scenario Cijfers: mensen in Nederland met een func+ebeperking Aantal mensen met een handicap Mensen met een func=ebeperking Totaal 25% Bron: Microsoa Nederland Voor wie? Onder andere voor: •  238.000 slechtzienden •  78.000 blinden •  700.000 kleurenblinden (1 op de 12 mannen) •  1.300.000 doven en slechthorenden •  825.000 dyslec=ci •  1.500.000 mensen met een lichamelijke beperking •  1.500.000 laaggelecerden • 
• 
• 
• 
• 
• 
7 miljoen tabletgebruikers 8,5 miljoen smartphonebezicers voor iedereen 2,7 miljoen 65+-‐ers Groeiend aantal ‘Mobile Only users’ Iedereen gebruikt zoekmachines. En die zijn blind. Mensen met oudere computers / niet laatste plug-‐ins De lat moet hoger •  Meeste websites toegankelijkheidsproblemen •  Geen of weinig aandacht voor toegankelijkheid bij opleidingen •  ‘Niemand heea me dit verteld’ •  Als je beter weet kun je beter doen Drupal Na statement moet de lat hoog blijven liggen. Basis goed betekent nog niet dat het nu geregeld is of blija . Perspec=ef Zorg voor toegankelijkheid als default De hoog contrastknop. Toegankelijkheid is niet default. Het ‘mag’, maar: •  Mensen moeten eerst zoeken en ac=e ondernemen om site bruikbaar te maken •  Waarom niet bruikbaarheid voor iedereen als default? •  Draai het eens om: een toegankelijke site met een knop rechtsboven voor een designersversie (?!) Bruikbaarheid Het gaat niet om: •  Jouw voorkeuren •  Jouw vaardigheden •  Jouw vermogens •  Jouw mening En ook niet om die van je collega’s. Mijn mening doet er ook niet toe. Ander perspec+ef, betere site •  Gebruik niet je zelf als uitgangspunt •  Kijk vanuit verschillende bezoekers naar de site •  Toegankelijkheid en bruikbaarheid •  Ontwerp en ontwikkel device-‐onakankelijk niet: bij mouseover verschijnt een tool=p…. Toegankelijkheidsop+es breder gebruikt Bouwkwaliteit & seman=ek Kijk anders naar een pagina: Wat als je de pagina niet kan zien of ‘niet-‐standaard’ bedient? •  Betekenis •  Seman=ek •  Werkt het? Pagina+tel en koppenlijst Pagina=tel: Paspoort – Gemeente Haarlem Linklijst Waar gaat deze pagina over? Pagina=tel: Internet -‐ Algemeen h2: Hoofdmenu h2: Pagina inhoud h1: Algemeen h3: Quicklinkvlak3 •  Een kop moet beschrijvend zijn (wat valt eronder?) •  Koppenoverzicht: inhoudsopgave van pagina •  Logische volgorde koppen •  Een kop moet een ‘echte kop’ (h1-‐ h6) zijn •  Tekst die slechts vet is, komt niet in een koppenoverzicht Linktekst: waar kan ik naar toe? Linktekst: waar kan ik naar toe? Ga uit van bruikbaarheid voor iedereen Te laag contrast om goed bruikbaar te zijn voor alle mensen en verschillende situa=es. Link? Nee, er zijn geen echte links. <div class="bl-‐box js-‐open" data-‐
=tle="Cultuur aan huis" data-‐
type="ItemText" data-‐id="69"> <h2 style="font-‐size: 40px;"> Cultuur aan huis</h2> </div> Niet bruikbaar met toetsenbord en niet voor alle hulpapparatuur. Maak het bruikbaar voor mensen zonder muis of touchscreen… (video toetsenbordbediening) Zorg voor omzeilende links (demo) Voorkom een toetsenbordval (demo) Zorg voor mogelijkheid tot pauzeren zodat de bezoeker alle content kan gebruiken (demo) Help de bezoeker … •  De 404 kan de 1ste pagina zijn die de bezoeker ziet… •  Beschrijvende koppen en labels •  Zorg voor foutmeldingen die voor iedereen duidelijk zijn •  Zorg ook bij foutmeldingen voor goed contrast Informa=e moet ook duidelijk zijn als je kleur niet kan onderscheiden Maak formulieren goed bruikbaar •  Afwijkend formaat •  Instruc=e is weg op moment dat je er op klikt Wat je moet doen •  Gebruik waar mogelijk standaard HTML •  Breng structuur en rela=es aan •  Gebruik HTML-‐elementen en –acributen waarvoor ze bedoeld zijn •  Pas op met het verbergen van informa=e •  Maak ‘niet-‐tekstuele content’ toegankelijk: aveeldingen, video, kaarten, iconen •  Testen Testen Testen Meer dan: Of het werkt op verschillende devices en met verschillende browsers Ga testen! En blijf testen! Quickwins 1.  Test op toetsenbordtoegankelijkheid 2.  Goede alterna=eve teksten bij aveeldingen met betekenis en aveelding als link 3.  Meet contrast, ook bij foutmeldingen 4.  Onderzoek of de koppen een goede inhoudsopgave van een pagina vormen 5.  Onderzoek links en knoppen 6.  Haal parsefouten uit de code 7.  Gebruik HTML Code Sniﬀer 8.  Probeer eens een screenreader uit of vraag iemand om een demonstra=e Testen en impact •  Het vooraf testen en repareren van modules kan grote impact hebben op bruikbaarheid van veel sites •  Wees blij met kri=ek •  Trek zelf aan de bel als: •  je ziet dat het niet goed zal werken •  je ziet dat het contrast niet goed is •  je door testen weet dat er problemen zijn (feiten) •  1 persoon kan heel veel impact hebben Er is meer! •  WCAG 2.0 en Webrichtlijnen versie 2 •  Richtlijnen zijn middel voor bruikbaarheid •  Helpt bij sturen op bruikbaarheid voor brede groep •  Conformance voor (semi-‐)overheden verplicht (Webrichtlijnen) •  Europese regelgeving in voorbereiding (WCAG) •  Verplicht •  Alle succescriteria •  ‘Pas toe of leg uit’ vaak verkeerd begrepen •  Verantwoording en inzicht geven wordt belangrijker Testen: het hele plaatje • 
• 
• 
• 
Test vroeg en doorlopend Alle succescriteria van de richtlijnen Uitgebreid testen vraagt veel kennis en =jd Tools helpen, maar geven geen kant-‐en-‐
klaar antwoord of het hele plaatje. Niet nu, niet straks. •  Wordt een expert of schakel een expert in. •  Documenteer Vakmanschap & impact van vakmanschap Vakmanschap en impact •  Kleine veranderingen kunnen een grote impact hebben op bruikbaarheid •  Als het niet werkt voor je gebruikers is het SLECHT (ook voor je organisa=e) •  Bruikbaarheid: Kan oma, de buurvrouw of die vriend van je vader het gebruiken? •  Ga uit van het slechtste scenario voor je bezoekers •  Richtlijnen helpen je! Mooi werk •  Toegankelijkheid is basiseis kwaliteit: eerst werkend, dan live •  Deel je kennis en oplossingen •  Wees pleitbezorger van bruikbare sites voor iedereen •  Hiermee help je zowel de bezoeker als de organisa=e •  Hiermee voldoe je aan verplich=ngen •  Jouw werk maakt zelfstandigheid en par=cipa=e van andere mensen mogelijk… Jij kan het feestje maken… •  Bart is blind en kan een stemwijzer invullen en uitzoeken waar het stembureau is •  Jelle is kleurenblind en weet wanneer de groene container aan de straat moet •  Mevrouw de Boer is 86, maar kan zelfstandig haar ﬁnanciën en belas=ngen regelen op haar tablet •  Joni is doof, maar kan de uitzending op het internet terugkijken met onder=teling •  Zeleb kan met een desktop en toetsenbord producten bij het online warenhuis bestellen •  Vince is monteur en kan makkelijk een auto op een andere naam zecen. Bruikbaar volgens al je bezoekers SamenvaUng 1.  Neem niet je zelf als norm. 2.  Leg de lat hoger: Als het niet werkt voor bezoekers is het SLECHT (ook voor je organisa=e). 3.  Blijf alert. Test op toegankelijkheid (start met het toetsenbord). 4.  Hanteer zelf toegankelijkheid als basiskwaliteitseis. 5.  Met vakmanschap maak je een website bruikbaar volgens alle bezoekers. Vragen? Iacobien Riezebosch iacobien.nl @iacobien [email protected] Een ander perspec+ef: een goed bruikbare site volgens al je bezoekers © Iacobien Riezebosch, 2014 Copyright aVeeldingen: Iacobien Riezebosch, 2010 -‐2014. Behalve: •  Openingsdia, een ander perspec=ef: Glued in Firenze -‐ Forced Perspec=ve door Chris=aan Triebert hcps://www.ﬂickr.com/photos/chris=aantriebert/2975069958 •  Slide Internetgebruikers: Silhoueces door Dwayne Bent: hcp://www.ﬂickr.com/photos/zengei/6235887145/ •  Slide All ability is temporary: Wai=ng For High Tide door Koshy Koshy hcps://www.ﬂickr.com/photos/kkoshy/8515458550 •  Slide De bezoeker wordt overschat Knight-‐Crane Convergence Lab door Knight-‐Crane Convergence Lab hcp://www.ﬂickr.com/photos/knigh~ounda=on/6242015486/ •  Slide Er is geen gemiddelde bezoeker: Serie Oﬃce 09 door Fabrizio SalveÄ hcps://www.ﬂickr.com/photos/fabrisalveÄ/324278896Slide •  Digitale toegankelijkheid, cijfers en voor wie: Equal rights door Kate Hiscock hcps://www.ﬂickr.com/photos/slightlyeverything/8595027459 •  Slide De lat moet hoger: Womens High Jump door Phil McElhinney: hcps://www.ﬂickr.com/photos/philmcelhinney/452585754 •  Slide Bruikbaarheid: Café con leche – Milchkaﬀee door Mar=n Fisch hcps://www.ﬂickr.com/photos/marﬁs75/2939337382 •  Slide Ander perspec=ef, betere site: Empire State Pigeon door ZeroOne hcps://www.ﬂickr.com/photos/villes/2865833414 •  Slide: Linktekst waar kan ik naar toe: PATOLA CONNECTION door whologwhy hcp://www.ﬂickr.com/photos/hulagway/6020190512/ •  Slide Help de bezoeker: Helping Hand door Tomas Sobek: hcps://www.ﬂickr.com/photos/tomas_sobek/13005774895 •  Slide Wat je moet doen Scacered puzzle pieces next to solved fragment door Horia Varlan hcps://www.ﬂickr.com/photos/horiavarlan/4273913228 •  Slide Testen: Watching Star Trek door JD Hancock hcps://www.ﬂickr.com/photos/jdhancock/3383629917 •  Slide Testen de basics: Sharpest tool in the shed door Lachlan Donald: hcps://www.ﬂickr.com/photos/lox/9408028555 •  Slide Testen en verandering:Test tubes door Håkan Dahlström hcps://www.ﬂickr.com/photos/dahlstroms/3945656390 •  Slide Testen WCAG 2.0 en Webrichtlijnen versie 2 USAMRUK Malaria Diagnos=cs and Control Center of Excellence microscopy training -‐ Nigeria, Africa 092009 door US Army Africa hcps://www.ﬂickr.com/photos/usarmyafrica/4077598908 •  Slide Vakmanschap: Bacery Street tunnel under construc=on, 1953 door Seacle Municipal Archives hcps://www.ﬂickr.com/photos/seaclemunicipalarchives/6854287372 •  Slide Jij kan het feestje maken: Kansas Jayhawks 2008 NCAA Basketball Na=onal Champions-‐-‐Street Party door Mircea hcps://www.ﬂickr.com/photos/morphomir/ •  Slide SamenvaÄng: Brown Bag (without staple) door Jeﬀrey Beall hcp://www.ﬂickr.com/photos/denverjeﬀrey/4391650061/ Cijfers: •  Cijfers Func=ebeperkingen, Microsoa Nederland: hcp://www.microsoa.com/netherlands/
toegankelijk/over-‐toegankelijkheid/feiten-‐en-‐cijfers.aspx •  Cijfers smartphones en tablets: Meer dan de hela van de Nederlanders bezit een tablet hcp://www.gÜ.com/nl/news-‐and-‐events/press-‐room/press-‐releases/paginas/aantal-‐
smartphones-‐hoger-‐dan-‐aantal-‐computers.aspx •  Cijfers 65+ers: Vergrijzing samengevat, Na=onaal Kompas Volksgezondheid, Rijksinsituut voor Volksgezondheid en Milieu: hcp://www.na=onaalkompas.nl/bevolking/vergrijzing/vergrijzing-‐
samengevat/

Download Report