Openbare voorzieningen moeten bruikbaar en toegankelijk zijn voor alle burgers. Net zoals een gebouw rolstoeltoegankelijk moet zijn, moet een website of mobiele app ook bediend kunnen worden door mensen met een beperking. Dit kunnen bijvoorbeeld visuele, auditieve of motorische beperkingen zijn. Denk aan slechtzienden, doven en slechthorenden en mensen die hun handen niet of in beperkte mate kunnen gebruiken. Ook cognitieve factoren spelen een rol: is de content voor iedereen te begrijpen?
Nederlandse overheidsorganisaties moeten voldoen aan de Web Content Accessibility Guidelines (WCAG) versie 2.1, onder de Europese standaard voor overheidswebsites EN 301 549. Deze criteria variëren van technisch functionele eisen zoals een goede werking met het toetsenbord tot aan meer inhoudelijke eisen zoals duidelijke foutmeldingen en een heldere navigatiestructuur.
Dit onderzoek is handmatig uitgevoerd volgens de WCAG-EM evaluatiemethode met ondersteuning van automatische test tools. De pagina’s uit de sample zijn onderzocht op alle 50 criteria onder WCAG 2.1 A en AA. Wanneer aan een criterium niet wordt voldaan, wordt hiervan minimaal één voorbeeld gegeven. Deze bevindingen kunnen op meer plekken voorkomen en moeten daarom structureel worden aangepakt.
De WCAG criteria zijn ingedeeld volgens vier principes, welke ook de leidraad vormen voor dit rapport: Waarneembaar, Bedienbaar, Begrijpelijk en Robuust. Gedetailleerde informatie over deze criteria is te vinden op de website van het W3C (Nederlandse vertaling).
Over deze evaluatie
Rapport auteur
Janita Top
Evaluatie opdrachtgever
Provincie Fryslân
Evaluatiedatum
19 juni
Managementsamenvatting
Uit dit onderzoek blijkt dat wordt voldaan aan 34 van de 50 verplichte criteria voor toegankelijkheid. Veel onderdelen van de site zijn dus al goed toegankelijk, maar er zijn nog verbeteringen mogelijk.
Naast de verplichte WCAG 2.1 criteria zijn ook de in WCAG 2.2 toegevoegde criteria op niveau A en AA onderzocht. Hierbij waren er bevindingen bij 1 succescriterium.
Positief is bijvoorbeeld dat er geen bewegende onderdelen worden gebruikt die niet gepauzeerd kunnen worden, dat blokken met herhalende links omzeild kunnen worden en dat de pagina's goede titels hebben.
Verbeteringen zijn echter nog mogelijk op diverse punten, zoals:
Onjuiste of missende alt-teksten bij afbeeldingen
Invoervelden zonder labels
Niet alle content is bereikbaar bij inzoomen
Scope van de evaluatie
Website naam
dorpenatlas.frl
Scope van de website
Alle pagina's op https://dorpenatlas.frl.
WCAG Versie
2.2
Conformiteitsdoel
AA
Basisniveau van toegankelijkheid-ondersteuning
Gangbare webbrowsers en hulpapparatuur.
Verdere onderzoeksvereisten
Uitgebreide toetsresultaten
Samenvatting
Gerapporteerd over 55 van 55 WCAG 2.2 AA
Success Criteria.
23Voldoende
17Onvoldoende
15Niet van toepassing
0Niet getoetst
Alle resultaten
1 Waarneembaar
1.1 Tekstalternatieven
Success Criterium
Uitkomst
Bevindingen
1.1.1: Niet-tekstuele content
Hele sample
Uitkomst: Onvoldoende
Dorp Akmarijp
Uitkomst: Onvoldoende
Herbestemming zuivelfabriek
Uitkomst: Onvoldoende
Jongeren willen wonen in een dorp
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Het logo bovenaan de site heeft de zichtbare tekst ‘Dorpenatlas Fryslan’. De alt-tekst is alleen ‘Logo’. Zorg dat de alternatieve tekst gelijk is aan de zichtbare tekst, zodat screenreadergebruikers dezelfde informatie krijgen als ziende gebruikers. Dit probleem komt ook voor in de footer, waar beide logo’s enkel de alt-tekst ‘Logo’ hebben. (Voor een screenreader gebruiker staat hier nu: ’Logo mogelijk gemaakt door logo’).
Dorp Akmarijp
In de content staat een foto van een kerkhof met een lege alt-tekst en zonder bijschrift. Dit is echter geen decoratieve afbeelding. Zorg dat alle afbeeldingen van content een alternatieve tekst hebben. Dit komt op meerdere dorpspagina's voor, zowel bij losse afbeeldingen in het artikel als binnen de slider met foto’s. Zie screenshot 1 en screenshot 2.
De historische kaart onderaan de pagina heeft geen alternatieve tekst. Hierdoor is het voor screenreadergebruikers niet duidelijk waar de links naar de jaartallen voor dienen. Zet bijvoorbeeld boven de kaart een korte tekst met wat er getoond wordt. Ook dit komt op meerdere dorpspagina’s voor.
Herbestemming zuivelfabriek
In de content staan meerdere foto’s zonder alternatieve tekst. In het bijschrift staat alleen de fotograaf. Zorg voor een goede omschrijving van de afbeelding in de alt-tekst of de caption.
Jongeren willen wonen in een dorp
Op deze pagina staat een infographic met een manifest. Deze informatieve afbeelding heeft geen alternatieve tekst. De alt-tekst is leeg en er staat ook geen beschrijving bij de afbeelding. Voeg een korte beschrijving toe in de alt-tekst en daarbij ook een verwijzing naar een volledig tekstalternatief. Bijvoorbeeld: ‘Infographic van het manifest Wonen voor jongeren in Fryslan. Een volledige beschrijving staat onder deze afbeelding.’ Een tekst onder de afbeelding helpt ook slechtzienden voor wie de tekst te klein is of het kleurcontrast te laag.
1.2 Op tijd gebaseerde media
Success Criterium
Uitkomst
Bevindingen
1.2.1: Louter-geluid en louter-videobeeld (vooraf opgenomen)
Hele sample
Uitkomst: Niet van toepassing
1.2.2: Ondertitels voor doven en slechthorenden (vooraf opgenomen)
Hele sample
Uitkomst: Niet van toepassing
1.2.3: Audiodescriptie of media-alternatief (vooraf opgenomen)
Hele sample
Uitkomst: Niet van toepassing
1.2.4: Ondertitels voor doven en slechthorenden (live)
Hele sample
Uitkomst: Niet van toepassing
1.2.5: Audiodescriptie (vooraf opgenomen)
Hele sample
Uitkomst: Niet van toepassing
1.3 Aanpasbaar
Success Criterium
Uitkomst
Bevindingen
1.3.1: Info en relaties
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Contact
Uitkomst: Voldoende
Dorp Akmarijp
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Het tekst-invoerveld om te zoeken heeft geen label. Er staat een placeholdertekst, maar een placeholder is niet altijd beschikbaar en wordt niet altijd voorgelezen door screenreaders. Voeg een label-element of aria-label toe met bijvoorbeeld ‘zoekwoord’. Voor hulpsoftware is een label altijd vereist. Voor ziende gebruikers kan het ook beter zijn een duidelijk tekstlabel te tonen dat altijd blijft staan.
Homepage
Screenreadergebruikers navigeren vaak via koppen. Zorg daarom voor een goede koppenhiërarchie waarbij geen niveaus worden overgeslagen en qua betekenis de juiste koppen onder elkaar staan. Op deze pagina worden veel koppen gebruikt waar geen content achter volgt. Dit kan verwarrend zijn voor screenreader gebruikers. Het gaat om alle links naar typologieën en dorpen. Deze hebben een h3 maar zijn in feite enkel een link. Het is dan ook beter om hier de kopopmaak weg te halen. Onder Nieuws is het kopniveau niet correct. De nieuwsitems hebben h2-koppen, net als de h2-kop ‘Nieuws’. Geef de nieuwsartikelen een kop op h3-niveau.
Contact
Opmerking: wanneer een link binnen een label staat, zoals bij de voorwaarden, zal een screenreader dit niet altijd voorlezen. Beter is het om de link buiten het label te plaatsen.
Dorp Akmarijp
Onder ‘Dorpskarakteristieken’ staan visueel lijsten (wanneer je het uitklapt). Deze lijst-items zijn aangemaakt met behulp van witruimte binnen één paragraaf. Voor screenreadergebruikers is de lijstopmaak nu niet aanwezig. Maak hier een correcte lijst van (met ul - en li-elementen) via de lijst-optie in het CMS.
Onder het Dorpspaspoort staan visueel dataparen met definitie en data. De data worden opgemaakt met het strong-element. Het strong-element is hier niet voor bedoeld. Beter is het om hier een definition list te gebruiken (dl-element) zodat de structuur ook duidelijk is voor hulpsoftware.
Opmerking: binnen de h1-kop met ‘Akmarijp’ staat een knop met de naam ‘Ontstaan, ontwikkeling en karakteristiek’ welke ook onderdeel wordt van de kop. Dit is verwarrend. De knop lijkt ook niks te activeren.
1.3.2: Betekenisvolle volgorde
Hele sample
Uitkomst: Voldoende
1.3.3: Zintuiglijke eigenschappen
Hele sample
Uitkomst: Voldoende
1.3.4: Weergavestand
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Het hoofdmenu kan niet goed gebruikt worden in landschapsmodus, doordat een deel van het menu buiten beeld valt en er niet naartoe gescrold kan worden. In landschapsmodus zijn alleen de eerste vier items (met blauwe achtergrond) bereikbaar. Mensen die motorisch beperkt zijn, kunnen niet altijd het apparaat draaien. Zorg daarom dat alles altijd bereikbaar is op portret- en op landschapsmodus.
1.3.5: Identificeer het doel van de input
Hele sample
Uitkomst: Onvoldoende
Contact
Uitkomst: Onvoldoende
Contact
De invoervelden voor persoonlijke informatie zoals naam en e-mailadres hebben geen mechanisme waarmee de invoer automatisch kan worden aangevuld. Dit maakt het invullen van formulieren voor veel gebruikers gemakkelijker, bijvoorbeeld voor mensen voor wie het invoeren van tekst veel tijd kost omdat dit via speciale hulpmiddelen gaat, of voor mensen met cognitieve beperkingen. Dit kan worden verbeterd door ‘autocomplete’ attributen te plaatsen bij de invoervelden. Zie voor meer informatie https://www.w3.org/WAI/WCAG21/Techniques/html/H98 en voor een lijst van alle attributen https://www.w3.org/TR/WCAG21/#input-purposes. Dit komt ook voor op de pagina Bijdragen.
1.4 Onderscheidbaar
Success Criterium
Uitkomst
Bevindingen
1.4.1: Gebruik van kleur
Hele sample
Uitkomst: Onvoldoende
Dorpen en steden
Uitkomst: Onvoldoende
Type dorp
Uitkomst: Onvoldoende
Dorpen en steden
In de tekst wordt naar de iconen verwezen met alleen de kleuren: ‘Staat er een groen icoon dan is studie gedaan naar de ontstaansgeschiedenis en karakteristieken. Staat het gele icoon aan dan is een dorpsbiografie of verdiepende studie beschikbaar.’ Voor kleurenblinden kan dit lastig zijn. Beter is het om ook expliciet te verwijzen naar de soort afbeelding (icoon met vinkjes of boek). Een vergelijkbare situatie is er op de pagina van Dorp Snakkerburen. Hier staat de tekst: ’Voor Snakkerburen is op dit moment momenteel alleen basisinformatie beschikbaar. Gestreefd wordt naar verdere vulling zoals voor de dorpen voorzien van het groene icoon. Wilt u bijdragen aan de Dorpenatlas?‘.
Type dorp
De links in de tekst worden alleen met een verschil in kleur aangegeven (rood i.p.v. blauw). Slechtzienden en kleurenblinden kunnen missen dat hier een link staat. Voeg bijvoorbeeld onderstreping toe om dit duidelijker te maken.
1.4.2: Geluidsbediening
Hele sample
Uitkomst: Niet van toepassing
1.4.3: Contrast (minimum)
Hele sample
Uitkomst: Onvoldoende
Contact
Uitkomst: Onvoldoende
Bijdragen
Uitkomst: Onvoldoende
Jongeren willen wonen in een dorp
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Tekst moet een contrast hebben van minimaal 4,5:1 voor slechtzienden en kleurenblinden. Dat geldt ook voor actieve elementen zoals op hover en focus. Onderstaande elementen op de website zitten qua contrast onder deze waarden.
Contact
De rode teksten van de labels op roze achtergrond wanneer er een fout is gevonden in het formulier (2.28:1). Zie screenshot 7.
Bijdragen
De teksten over de toegestane bestandstypen (3.52:1).
Jongeren willen wonen in een dorp
De witte teksten in de infographic op de lichtblauwe, groene, roze en oranje achtergrond.
1.4.4: Herschalen van tekst
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Het inzoomen op mobiele apparaten wordt belemmerd via het meta element (‘maximum-scale=1‘). Haal de maximum-scale weg (dit heeft de voorkeur) of zet het op minimaal 2.
Boven de 150% ingezoomd is het hoofdmenu niet meer geheel te gebruiken (met de muis). Een deel valt beneden buiten beeld en er kan niet naartoe gescrold worden. Zie screenshot 4.
1.4.5: Afbeeldingen van tekst
Hele sample
Uitkomst: Voldoende
1.4.10: Reflow
Hele sample
Uitkomst: Voldoende
Dorp Akmarijp
Uitkomst: Voldoende
Dorp Akmarijp
Opmerking: Onder de historische kaart kun je op 400% ingezoomd niet bij de huidige kaart komen, deze is van het beeld afgesneden en je kunt er horizontaal niet naartoe scrollen. (Horizontaal scrollen is toegestaan bij content zoals kaarten, maar is hier dus niet mogelijk.) Zie screenshot 6. Kaarten vallen onder de uitzonderingen in de wetgeving. Het is echter gebruiksvriendelijker om het wel toegankelijk te maken voor slechtzienden.
1.4.11: Contrast van niet-tekstuele content
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Dorpen en steden
Uitkomst: Onvoldoende
Dorp Akmarijp
Uitkomst: Voldoende
Hele sample
Bevindingen:
Grafische elementen moeten een contrast hebben van minimaal 3:1. Dit geldt ook voor de randen of achtergrondkleur van invoervelden. Onderstaande elementen op de website zitten qua contrast onder deze waarden.
Homepage
De sliderknoppen (lichtgrijze cirkel, 1.3:1).
Dorpen en steden
Het groene (2.5:1) en gele (1.8:1) icoon dat aangeeft wat voor informatie er beschikbaar is.
Dorp Akmarijp
Opmerking: Bij de historische kaart is de focusstijl en de hoverstijl slecht zichtbaar. De rand is dezelfde kleur als de blauwe balk waar de links in staan, en de lichtblauwe tekstkleur heeft een contrast van 1.2:1 met de witte standaardkleur. Zorg dat de tekst en/of de focusrand meer contrast krijgen. Zie screenshot 3.
Opmerking: het icoon van het oog om de lagen binnen de kaart aan of uit te zetten hebben een contrast van 2.1:1.
1.4.12: Tekstafstand
Hele sample
Uitkomst: Voldoende
1.4.13: Content bij hover of focus
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
De tooltip popups bij de iconen kunnen alleen worden gesloten door de muis of de toetsenbordfocus te verplaatsen. Mensen die vergrotingssoftware gebruiken moeten de muis bewegen om delen van de pagina te bekijken. Wanneer dan (onbedoeld) content over iets heen valt, moeten ze deze met het toetsenbord weg kunnen halen. Zorg dat deze ook op een andere manier gesloten kan worden, bijvoorbeeld met de escape toets.
2 Bedienbaar
2.1 Toetsenbordtoegankelijk
Success Criterium
Uitkomst
Bevindingen
2.1.1: Toetsenbord
Hele sample
Uitkomst: Voldoende
Dorp Akmarijp
Uitkomst: Voldoende
Dorp Akmarijp
Opmerking: de kaartlagen en filters zijn niet met het toetsenbord te bedienen.
2.1.2: Geen toetsenbordval
Hele sample
Uitkomst: Voldoende
2.1.4: Enkel teken sneltoetsen
Hele sample
Uitkomst: Niet van toepassing
2.2 Genoeg tijd
Success Criterium
Uitkomst
Bevindingen
2.2.1: Timing aanpasbaar
Hele sample
Uitkomst: Niet van toepassing
2.2.2: Pauzeren, stoppen, verbergen
Hele sample
Uitkomst: Niet van toepassing
2.3 Toevallen en fysieke reacties
Success Criterium
Uitkomst
Bevindingen
2.3.1: Drie flitsen of beneden drempelwaarde
Hele sample
Uitkomst: Voldoende
2.4 Navigeerbaar
Success Criterium
Uitkomst
Bevindingen
2.4.1: Blokken omzeilen
Hele sample
Uitkomst: Voldoende
2.4.2: Paginatitel
Hele sample
Uitkomst: Voldoende
2.4.3: Focus volgorde
Hele sample
Uitkomst: Onvoldoende
Dorpen en steden
Uitkomst: Onvoldoende
Dorp Akmarijp
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Wanneer het mobiele menu geopend is, gaat de focus na het menu naar elementen op de onderliggende pagina, maar deze zijn nu niet zichtbaar. Zorg dat de focus hier pas weer bij kan komen wanneer het menu gesloten is.
Ingezoomd vanaf 150% komt het zoeken invoerveld achter een knop te staan. Wanneer je deze activeert, komt je niet meteen in het zoekveld terecht, maar ga je eerst naar het menu. Dit is verwarrend. Zorg dat de focus meteen in het zoekveld komt te staan.
Dorpen en steden
Wanneer je een letter activeert, scroll je visueel naar dat gedeelte toe. De focus blijft echter in het alfabet staan en gaat daarna gewoon eerst naar de links onder A. Zorg ervoor dat de focus in de bedoelde sectie komt te staan.
Dorp Akmarijp
Wanneer je in het snelmenu een hoofdstuk activeert, bijvoorbeeld 'Historische kaart’, scroll je visueel naar dat gedeelte toe. De focus blijft echter in het menu staan.
2.4.4: Linkdoel (in context)
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
Gebruikers van hulpsoftware vragen vaak lijsten op van links op de pagina. Wanneer deze teksten geen duidelijke informatie geven kunnen ze niks met deze links. In onderstaande gevallen is het doel van de links niet duidelijk.
Homepage
Onder ‘Typologieën’ staan links naar dorpstypen. Per type staan er twee links, één achter de afbeelding en één achter de titel. De links achter de afbeelding hebben geen tekst, doordat de alt-teksten leeg zijn. Dit zorgt voor ‘lege links’ voor screenreadergebruikers. Beter is het om de link hier weg te halen en eventueel de link om de titel via CSS of Javascript zo groot te maken als het hele blok.
Onder ‘Dorpen en steden’ hebben de afbeeldingen wel een alt-tekst en de links daardoor een doel, maar het voegt niks toe, want de links zijn dubbel en de alt-tekst luidt ‘Afbeelding van Deinum’ waardoor een screenreader bij de afbeelding voorleest: ‘Afbeelding afbeelding van Deinum’. Beter is het om deze alt-tekst leeg te laten en de link weg te halen.
Onder ‘Inspiratie’ staan links achter de afbeeldingen met een lege alt-tekst. Hierdoor hebben de links geen tekst. Ook staan er links achter de tekst ‘Lees meer’. Dit is ook geen duidelijke linktekst, want het maakt niet duidelijk naar welke pagina je gaat. Aangeraden wordt om de eerste link achter de afbeelding weg te halen (in ieder geval voor gebruikers van hulpsoftware). De ‘Lees meer’-link kan ook worden weggehaald (de link achter de titel is in principe al voldoende) of met tekst worden aangevuld. Dit kan met een extra tekst in de link, eventueel met CSS verborgen, of via een aria-labelledby verwijzing naar de kop ervoor. Zie voor meer info https://www.w3.org/TR/WCAG20-TECHS/ARIA7.html.
Hetzelfde patroon (lege links achter afbeeldingen en onduidelijke ‘lees meer’ teksten) komt op veel plekken in de site voor, zoals bij nieuwsberichten en type dorp.
2.4.5: Meerdere manieren
Hele sample
Uitkomst: Voldoende
2.4.6: Koppen en labels
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
De slidernavigatie is in het Engels, zoals ‘Next slide’ en ‘Go to slide 2’. Dit is mogelijk niet voor alle bezoekers duidelijk. Zet ook namen van knoppen daarom in de standaardtaal van de pagina.
Opmerking: let ook op de knopnamen binnen de kaart op de dorpspagina’s.
2.4.7: Focus zichtbaar
Hele sample
Uitkomst: Onvoldoende
Contact
Uitkomst: Onvoldoende
Bijdragen
Uitkomst: Onvoldoende
Contact
De focus op de checkbox om akkoord te gaan met de voorwaarden is niet zichtbaar. Voor toetsenbordgebruikers is het nu niet duidelijk wanneer ze deze kunnen invullen. Dit komt ook voor op de pagina Bijdragen.
Bijdragen
De focus op de knoppen om bestanden toe te voegen is niet zichtbaar.
2.4.11: Focus Not Obscured (Minimum)
Hele sample
Uitkomst: Voldoende
Type dorp
Uitkomst: Voldoende
Type dorp
Opmerking: op focus bij 400% ingezoomd is een deel van de titels niet leesbaar. Zie screenshot 5.
2.5 Input Modaliteiten
Success Criterium
Uitkomst
Bevindingen
2.5.1: Aanwijzergebaren
Hele sample
Uitkomst: Niet van toepassing
2.5.2: Aanwijzerannulering
Hele sample
Uitkomst: Voldoende
2.5.3: Label in naam
Hele sample
Uitkomst: Onvoldoende
Hele sample
Bevindingen:
De link achter het logo in de header heeft een andere toegankelijke naam (‘logo’) dan wat er zichtbaar is (‘Dorpenatlas Fryslân’). Hierdoor kan de link mogelijk niet met stem bediend worden. Zorg ervoor dat de toegankelijke naam (zoals alt-tekst) altijd minstens de zichtbare tekst bevat. Aangeraden wordt om de zichtbare naam aan het begin van de toegankelijke naam te zetten. (Dus: ‘Dorpenatlas Fryslân logo’.)
2.5.4: Bewegingsactivering
Hele sample
Uitkomst: Niet van toepassing
2.5.7: Dragging Movements
Hele sample
Uitkomst: Niet van toepassing
2.5.8: Target Size (Minimum)
Hele sample
Uitkomst: Onvoldoende
Homepage
Uitkomst: Onvoldoende
Homepage
De knoppen in de slider staan te dicht bij elkaar waardoor het ‘aanwijsgebied’ (grootte van het doel) te klein is. Maak het doel minimaal 24px, gerekend vanaf het middenpunt van de knop (knop inclusief tussenruimte). Bezoekers met een motorische beperking kunnen moeite hebben om links en buttons te selecteren die te klein zijn of te dicht op elkaar staan.
3 Begrijpelijk
3.1 Leesbaar
Success Criterium
Uitkomst
Bevindingen
3.1.1: Taal van de pagina
Hele sample
Uitkomst: Voldoende
3.1.2: Taal van onderdelen
Hele sample
Uitkomst: Niet van toepassing
3.2 Voorspelbaar
Success Criterium
Uitkomst
Bevindingen
3.2.1: Bij focus
Hele sample
Uitkomst: Voldoende
3.2.2: Bij input
Hele sample
Uitkomst: Voldoende
3.2.3: Consistente navigatie
Hele sample
Uitkomst: Voldoende
3.2.4: Consistente identificatie
Hele sample
Uitkomst: Voldoende
3.2.6: Consistent Help
Hele sample
Uitkomst: Voldoende
3.3 Assistentie bij invoer
Success Criterium
Uitkomst
Bevindingen
3.3.1: Foutidentificatie
Hele sample
Uitkomst: Voldoende
3.3.2: Labels of instructies
Hele sample
Uitkomst: Onvoldoende
Contact
Uitkomst: Onvoldoende
Contact
De betekenis van de asterisk (*) voor verplichte velden wordt niet uitgelegd. Dit is mogelijk niet voor iedereen duidelijk, wat onnodige foutmeldingen oplevert. Zet een uitleg hiervan in het begin van het formulier, of geef het aan in tekst. Dit komt ook voor op de pagina Bijdragen.
Om het invoerveld om te zoeken staat een div-element met het attribuut ‘aria-expanded=”false”’. Dit is echter geen interactief element dat content uitklapt. Beter is het om dit attribuut te verwijderen.
Vanaf 150% ingezoomd komt het zoeken invoerveld achter een knop te staan. Deze heeft de naam ‘Menu openen’ (net als de knop ernaast). Dit is verwarrend. Maak hier bijvoorbeeld ‘Zoeken’ van.
Dorp Akmarijp
De status van de knoppen bij het dorpspaspoort is niet correct. Er zijn twee knoppen, één met de naam ‘sluiten’ en één met de naam ‘dorpspaspoort’. De knop met de naam ‘sluiten’ heeft de status aria-expanded=”false” terwijl het wel uitgeklapt is. De knop met de naam ‘dorpspaspoort’ heeft eerst geen aria-expanded attribuut, maar je kunt het paspoort er wel mee sluiten. Wanneer deze gesloten is, staat aria-expanded op “true”, terwijl deze nu juist gesloten is. Het zou duidelijker zijn om maar één knop te hebben (‘dorpspaspoort’) met een altijd juist geüpdatete waarde van aria-expanded.
Opmerking: de knop om de lagen binnen de kaart in- en uit te klappen heeft geen goede naam, rol en waarde (status). Het is nu enkel een div-element met CSS. Dit geldt ook voor de span-elementen waarmee lagen aan en uit kunnen worden gezet.
