Website Adviesrapport · De website van de gemeente Westland fungeert eigenlijk als informatie...

Website Adviesrapport

Usability & Accessibility

Datum: 19 Januari 2009 Module: GMTIMP06 Docent: Bob Pikaar Studenten: - Milo Meulenkamp (0770572) - Alexander Vis (0765676)

Projectnaam: GMTIMP6 Usability (Adviesplan) Team: Milo Meulenkamp Documentnaam: Adviesrapport gemeentewestland v0.6.docx Alexander Vis Datum: 22 januari 2009 Versie: 0.6

Versiebeheer Versie Datum Auteur Omschrijving 0.1 19-1-2009 GMTIMP6 Initieel document 0.2 20-1-2009 GMTIMP6 Voortgang document 0.3 20-1-2009 GMTIMP6 Toevoeging elementen 0.4 20-1-2009 GMTIMP6 Toevoeging elementen 0.5 20-1-2009 GMTIMP6 Toevoeging elementen 0.6 21-1-2009 GMTIMP6 Verbetering en toevoeging elementen

Distributielijst Versie Datum Aan 0.1

Pagina: 2


Inhoudsopgaven 1. Inleiding .................................................................................................................................... 4

2. Doel en projectgrens .................................................................................................................... 5

3. Doelgroepanalyse ........................................................................................................................ 6

4. Usability ..................................................................................................................................... 7

Test 1: de 5 seconden test............................................................................................................. 7

Test 2: de enquête ....................................................................................................................... 7

Test 3: de screenreader ................................................................................................................ 7

5. Accessibility ................................................................................................................................ 7

Test 4: de W3C Validator ............................................................................................................... 7

Test 5: de 126 webrichtlijnen ......................................................................................................... 7

6. Resultaten .................................................................................................................................. 8

7. Conclusies en aanbevelingen ......................................................................................................... 9

Conclusie .................................................................................................................................... 9

Aanbevelingen ............................................................................................................................. 9

8. Bijlagen ................................................................................................................................... 10

Accessibility webrichtlijnen ........................................................................................................... 10

Taakanalyse .............................................................................................................................. 10

5 seconden test resultaten ............................................................................................................. 10

Nicoline Leeuwe .................................................................................................................... 10

Hein Eizinga ......................................................................................................................... 10

Fabian Valkenberg ................................................................................................................ 10

Toon Streefland .................................................................................................................... 10

Enquette resultaten ....................................................................................................................... 11

Nicoline Leeuwe .................................................................................................................... 11

Hein Eizinga ......................................................................................................................... 11

Toon Streefland .................................................................................................................... 12

Wesley Evers ........................................................................................................................ 13

9. Evaluaties ................................................................................................................................ 15

Evaluatie van Alexander Vis ......................................................................................................... 15

Evaluatie van Milo Meulenkamp .................................................................................................... 15

Pagina: 3


1. Inleiding In dit document vind u het verslag van de uitgevoerde usability testen en enquetes die zijn afgenomen voor het onderzoek naar verbeterpunten voor de website van de gemeente Westland. In de loop der tijd is er veel veranderd met de definitie website, was aan het begin van het internet een website niets meer dan een tekst versie. Tegenwoordig is er veel meer multimedia bij komen kijken en meestal zit alles nog in een mooi portal jasje geweven wat alles weer makkelijker te beheren maakt. Maar al deze nieuwe snufjes hebben ook zijn gevaren. Er zijn namelijk een aantal usability en accessibility aspecten die bij de bouw van een goede website goed in de gaten gehouden moeten worden om ervoor te zorgen dat de website voor iedereen te gebruiken is. Elk aspect moet de website zowel op usability als op accessiblity altijd goed functioneren. Hiervoor hebben wij een aantal testmethodes uitgevoerd op de website van de gemeente Westland om te zien hoe de website presteert en wat daar voor resultaat daar uitkomt. Deze bevindingen hebben wij verwerken in dit document waar wij ook een conclusie en aanbevelingen doen aan de hand van de testresultaten. Het adres van de geteste website is http://www.gemeentewestland.nl

Pagina: 4

http://www.gemeentewestland.nl/


2. Doel en projectgrens We hebben onze grenzen gesteld op het advies geven over mogelijke verbetering van de website, hierbij letten we op de accesability en usability van de website en de 125 webrichtlijnen (Als kanttekening moeten wij hierbij wel zeggen dat wij meer op vormgeving dan op codering advies geven). Hierbij doelen wij onder andere op grote van de lettertype de toegang tot verschillende elementen waardoor de site zo voor elke doelgroep beter toegankelijk wordt. Ons doel is een advies op te stellen waarmee we kijken naar de usability en accesability en een advies uitbrengen om deze te verbeteren. Ook naar visueel en lichamelijk gehandicapten gekeken zullen wij ons advies bijstellen en verbeteren, zodat ook deze doelgroep de website kan bezoeken aangezien de doelgroep van het bedrijf heel veelzijdig is en ook steeds meer ouderen een computer aanschaffen. De usability hebben we getest doormiddel van 2 onderzoeken, de 5 seconden test en een test waarbij de test persoon een opdracht moet doen op de website en hierna vragen moet beantwoorden. Hier zijn hele leuke en op zich wel te verwachten resultaten uitgekomen. Ook hebben we de accesability getest doormiddel van de 125 webrichtlijnen er op los te laten. Het resultaat is verderop in dit rapport te lezen.

Pagina: 5


3. Doelgroepanalyse De website van de gemeente Westland is voor iedereen die binnen de gemeentekring Westland woont maar ook voor de mensen die buiten het Westland wonen en mogelijk naar het Westland toe willen verhuizen. De site is in 2 segmenten te verdelen voor de gebruikers. De gebruikers die informatie willen inwinnen en de gebruikers die diensten en of producten willen regelen. De website van de gemeente Westland fungeert eigenlijk als informatie portal voor alle doelgroepen binnen en buiten de gemeentekring en als toeleverancier voor diensten voor alle doelgroepen binnen de gemeentekring. De klanten Als een bezoeker die op de gemeente Westland komt is dat vaak voor informatie, maar ook voor de zogezegd digitale loket afhandeling klanten. Onder de informatieve klanten vallen de gebruikers die op de website informatie komen vergaren en eventueel daarna overstappen naar een dienst, deze informatieve klanten kunnen zowel uit de dorpskringen komen of van buiten de gemeente Westland. Mensen met een beperking Op de website is het mogelijk dat er mensen komen met een beperking dit namelijk vanwege het digitale loket of die informatie vergaren, voor deze mensen is het ook belangrijk dat de website goed toegankelijk is en inzichtelijk zodat ze de juiste informatie of dienst kunnen bereiken.

Pagina: 6


4. Usability Voor het onderzoeken van de website www.gemeenteWestland.nl op de usability hebben wij 2 testen geselecteerd en uitgevoerd. De uitgevoerde tests zijn de 5 seconden test en de Enquête. Hieronder vind u de resultaten.

Test 1: de 5 seconden test De vijf seconden test methode werkt als volgt:

• Vertel de gebruiker dat hij zeer kort een webpagina te zien krijgt waar hij een bepaalde taak moet voltooien.

• Laat de webpagina 5 seconden zien. • Laat de gebruiker alles opschrijven wat hij zich van de pagina herinnert. • Stel de gebruiker een paar vragen om erachter te komen of hij de voor de webpagina belangrijkste

taken zou kunnen voltooien. In ons geval is dit de aanvraag voor een nieuw rijbewijs.

Test 2: de enquête Om veel informatie te krijgen van gebruikers is de enquête methode een hele goede methode om vele informatie te krijgen die duidelijke antwoorden vergaren. Een antwoord op elke vraag wordt meestal beknopt opgesteld en is daarom goed te hanteren. Voorbeeld van de enquête:

Test 3: de screenreader Met deze test kan goed gekeken worden hoe een slechtziend/blind persoon de site gebruikt om de informatie af te halen. Hierbij gebruikt het persoon een zogenoemde screenreader. Deze wordt op de gebruiker zijn computer geïnstalleerd en leest de website punt voor punt door. Dit is tijdrovend zeker als de site slecht opgebouwd is. Daarom een ideale test om zeker mee te nemen in de aanbevelingspunten als deze slecht scoort.

5. Accessibility

Test 4: de W3C Validator De validators van W3c controleren de website op eventuele verkeerd geprogrammeerde code en geven daar een waarschuwing over maar gelijk ook een oplossing tot het probleem. Erg handig en simpel om de site qua code 99.9% goede te maken.

Test 5: de 126 webrichtlijnen Als accessability test hebben we gekeken naar de richtlijnen voor het web. De webrichtlijnen is een verzamelnaam voor een door de Nederlandse overheid ontwikkelde set van 125 kwaliteitsrichtlijnen waarmee de kwaliteit van website kan worden gewaarborgd (wiki 126 webrichtlijnen) Deze richtlijnen zijn in 2004 ontwikkeld voor de bouw van duurzame en toegankelijke websites. Websites die aan deze richtlijnen voldoen zijn dan ook optimaal toegankelijk voor gebruikers die wat minder makkelijk overweg kunnen met bepaalde apparatuur en browsers, door bijvoorbeeld een functiebeperking (visuele handicap bijvoorbeeld).

Pagina: 7


6. Resultaten In de bijlagen van dit document zijn alle resultaten meegenomen. De belangrijkste heb ik hieronder opgesomd.

1. Volgens vele was de site rommelig en leek onvolledig 2. Het menu beschouwde bijna iedereen als een ramp 3. De aangeboden diensten moet zeker verbeterd worden. 4. Er waren enkele met browser problemen. 5. Er zitten bij de W3C test heel veel fouten in de website 6. Bij de screenreader test werd alles dubbel gezegd.

Pagina: 8


7. Conclusies en aanbevelingen

Conclusie Door de testen hebben we het gedrag van de testpersonen (gebruikers) kunnen meten en zo ook waar de knelpunten lagen. De conclusies kunnen ook als aanbevelingen beschouwd worden om de website mogelijk te verbeteren. Mochten deze aanbevelingen doorgevoerd worden kunnen de gebruikers van de gemeente Westland beter gebruik maken van de informatie en diensten zodat dit weer in goede aarde valt bij de gebruikers.

Aanbevelingen Om de prioriteiten weer te geven doen we dat met behulp van kleuren. De prioriteiten zijn belangrijk voor het aanpakken van de problemen. Dus als een advies een hoge prioriteit heeft zal deze als eerst behandeld worden. Het nummer die voor het advies staat word weer doorverwezen naar het advies in de inhoud van het verslag.

1. Legenda: • Hoge prioriteit • Middelmatige prioriteit • Lage prioriteit

2. Hoge prioriteit 2.1. ● Wij adviseren de website browser onafhankelijk te maken, nu zit er te veel verschil in tussen de

merken browsers. De website functioneert zelfs niet in Firefox.

2.2. ● De site niet in Frames op te bouwen maar uit div’s

2.3. ● Het menu aan te passen naar een overzichtelijker niet uitklapbaar menu.

2.4. ● Wij adviseren de kleuren combinatie aan te passen om een betere uitstraling te krijgen maar ook voor slechtziende mensen het beter kunnen lezen

2.5. ● De mogelijkheid om de lettertype en of grote aan te passen voor slechtziende

2.6. ● Onderscheid een dienst of informatie beter van elkaar doormiddel van kleur bijvoorbeeld.

2.7. ● Maak diensten overzichtelijker zodat de bezoekers beter deze dienst kunnen afnemen.

2.8. ● Maak de zoekmachine beter toegankelijk en zorg ervoor als er een tikfout wordt gemaakt dat hij hier een opmerking over maakt om de bezoeker zo goed mogelijk te helpen.

3. Middelmatige prioriteit

3.1. ● De Mogelijkheid tot contrastverandering voor slechtziende bezoekers.

3.2. ● Ervoor zorgen dat de website niet te veel verdeeld wordt onder menu’s meer consistentie met

bijvoorbeeld rechts/boven het menu en links de content.

3.3. ● Geef het nieuws op de voorpagina niet in blokken, maar in een rij met maximaal 5 items aflopend. Dit leest dan aanlokkelijker en wordt de informatie beter vergaard.

3.4. ● Zorg ervoor dat er maar een nieuwslijstje staat zoals bijvoorbeeld hierboven beschreven. Op dit moment zijn er 2 items en dat is verwarrend.

4. Lage prioriteit 4.1. ● Wij adviseren de website meertalig te maken om zo een grotere doelgroep te bereiken

4.2. ● Wij adviseren pop-ups niet te gebruiken vanwege de verwarring die de bezoekers van kunnen

krijgen.

4.3. ● Wij adviseren externe site altijd te laden in een nieuw venster, hierdoor kan de bezoeker weer snel terugschakelen naar de website.

Pagina: 9


8. Bijlagen

Accessibility webrichtlijnen Voor de resultaten die uit accessibility test uitgevloeid zijn, ook wel de 126 webrichtlijnen behandelt verschillende thema’s die de toegankelijkheid van de website bepalen hebben wij uitgewerkt in het document “webrichtlijnen-gemeentewestland-v4.pdf” dit rapport zit als bijlage achterin.

Taakanalyse In de taakanalyse van de website hebben wij de functie van de website beschreven. De taakanalyse is in het document “taakanalyse-gemeentewestland.pdf” te vinden

5 seconden test resultaten Nicoline Leeuwe Omschrijving: Er was vrij veel tekst. Ook veel verschillende plekken met tekst. Menu duidelijk aan de linkerkant, maar over het algemeen een beetje onoverzichtelijk. Voltooien taak: De taak heb ik niet kunnen voltooien, dit kwam omdat ik niet een datum kon kiezen. De pagina bleef blanco.

Hein Eizinga Omschrijving: Vrij compacte website op het eerste gezicht. Veel tekst op een relatief klein stukje van mijn scherm. De knoppen aan de rechterzijde leken handig. Voltooien taak: Doordat ik Firefox gebruik kwam ik niet ver in de aanvraag voor een nieuw rijbewijs. Ik krijg een blanco scherm, wat dus einde verhaal blijkt.

Fabian Valkenberg Omschrijving: Mooie site, overzichtelijk en duidelijk menu. Voltooien taak: De taak was redelijk makkelijk te voltooien. De eerste stap was wel even zoeken in het menu.

Toon Streefland Omschrijving: De site kwam mij een beetje rommelig over. Veel verschillende teksten op een klein stuk ruimte, en verder grote velden loze ruimte. Het kwam bij mij een beetje raar over in ieder geval. Voltooien taak: In vrij korte tijd de taak voltooit. Dit alles was vrij duidelijk en verliep soepel.

Pagina: 10


Enquette resultaten Nicoline Leeuwe Geslacht:Vrouw Leeftijd :57 Vraag 1: Als u naar de website in een oogopslag bekijkt, wat vind u dan opvallend op deze website? Leg uit? Het menu klopt niet, deze ziet er vreemd uit Vraag 2: Kunt u makkelijk een paspoort aanvraag doen? Leg uit? Een afspraak voor paspoort aanvragen lukt niet online Vraag 3: Kunt u makkelijk specifieke gemeentelijke informatie vinden? Ja, ik ging bijvoorbeeld de afvalinformatie zoeken. Dit lukt goed. Vraag 4: Geef uw mening of de volgende bewerkingen juist of onjuist zijn en onderbouw deze keuze

De informatie op de website is duidelijk en overzichtelijk: Juist

Op de website zijn ook diensten te regelen Onjuist Er is op de gehele website een specifieke stijl gehanteerd. Juist De website wordt zo herkend als gemeentelijke website Juist

Vraag 5: Als u de website in een cijfer mag uitdrukken wat is dat cijfer dan? Cijfer (1=slecht 10=perfect): 7 Waarom geeft u de website dit cijfer? Omdat ik voor diensten en zaken gewoon naar het stadhuis wil gaan. Om daar dan dingen te regelen die ik moet regelen. Vraag 6: Als u bewoner van het Westland bent zou u deze site gebruiken als informatiebron over het Westland? Waarom vind u dat? Ja, maar alleen voor de informatie. Waarom, zie hierboven. Vraag 7: Als u uit een andere gemeente zou komen, en u wilt informatie over de gemeente Westland hebben. Zou u dan op de site van de gemeente Westland die informatie kunnen halen? En waarom denkt u dat? Ja, de website is duidelijk. Vraag 8: Welk merk browser en wat voor resolutie gebruikt u? Ik gebruik Firefox, en de resolutie is 800x600. Vraag 9: Wat zou er nog beter kunnen aan deze website? Het menu, deze ziet er vreemd uit. Vraag 10: Mist u nog vragen in deze enquête, of waren er onduidelijkheden? Zo ja, welke?

Hein Eizinga Geslacht:Man Leeftijd :41 Vraag 1: Als u naar de website in een oogopslag bekijkt, wat vind u dan opvallend op deze website? Leg uit? Het menu klopt niet, verder veel nieuwtjes op de frontpage. Vraag 2: Kunt u makkelijk een paspoort aanvraag doen? Leg uit? Een afspraak voor paspoort aanvragen lukt niet online. Java werkt niet met mijn browser voor deze site. Vraag 3: Kunt u makkelijk specifieke gemeentelijke informatie vinden?

Pagina: 11


Redelijk makkelijk, de informatie is duidelijk op te halen via de site struktuur. Vraag 4: Geef uw mening of de volgende bewerkingen juist of onjuist zijn en onderbouw deze keuze


Op de website zijn ook diensten te regelen Onjuist Er is op de gehele website een specifieke stijl gehanteerd. Juist De website wordt zo herkend als gemeentelijke website Onjuist

Vraag 5: Als u de website in een cijfer mag uitdrukken wat is dat cijfer dan? Cijfer (1=slecht 10=perfect): 4 Waarom geeft u de website dit cijfer? Sinds ik de halft van de functies van de site niet kan gebruiken (JAVA), vind ik het een kwalijke zaak. Zeker voor een overheidsinstantie. Vraag 6: Als u bewoner van het Westland bent zou u deze site gebruiken als informatiebron over het Westland? Waarom vind u dat? Ja, Ik zou niet eens weten welke andere informatie voorziening mij kan voorzien van genoeg info. Vraag 7: Als u uit een andere gemeente zou komen, en u wilt informatie over de gemeente Westland hebben. Zou u dan op de site van de gemeente Westland die informatie kunnen halen? En waarom denkt u dat? Ja, de website is duidelijk. Vraag 8: Welk merk browser en wat voor resolutie gebruikt u? Ik gebruik Firefox, en de resolutie is 1680x1050. Vraag 9: Wat zou er nog beter kunnen aan deze website? Het JAVA gedeelte, zodat mensen zonder Microsoft IE ook gebruik kunnen maken van de desgewenste functies. Vraag 10: Mist u nog vragen in deze enquête, of waren er onduidelijkheden? Zo ja, welke? Nee

Toon Streefland Geslacht:Man Leeftijd :31 Vraag 1: Als u naar de website in een oogopslag bekijkt, wat vind u dan opvallend op deze website? Leg uit? Veel nieuwtjes op de site en verder wat grote loze vlakken. De knoppen aan de rechterkant lijken me handig, maar zien er wel een beetje rommelig uit. Vraag 2: Kunt u makkelijk een paspoort aanvraag doen? Leg uit? De aanvraag van een paspoort ging makkelijk. Het menu maakt het alleen niet in 1 oogopslag duidelijk waar je moet zijn. Al met al ging het soepel om de aanvraag te doen. Vraag 3: Kunt u makkelijk specifieke gemeentelijke informatie vinden? Er staat wel erg veel verschillende informatie op de site. Hierdoor was is het soms toch nog een beetje zoeken ook al is het menu duidelijk gemaakt. Vraag 4: Geef uw mening of de volgende bewerkingen juist of onjuist zijn en onderbouw deze keuze


Op de website zijn ook diensten te regelen Juist Er is op de gehele website een specifieke stijl gehanteerd.

Pagina: 12


Juist De website wordt zo herkend als gemeentelijke website Juist

Vraag 5: Als u de website in een cijfer mag uitdrukken wat is dat cijfer dan? Cijfer (1=slecht 10=perfect): 8 waarom geeft u de website dit cijfer? Omdat de eerste indruk mij wat somber deed denken over de website. Maar na er een tijdje opgespeeld te hebben was het me wel duidelijk en overzichtelijk. Vraag 6: Als u bewoner van het Westland bent zou u deze site gebruiken als informatiebron over het Westland? Waarom vind u dat? Jazeker, de website bevat meer dan genoeg informatie Vraag 7: Als u uit een andere gemeente zou komen, en u wilt informatie over de gemeente Westland hebben. Zou u dan op de site van de gemeente Westland die informatie kunnen halen? En waarom denkt u dat? Zie vraag 7 Vraag 8: Welk merk brouwer en wat voor resolutie gebruikt u? Ik gebruik Internet Explorer 8 met een resolutie van 1280x1024 Vraag 9: Wat zou er nog beter kunnen aan deze website? De extra menu knoppen aan de rechterkant vind ik niet zo mooi Vraag 10: Mist u nog vragen in deze enquête, of waren er onduidelijkheden? Zo ja, welke?

Wesley Evers Geslacht:Man Leeftijd :25 Vraag 1: Als u naar de website in een oogopslag bekijkt, wat vind u dan opvallend op deze website? Leg uit? Het valt mij op dat er veel informatie op een klein stukje staat, terwijl er aan de zijkanten van de pagina’s nog zeer veel ongebruikte ruimte staat. Daarnaast valt het me op dat het witte gedeelte bovenaan overbodig groot is zonder dat daar veel informatie is terug te vinden. Vraag 2: Kunt u makkelijk een paspoort aanvraag doen? Leg uit? Zie vraag 3 Vraag 3: Kunt u makkelijk specifieke gemeentelijke informatie vinden? Ik kon het slecht terugvinden, het selectiemenu bij producten en diensten geeft een erg klein resultaatscherm, dat in combinatie met een langzame website wekt bij mij al aardig wat irritatie op. Vraag 4: Geef uw mening of de volgende bewerkingen juist of onjuist zijn en onderbouw deze keuze

De informatie op de website is duidelijk en overzichtelijk: Onjuist

Op de website zijn ook diensten te regelen Juist Er is op de gehele website een specifieke stijl gehanteerd. Onjuist De website wordt zo herkend als gemeentelijke website Juist

Vraag 5: Als u de website in een cijfer mag uitdrukken wat is dat cijfer dan? Cijfer (1=slecht 10=perfect): 3 waarom geeft u de website dit cijfer? Zie vraag 3

Pagina: 13


Vraag 6: Als u bewoner van het Westland bent zou u deze site gebruiken als informatiebron over het Westland? Waarom vind u dat? Ja, maar enkel als ik informatie zoek die m.b.t. de diensten van gemeente. Vraag 7: Als u uit een andere gemeente zou komen, en u wilt informatie over de gemeente Westland hebben. Zou u dan op de site van de gemeente Westland die informatie kunnen halen? En waarom denkt u dat? Ja, maar enkel als ik informatie zoek die m.b.t. de diensten van gemeente. Vraag 8: Welk merk brouwer en wat voor resolutie gebruikt u? Ik gebruik FireFox 3.0.5 met een resolutie van 1280x1024 Vraag 9: Wat zou er nog beter kunnen aan deze website? Tijdens mijn vluchtige bezoek aan de website viel het op dat de weergave per browser aanzienlijk verschilt. Dit wekt bij mij persoonlijk de indruk dat de ontwikkelaar van deze site blijkbaar niet capabel genoeg is om te werken met standaarden? Vraag 10: Mist u nog vragen in deze enquête, of waren er onduidelijkheden? Zo ja, welke? Een vraag over de gebruikte webbrowser en resolutie.

Pagina: 14


Pagina: 15

9. Evaluaties

Evaluatie van Alexander Vis Module: Veel informatie die in deze module gegeven wordt was voor mij niet geheel onbekend, maar het is altijd goed om een onfrisser te krijgen. Een heel interessant onderwerp en je zal er altijd rekening mee blijven houden. Door de richtlijnen in acht te houden is de kwaliteit van producten die ik vervaardig verbeterd ten opzichten van eerdere producten. Nu ik weer scherp ben ingesteld over wat usability kan betekenen en meer succes kan opleveren op de media producten kan ik concluderen dat deze module perfect aansluit bij Grafimedia en het een leuk blok is om te volgen. Samenwerking: De samenwerking vind ik uitzonderlijk goed taken werden vrijwel automatische verdeeld en alles verloopt soepel. Jammer dat Milo op het laatste moment ziek werd en ik bang was dat ik alles zelf moest vergaren en vervaardigen om het adviesrapport netjes op de rails te zetten. Maar door doorzettingsvermogen van Milo is alles toch goed op zijn poten terecht gekomen.

Evaluatie van Milo Meulenkamp Module: Dit is een erg interessant deel waar iedereen eigenlijk wel baat bij heeft. Ik had net als Alexander al wel het een en ander al meegekregen op welke manier dan ook. Ik bijvoorbeeld doordat ik een soortgelijke module al eens eerder kreeg maar niet afronden. Uiteindelijk is dit een leuk vak, en vooral nuttig. Samenwerking: Met Alexander werken ging perfect. We waren allebei ijverig genoeg om de zaken zo snel mogelijk af te ronden. Afspraken werden goed gemaakt en ook nog nagekomen. Al met al een goed gezelschap om mee samen te werken.

Projectnaam: GMTIMP6 Usability (Adviesplan) Team: Milo Meulenkamp Documentnaam: Webrichtlijnen gemeenteWestland Alexander Vis Datum: 10 december 2008 Versie: 4

Webrichtlijnen onderzoek gemeente Westland

Accessibility webrichtlijnen Hieronder zijn de richtlijnen opgesteld na onderzoek op de website van de gemeente Westland, deze test ook wel de 126 webrichtlijnen behandelen verschillende thema’s die de toegankelijkheid zal verbeteren als de adviezen worden opgevolgd.

Inhoudsopgaven Productfilosofie ............................................................................................................................... 2

Bouwen volgens webstandaarden ...................................................................................................... 2

Beschrijvende markup ..................................................................................................................... 3

Permanente, unieke URL’s ................................................................................................................ 3

Openstandaarden ............................................................................................................................ 4

Paginastructuur .............................................................................................................................. 4

Afbeeldingen en alternatieve tekst ..................................................................................................... 5

Links en navigatie ........................................................................................................................... 6

Cascading Style Sheets .................................................................................................................... 7

Kleurgebruik ................................................................................................................................... 7

Tabellen ........................................................................................................................................ 8

Frames .......................................................................................................................................... 8

Formulieren .................................................................................................................................... 8

Client-side script en DOM ............................................................................................................... 10

Talen ........................................................................................................................................... 10

Karaktercodering .......................................................................................................................... 10

Optimalisatie voor zoekmachines ..................................................................................................... 11

Contingency Design ....................................................................................................................... 12

Legenda ...................................................................................................................................... 12

Pagina: 1


Productfilosofie Richtlijn Beschrijving R-pd.1.1 Houd structuur en vormgeving zoveel mogelijk gescheiden: gebruik HTML of XHTML voor de

structuur van de site en CSS voor de vormgeving ervan. Alle elementen blijven leesbaar na het uizetten van de CSS, al zijn sommige elementen binnen de pagina van een style voorzien waardoor de pagina standaard opgemaakt blijft.

R-pd.1.2 Bouw websites volgens het principe van ‘gelaagd bouwen’. De site is gelaagd opgebouwd, er is zoveel mogelijk rekening gehouden met alle elementen die worden voorzien van title en/of alt tekst.

R-pd.1.3 Maak de functie van de website niet afhankelijk van optionele technologie, zoals CSS en client-side script: optionele technologie dient de informatie op de site en het gebruik ervan te complementeren en niet de toegang ertoe te belemmeren wanneer deze technologie niet ondersteund wordt.

Het menu en sommige diensten is er gebruik gemaakt van client-side scripts hierdoor is de competibiliteit van de site een punt van aandacht. Mocht de gebruiker namelijk geen javascript aan hebben staan dan kan hij niet goed met de site werken. Voor de diensten is zelfs java nodig. Deze moet apart geïnstalleerd staan op de computer, bevat de computer geen java, kan de gebruiker er totaal geen gebruik van maken.

Bouwen volgens webstandaarden Richtlijn Beschrijving R-pd.2.1 Gebruik HTML 4.01 of XHTML 1.0 volgens de W3C specificaties voor de markup van

overheidswebsites. This page is not Valid HTML 4.01 Strict! This page is not Valid XHTML 1.0 Transitional! R-pd.2.2 Gebruik geen markup die in de W3C specificaties staat aangemerkt als deprecated

(achterhaald). In de check wordt niets beschreven over deprecated markup. Mogelijk omdat dit ook achterhaald is. R-pd.2.3 Bij het aanpassen van een bestaande website: gebruik van HTML 4.01 of XHTML 1.0 alleen

de Transitional variant als het gebruik van de Strict variant onmogelijk of onwenselijk is. Bij de transitional zijn er nog steeds 55 errors: This page is not Valid HTML 4.01 Transitional! R-pd.2.4 Bij de bouw van een nieuwe website: gebruik van HTML 4.01 of XHTML 1.0 de Strict variant. n.v.t. R-pd.2.5 Gebruik geen frames op overheidswebsites. Gebruik daarom ook niet van HTML 4.01 of

XHTML 1.0 de Frameset variant. Er wordt gebruik gemaakt van een frameset div binnen de website, daardoor is de site slecht te bekijken in Firefox, dit is nog maar een browser die niet functioneert. R-pd.2.6 Gebruik CSS Level-2.1 volgens de W3C specificatie voor het vormgeven van

overheidswebsites. Er zitten 82 fouten in de CSS volgens de W3C specificatie Zie hier W3C validatie

R-pd.2.7 Indien client-side script wordt gebruikt, gebruik ECMAScript volgens de specificatie. In de site zit client-side scripts maar deze functioneren binnen de laatste browsers goed, hieraan kunnen we concluderen dat er gebruik is gemaakt van de ECMA richtlijnen. R-pd.2.8 Indien men elementen in de HTML hiërarchie manipuleert, maak gebruik van de W3C DOM

volgens de specificatie. Na controle hebben wij geen HTML hiërarchie manipulatie opgemerkt. R-pd.2.9 Bouw een website volgens de Web Content Accessibility Guidelines (WCAG 1.0) van het W3C Hier maken wij nu geen gebruik van omdat we een adviesrapport uitbrengen over de huidige site.

Pagina: 2

http://jigsaw.w3.org/css-validator/validator?uri=www.gemeentewestland.nl&profile=css21&usermedium=all&warning=1&lang=nl


Beschrijvende markup Richtlijn Beschrijving R-pd.3.1 Schrijf zowel grammaticaal correcte, als beschrijvende markup. Er zijn veel fouten te vinden in de opmaak van de HTML structuur. Bijvoorbeeld align=”absmiddle”, terwijl absmiddle alleen middle had moeten zijn. R-pd.3.2 Gebruik markup voor kopregels die de hiërarchie van de informatie op de pagina uitdrukken. Nee er kan niet van kop naar kop gegaan worden doormiddel van een TAB ook in de code komt geen H1 title tags voor. R-pd.3.3 Sla in de markup geen niveaus in de hiërarchie van kopregels over. Er zitten geen niveau’s in de kopregels omdat ze überhaupt geen kopregels gebruiken. R-pd.3.4 Gebruik het p (paragraph) element voor het aangeven van paragrafen. Gebruik niet het br

(linebreak) element voor het scheiden van paragrafen. Nee er wordt te veel linebreaks gebruikt dit hadden paragraph elementen moeten zijn. R-pd.3.5 Gebruik het em (emphasis) en strong element voor het aangeven van nadruk. Veel gebruik in links R-pd.3.6 Gebruik het abbr (abbreviation) element voor afkortingen indien er onduidelijkheid zou

kunnen ontstaan over de betekenis ervan, de afkorting een zeer belangrijke rol speelt in de tekst of wanneer de afkorting niet voorkomt in het Nederlands woordenboek.

Afkortingen zoals MB en KBS worden niet gedefinieerd in de mark-up R-pd.3.7 Gebruik het dfn (definition) element voor het aangeven van termen, elders gedefiniëerd in

een definitielijst. Nee geen definitielijst e.d aanwezig R-pd.3.8 Gebruik het ins (insertion) en del (deletion) element voor het aangeven van regelmatige

wijzigingen in de inhoud van een pagina. Nee op de voorpagina wordt veel gebruik gemaakt van nieuwitems maar in zulke stukjes staan geen ins en del elements

R-pd.3.9 Vermijd het gebruik van het sup (superscript) en sub (subscript) element waar mogelijk. We zijn niet veel pagina’s tegengekomen waarin het gebruikt wordt. R-pd.3.10 Gebruik het cite element voor referenties naar personen en titels. Het cite element wordt niet gebruikt bij referenties naar personen en titels. R-pd.3.11 Vermijd het gebruik van het q (quotation) element. Het q element wordt niet gebruikt. R-pd.3.12 Gebruik het blockquote element voor het aangeven van (lange) citaten. Er wordt gebruik gemaakt van blockquote binnen de site. R-pd.3.13 Gebruik ol (ordered list) en ul (unordered list) elementen voor het aangeven van lijsten. Er wordt altijd gebruik gemaakt van unordered list elementen. R-pd.3.14 Gebruik het dl (definition list), het dt (definition term) en dd (definition data) element voor

het aangeven van een lijst met definities. Lijsten worden vaak gemaakt en unordered list, en vaak tabel. Er worden geen defenition elementen gebruikt R-pd.3.15 Geef betekenisvolle namen aan id en class attributen. Er wordt redelijk voldaan. Bijv: <div id=”menu_container” class=”footertxt”>

Permanente, unieke URL’s

Richtlijn Beschrijving R-pd.4.1 Produceer unieke, onveranderde URL’s Ja hier wordt veelal gebruik van gemaakt doordat ze gebruik maken van een Content Management Systeem. R-pd.4.2 Dynamisch gegenereerde URL’s dienen nog steeds naar dezelfde inhoud te verwijzen als

inhoud wordt gewijzigd of toegevoegd.

Pagina: 3


Doordat ze gebruik maken van een CMS systeem wordt er bij het toevoegen of wijzigen van content geen veranderingen gebracht aan het item wat aangemaakt is. Dus de url blijf onaangetast.

R-pd.4.3 Vermijd het gebruik van sessies in URL’s.

Wordt geen gebruik van gemaakt

R-pd.4.4 Zorg voor doorverwijzing naar de nieuwe locatie bij het verplaatsen van informatie. Nee ze maken daar geen gebruik van je krijgt een 404 pagina maar niet een duidelijke doorverwijzing naar een sitemap of overzicht hoe je wel bij het document kan komen. R-pd.4.5 Automatische doorverwijzing dient, indien mogelijk, uitgevoerd te worden door de server. In de site zit geen automatische doorverwijzing naar de juiste pagina, wel de 404 afvang gaat automatische door de server.

R-pd.4.6 Gebruik vriendelijke URL’s, die leesbaar en herkenbaar zijn. Er word niet goed gebruik gemaakt van SEO URL’s standaard staat de tekst http://www.gemeentewestland.nl/smartsite.shtml?id=123 dit is niet echt conform de webregels. R-pd.4.7 Zet een leesbare, uitbreidbare directory-structuur op. Niet mogelijk maar als het kon zou het moeten zijn http://www.gemeentewestland.nl/nieuws/123

Openstandaarden Richtlijn Beschrijving R-pd.5.1 In het geval dat belangrijke informatie via een gesloten standaard wordt aangeboden, dient

men dezelfde informatie ook via een open standaard aan te bieden. Er wordt geen gebruik gemaakt van open standaarden zoals RTF of PNG alleen maar PDF, GIF, JPG

Paginastructuur

Richtlijn Beschrijving R-pd.6.2 Elk HTML of XHTML document moet beginnen met een geldige doctype declaratie. Totaal geen doctype gedeclareerd geen transitional of strict R-pd.6.3 Zet de inhoud van de pagina in de HTML broncode op volgorde van belangrijkheid. Door het gebruik van tabellen is de site wel netjes opgedeeld in elementen beginnend met het logo daarna het menu en daarna de content. Er zit enkel wel een menu nog tussen die een beetje zweeft in de sourcecode.

Pagina: 4


Afbeeldingen en alternatieve tekst Richtlijn Beschrijving R-pd.7.1 Het alt (alternative) attribuut dient te worden gebruikt op ieder img (image) en area element

en dient te worden voorzien van een effectieve alternatieve tekst. Het alt teken wordt niet uniform gebruikt hierdoor zijn er veel lege alts of allen bijvoorbeeld de term “afbeelding” in plaats van “Knop ophaaldienstregeling” R-pd.7.2 Gebruik geen alt attribuut voor het oproepen van tooltips Op de site zijn geen tooltips gebruikt, zodoende ook geen alttekst ervoor. R-pd.7.3 Gebruik geen d-links op overheidswebsites. Het gebruik van het longdesc (long description)

attribuut verdient de voorkeur wanneer de alternatieve tekst op het alt attribuut ontoereikend is voor het begrip van de informatie in de afbeelding.

Wordt geen gebruik van gemaakt. R-pd.7.4 Afbeeldingen die staan geplaatst binnen een link dienen een niet-lege alternatieve tekst te

hebben om bezoekers die de afbeelding niet zien in staat te stellen de link te volgen. Daar kunnen ze nog wel wat aan vervangen, de meeste alt teksten zijn of leeg of niet relevant. R-pd.7.5 Geef bij het gebruik van image maps voor zowel het img element als ieder area element een

effectieve alternatieve tekst aan via het alt attribuut. Er wordt geen gebruik gemaakt van image area’s. R-pd.7.6 Decoratieve afbeeldingen dienen zoveel mogelijk door CSS geplaatst te worden. Informatieve

afbeeldingen dienen door HTML geplaatst te worden. Dit wordt aardig nageleefd hier en daar nog wel een decoratieve stukje in de code. R-pd.7.7 Het gebruik van CSS Image Replacement technieken die worden toegepast op essentiële

informatie wordt afgeraden. Er zijn geen Image Replacement technieken te vinden.

Pagina: 5


Links en navigatie Richtlijn Beschrijving R-pd.8.1 Beschrijf niet het mechanisme achter het volgen van een link. Het is wisselend ene keer wordt er info over de bestemming van de link ingevuld de andere keer wat de link is. R-pd.8.2 Schrijf heldere, beschrijvende tekst voor links. Dat is een breed begrip wat helder is! In het algemeen wordt dat aardig nageleefd. R-pd.8.3 Gebruik het minimum aan tekst dat nodig is om te begrijpen waar de link naartoe leidt. De tekst is kort maar duidelijk R-pd.8.4 Geef voldoende informatie over de bestemming van een link om onaangename verrassingen

voor de bezoeker te voorkomen. In de meeste links is goed beschreven waar ze je naartoe brengen. R-pd.8.5 Bij het gebruik van client-side script in combinatie met een link: maak de scriptfunctionaliteit

een uitbreiding op de basisfunctionaliteit van de link. Wordt niet toegepast R-pd.8.6 Bij het gebruik van client-side script in combinatie met een link: indien de link nergens

naartoe leidt, confronteer de bezoeker zonder ondersteuning voor client-side script dan niet met een niet-werkende link.

Wordt niet toegepast R-pd.8.7 Bij het gebruik van client-side script in combinatie met een link: indien noodzakelijk, gebruik

client-side script als een uitbreiding op server-side functies. Wordt niet toegepast R-pd.8.8 Links moeten duidelijk te onderscheiden zijn van andere tekst. Als je met de muis over een link heen gaat wordt de tekst of rood maar er komt altijd een lijn onder de tekst te staan wanneer er over de link heengegaan wordt. Visueel duidelijk herkenbaar. R-pd.8.9 Voorzie in een logische volgorde van de links op de pagina. Gebruik het tabindex attribuut om

van de standaard tabvolgorde van links af te wijken wanneer deze volgorde niet toereikend is voor correct gebruik van de pagina door toetsenbordgebruikers.

Er wordt gebruik gemaakt van de standaard tabindex indeling. R-pd.8.10 Maak het tabben naar links niet onmogelijk. Verwijder niet de focus rectangle rondom een

link of de mogelijkheid tot focus op een link. Dit is niet onmogelijk gemaakt. R-pd.8.11 Ontzie het accesskey attribuut. Als toch besloten wordt dit attribuut toe te passen, gebruik

het alleen op links die door de hele site onveranderd blijven (bijvoorbeeld hoofdnavigatie) en beperk de sneltoetscombinaties tot nummers.

Wordt niet toegepast R-pd.8.12 Geef blinde bezoekers extra mogelijkheden om lange lijsten met links over te slaan. Hier is geen extra functionaliteit voor ingebouwd R-pd.8.13 Geef bovenaan pagina’s met veel onderwerpen een pagina-index met links om naar de

verschillende onderwerpen te navigeren. Op de site van de gemeente Westland maken ze geen gebruik van page-index om te navigeren. Alleen een menu. R-pd.8.14 Links op overheidswebsites dienen niet zonder waarschuwing automatisch nieuwe vensters te

openen. Als er een nieuwe link naar een andere pagina is, wordt dit niet aangegeven. Er wordt gewoon een nieuwe scherm geopend. R-pd.8.15 Open geen automatische nieuwe vensters, behalve wanneer de locatie van de link

behulpzame informatie bevat die nodig kan zijn tijdens een belangrijk, niet te onderbreken proces.

Er zijn geen automatische opende vensters op de wensite R-pd.8.16 Links naar e-mail adressen: het e-mail adres waaraan het te versturen bericht is gericht dient

zichtbaar te zijn in de linktekst. De email adressen zijn duidelijk zichtbaar en voren daar geen belemmering in. R-pd.8.17 Links naar e-mail adressen: de URL in het href attribuut van een link naar een e-mail adres,

Pagina: 6


mag alleen het mailto protocol en een e-mail adres bevatten. Dit wordt altijd netjes toegepast

R-pd.8.18 Pas geen technische maatregelen toe op de website om een e-mail adres te verhullen voor spam robots.

En een hoop spam zullen ze krijgen dan, maar ze hebben geen maatregelen. R-pd.8.19 Ga uiterst voorzichtig om met het publiceren van e-mail adressen van bezoekers van de

website. Informeer de bezoeker over welke gegevens worden gepubliceerd op de site, of publiceer het e-mail adres van de bezoeker niet.

Dit is niet mogelijk omdat ze geen registratie systeem hebben op de site in de vorm van een gastenboek e.d. R-pd.8.20 Bij het aanbieden van downloadbare bestanden, informeer de bezoeker over hoe deze te

downloaden en vervolgens te gebruiken. De enige downloadbare bestanden die ze aanbieden zijn PDF bestanden maar hierbij staat niet met welk programma je die kan lezen, dit is dus een gebreek. R-pd.8.21 Serveer bestanden met het correcte MIME type. Er wordt van de standaard mime codering gebruik gemaakt. R-pd.8.22 Open links naar downloadbare bestanden niet in een automatisch nieuw venster. Er wordt voor de PDF wel een nieuw venster geopend, maar dat komt namelijk als je de software hebt geïnstalleerd de PDF da netjes afbeeld, en anders bied hij deze ter download aan. R-pd.8.23 Serveer downloadbare bestanden niet met opzet een onbekend of incorrect MIME type om de

browser tot een bepaald gedrag te dwingen. Wordt niet toegepast

Cascading Style Sheets Richtlijn Beschrijving R-pd.1.1 Houd structuur en vormgeving zoveel mogelijk gescheiden: gebruik HTML of XHTML voor de

structuur van de site en CSS voor de vormgeving ervan. De vormgeving wordt in de CSS opmaak beschreven, de structuur wordt in HTML in het document beschreven en netjes gescheiden. R-pd.9.1 CSS dient in gelinkte bestanden geplaatst te worden en niet gemengd te worden met de

HTML broncode. In de “head” van het document wordt naar de css bestanden verwezen. Maar er wordt soms ook in de “body” CSS stylen aangegeven. R-pd.9.2 Pagina’s dienen bruikbaar te blijven wanneer CSS door een webbrowser niet ondersteund

wordt. Deze blijven bruikbaar, als je deze uitzet dan blijft de pagina leesbaar.

Kleurgebruik Richtlijn Beschrijving R-pd.10.1 Zorg ervoor dat communicatieve elementen hun betekenis niet uitsluitend door kleur

overbrengen. Er wordt zo goed mogelijk naar geleefd door goede kopteksten. R-pd.10.2 Wees consistent met kleurgebruik bij het geven van betekenis. Er wordt een algemene kleur gebruikt, ze hebben de basiskleuren die ze voor de gemeente Westland gebruiken goed doorgevoerd en nageleefd. R-pd.10.3 Zorg voor voldoende helderheidscontrast tussen teksten achtergrondkleur.

De constrasten zijn goed, goed leesbaar en geen onduidelijke scharkeringen

Pagina: 7


Tabellen Richtlijn Beschrijving R-pd.11.1 Gebruik tabellen voor het weergeven van relationele informatie en niet voor layout. De website gebuikt het allemaal door elkaar, dit zou beter opgesteld kunnen worden. R-pd.11.2 Gebruik het th (table header) element voor het beschrijven van een kolom of rij in een tabel

met relationele informatie. De TH elementen wordt niet gebruikt. R-pd.11.3 Groepeer rijen met alleen th (table header) cellen met het thead (table head) element.

Groepeer de rest van de tabel met het tbody (table body) element. Thead, tbody wordt allemaal niet gebruikt. R-pd.11.4 Gebruik het scope attribuut voor het associëren van tabellabels (th cellen) met kolommen of

rijen. Er is geen scoop definitie in de tabellen gedefinieerd. R-pd.11.5 Gebruik het header en id element voor het associëren van tabellabels (th cellen) met

individuele cellen in complexe tabellen. Er wordt geen gebruik gemaakt van header om tabellabels te associëren R-pd.11.6 Geef afkortingen voor tabellabels (th cellen) via het abbr (abbreviation) attribuut wanneer de

lengte van de inhoud van het tabellabel zodanig van lengte is dat herhaling in een spraakbrowser irritatie kan wekken.

De website maakt daar geen gebruik van.

R-pd.11.7 Gebruik het caption element of heading markup voor het geven van een koptekst boven een tabel.

Er wordt geen caption elementen of heading markup gebruikt voor kopteksten in een tabel R-pd.11.8 Bij het aanpassen van een bestaande website: gebruik CSS voor de presentatie en layout van

webpagina’s en zie af van tabellen voor layout. Dit is een tip die de gemeenteWestland zeker moet toepassen. R-pd.11.9 Bij het gebruik van tabellen voor layout: gebruik niet meer dan één tabel en gebruik

zoveel mogelijk CSS voor de vormgeving van deze tabel. De site is een vorm van tabel in talbel situatie, dit zou verbeterd moeten worden. R-pd.11.10 Bij het gebruik van tabellen voor layout: pas geen toegankelijkheidsmarkup toe. Voor de enkele keer dat een tabel is gebruikt voor layout is er geen toegankelijkheidsmarkup toegepast, enkel td cellen. Slechtziende of blinden zullen dus niet veel hinder ondervinden.

Frames Richtlijn Beschrijving R-pd.12.1 Gebruik geen frames op overheidswebsites. Dit geldt voor zowel reguliere frames

binnen framesets, als zogenaamde iframes. De site van de gemeente Westland heeft een aantal mooie ifames ingebouwd deze zorgen er ook voor dat de site slecht bruikbaar wordt in FireFox

Formulieren Richtlijn Beschrijving R-pd.13.1 Gebruik het label element om tekst expliciet met een invoerveld in een formulier te

associëren. Ik ben nog geen een label tegengekomen bij een formulier. R-pd.13.2 Gebruik het tabindex attribuut om van de standaard tab-volgorde op formuliervelden

af te wijken wanneer deze volgorde niet toereikend is voor correct gebruik van het formulier door toetsenbordgebruikers.

Er wordt geen gebruik gemaakt van tabindex, maar dit is ook niet nodig. In de formulieren gaat de volgorde automatisch al goed. R-pd.13.3 Breng groepering van invoervelden aan door middel van het fieldset element. Er wordt geen gebruik gemaakt van het fieldset element.

Pagina: 8


R-pd.13.4 Vermijd automatische doorverwijzing bij interactie met formulieren. Er zitten validatie formulieren in die controleren dat je alles goed hebt ingevuld voordat je door mag gaan. R-pd.13.5 Gebruik geen client-side script of formulieren als de enige manier om informatie op de

site te bereiken. Er wordt stevig gebruik gemaakt van client-side scripts R-pd.13.6 Confronteer een bezoeker niet met een onwerkzaam formulier als optionele

technologieën – zoals CSS of client-side script – niet door de browser ondersteund worden.

Dit is moeilijk te vermeiden met sommige technieken maar op de site van de gemeente westland hebben ze helemaal geen moeite ervoor gedaan. R-pd.13.7 Wees terughoudend met het gebruik van CSS voor invoervelden en formulierknoppen. Er zit zelfs helemaal geen css opmaak over de formulieren heen. R-pd.13.8 Als een bezoeker persoonlijke gegevens dient op te geven, laat deze dan weten wat er

met die gegevens gedaan zal worden, bijvoorbeeld in de vorm van een privacy verklaring.

Deze hebben ze niet op de site alleen een disclaimer en bescherming van persoonsgegevens. R-pd.13.9 Verg van een bezoeker via een formulier niet meer informatie op te geven dan

noodzakelijk is voor het doel van het formulier. Houdt formulieren zo kort mogelijk en beperk het verplicht invullen van formuliervelden.

Het zijn concrete formulieren denk dat de bezoeker het niet lastig vind deze formulieren in te vullen. R-pd.13.10 Geef aan welke velden verplicht of optioneel zijn om in te vullen. Er staat duidelijk bovenaan “velden met een * zijn verplicht” en vervolgens staat er duidelijk * bij sommige velden. R-pd.13.11 Voorzie in alternatieve contactmogelijkheden, zoals adresgegevens, telefoonnummers

of e-mailadressen, indien deze beschikbaar zijn. Buiten het digitale loket is er ook het reguliere loket, dus mochten mensen niet op de site hun vraag kunnen stellen, kunnen ze altijd nog naar het gemeentehuis. Of bellen/faxen/e-mailen R-pd.13.12 Laat de bezoeker weten wat er met het formulier na verzending gedaan zal worden. Je krijgt een kort berichtje dat het bericht is verwerkt en dat ze er verder naar zullen kijken en spoedig bericht terug krijgt. R-pd.13.13 Geef de bezoeker de mogelijkheid tot archivering van zijn reactie. Niet mogelijk. R-pd.13.14 bevestiging dat zijn bericht is aangekomen bij de ontvanger (autoreply). Niet mogelijk. R-pd.13.15 Geef voorafgaande aan complexe formulieren de bezoeker een indruk van hoe groot

het formulier is. Er zit geen formulier legenda e.d. in. R-pd.13.16 Noem van te voren documenten die de bezoeker (eventueel) nodig heeft bij het

invullen van het formulier. Wordt niets over vermeld R-pd.13.17 Voorzie formulieren van instructies voor de bezoeker waar nodig, met name bij de

invoervelden waar ze toedoen. Er zijn wel veldnamen aan gegeven dus dat is opzich duidelijk aangezien dit standaard vragen zijn, maar bij specifieke vragen staan er geen tooltips e.d. bij. R-pd.13.18 Voeg geen herstel (reset) knoppen toe aan een formulier. Er is altijd een reset/herstel knop bij een formulier.

Pagina: 9


Client-side script en DOM Richtlijn Beschrijving R-pd.14.1 Gebruik geen client-side script voor onmisbare functionaliteit op webpagina’s, tenzij

het gebrek aan ondersteuning voor deze scripts voldoende wordt afgevangen door HTML alternatieven en/of server-side script.

De meeste acties worden door een server script taal verwerkt, cruciale elementen die door JS uitgevoerd worden is alleen het menu. En dat is niet goed.

Talen Richtlijn Beschrijving R-pd.15.1 Het maken van een taalkeuze dient voor de bezoeker mogelijk te zijn op iedere pagina

in de site. De website is totaal Nederlands, het is ook niet mogelijk om een andere taal te kiezen. R-pd.15.2 Links voor taalkeuze dienen op een duidelijke en consistente plaats in de navigatie

van de site te staan. Zie opmerking hierboven R-pd.15.3 Gebruik voluit geschreven (tekstuele) links naar de taalvarianten. Zie opmerking hierboven R-pd.15.4 Schrijf links naar taalvarianten in hun corresponderende taal. Zie opmerking hierboven R-pd.15.5 Gebruik geen associaties met nationaliteiten voor taalkeuze. Zie opmerking hierboven R-pd.15.6 Specificeer de basistaal van een pagina in de markup. De basistaal staat gedefinieerd als Engels, terwijl dit Nederlands hoort te zijn R-pd.15.7 Geef in de markup taalvariaties in de inhoud van pagina’s aan. De website is totaal Nederlands, het is ook niet mogelijk om een andere taal te kiezen.

Karaktercodering Richtlijn Beschrijving R-pd.16.1 Specificeer de karakterset voor webpagina’s. Er is een karakterset gedefinieerd dat is ISO-8859-1. R-pd.16.2 Specificeer de utf-8 karakterset. De website is niet in UTF-8 gedefinieerd wel de ISO-8859-1 R-pd.16.3 Specificeer de karakterset ook via HTTP headers, indien mogelijk. De site heeft wel beide karakterset via HTTP headers gespecificeerd: Accept-Charset: ISO-8859-1 R-pd.16.4 Gebruik (minstens) het meta element voor het specificeren van de karakterset en

plaats dit element zo hoog mogelijk in de head sectie van de markup. Alleen de ISO-8859-1 karakterset is gespecificeerd hebben ze dit wel zoals het hoort zo hoog mogelijk tussen de <head> tags gedaan.

Pagina: 10


Optimalisatie voor zoekmachines Richtlijn Beschrijving R-pd.12.1 Gebruik geen frames op overheidswebsites. Dit geldt voor zowel reguliere frames

binnen framesets, als zogenaamde iframes. Er wordt geen gebruik gemaakt van frames R-pd.4.1 Produceer unieke, onveranderende URL’s De URL’s zijn unieke zoals: http://www.gemeentewestland.nl/Smartsite.shtml?id=5567 R-pd.4.3 Vermijd het gebruik van sessies in URL’s. Op de site wordt geen gebruik gemaakt van sessies in hun URL’s. R-pd.4.6 Gebruik vriendelijke URL’s, die leesbaar en herkenbaar zijn. Er word niet goed gebruik gemaakt van SEO URL’s standaard staat de tekst http://www.gemeentewestland.nl/smartsite.shtml?id=123 dit is niet echt conform de webregels. R-pd.13.5 Gebruik geen client-side script of formulieren als de enige manier om informatie op

de site te bereiken. Er wordt stevig gebruik gemaakt van client-side scripts R-pd.3.1 Schrijf zowel grammaticaal correcte, als beschrijvende markup. Er zijn veel fouten te vinden in de opmaak van de HTML structuur. Bijvoorbeeld align=”absmiddle”, terwijl absmiddle alleen middle had moeten zijn. R-pd.6.2 Zet de inhoud van de pagina in de HTML broncode op volgorde van belangrijkheid. Door het gebruik van tabellen is de site wel netjes opgedeeld in elementen beginnend met het logo daarna het menu en daarna de content. Er zit enkel wel een menu nog tussen die een beetje zweeft in de sourcecode. R-pd.18.1 Gebruik voor iedere pagina een unieke, beschrijvende titel.

De titel die wordt gebruikt is uniform namelijk gemeente Westland dit moet dus aangepast worden.

R-pd.18.2 Schrijf korte, bondige tekst, waarin de belangrijkste boodschap bovenaan de pagina al wordt genoemd.

Dit gebeurd op sommige pagina’s wel maar er zijn ook pagina’s waar dit niet het geval is.

Pagina: 11


Pagina: 12

Contingency Design Richtlijn Beschrijving R-pd.22.1 Gebruik taal die de bezoeker begrijpt: beperk het gebruik van jargon, moeilijke

termen en afkortingen. Er wordt zakelijke/beambte taal gebruikt, soms wat onduidelijk door de pittige zinsopbouw maar soms ook versimpelde teksten met spelfouten. R-pd.22.2 Geef bezoekers een ‘vluchtroute’: mogelijkheden om verder te kunnen gaan als ze

vastlopen. Vluchtroutes zijn onder andere behulpzame links, het kunnen gebruiken van de terug (back) knop, een zoekfunctie, of het kunnen onmiddelijk kunnen corrigeren van invoerfouten.

De enige vluchtroute die ze gebruikt hebben is de sitemap. Deze is goed benaderbaar. R-pd.22.3 Laat bezoekers niet raden: geef informatie over hoe ze een gemaakte fout kunnen

herstellen. Houd rekening met veelgemaakte fouten. Zie vorige opmerking R-pd.22.4 Maak aangepaste foutpagina’s – voor fouten als doodlopende links (404 Not Found) –

waarop de bezoeker mogelijkheden krijgt aangereikt om zijn weg te vervolgen binnen de site.

De 404 pagina is er wel maar daar kom je geen steek mee verder. R-pd.22.5 Bij een foutmelding als gevolg van het versturen van een formulier, geef de bezoeker

de mogelijkheid om onmiddelijk de fout in het formulier te herstellen en laat hem niet afhankelijk zijn van het gebruik van de terug (back) knop.

Er komt meteen een melding de gebruiker hoeft niet apart terug. R-pd.22.6 Bij het implementeren van een zoekmachine op de website: gebruik ‘slimme’

zoektechnologie die rekening houdt met bijvoorbeeld spelfouten, soortgelijke zoektermen, en termen in meervoud en enkelvoud.

De zogenoemde slimme zoekmachine is niet verwerkt in de website, althans niet zoals bijvoorbeeld google. Wat je invoert krijg je ook terug met of zonder mogelijke resultaten. R-pd.22.7 Geef een overzichtelijke lijst van de meest relevante zoekresultaten. Teveel

zoekresultaten kosten bezoekers veel tijd om de gewenste informatie te vinden. Geef bezoekers mogelijkheden om zoekcriteria in te stellen, of zoekresultaten te ordenen.

Er is een uitgebreid zoeken mogelijkheid maar deze bied niet extra functionaliteiten tegenover het normale zoeken. R-pd.22.8 Geef bezoekers de mogelijkheid om fouten in de site te rapporteren. Er is een contact fomulier en een webmaster link waar je naar een contact fomulier gaat om hier de fout aan te geven. R-pd.22.9 Maak gebruik van kleuren, iconen en tekstuele uitleg om de aandacht van de bezoeker

voor een foutmelding te trekken en het probleem toe te lichten. Er wordt geen kleur iconen gebruikt bij fouten R-pd.22.10 Geef bezoekers mogelijkheden om informatie op alternatieve manieren te vinden.

Bijvoorbeeld door het geven van een sitemap, zoekfuncties, of via een verzoek per e-mail, brief of telefoon.

Er is een sitemap verwerkt in site, deze staat bovenin het menu. Kan je niet missen.

Legenda R-pd.NR.1 Met rode betekent dat deze is afgekeurd R-pd.NR.2 Met groene betekend dat deze is goedgekeurd R-pd.NR.3 Wit betekent dat de vraag niet relevant is en niet behandeld

Projectnaam: GMTIMP6 Usability (Adviesplan) Team: Milo Meulenkamp

Documentnaam: Expert review Gemeente Westland Alexander Vis

Datum: 18 december 2008 Versie: 1

Pagina: 1

Expert review Gemeente Westland

Inleiding Voor de website van de gemeente Westland hebben wij een expert review document opgesteld, met behulp

van de checklist uit het handboek website usability.

De site hebben we in de volgende stukken opgedeeld en de vragen behandeld.

Inhoudsopgave:

Checklist Site-ontwerp ............................................................................................................................................. 1

Architectuur ......................................................................................................................................................... 1

Navigatie .............................................................................................................................................................. 1

Checklist Paginaontwerp ......................................................................................................................................... 2

Opmaak ................................................................................................................................................................ 2

Snelheid ............................................................................................................................................................... 2

Afbeeldingen ........................................................................................................................................................ 2

Checklist Site-ontwerp

Architectuur Ja Nee, Omdat

Homepage afwijkend design ten opzichte van overige

pagina’s Het middelste vak veranderd

Bedrijfsinformatie gegroepeerd op aparte servicepagina’s � FAQ aanwezig Niet aanwezig

Site map aanwezig �

404-pagina aanwezig met uitleg en link naar homepage �

Korte, vanzelfsprekende paden Vrij diepe structuur

Alle belangrijke secties bereikbaar vanaf de homepage Vrij diepe structuur

Maximaal negen secties en servicepagina’s �

Mappenstructuur voor korte en duidelijke URL’s Geen structuur door database URL

Navigatie Ja Nee, Omdat

Uithangbord: logo plus slagzin plus paginatitel aanwezig �

Logo linkt naar homepage, niet op homepage zelf �

Link Home aanwezig op alle pagina’s, niet op homepage

zelf

Elke pagina heeft de home-knop op

dezelfde positie

Primaire navigatie 7 plus of min 2 onderdelen �

Primaire navigatie op alle pagina’s �

<title> relevant geschreven Alleen de hoofdnaam blijft staan

Projectnaam: GMTIMP6 Usability (Adviesplan) Team: Milo Meulenkamp

Documentnaam: Expert review Gemeente Westland Alexander Vis

Datum: 18 december 2008 Versie: 1

Pagina: 2

Checklist Paginaontwerp

Opmaak Ja Nee, Omdat

Geen frames Verkeerde manier gebruikt, daardoor

onstaan er frames

Pagina volledig zichtbaar bij 800×600 �

Vloeibaar ontwerp (liquid: procentuele codering van

divisions, tabellen en layers)

Door tabellen

Homepage afwijkend design ten opzichte van overige

pagina’s �

Voldoende contrast voor- en achtergrondkleur �

Schreefloos lettertype �

Schaalbare tekengrootte Geen functie voor

Logo bovenaan, liefst linkerkant

Herkenbaar vormgegeven primaire �

navigatiestructuur �

Visuele hiërarchie van de pagina correct �

Tekst en afbeeldingen logisch gegroepeerd �

Duidelijk ‘Start-hier’-punt op de pagina �

Voldoende witruimte rondom tekst en afbeeldingen �

Structuur geregeld via (X)HTML, opmaak geregeld via CSS Er wordt vanalles doorelkaar gebruikt

Pagina gecontroleerd in meerdere browsers �

Snelheid Ja Nee, Omdat

Omvang pagina onder 50 kB �

(X)HTML geoptimaliseerd, opmaakcode uitbesteed aan CSS Er wordt vanalles doorelkaar gebruikt

Tabellen geoptimaliseerd Hadden beter div’s kunnen gebruiken

Afbeeldingen geoptimaliseerd Geen alt-teksten

Afbeeldingen Ja Nee, Omdat

Circa 5-15% paginaoppervlakte �

Pictogrammen voorzien van tekstlabels Geen gebruik van gemaakt

Afbeeldingen voorzien van bijschrift Geen gebruik van gemaakt

Afbeeldingen voorzien van alt-tekst Geen gebruik van gemaakt

Spacerimages voorzien van lege alt-tekst �

Dimensies (width, height) aangegeven in (X)HTML �

Advertenties concurreren niet met inhoud Geen advertenties aanwezig

Afbeeldingen geoptimaliseerd (gecomprimeerd) �

Afbeeldingen gecontroleerd (geen broken images) �

Website Adviesrapport · De website van de gemeente Westland fungeert eigenlijk als informatie...

Documents

Transcript of Website Adviesrapport · De website van de gemeente Westland fungeert eigenlijk als informatie...