EXPERIMENT (2) DMP - BLIND OP HET INTERNET NAAM: ROEL DE WILDT 450152 MINOR: DIGITAL MEDIA PRODUCTIONS DOCENTE: JACQUELINE RIJKMANS DATUM: 23/03/2012 VERSIE: 1.0 BLOG: WWW.RPJDEWILDT.NL
SAMENVATTING HET EXPERIMENT Mijn tweede DMP experiment betreft het testen van een aantal websites op bestaande toegankelijkheidsrichtlijnen. Hiervoor heb ik zelf een toegankelijkheidstest samengesteld uit verschillende online bronnen. Hiervoor heb ik onder andere gebruik gemaakt van: drempelsvrij, microsoft toegankelijkheid en w3c. De test bestaat in totaal uit 35 richtlijnen waaraan 4 verschillende websites getoetst zullen worden. HEMA.nl Nu.nl Kunstbedrijfarnhem.nl Rpjdewildt.nl De websites die ik hiervoor heb gekozen, hebben een verschillend publiek en een verschillend doel. In dit experiment toets ik twee websites met een groot nationaal gebruikersaantal. De een met als doel om te informeren, de ander met als doel om te verkopen. De derde website heeft een minder grote doelgroep, namelijk: omgeving Arnhem, en heeft als doel om diensten aan te bieden. De laatste website die ik zal toetsen is mijn persoonlijke blog voor dit project. De doelgroep voor deze website blijft beperkt tot een groep studenten/leraren, en heeft als doel om als logboek te dienen. EXPERIMENT 2 - ROEL DE WILDT 2
INHOUDSOPGAVE 1. INLEIDING 4 2. METHODISCHE VERANTWOORDING 5 2.1 AANLEIDING 5 2.2 PROBLEEMSTELLING 5 2.2.1 HOOFDVRAAG 5 2.2.2 HYPOTHESE 5 2.3 DOELSTELLING 5 2.4 RELEVANTIE 5 2.5 ONDERZOEKSMETHODE 5 2.6 ONDERZOEKSTECHNIEK 5 3. BEVINDINGEN 6 3.1 ONTWERP 6 3.2 BOUW 7 3.3 FORMULIEREN 8 3.4 CONTENT 9 3.5 DYNAMISCHE CONTENT 9 4. CONCLUSIE & DISCUSSIE 10 4.1 CONCLUSIE 10 4.2 DISCUSSIE 10 5. GECITEERDE WERKEN 11 5.1 BRONNENLIJST 11 6. BIJLAGEN 12 6.1 TOEGANKELIJKHEIDSTEST 12 EXPERIMENT 2 - ROEL DE WILDT 3
1. INLEIDING In mijn onderzoek ga ik uitvinden hoe ik een zo toegankelijk mogelijke webomgeving creëer voor mensen met een visuele beperking. In mijn vorige experiment heb ik zelf ervaren hoe het is om blind het internet op te gaan. De uitkomsten van dit eerste experiment hebben me geïnspireerd tot het experiment dat ik in dit document zal behandelen. De uitkomst van het vorige experiment was dat het erg lastig is om je als blinde webgebruiker te oriënteren op een website. Waar ik vooral moeite mee had, was om mijn weg te vinden in de uitgebreide navigatie van verschillende websites. Omdat dit de eerste keer was dat ik zonder beeld gebruik maakte van het internet, heeft dit mij niet veel verteld over de toegankelijkheid van de websites die ik heb bezocht. Het feit dat ik geen van mijn opgestelde scenariotaken kon uitvoeren lag namelijk niet aan de websites, maar aan het feit dat ik visueel georiënteerd ben en nog geen enkele training heb gehad in het gebruik van de schermleessoftware. Figuur 1 - Logo Drempelvrij (Stichting Waarmerk Drempelvrij, 2012) In dit experiment ga ik me dus bezighouden met de daadwerkelijke toegankelijkheid van deze websites. Dit doe ik door zelf een toegankelijkheidstest uit te voeren, gebaseerd op de richtlijnen die te vinden zijn op Drempelvrij.nl. 1 2 In dit rapport zal ik de aanleiding, vraagstelling, methode en techniek toelichten. Hierna zal ik het experiment uitvoeren en mijn bevindingen en conclusies noteren. Als laatste volgen dan nog de geciteerde werken en de bijlagen die ik gebruikt heb voor mijn experiment. 1 http://www.drempelvrij.nl/ 2 http://www.microsoft.com/netherlands/toegankelijk/ ontwerpen-en-bouwen/toegankelijke-websites-maken/testen.aspx Figuur 2 - Hema.nl - CSS uitgeschakeld EXPERIMENT 2 - ROEL DE WILDT 4
2. METHODISCHE VERANTWOORDING 2.1 AANLEIDING De aanleiding voor dit experiment zijn de bevindingen uit het vorige experiment. In mijn vorige experiment had ik gehoopt om wat meer te kunnen vertellen over welke websites uit mijn scenario wel makkelijk te gebruiken waren en welke wat minder. Daarvoor bleek ik nog over te weinig screenreading ervaring te beschikken. Daarom probeer ik in dit experiment (een op de huidige richtlijnen gebaseerd) toegankelijkheid oordeel te vellen over enkele websites. Zo leer ik welke richtlijnen er zijn, en waar ik op moet letten bij het ontwerp en de realisatie van mijn eindproduct. 2.2 PROBLEEMSTELLING Voor dit experiment stel ik geen hoofd- en deelvragen op maar geef ik een hypothese op een hoofdvraag. Dit houd in dat ik een voorspelde uitkomst van mijn experiment geef. Na het uitvoeren van dit experiment kan ik de resultaten meten aan deze hypothese en zien in hoeverre mijn hypothese juist was. 2.2.1 HOOFDVRAAG Hoe verhouden vier verschillende websites zich op het gebied van toegankelijkheidsrichtlijnen? 2.2.2 HYPOTHESE Geen van de geteste websites zal op alle opgestelde toegankelijkheidsrichtlijnen slagen. 2.3 DOELSTELLING Het doel van dit experiment is om er zelf iets van te leren. Dat ik als ontwikkelaar leer hoe anderen omgaan met de toegankelijkheidsrichtlijnen. Hoe er wel of juist helemaal geen rekening gehouden wordt met deze richtlijnen en hoe ik bepaalde ontwerpoplossingen in mijn eigen eindproduct kan toepassen. Dit ga ik doen door een lijst aan websites te testen op het gebied van toegankelijkheid. Hiervoor zijn verschillende hulpmiddelen beschikbaar. 1 2 3 2.4 RELEVANTIE Belanghebbenden Mijzelf Visueel gehandicapten Welk belang Kennis vergaren, richtlijnen ontdekken. Zij hebben indirect iets aan dit experiment. Kwaliteit van het eindproduct wordt verbeterd. 2.5 ONDERZOEKSMETHODE Het experiment krijgt een evaluerend en vergelijkend karakter. Evaluerend omdat ik een oordeel zal geven over de toegankelijkheid van de website. Vergelijkend omdat ik de geteste websites qua toegankelijkheid met elkaar zal vergelijken. 2.6 ONDERZOEKSTECHNIEK De onderzoekstechniek van dit experiment is kwantitatief. Dit betekent dat het experiment vooral draait om wetmatigheden en niet om gevoel. Voor dit experiment maak ik namelijk gebruik van online tools die gezien kunnen worden als meetinstrumenten. Het experiment zal ik uitvoeren als een bureauonderzoek. Ik voer het experiment namelijk zelf, thuis achter mijn eigen laptop uit. De toegankelijkheidstest die ik zal uitvoeren is terug te vinden in de bijlagen van dit document. 4 Deze test zal ik uitvoeren op vier verschillende websites: http://www.kunstbedrijfarnhem.nl http://www.nu.nl http://www.rpjdewildt.nl http://www.hema.nl Ik heb bewust gekozen voor twee nationaal bekende websites, om die te vergelijken met een lokaal bekende website (kunstbedrijf) en mijn eigen blog. Alle websites hebben een verschillend doel. 1 http://www.microsoft.com/netherlands/toegankelijk/ ontwerpen-en-bouwen/toegankelijke-websites-maken 2 http://www.raph.nl/toegankelijkheid/dhz-toets.shtml 3 http://validator.w3.org/ 4 Bijlage 1: toegankelijkheidstest EXPERIMENT 2 - ROEL DE WILDT 5
3. BEVINDINGEN De resultaten van mijn toegankelijkheidstest zijn hieronder te zien. 3.1 ONTWERP Totaal: 11 Toegankelijkheidsrichtlijnen 1 2 3.1.1 ONTOEGANKELIJK / ONDUIDELIJK Kunstbedrijfarnhem.nl Navigatie kan alleen met muis bediend worden Pagina wordt niet geladen met color blind filter Niet alle iconen zijn voldoende zichtbaar en groot Nu.nl Iconen zijn te klein voor slechtzienden Rpjdewildt.nl JQuery effecten alleen bedienbaar met de muis cursor Verschillende Prezi s op de website zijn niet te bekijken zonder Flash plugin JQuery effecten en datums niet meer zichtbaar bij instelling: hoog beveiliginsniveau Afbeeldingen uitschakelen wordt website fataal. Template is voor een groot deel opgebouwd uit afbeeldingen Hema.nl Contrastverhouding in de footer is onvoldoende Social media iconen te klein Online winkelen wordt onduidelijk wanneer afbeeldingen worden uitschakelt. Knoppen vallen weg Bij hoog beveiligingsniveau het ontwerpen van producten niet meer mogelijk Figuur 3 - Contrast Ratio (nu.nl) Figuur 4 - Kleurenblindheidfilter (nu.nl) 1 http://colorfilter.wickline.org/ 2 http://juicystudio.com/services/luminositycontrastratio.php EXPERIMENT 2 - ROEL DE WILDT 6
3. BEVINDINGEN De resultaten van mijn toegankelijkheidstest zijn hieronder te zien. 3.2 BOUW Totaal: 7 Toegankelijkheidsrichtlijnen 1 2 3.2.1 ONTOEGANKELIJK / ONDUIDELIJK Kunstbedrijfarnhem.nl Voldoet aan 36 van de 47 richtlijnen op webrichtlijnen.nl Website werkt niet met uitgeschakelde CSS Website wordt niet geladen met Javascript uitgeschakeld De navigatie is niet met het toetsenbord te bedienen W3C-validator geeft 1 foutmelding Nu.nl Voldoet aan 29 van de 47 richtlijnen op webrichtlijnen.nl W3C-validator geeft 105 foutmeldingen Rpjdewildt.nl Voldoet aan 35 van de 47 richtlijnen op webrichtlijnen.nl W3C-validator geeft 1 foutmelding Hema.nl Voldoet aan 32 van de 47 richtlijnen op webrichtlijnen.nl Uitgeschakelde CSS: geen mogelijkheid om gebruik te maken van de zoekfunctie en er staan geen kopregels boven de verschillende navigatieonderdelen W3C-validator geeft 113 foutmeldingen Figuur 3 - Webrichtlijnen Quickscan - Nu.nl 1 http://versie1.webrichtlijnen.nl/toetsen/ 2 http://validator.w3.org/ EXPERIMENT 2 - ROEL DE WILDT 7
3. BEVINDINGEN De resultaten van mijn toegankelijkheidstest zijn hieronder te zien. 3.3 FORMULIEREN Totaal: 9 Toegankelijkheidsrichtlijnen 3.3.1 ONTOEGANKELIJK / ONDUIDELIJK Kunstbedrijfarnhem.nl Formulier is langer dan nodig is. De gebruiker wordt zelfs om inloggegevens gevraagd terwijl er geen registratie optie is. Labels staan onnodig ver van de invoervelden vandaan Er wordt niet aangegeven welke invoervelden verplicht zijn Nu.nl Er wordt niet aangegeven welke invoervelden verplicht zijn Formulier is te klein voor groeperen en structureren Er wordt geen spambot gebruikt Er is geen terug- of resetknop aanwezig Rpjdewildt.nl Er worden op de website geen alternatieve contactmogelijkheden geboden buiten het contactformulier Er wordt niet aangegeven welke invoervelden verplicht zijn Hema.nl Labels staan links uitgelijnd. Dit maakt de afstand van de labels tot de velden onnodig groot Er wordt geen spambot gebruikt EXPERIMENT 2 - ROEL DE WILDT 8
3. BEVINDINGEN De resultaten van mijn toegankelijkheidstest zijn hieronder te zien. 3.4 CONTENT Totaal: 4 Toegankelijkheidsrichtlijnen 3.4.1 ONTOEGANKELIJK / ONDUIDELIJK Kunstbedrijfarnhem.nl Brengt in langere teksten niet op de juiste manier structuur aan. Tekst wordt wel opgedeeld in paragrafen maar er worden geen subkoppen gebruikt Rpjdewildt.nl Tekst wordt wel opgedeeld in paragrafen maar er worden geen subkoppen gebruikt Nu.nl Hema.nl 3.5 MULTIMEDIA/DYNAMISCHE CONTENT Totaal: 4 Toegankelijkheidsrichtlijnen 1 3.3.1 ONTOEGANKELIJK / ONDUIDELIJK Kunstbedrijfarnhem.nl Geen video s of dynamische content gevonden Nu.nl Mediaspeler is niet toegankelijk omdat ondertiteling niet kan worden in/uit geschakeld. En videobestand is niet downloadbaar Geen dynamische content gevonden Knipperende advertenties aanwezig op de homepagina Rpjdewildt.nl Geen video s of dynamische content gevonden Hema.nl Mediaspeler van Youtube Dynamische banner is niet te stoppen of te pauzeren 1 http://www.accessibility.nl/kennisbank/tools/leesniveau-tool EXPERIMENT 2 - ROEL DE WILDT 9
4. CONCLUSIE & DISCUSSIE 4.1 CONCLUSIE Hoe verhouden de vier gekozen websites zich op het gebied van toegankelijkheidsrichtlijnen? De hypothese: Geen van de geteste websites zal op alle opgestelde toegankelijkheidsrichtlijnen slagen. Voor dit experiment heb ik mijn eigen toegankelijkheidstest samengesteld met behulp van verschillende online bronnen. Als hypothese heb ik gesteld dat geen van de geteste websites voor alle opgestelde richtlijnen zou slagen. Dit is ondanks de test op populaire veelgebruikte websites zoals die van HEMA & Nu.nl ook zo gebleken. 4.2 DISCUSSIE Het is natuurlijk een discussiepunt of het eerlijk was om juist deze vier websites met elkaar te vergelijken. De grootte en ook het doel van deze websites verschilt namelijk erg veel. Resultaat hiervan is dat er meer HTML fouten in de grote websites zitten dan in de kleine. Al hoeft dit natuurlijk niet altijd zo te zijn. Om testresultaten te krijgen waar de websites in de praktijk ook nog baat bij zouden hebben zou je een aantal websites uit hetzelfde genre met elkaar moeten vergelijken. Denk bijvoorbeeld aan het vergelijken van HEMA met V&D en de Bijenkorf. De uiteindelijke toegankelijkheids-score van de websites is hieronder te zien: 1. Nu.nl 24/35 + beste ontwerp + beste content 2. Hema.nl 22/35 + beste formulier + beste content + beste dynamische content 3. Rpjdewildt.nl 22/35 + beste bouw 4. Kunstbedrijfarnhem.nl 17/35 Opvallend is dat mijn eigen blog het beste gebouwd is van alle geteste websites. Dit komt waarschijnlijk omdat hier maar een kleine hoeveelheid aan content te vinden is. Omdat websites als Nu.nl en Hema.nl veel meer content bevatten, zijn ze ook gevoeliger voor foutmeldingen bij een w3c controle. Al met al denk ik dat het opstellen van dit experiment en de uitvoering ervan voor mij erg nuttig is geweest. Hiermee heb ik op een praktische manier veel geleerd over de toegankelijkheidsrichtlijnen. EXPERIMENT 2 - ROEL DE WILDT 10
5. GECITEERDE WERKEN 5.1 BRONNENLIJST http://www.drempelvrij.nl/ http://www.microsoft.com/netherlands/ toegankelijk/ontwerpen-en-bouwen/ toegankelijke-websites-maken http://www.raph.nl/toegankelijkheid/dhz-toets. shtml http://validator.w3.org/ http://colorfilter.wickline.org/ http://juicystudio.com/services/ luminositycontrastratio.php http://versie1.webrichtlijnen.nl/toetsen/»» http://www.accessibility.nl/kennisbank/tools/ leesniveau-tool EXPERIMENT 2 - ROEL DE WILDT 11
6. BIJLAGEN 6.1 TOEGANKELIJKHEIDSTEST De test zal worden uitgevoerd op de volgende aspecten van een website: Ontwerp Bouw Formulieren Content Multimedia/dynamische content In de test worden scores aangeduid door middel van de volgende iconen: Goed: voldoet aan richtlijn (1 punt) Onduidelijk: niet toetsbaar (0 punten) Fout: voldoet niet aan richtlijn (0 punten) De test is opgesteld uit informatie afkomstig van meerdere bronnen. De richtlijnen in deze test zijn terug te vinden op: Microsoft Toegankelijk http://www.microsoft.com/netherlands/toegankelijk/ ontwerpen-en-bouwen/toegankelijke-websites-maken/testen.aspx Raph Toegankelijkheid DHZ toets http://www.raph.nl/toegankelijkheid/dhz-toets.shtml Accessibility Kennisbank http://www.accessibility.nl/kennisbank 6.1.1 RICHTLIJNEN ONTWERP 1. Er is meer dan één manier ontworpen om informatie te vinden (bv. zoekfunctie of sitemap). 2. Er is geen interactie bedacht die uitsluitend met de muis bediend kan worden. 3. Interface-componenten en kleur zijn consistent toegepast. Zijn er bijvoorbeeld 3 kleurvarianten voor hyperlinks? Dan moet het semantische onderscheid tussen de links evident zijn voor de gebruiker. 4. Geen informatie of betekenis gaat verloren voor kleurenblinden (Color blind web page filter). Overige tekst heeft een contrastverhouding van minimaal 4,5. Voor tekst in logo s, in decoratieve of in inactieve elementen gelden geen contrasteisen. 6. Bij plugins: Er is nagedacht over een alternatieve interactie als plugins niet geïnstalleerd zijn. Sommige mensen kunnen, willen of mogen geen plugins als Silverlight of Flash installeren. Gaat er dan informatie of belangrijke functionaliteit verloren? 7. Zijn iconen of andere aanklikbare elementen herkenbaar en voldoende groot. Internet Explorer test De meest gebruikte browser, ook door mensen met een functiebeperking. De browser is om te bouwen tot een bruikbaar instrument om te testen op toegankelijkheid. Internet Explorer is zó in te stellen, dat kleuren, lettertypestijlen en tekengrootten die door de bouwer zijn gespecificeerd niet worden gebruikt. Ook kan het uitvoeren van scripts en het weergeven van afbeeldingen worden uitgezet. Door de functies uit te schakelen kan eenvoudig worden nagegaan of de site voldoet aan verschillende toegankelijkheidsrichtlijnen. 8.1 Kleuren, lettertypestijlen en tekengrootten uitschakelen: Extra Internet-opties Knop Toegankelijkheid Optie kleuren aanvinken Optie lettertypestijlen aanvinken Optie tekengrootten aanvinken Referentie: WCAG richtlijnen 6.1 en 2.1 8.2 Zone: Het Internet selecteren (wereldbol pictogram) Beveiligingsniveau voor deze zone : knop Aangepast niveau... kiezen Beveiligingsniveau opnieuw instellen : in uiklapmenu Hoog kiezen en vervolgens knop opnieuw instellen aanklikken Referentie: WCAG richtlijn 6.3 5. Er is voldoende kleurcontrast tussen tekst en achtergrondkleuren. Voldoende als: Grote tekst (groter dan 14pt bold of 18pt normaal) heeft een contrastverhouding van minimaal 3,0. 8.3 Afbeeldingen uitschakelen: Internet-opties Tabblad Geavanceerd Optie Afbeeldingen weergeven: vinkje weghalen EXPERIMENT 2 - ROEL DE WILDT 12
6. BIJLAGEN 6.1.2 RICHTLIJNEN BOUW 1. Pagina s behalen de maximale score (47) in de Webrichtlijnen Quickscan. 2. De pagina-opbouw blijft intact als de CSS is uitgeschakeld. Ga naar menu Uitschakelen en vink CSS aan. Bekijk daarna de pagina. Controleer minimaal de volgende punten: Is de leesvolgorde logisch? Staan er bovenin hyperlinks om direct naar de navigatie en/of zoekfunctie te springen? Staat er een kopregel boven ieder navigatieonderdeel (bv. Hoofdmenu ) en de zoekfunctie? 3. De pagina blijft bruikbaar als scripts zijn uitgeschakeld. Ga naar menu Uitschakelen en vink Scripts aan. Bekijk daarna de pagina. 4. Alle hyperlinks en knoppen op de pagina zijn bedienbaar met het toetsenbord. Test dit met de Tab-toets. 5. De paginatitel is ook te lezen in de bovenste balk van de browser. 6. De pagina heeft een voor iedereen leesbaar, betekenisvol webadres (URL): Goed: www.abcd.nl/nieuws/2010/07/ Vakantie-begonnen/ Fout: www.abcd.nl/nieuws.aspx?id=228 7. Haalt de URL door de W3C-validator. Bij nul errors is foutloze HTML gebruikt. 6.1.3 RICHTLIJNEN FORMULIEREN 1. Is het formulier zo kort mogelijk gehouden? 2. Wordt er voorzien in alternatieve contactmogelijkheden, zoals adresgegevens, telefoonnummers of e-mailadressen, als deze beschikbaar zijn. Mensen die moeite hebben met formulieren invullen, willen wellicht liever bellen. 5. Worden fouten duidelijk aangegeven? Wordt er ook aangegeven waar de fout optreedt. Wordt er concrete feedback gegeven. 6. Er wordt in grote formulieren structuur aangebracht door het groeperen van aan elkaar gerelateerde invoervelden. Er worden bijvoorbeeld fieldsets voor Persoonsgegevens en Bedrijfsgegevens gebruikt. 7. Er wordt duidelijk aangegeven welke invoervelden verplicht ingevuld moeten worden. 8. Wordt er in plaats van CAPTCHA-code om spambots te weren een andere vorm gebruikt. Die makkelijker is voor mensen met een visuele of auditieve handicap. Bijvoorbeeld de vraag: hoeveel is 1+1? 9. Is er een duidelijk onderscheid gemaakt tussen de verzend-knop en de terug of reset knop? 6.1.4 RICHTLIJNEN CONTENT 1. Iedere pagina heeft een titel die het onderwerp of doel zo goed mogelijk beschrijft. Een titel die relevante trefwoorden bevat, maakt de pagina ook beter vindbaar in zoekmachines. 2. Brengt structuur aan met kopregels voor (sub) paragrafen. 3. Gebruik vet en cursief om nadruk te leggen op woorden of fragmenten, maar niet om kopregels te maken (zie vorige punt) of voor vormgeving. 4. Test het leesniveau. Leesniveau moet minimaal B1 zijn. 3. Worden formulieren voorzien van labels en instructies. Ieder invoerveld moet voorzien zijn van een label 4. Labels zijn zo dicht mogelijk bij het invoerveld geplaatst. EXPERIMENT 2 - ROEL DE WILDT 13
6. BIJLAGEN 6.1.5 RICHTLIJNEN MULTIMEDIA/DYNAMISCHE CONTENT 1. De website zet een toegankelijke mediaspeler in voor het afspelen van video s. De mediaspeler moet gebruikers in staat stellen: Ondertiteling in/uit te schakelen; Ondersteunend geluidsspoor in/uit te schakelen; Video-bestand te downloaden als JavaScript of plugin uitgeschakeld is. 2. Kan bewegende, knipperende, scrollende of automatisch actualiserende content gepauzeerd, verborgen, vertraagd en/of gestopt worden? 3. Knipperende fragmenten worden vermeden. 4. Video of audio wordt niet automatisch gestart. EXPERIMENT 2 - ROEL DE WILDT 14