{"auditSample":[{"result":{"description":"","outcome":{"id":"earl:inapplicable"}},"test":{"id":"WCAG21:non-text-content"}},{"result":{"description":"","outcome":{"id":"earl:inapplicable"}},"test":{"id":"WCAG21:audio-only-and-video-only-prerecorded"}},{"result":{"description":"","outcome":{"id":"earl:inapplicable"}},"test":{"id":"WCAG21:captions-prerecorded"}},{"result":{"description":"","outcome":{"id":"earl:inapplicable"}},"test":{"id":"WCAG21:audio-description-or-media-alternative-prerecorded"}},{"result":{"description":"","outcome":{"id":"earl:inapplicable"}},"test":{"id":"WCAG21:captions-live"}},{"result":{"description":"","outcome":{"id":"earl:inapplicable"}},"test":{"id":"WCAG21:audio-description-prerecorded"}},{"result":{"description":"1. Kaartjes van items zijn opgemaakt in een lijstvorm maar deze structuur is programmatisch niet aanwezig Er is soms ook een `UL` container aanwezig, maar de individuele projecten zijn niet een `LI` elementen opgemaakt. In andere instanties zijn alle elementen als `div` opgemaakt. Hierdoor is de lijst programmatisch leeg en is structuur niet beschikbaar voor screen readers.\n 1. Projecten op \n 2. Nieuwsberichten op \n 3. Projecten op \n2. Voor de nieuwsoverzichtkaartjes staat er bij elk artikel een datum. In de code staat deze voor de koptekst terwijl dit informatie is die onder semantisch onder de koptekst thuis hoort. Visueel kan de huidige volgorde worden aangehouden.\n 1. Project homepagina's\n 2. Nieuwsoverzichten\n3. De hoofdnavigatie is opgemaakt als lijst, maar bevat geen programmatische aanwijzing dat het om een navigatie menu gaat. Dit kan door de omliggende container te veranderen in een `nav` element of ARIA te gebruiken via `role=\"navigation\"`\n4. In de hoofdnavigatie is een visuele aanwijzing welke pagina de huidige pagina is. Deze informatie dient ook programmatisch te worden ontsloten. Dit kan via het gebruik van `aria-current=\"page\"`\n5. Er is een leeg `header` element aanwezig, geplaatst na alle DOM-elementen uit de zichtbare header. De zichtbare onderdelen van de header zijn hier dus niet in opgenomen. Iemand die via een screen reader over de landmarks navigeert zal de content buiten de header moeilijk vinden.\n6. In het pagineringscomponent is, wanneer er veel pagina's zijn, visueel een aanwijzing dat er meer pagina's zijn via puntjes `...` Deze aanwijzing is voor screen readers niet aanwezig omdat de informatie verborgen is.","outcome":{"id":"earl:failed"}},"test":{"id":"WCAG21:info-and-relationships"}},{"result":{"description":"","outcome":{"id":"earl:passed"}},"test":{"id":"WCAG21:meaningful-sequence"}},{"result":{"description":"","outcome":{"id":"earl:passed"}},"test":{"id":"WCAG21:sensory-characteristics"}},{"result":{"description":"","outcome":{"id":"earl:passed"}},"test":{"id":"WCAG21:orientation"}},{"result":{"description":"","outcome":{"id":"earl:inapplicable"}},"test":{"id":"WCAG21:identify-input-purpose"}},{"result":{"description":"","outcome":{"id":"earl:passed"}},"test":{"id":"WCAG21:use-of-color"}},{"result":{"description":"","outcome":{"id":"earl:inapplicable"}},"test":{"id":"WCAG21:audio-control"}},{"result":{"description":"1. De witte tekst met blauwe achtergrond op de pagina heeft onvoldoende contrast.\n 1. Gemeten is `#FFFFFF` op `#009FDF` voor een contrast van 2.98:1. Daarmee valt het onder de 4.5:1 eis voor normale tekst en ook onder de 3:1 eis voor grote of dikgedrukte tekst.\n\nOpmerking: De labels voor de kaart op de pagina hebben in sommige gevallen onvoldoende contrast, maar vallen onder de uitzondering voor kaartmateriaal en er is een toegankelijk alternatief aanwezig. Advies is uiteraard wel om alle labels voldoende contrast te geven.","outcome":{"id":"earl:failed"}},"test":{"id":"WCAG21:audio-control"}},{"result":{"description":"","outcome":{"id":"earl:passed"}},"test":{"id":"WCAG21:resize-text"}},{"result":{"description":"","outcome":{"id":"earl:inapplicable"}},"test":{"id":"WCAG21:images-of-text"}},{"result":{"description":"1. Lange woorden worden op kleine schermen niet afgebroken naar een nieuwe regel. Hierdoor vallen ze buiten de viewport en moet er langs twee assen gescrold worden om alles te kunnen lezen. \n \n Om dit op te lossen kan de CSS property `word-break` gebruikt worden, eventueel alleen maar binnen de mobiele media-queries.","outcome":{"id":"earl:failed"}},"test":{"id":"WCAG21:reflow"}},{"result":{"description":"","outcome":{"id":"earl:inapplicable"}},"test":{"id":"WCAG21:non-text-contrast"}},{"result":{"description":"","outcome":{"id":"earl:passed"}},"test":{"id":"WCAG21:text-spacing"}},{"result":{"description":"","outcome":{"id":"earl:passed"}},"test":{"id":"WCAG21:content-on-hover-or-focus"}},{"result":{"description":"","outcome":{"id":"earl:passed"}},"test":{"id":"WCAG21:keyboard"}},{"result":{"description":"","outcome":{"id":"earl:passed"}},"test":{"id":"WCAG21:no-keyboard-trap"}},{"result":{"description":"1. Voor weergave van foto's in een modal kan via de pijltjestoetsen naar de volgende\/vorige foto genavigeerd worden. Echter, de focus verplaatst worden terwijl de modal zichtbaar blijft. In dit geval blijven ook de sneltoetsen functioneren.\n 1. ","outcome":{"id":"earl:failed"}},"test":{"id":"WCAG21:character-key-shortcuts"}},{"result":{"description":"","outcome":{"id":"earl:inapplicable"}},"test":{"id":"WCAG21:timing-adjustable"}},{"result":{"description":"","outcome":{"id":"earl:inapplicable"}},"test":{"id":"WCAG21:pause-stop-hide"}},{"result":{"description":"","outcome":{"id":"earl:inapplicable"}},"test":{"id":"WCAG21:three-flashes-or-below-threshold"}},{"result":{"description":"","outcome":{"id":"earl:passed"}},"test":{"id":"WCAG21:bypass-blocks"}},{"result":{"description":"","outcome":{"id":"earl:passed"}},"test":{"id":"WCAG21:page-titled"}},{"result":{"description":"1. Bij weergave van het mobiele menu gaat de focus door de verborgen menu-elementen heen. Als elementen verborgen zijn, mogen ze ook niet benaderbaar zijn (tenzij ze zichtbaar worden op focus) en moeten ook voor ondersteunende technologie verborgen worden.\n2. Bij de mobiele weergave van het menu wordt in de open staat, de achtergrond bedekt. Verder navigeren via het toetsenbord zorgt er echter voor dat de focus in de bedekte achtergrond terecht komt.\n 1. Behandel het menu als een modal en houdt de focus binnen het menu. De focus verplaatst zich dan van het laatste onderwerp terug naar de \"sluit\" knop en gaat in rondjes verder tot het menu gesloten wordt.\n3. Wanneer op de pagina de vergroot\/galerij functie wordt gebruikt voor afbeeldingen en de afbeeldingen groot worden weergegeven:\n 1. Kan de focus op de achtergrond verplaatst worden terwijl de afbeeldingen zichtbaar blijven. Houdt de focus binnen de geopende modal waarin de foto's getoond worden.\n 2. Zijn de bedieningselementen voor de modal toegevoegd aan het einde van de DOM waardoor ze niet in de logische plek van de focus volgorde terecht komen.\n 1. Verplaatst de focus bij het openen naar de modal en vang de focus binnen de modal zolang deze open is. Bij sluiten gaat de focus terug naar de locatie waar de modal geopend werd.","outcome":{"id":"earl:failed"}},"test":{"id":"WCAG21:focus-order"}},{"result":{"description":"Voor WCAG is de context van een linktekst beperkt tot informatie die ondersteunende technologie kan vinden, zonder de (lees)focus te verplaatsen. Dit is beperkt tot de huidige zin, paragraaf, tabel cell of lijst item.\n\n1. Voor de kaartjes van de nieuwsartikelen is de linktekst voor elk artikel \"Lees verder\". Voeg de titel van het artikel toe als verborgen tekst of via `aria-describedby`\n 1. \n2. Voor de kaartjes van de projecten is de linktekst voor elk artikel \"Lees verder\". Voeg de titel van het artikel toe als verborgen tekst of via `aria-describedby`\n 1. ","outcome":{"id":"earl:failed"}},"test":{"id":"WCAG21:link-purpose-in-context"}},{"result":{"description":"1. In maar een van de projectsites was een zoekfunctie aanwezig. Voor de andere website geldt dat er naast de reguliere navigatie geen tweede manier was om pagina's op de website te vinden. Dit kan opgelost worden met bijvoorbeeld een zoekfunctie of een sitemap.","outcome":{"id":"earl:failed"}},"test":{"id":"WCAG21:multiple-ways"}},{"result":{"description":"","outcome":{"id":"earl:passed"}},"test":{"id":"WCAG21:headings-and-labels"}},{"result":{"description":"","outcome":{"id":"earl:passed"}},"test":{"id":"WCAG21:focus-visible"}},{"result":{"description":"","outcome":{"id":"earl:passed"}},"test":{"id":"WCAG21:pointer-gestures"}},{"result":{"description":"","outcome":{"id":"earl:passed"}},"test":{"id":"WCAG21:pointer-cancellation"}},{"result":{"description":"","outcome":{"id":"earl:passed"}},"test":{"id":"WCAG21:label-in-name"}},{"result":{"description":"","outcome":{"id":"earl:inapplicable"}},"test":{"id":"WCAG21:motion-actuation"}},{"result":{"description":"1. Het `lang` attribuut op het HTML-element is niet ingesteld. Hierdoor is het voor screen readers niet goed mogelijk de juiste taal en stem te selecteren om content voor te lezen.\n 1. ","outcome":{"id":"earl:failed"}},"test":{"id":"WCAG21:language-of-page"}},{"result":{"description":"1. Op de pagina heeft de container van de kaart verschillende ARIA waarden. `aria-label` wordt gecombineerd met `aria-describedby` om screen readers informatie te geven over hoe de kaart te bedienen. De informatie die via `aria-label` en `aria-describedby` wordt gekoppeld is echter in het Engels opgemaakt, maar niet via een `lang` attribuut als zo aangemerkt. \n \n Dit valt niet onder de uitzondering van kaartmateriaal omdat het hier niet de kaart zelf betreft maar een onderdeel van de implementatie.\n2. In het pagineringscomponent wordt via het `title` attribuut informatie gegevens om de linktekst aan te vullen. Deze attributen zijn echter in het Engels opgemaakt en niet als zodanig gemarkeerd.\n 1. Omdat er ook verborgen Nederlandse tekst aanwezig is, is de robuustste oplossing deze `title` attributen te verwijderen en de verborgen tekst goed te gebruiken.\n 2. Voorbeelden op en \n3. De knop voor het sluiten van de foto modal op de pagina is opgemaakt in het Engels (Close) maar niet als zodanig gemarkeerd.","outcome":{"id":"earl:failed"}},"test":{"id":"WCAG21:language-of-parts"}},{"result":{"description":"","outcome":{"id":"earl:passed"}},"test":{"id":"WCAG21:on-focus"}},{"result":{"description":"","outcome":{"id":"earl:passed"}},"test":{"id":"WCAG21:on-input"}},{"result":{"description":"","outcome":{"id":"earl:passed"}},"test":{"id":"WCAG21:consistent-navigation"}},{"result":{"description":"","outcome":{"id":"earl:passed"}},"test":{"id":"WCAG21:consistent-identification"}},{"result":{"description":"","outcome":{"id":"earl:passed"}},"test":{"id":"WCAG21:error-identification"}},{"result":{"description":"","outcome":{"id":"earl:inapplicable"}},"test":{"id":"WCAG21:labels-or-instructions"}},{"result":{"description":"","outcome":{"id":"earl:inapplicable"}},"test":{"id":"WCAG21:error-suggestion"}},{"result":{"description":"","outcome":{"id":"earl:passed"}},"test":{"id":"WCAG21:error-prevention-legal-financial-data"}},{"result":{"description":"","outcome":{"id":"earl:passed"}},"test":{"id":"WCAG21:parsing"}},{"result":{"description":"1. De knoppen \"Menu\" en \"Sluit\" van het mobiele menu missen beide een rol en waarde.\n 1. Rol kan gedefinieerd worden via `aria-controls` met een verwijzing naar het menu.\n 2. De waarde gaat hier om het in- of uitgeklapte staat van het menu. Dit kan gedefinieerd worden via `aria-expanded`\n2. Op de pagina is een modal beschikbaar om afbeeldingen te vergroten.\n 1. De initi\u00eble afbeeldingen zijn opgemaakt als een link en er is geen informatie aanwezig over de modal die bij activeren tevoorschijn komt via `aria-expanded`.\n 2. De knoppen links en rechts hebben geen naam\n3. Het `iframe` dat gebruikt wordt voor het inladen van de YouTube video heeft geen naam. Screen reader gebruikers krijgen het `iframe` vermeldt als element voordat ze de content die erin zitten kunnen benaderen. Een naam geeft hun informatie over wat ze kunnen verwachten. Voeg een naam toe aan het `iframe` via het `title` attribuut.\n 1. ","outcome":{"id":"earl:failed"}},"test":{"id":"WCAG21:name-role-value"}},{"result":{"description":"","outcome":{"id":"earl:inapplicable"}},"test":{"id":"WCAG21:status-messages"}}]}