Webrichtlijnen versie 2 audit

Transcriptie

1 Webrichtlijnen versie 2 audit Niveau A Pleio 23 december 2013, Rotterdam 200 OK Auteur: Jules Ernst

2 Inhoudsopgave Samenvatting... 3 Achtergrond bij dit onderzoek... 3 Website-gegevens... 3 Onderzoeker... 3 Bronnen... 4 Resultaten en aanbevolen stappen... 4 Onderzoeksresultaat Waarneembaarheid Bedienbaarheid Begrijpelijkheid Robuust U Universeel Bijlage A Voorbeeld custom css EUROSAI Bijlage B Voorbeeld custom css ICTU

3 Samenvatting Dit rapport beschrijft de de quickscan van Pleio het samenwerkplatform voor de overheid, Het onderzoek is uitgevoerd op basis van Webrichtlijnen versie 2 niveau A, aangevuld met succescriteria niveau AA en AAA, waar de issues eenvoudig van te constateren zijn. Op basis van dit onderzoek, kan de website (en deelsites) in het algemeen nog niet voldoen aan Webrichtlijnen versie 2 niveau A; met name in de techniek zal een grote inspanning geleverd moeten worden. De garantie om volledig toegankelijk te zijn is daarna lastig waar te maken; immers de content in Pleio komt van een diversiteit van gebruikers, waar gebruikers bij zitten die waarschijnlijk nog nooit van Webrichtlijnen hebben gehoord. Het is echter wel verstandig om de hulpmiddelen in Pleio zodanig in te richten dat toegankelijkheid mogelijk is. Want dat gebruikers Pleio vullen met content zonder kennis van Webrichtlijnen, wil nog niet zeggen dat die content ontoegankelijk is. De Webrichtlijnen is een open standaard en overheidsstandaard waarin de internationale toegankelijkheidseisen (WCAG 2) een-op-een is opgenomen. De standaard is beschreven op Achtergrond bij dit onderzoek Het onderzoek op toegankelijkheid is een combinatie van semi-automatische evaluatie-instrumenten en handmatige beoordeling. Dit onderzoek betreft een quickscan en mag daarom geen oordeel geven over de toegankelijkheid van de website. Wel is het een indicatie in hoeverre de website voldoet. De resultaten in dit rapport zijn gebaseerd op evaluatie in de periode 7 juli 2013 tot 8 september Dit document is in december 2013 definitief gemaakt. Onderdelen van Pleio kunnen inmiddels veranderd zijn. Website-gegevens Scope: Pleio o Alles wat valt onder dit domein en subdomeinen. Buiten beschouwing gelaten o Links naar: elgg.org Taal website: Nederlands, Engels Onderzoeker Jules Ernst 200 OK 3

4 Bronnen WCAG Webrichtijnen Resultaten en aanbevolen stappen Deze website lijkt niet te voldoen aan Drempelvrij niveau A (op basis van WCAG 2). Alle issues staan beschreven in het hoofdstuk Onderzoeksresultaat. De complexe problemen zijn te vinden in: PDF-bestanden Geografische kaart: PDOK/Google Maps-kaartje Widgets (bijvoorbeeld verplaatsen zonder muis) Kleurgebruik Minder complexe problemen die in Pleio of in de template van Pleio opgelost moeten worden: Koppenstructuur Tot slot zijn er kleinere problemen die in het algemeen in de content opgelost moeten worden. Het 100% Webrichtlijnenproof maken van Pleio lijkt onhaalbaar; immers er mag niet verwacht worden dat alle gebruikers van Pleio voldoende op de hoogte zijn hoe content conform Webrichtlijnen aangeleverd moet worden. In de volgende stappen en gradaties kan gewerkt worden aan een toegankelijke Pleio: Techniek o Waar dit Elgg betreft alle technische issues oplossen op Niveau A en Niveau AA o Waar dit Pleio betreft alle technische issues oplossen op Niveau A en Niveau AA o Waar dit code zoals HTML-code betreft die wordt ingevoerd, zoveel mogelijk ondersteuning bieden vanuit Pleio om dit goed te kunnen doen. Administrators/beheerders hierin trainen. Deelsite-beheerders een handleiding bieden en indien nodig trainen. Vormgeving o Dit is hoofdzakelijk een technisch issue. In dit rapport worden de issues en oplossingen beschreven. o Voor organisaties is het belangrijk dat kleuren gebruikt worden die in de teksten en knoppen voldoende contrast bieden. Content o Het core Pleio-team zorgt dat content toegankelijk is geschreven en opgemaakt. o Webredacteuren binnen de overheid hebben vaak al voldoende kennis om content webrichtlijnenproof in te voeren. Voor de overige bezoeker die content aan kan bieden wordt dit lastiger. Eventueel moet gekozen kunnen worden voor een nabewerking van de tekst. 4

5 o Voor gebruikers moet de WYSIWYG-editor zodanig ingericht worden zodat op correcte wijze techniek en vorm toegepast wordt. Voor deelsites waar burgerparticipatie vereist is, moet rekening gehouden worden met het feit dat deze deelsite in 2015 aan Webrichtlijnen moet voldoen. De deelsites-eigenaar moet er dan voor zorgen dat er voldoende kennis binnen zijn team is om content en vormgeving (kleurgebruik) aan Webrichtlijnen te laten voldoen. Dit kan ook gevolgen hebben voor de keuze van widgets (widgets die toegankelijkheid in de weg staan niet gebruiken). Door eerst de content- en template-problemen op te lossen zal al veel winst gehaald worden in toegankelijkheid en kwaliteit. Leeswijzer onderzoeksresultaat Webrichtlijnen versie 2 bestaan uit 5 principes. Per principe staat in dit document kort de succescriteria beschreven; bij elk succescriterium is het niveau (A, AA, AAA tussen vierkante haken) opgenomen. Alle succescriteria op het minimale (toegankelijkheids)niveau (A) zijn in dit document opgenomen. Vervolgens staat aangegeven of er issues met betrekking tot dit succescriterium zijn aangetroffen in Pleio en waar dit is aangetroffen. Het advies dat volgt geeft kort weer hoe het probleem aangepakt kan worden. 5

6 Onderzoeksresultaat De nummering van de onderdelen komen overeen met de succescriteria uit Webrichtlijnen 2. 1 Waarneembaarheid Niet-tekstuele content [A] Er zijn afbeeldingen waarbij het alt-attribuut ontbreekt of niet correct gevuld zijn. Van elke afbeelding moet een heldere omschrijving zijn. Bij decoratieve afbeeldingen wordt het attribuut als volgt gebruikt: alt=. Als onder de afbeelding een tekst staat dat beschrijft wat er op de afbeelding gebeurt, dan moet ook gebruik gemaakt worden van dit lege attribuut bij de afbeelding: alt=. Screenreaders lezen de inhoud van een alt-attribuut voor. Als het alt-attribuut niet aanwezig is wordt de naam van de afbeelding voorgelezen, bijvoorbeeld de nietszeggende naam images 1.jpg. Ook als afbeeldingen niet worden geladen door bijvoorbeeld een slechte internettoegang, dan zal de tekst van de afbeelding in ieder geval zichtbaar zijn op de plek waar de afbeelding geladen had moeten worden. Enkele foutieve voorbeelden: Bij de links naar de mobiele app-stores wordt in het alt-attribuut de naam van de afbeelding herhaald (images (1).jpg). De afbeelding van de Golden Award 2012 heeft geen alt-attribuut. Alle tekst uit deze afbeelding moet in het alt-attribuut herhaald worden. Veel afbeeldingen een alt-attribuut met een standaard nietszeggende tekst image. Dit komt op meerdere plekken in de website voor. Latest community polls-widget: Bij het plaatje met de groene vink ontbreekt het alt-attribuut. Biedt in Pleio de mogelijkheid aan om bij het uploaden/plaatsen van een afbeelding de tekst voor het alt-attribuut te vullen. In de WYSIWYG-editor krijgt de gebruiker nu té veel invulvelden. Sommige mogen juist niet ingevuld worden en het veld description (vult altattribuut) nu juist weer wel. Als description niet is ingevuld moet Pleio standaard alt= bij de afbeelding plaatsen in plaats van alt= image. Zorg er in ieder geval voor dat het Pleio-team afbeeldingen op correcte wijze plaatst. Biedt de webredacteuren een handleiding hoe dit te doen Louter-geluid en louter-videobeeld (vooraf opgenomen) [A] Er wordt geen standaard functionaliteit aangeboden om audio en video op toegankelijke wijze aan te bieden. Geef een handreiking/uitleg aan de Pleio-gebruikers/redacteuren waarin staat hoe bij het inbedden van beeld en geluid op toegankelijke wijze moet gebeuren. Geef van bijvoorbeeld een YouTube-film aan dat ook de tekst geplaatst moet worden en dat YouTube de mogelijkheid biedt tot ondertitelen van video. 6

7 Een extra oplossing is het toepassen van de overheidsmedia-oplossing. In veel CMS implementaties is dit al aanwezig. De organisatie die de video host stuurt de redacteur een aantal URL s. Deze URL s zijn adressen van onder andere de verschillende videoformaten van een video en het ondertitelingsbestand. Deze URL s worden in de videomodule (widget) van het CMS ingevuld (gekopieerd), waarna automatisch op de website de video staat die volledig aan Webrichtlijnen voldoet Ondertiteling voor doven en slechthorenden (vooraf opgenomen) [A] Er worden ondertitels voor doven en slechthorenden geleverd voor alle vooraf opgenomen audiocontent in gesynchroniseerde media, behalve als het mediabestand een media-alternatief is voor tekst en duidelijk als zodanig is gelabeld. Zie Audiodescriptie of media-alternatief (vooraf opgenomen) [A] Er wordt een alternatief voor op tijd gebaseerde media of audiodescriptie van de vooraf opgenomen videocontent geleverd voor gesynchroniseerde media, behalve als het mediabestand een mediaalternatief is voor tekst en duidelijk als zodanig is gelabeld. Zie Contrast [AA] De visuele weergave van tekst en afbeeldingen van tekst heeft een contrastverhouding van ten minste 4,5:1, behalve in de volgende gevallen: Grote tekst Incidenteel (bijvoorbeeld decoratief) Logotypes De wijze van kleuren selecteren voor een deelsite in Pleio levert toegankelijkheidsproblemen op. In veel kleurcombinaties is het onmogelijk om zonder extra technische kennis teksten en grafische knoppen goed zichtbaar in beeld te brengen. Via custom css kan een administrator kleuren van bepaalde elementen zodanig aanpassen dat het contrast weer wel voldoende is. De keuze om kleuren te kiezen beperkt zich nu tot de volgende items: Menu background + buttons Menu foreground + titles Submenu highlighting + editboxes Link color Link hover color Een voorbeeld van het probleem is dat de kleur voor een link gebruikt wordt in de normale tekst, in een onderdeel met een menu-achtergrondkleur en in de rechterkolom op plekken waar een grijze achtergrond is. In de bijlage is de custom-css-code opgenomen van eurosai.pleio.nl. Let op! Nog niet alle elementen hebben voldoende contrast om te voldoen aan dit succescriterium. 7

8 Per schermelement moet het mogelijk zijn om de voorgrondkleur, de achtergrondkleur, de kleur van kopjes (h2, h3), de kleur van links (en het mouseover en focuseffect) zodanig aan te passen dat het contrast voldoende blijft. Om dit voor de beheerder niet te complex te maken is het zinvol om een aantal deelsites die eigen kleuren gebruiken te analyseren op het kleurgebruik. Mogelijk zijn er concessies gedaan in de kleuren om toch leesbare tekst te behouden. Bij eurosai.pleio.nl is in de custom css te zien waar kleuren zijn aangepast om zo het contrast voldoende te houden. Nu beschikt de beheerder over vijf elementen waarvan de kleur gekozen kan worden. Breidt deze set uit, maar maak het niet te uitgebreid. De 5 voorbeelden bij de keuzes zijn eveneens beperkt. Zorg voor een voorbeeld waarbij alle kleurcombinaties die op basis van de keuze van de beheerder in beeld komt. Voorbeeld kleuren zonder custom css: Een aantal elementen zijn niet leesbaar. Dit is de kleurkeuze: 8

9 Voorbeeld met custom css Ondanks de extra custom css zijn er nog steeds issues: Grijze teksten hebben een te laag contrast. Sommige grafische knoppen zijn moeilijk herkenbaar. De zoekknoppen zien er bij deze kleurkeuze niet goed uit. Het grafische driehoekje bij widgets is haast onzichtbaar (deze wordt niet getoond in dit schermvoorbeeld) Herschalen van tekst [AA] De lettergrootte moet tot 200% geschaald worden zonder verlies van content en functionaliteit. Er zijn geen problemen aangetroffen in de sample. 9

10 1.3.1 Info en relaties [A] Informatie, structuur, en relaties overgebracht door presentatie kunnen door software bepaald worden of zijn beschikbaar in tekst. Hiermee wordt bedoeld dat teksten semantisch zijn opgemaakt: alinea s en subkopjes op correcte wijze zijn gemarkeerd, gebruik van koppen in tabellen, het groeperen van velden in formulieren, etc. De koppenstructuur is niet in orde (is richtlijn U.1.3). Issue 1: Het niveau h2 is overgeslagen. [h1] Pleio [h3] Wat is Pleio? [h3] Register [h3] Vind het op Pleio [h3] Log in [h3] Aanbevolen deelsites [h3]... Dit issue komen bijvoorbeeld voor op: Maak van het h3-element een h2 Issue 2: Geen duidelijke koppenstructuur. Alle tussenkopjes zijn uitsluitend voorzien van een h3- element, waardoor niet duidelijk is hoe de pagina is opgebouwd. [h1] EUROSAI [h3] Add widgets to your personal dashboard [h3] Latest poll [h3] Advanced [h3] A SAI can cooperate with auditees [h3] Messages [h3] Advanced [h3] Pages [h3] Advanced [h3] PDOK Map [h3] Advanced [h3] RSS Feed Dit issue komt bijvoorbeeld voor op: 10

11 Gebruik een betere paginaopbouw. Pas bij een widget het kopje met een h2-element toe, en eventuele tussenkopjes binnen de widget een h3. Issue 3: Pagina s hebben geen unieke titel. Alle pagina s van de deelsite hebben de titel van de deelsite, waardoor het bijvoorbeeld voor een blinde niet direct duidelijk is op welke pagina die zich bevindt. Het title-element lijkt overigens wel goed ingevuld. [h1] EUROSAI [h2] My groups [h3] Social room [h3] PLEIO management Dit issue komt bijvoorbeeld voor op: En: [h1] EUROSAI Administration [h2] Administer [h2] Configure [h2] Dashboard [h3] Add widgets to your admin dashboard Dit issue komt bijvoorbeeld voor op: Benoem de titels van de pagina s volledig en uniek, bijvoorbeeld: Mijn groepen [naam deelsite] Dashboard [naam deelsite] Dashboard [naam deelsite] administration Issue 4: ontbrekende tussenkopjes Het is handig om bepaalde (standaard) paginaonderdelen zoals navigatie ook een tussenkopje te geven. Geef deze een logische naam. Bijvoorbeeld: 11

12 Rechtsboven staan inloggegevens, het bekijken van de site en de mogelijkheid om uit te loggen. Geef deze groep een verzamelnaam in een h2-element. Doe dit ook voor de items in de onderste balk. Noem deze bijvoorbeeld: Ondersteuning of Hulp. Deze tussenkopjes hoeven niet visueel getoond worden. Positioneer deze elementen dan ook via de stylesheet buiten het scherm. Gebruik hiervoor geen display: none of visibility: hidden. Aanvulling d.d : Intussen is een discussie gaande over deze oplossing in de Webrichtlijnen-groep op LinkedIn. Het plaatsen van kopjes boven elementen zoals een menu wordt als overbodig gezien. Zie: Issue 5: Tussenkopje waar dit niet gewenst is 12

13 Het PDF-document heeft een Kop 3 waar de gelijknamige tekst ( Quick Reference Guide ) erboven ook een Kop 3 heeft. Beter is om de 2 e H3 niet te gebruiken en hier bijvoorbeeld een opsomming te maken Betekenisvolle volgorde [A] Als de volgorde waarin content wordt gepresenteerd van invloed is op zijn betekenis, kan een betekenisvolle leesvolgorde door software bepaald worden. Geen problemen aangetroffen in de sample Zintuiglijke eigenschappen [A] Instructies die geleverd worden om content te begrijpen en te bedienen zijn niet alleen afhankelijk van zintuiglijke eigenschappen van componenten zoals vorm, omvang, visuele locatie, oriëntatie of geluid. De widgets hebben in de balk kleine pictogrammen in beeld die een bepaalde functionaliteit bieden. Als afbeeldingen niet geladen worden, is de functionaliteit wel aanwezig, maar zijn de knoppen niet meer zichtbaar. Ook voor voorleeshulp kan dit een probleem zijn. In de HTML zijn de functies niet meer dan lege links, waardoor er geen fallback is als javascript niet (goed) geladen wordt. Dit probleem komt op meerdere pagina s voor, waaronder: (met geactiveerde widgets) Biedt de functies aan in de vorm van een afbeelding omgeven door een link, waarbij de afbeelding een alternatieve tekst krijgt die de functie beschrijft Gebruik van kleur [A] Kleur wordt niet als het enige visuele middel gebruikt om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden. Situatie niet aangetroffen in de sample Geluidsbediening [A] Als een geluidsweergave op een webpagina automatisch meer dan 3 seconden speelt, is er of een mechanisme beschikbaar om de geluidsweergave te pauzeren of te stoppen, of er is een mechanisme beschikbaar om het geluidsvolume onafhankelijk van het overall systeemvolume te regelen. Situatie niet aangetroffen in de sample. (zie ook advies 1.2.1) 2. Bedienbaarheid Toetsenbord [A] Alle functionaliteit van de content is bedienbaar via een toetsenbordinterface zonder dat afzonderlijke toetsaanslagen aan tijd gebonden zijn, behalve als de onderliggende functie een invoer vereist die afhangt van het pad dat de gebruiker aflegt en niet alleen van de eindpunten. 13

14 Het gebruik van uitsluitend een toetsenbord is op veel plekken onmogelijk. Sommige functies zoals het verplaatsen van widgets zijn uitsluitend met de muis bedienbaar. Een ander issue is toetsenbordgebruik bij een zogenaamde popupscherm. Dit komt onder andere voor op Als je op de knop Voeg een widget toe aan je pagina klikt dan verschijnt er een scherm over het bestaande scherm heen. Als je nu met de tabtoetsen navigeert, navigeer je op de (haast) onzichtbare plekken op het scherm die je in de achtergrond ziet. Stel toetsenbordgebruik beschikbaar en doe dit op correcte wijze. Dit vergt behoorlijk wat programmeerwerk Geen toetsenbordval [A] Als de toetsenbordfocus met de toetsenbordinterface verplaatst kan worden naar een component van de pagina, dan kan de focus ook met alleen de toetsenbordinterface weer van dat component weg worden bewogen, en, als er meer nodig is dan de standaard pijl- of tabtoetsen of andere standaard methoden om de focus te verplaatsen, dan wordt de gebruiker geïnformeerd over de manier waarop de focus kan worden verplaatst. Situatie niet aangetroffen in de sample Timing aanpasbaar [A] Voor elke tijdslimiet die door de content wordt ingesteld geldt ten minste een van de volgende zaken: Uitzetten, aanpassen, verlengen... Via Twitter ie gemeld dat er geen time-out meer aanwezig is in Pleio, voor wat betreft het inloggen Pauzeren, stoppen, verbergen [A] Voor alle bewegende, knipperende, scrollende of automatisch actualiserende informatie gelden alle volgende zaken: Bewegen, knipperen, scrollen: Voor bewegende, knipperende of scrollende informatie die (1) automatisch start, (2) langer dan vijf seconden duurt, en (3) parallel met andere content wordt getoond, is er een mechanisme voor de gebruiker om dit te pauzeren, te stoppen of te verbergen, tenzij de beweging, knippering of scrolling, onderdeel is van een activiteit waar ze essentieel is en Automatisch actualiserend: Voor elke soort automatisch actualiserende informatie die (1) automatisch start en (2) parallel met andere content wordt gepresenteerd, is er een mechanisme voor de gebruiker om dit te pauzeren, te stoppen of te verbergen of de frequentie van de actualisering in te stellen tenzij de automatische actualisering onderdeel is van een activiteit waar ze essentieel is. De slider-widget bevat de mogelijkheid om afbeeldingen na een bepaalde tijd te vervangen voor een andere afbeelding. De mogelijkheid om te pauzeren of stoppen ontbreekt. Plaats bedieningsknoppen om de slider te kunnen stoppen of om direct naar een van de sliderafbeeldingen te kunnen springen. Voorbeelden van werking sliders-bediening: 14

15 goedopgelost.overheid.nl (stopknop ontbreekt!) Drie flitsen of beneden drempelwaarde [A] Webpagina's bevatten niets wat meer dan drie keer flitst in enige periode van één seconde of de flits is beneden de algemene flits- en rodeflitsdrempelwaarden. Situatie niet aangetroffen in de sample Blokken omzeilen [A] Er is een mechanisme beschikbaar om blokken content die op meerdere webpagina's worden herhaald te omzeilen. Er wordt in Pleio geen mogelijkheid geboden om bijvoorbeeld navigatie over te slaan. zorg op meerdere plekken in de HTML dat er skiplinks aanwezig zijn. Niet alleen om de navigatie te skippen, maar bijvoorbeeld ook om een widgets te omzeilen. Immers dit kunnen er ook veel zijn. Bij het omzeilen van widgets is het bijvoorbeeld handig om skiplinks naar de hoofdnavigatie en naar de zoekfunctie te plaatsen. Let op dat skiplinks op correcte wijze worden geïmplementeerd! Paginatitel [A] Webpagina's hebben titels die het onderwerp of doel beschrijven. Titels zijn niet altijd even duidelijk. Controleerbaar via Google: Een veel terugkerende titel is [pdf] Downloaden Pleio. Dit is te voorkomen door: Links naar downloads een duidelijke naam te geven (bijvoorbeeld titel van het document). In de eigenschappen van het document de omschrijving (titel) goed te vullen. In webpagina s de kop (h1) netjes gevuld Focus volgorde [A] Als een webpagina sequentieel genavigeerd kan worden en de navigatiesequenties hebben invloed op de betekenis of het gebruik, dan krijgen focusbare componenten de focus in de juiste volgorde waardoor betekenis en bedienbaarheid behouden blijft. De focusvolgorde lijkt in orde Linkdoel (in context) [A] Het doel van elke link kan bepaald worden uit enkel de linktekst of uit de linktekst samen met zijn door software bepaalde linkcontext, behalve daar waar het doel van de link een dubbelzinnige betekenis zou kunnen hebben voor gebruikers in het algemeen. 15

16 Alle widgets hebben dezelfde opbouw en bevatten daardoor bedieningselementen en links met dezelfde naam. Geef widgets unieke bedieningselementen. Nu staat er bijvoorbeeld in een van de title-attributen bij elke widget Customize this widget. Vervang this door de eventuele titel en de naam van de widget, bijvoorbeeld: Customize the Group Activity widget Focus zichtbaar [AA] Bij bediening met toetsenbord (in plaats van bijvoorbeeld een muis) is duidelijk waar je bent op het scherm. Bij gebruik van tabtoets is niet zichtbaar waar je je bevindt. In stylesheet in ieder geval de volgende regel opnemen: a:focus { outline:2px solid orange; } Let op! Beheerders zijn in staat om in custom.css deze instelling ongedaan te maken. 3 Begrijpelijkheid Taal van de pagina [A] De standaard menselijke taal van elke webpagina kan door software bepaald worden In de HTML in EUROSAI Pleio wordt netjes gestart met lang= en (Engels). De overige 2 zijn Nederlandstalig en hier staat ook netjes lang= nl (Nederlands) bovenin de code. Verder wordt de taalwissel niet ondersteund. Als op EUROSAI Nederlandse tekst wordt gebruikt of op een stuk Engelse tekst dan zijn deze stukken tekst niet gemarkeerd in de gebruikte taal. De gebruiker heeft ook niet de mogelijkheid om aan te geven dat (delen van) de tekst anderstalig is. Ook voor wat betreft de navigatie kan dat een probleem zijn. De gebruiker kan in zijn persoonlijke instellingen een taal kiezen (Nederlands of English). Op ictu.pleio.nl worden de Engelse menuitems niet voorzien van een taalmarkering. Een voorleeshulp kan daardoor deze stukken tekst niet in de correcte taal voorlezen. 16

17 Biedt de gebruiker (beheerder) de mogelijkheid om bij Pleio-pagina s de taal aan te geven (default staat de taal bij bijvoorbeeld EUROSAI in het Engels). Ook in de WYSIWYG-editor ontbreekt een taalknop. Als er in een Nederlandse tekst een Engels fragment voorkomt kan de invuller niet de tekst markeren met een andere taal. Tot slot zou in Pleio aan de hand van de gekozen persoonlijke taalinstelling de standaard teksten en menuitems in de HTML van een taalaanduiding moeten worden voorzien als de taal afwijkt van de taal van de deelsite Bij focus [A] Als een component de focus krijgt, dan veroorzaakt dat geen contextwijziging. Situatie niet aangetroffen in de sample Bij input [A] Verandering van de instelling van een component van de gebruikersinterface veroorzaakt niet automatisch een contextwijziging tenzij de gebruiker geïnformeerd is over het gedrag vóór het gebruik van dit component. Situatie niet aangetroffen in de sample Fout identificatie [A] Als een invoerfout automatisch ontdekt wordt, dan wordt het onderdeel waar de fout zit geïdentificeerd en de fout wordt tekstueel aan de gebruiker meegedeeld. Bij inloggen bijvoorbeeld het wijzigen van je accountinstellingen komt bij het maken van een fout een melding (rechts bovenin het scherm). De melding geeft aan dat een (specifiek) veld niet (goed) is ingevuld. Niet duidelijk is of iemand met een voorleeshulp deze melding voorgelezen krijgt of op het juiste moment voorgelezen krijgt. Tot slot wordt er bij het veld zelf geen melding gedaan van de fout. Een gebruiker moet dus zelf gaan zoeken welk veld incorrect is. Er zijn meerdere oplossing tot een goede melding. Naast toegankelijkheid is usability belangrijk. Haal hiervoor expertise binnen om tot een goede oplossing te komen Labels of instructies [A] Als de content gebruikersinvoer vereist, dan worden labels of instructies geleverd. Het label-element ontbreekt in de HTML of zijn niet expliciet gekoppeld aan het invoerveld. Dit issue keert in de hele website terug bij het zoeken en bij het inloggen. The wire- en Update the wire-widget: label-element ontbreekt. Elke widget: als je voor instellingen kiest ontbreekt het label-element, In het blok Register op de homepage is dit wel correct geïmplementeerd. 17

18 Bij de poll-resultaten in de poll-widget wordt ook gebruik gemaakt van het label-element. Hier is dit niet nodig en zelfs onwenselijk. 4 Robuust Parsen [A] In content die geïmplementeerd is met opmaaktalen hebben elementen volledige begin- en eindtags, zijn elementen genest volgens hun specificatie, bevatten elementen geen dubbele attributen en zijn alle ID's uniek, behalve waar de specificatie deze eigenschappen toelaat. Dit is te controleren via de HTML-validator: voor resultaten zie ook U Naam, rol, waarde [A] Voor alle componenten van de gebruikersinterface (inclusief, maar niet uitsluitend voor formulierelementen, links en door scripts gegenereerde componenten), kunnen de naam (name) en rol (role), door software bepaald worden; toestanden (states), eigenschappen (properties) en waarden (values) die door de gebruiker ingesteld kunnen worden kunnen door software bepaald worden; en kennisgeving van veranderingen in deze items is beschikbaar voor user agents, met inbegrip van hulptechnologieën. Wellicht zijn hierin problemen te verwachten in geografische kaarten en de foutmelding rechts bovenin het scherm. Via WAI-ARIA is het mogelijk om onder water een signaal te sturen dat er een verandering in het scherm heeft plaatsgevonden en waar dit heeft plaats gevonden. Hulpapparatuur kan hiermee overweg. Meer info: Dit onderdeel is niet getoetst. U Universeel U.1.1 Semantisch correcte opmaak [A] Pas opmaaktalen toe op de in de specificatie beschreven wijze. (na inloggen als standaard gebruiker, geen beheerder) Er komen veel errors voor, die mogelijk gevolgen kan hebben op de wijze waarop de website wordt gepresenteerd aan de bezoeker. Enkele fouten: Een li-element op een verkeerde plaats (missing one of "ul", "ol" start-tag) id's die met een cijfer beginnen: id=" " is niet toegestaan. style-element komt voor binnen het body-element in plaats van binnen het head-element. Slider-widget: foutieve HTML, zoals div-elementen in span-element, ontbreken van altattribuut bij afbeeldingen. Test de website via de online HTML-validator van W3C en verbeter de fouten. 18

19 U.1.2 Geen afgekeurde en afgeraden eigenschappen [A] Zie af van het gebruik van afgekeurde eigenschappen en afgeraden eigenschappen uit eerdere versies van technologieën voor webcontent. (na inloggen als standaard gebruiker, geen beheerder) Gebruik van target="_blank" aangetroffen om een link in een nieuw venster te openen. Dit is niet toegestaan. Zorg dat target="_blank" niet gebruikt kan worden in Pleio en zorg er ook voor dat deze code niet in de basiscode van Pleio gebruikt wordt. U.1.3 Kopregelhiërarchie [A] Sla geen niveaus over in de hiërarchie van kopregels. (na inloggen als standaard gebruiker, geen beheerder) Kop 2 (h2-element) ontbreekt. Dit issue is behandeld bij overige structuurproblemen onder het punt U.2.1 Scheiding van content en presentatie [A] Content en presentatie worden gescheiden van elkaar aangeboden, indien de gebruikte opmaaktaal dit ondersteunt. Slider-widget: inline style is aangetroffen om de kleur in te stellen. Beter is om de kleur vast te leggen door de beheerder en de gebruiker de keuze te geven uit de door de beheerder opgelegde kleuren. Kleurcodes worden in de stylesheet opgeslagen. In de HTML wordt een class-naam gebruikt. U.3.1 Gelaagd bouwen [A] Gebruik technologieën op zodanige wijze, dat de basiscontent en -functionaliteit die nodig zijn om een webpagina te kunnen gebruiken onder alle omstandigheden beschikbaar zijn. (na inloggen als standaard gebruiker, geen beheerder) Als javascript niet werkt zijn er een aantal functies niet te benaderen. Zo werkt het weghalen van een widget wel, maar een widget toevoegen op het scherm niet. Ook het verplaatsen werkt niet, waar wel de cursor aangepast wordt naar de cursor met de 4 pijltjes om de widget te verplaatsen. Instellingen van de widget kunnen ook niet benaderd worden zonder javascript. Maak functionaliteit ook zonder javascript bereikbaar. U.4.1 Aangepaste foutmeldingen [A] Biedt bij door het systeem gegenereerde foutmeldingen de gebruiker mogelijkheden om verder te gaan. 19

20 Er wordt voldoende hulp geboden aan de bezoeker, namelijk ten minste drie van onderstaande 'vluchtroutes' zijn beschikbaar: 1. De pagina waarop een door het systeem gegenereerde foutmelding voorkomt bevat een link naar de homepage (is aanwezig) 2. De pagina waarop een door het systeem gegenereerde foutmelding voorkomt bevat de sitenavigatie die ook beschikbaar is op overige delen van de website (is aanwezig) 3. De pagina waarop een door het systeem gegenereerde foutmelding voorkomt bevat een link naar een sitemap (is niet aanwezig) 4. De pagina waarop een door het systeem gegenereerde foutmelding voorkomt bevat een zoekvenster met submit-knop (is aanwezig) 5. De pagina waarop een door het systeem gegenereerde foutmelding voorkomt bevat contactinformatie (is niet aanwezig) U.5.1 Ondersteuning bij formulieren [A] Bied de gebruiker afdoende informatie en ondersteuning om een formulier succesvol te kunnen invullen en indienen. Het aanmelden, inloggen en opvragen van een wachtwoord bevatten afdoende informatie. Ook binnen de deelsites kunnen formulieren gemaakt worden voor bijvoorbeeld evenementen of reageren. Deelsite-beheerders kunnen deze formulieren zelf maken. Doe aanvullend onderzoek of de makers van formulieren voldoende functionaliteit beschikbaar hebben in Pleio om een toegankelijk en webrichtlijnenproof formulier te maken. U.6.1 Taalkeuze [A] Als webcontent beschikbaar is in meerdere talen, worden aan de gebruiker een of meer mechanismen aangeboden om tussen de verschillende talen te wisselen. (vóór inloggen) Rechtsboven wordt de taalwissel herkenbaar gemaakt met enkel een Engelse vlag en een Nederlandse vlag. Meerdere oplossingen zijn mogelijk, waarbij bijvoorbeeld de selecteerbare woorden English en Nederlands altijd goed zijn. Vervang de vlaggen of voeg er deze woorden zichtbaar aan toe. Er is verder geen directe taalwisseling tussen alle content. Een Pleio deelsite wordt in het algemeen eentalig gebruikt. Deze richtlijn verdient (pas) aandacht als een Pleio-deelsite in meerdere talen beschikbaar is. U.7.1 Alternatief voor geneste weergavekaders [AA] Als content middels een genest weergavekader (iframe) wordt aangeboden kan die content ook op een andere manier worden bereikt. 20

21 Dit is niet getest. Wel een punt waar bij de ontwikkeling van Pleio rekening gehouden moet worden. Dit kan voorkomen bij geografisch content, audio en video. U.8.1 Specificeer UTF-8 [A] Specificeer voor tekstuele content die door middel van een opmaaktaal is vastgelegd de UTF-8 karakterset. Dit wordt op correcte wijze toegepast. U.9.1 Gebruik ten minste open specificaties [AA] Gebruik bij het aanbieden van content ten minste open, niet leverancierafhankelijke en voor webcontent bedoelde specificaties. En geef bij gelijke geschiktheid de voorkeur aan open standaarden. Dit is niet getest. Aan de deelsitebeheerder kan links aangeboden worden aan goede bronnen (deeplinks naar bronnen als webrichtlijnen.nl, drempelvrij.nl en accessibility.nl) U.10.1 Duidelijke URI s [AA] In de meeste gevallen is duidelijk waar het webadres heen gaat. In het algemeen worden voor de standaardfuncties in Pleio webpaden in het Engels gebruikt, zoals /file/group of /view. In sommige gevallen tref je minder duidelijke paden aan, bijvoorbeeld: Ook de geüploade bestanden hebben een onduidelijke bestandsnaam. Maak hyperlinks zoveel mogelijk begrijpbaar voor mensen. 21

22 PDF s Via Acrobat Reader zijn steeksproefgewijs enkele documenten door middel van een quick check op toegankelijkheid getest. In alle gevallen vermelde de quick check dat er geen structuur in de tekst werd aangetroffen. Ook zijn de documenten getest met de PDF Accessibility Checker (PAC). Hier falen de documenten ook op vrijwel elke toegankelijkheidscontrole. PAC downloaden: Voor PDF zie ook: Open standaarden bij Overige bevindingen. Overige bevindingen Een usability-issue: De melding als je niet (goed) ingelogd bent komt zodanig tevoorschijn, dat de knop inloggen niet goed te selecteren is. De keuze zit half verstopt achter de melding. 22

23 WYSIWYG De WYSWYG-editor in Pleio verdient extra aandacht. In de keuze onder Paragraph is bijvoorbeeld een Heading 1 (H1) te kiezen. Dit moet weg, want de titel krijgt al een Kop-1-markering (H1). Onderstrepen van tekst moet ook niet mogelijk zijn. Voor een beter totaalbeeld moet hiervoor extra onderzoek uitgevoerd worden: Welke knoppen ontbreken. Welke zijn overbodig. Is de via de knoppen gegenereerde HTML-code correct. 23

24 Bijlage A Voorbeeld custom css EUROSAI.elgg-module-aside.elgg-head h3,.elgg-module-widget.elgg-head h3,.elgg-module-widget.elgg-head h3 a { color: #000000; }.search-advanced-type-selection > li > a { color: #000000; }.elgg-menu-site-default > li > a { color: #000000; }.elgg-menu-site-default > li:focus > a,.elgg-menu-site-default > li:hover > a { color: #000000; background: #e0e0e0; }.elgg-menu-site-default >.elgg-state-selected > a { color: #000000; background: #c0c0c0; }.elgg-menu-site-container { border-top: 2px solid #00B9F5; background: #ffffff; } #pleio-template-selector-search { bottom:0px; } a:focus { outline:2px solid orange; }.groups-stats { margin-bottom:7px; }.groups-stats p { display:none; }.groups-stats p:first-child { display:block; margin-bottom:0; } Bijlage B Voorbeeld custom css ICTU #menu_builder_menu { padding-top:0px; border-bottom:1px; } #wrapper_header { } #pleio_template_search { top:55px;} #pages_page table { border-top:1px solid #39316e; border-right:1px solid #39316e; } #pages_page table th, #pages_page table td { border-bottom:1px solid #39316e; border-left:1px solid #39316e; padding:2px; }.collapsable_box_header h1 { font-size: 1.1em; }.elgg-page-default.elgg-page-header >.elgg-inner { height: 97px; }.elgg-menu-site-container {height: 23px;} 24