Rapport:
Audit digitale toegankelijkheid website StemPunt

Uitkomst: Onvoldoende

Bevindingen: De alternatieve tekst van het logo op de pagina portal.stempunt.nu/portal/stempunt is een 'S', erachter staat de naam Stempunt. De huidige alternatieve tekst wordt problematisch op een klein scherm. Op zo'n moment verdwijnt de andere zichtbare tekst van het scherm en blijft alleen het logo over. Geef de afbeelding alt='StemPunt logo' vul daarnaast de alt-tekst aan met de linkdoel van deze klikbare afbeelding: ', ga naar de homepagina'.

In de blauwe balk staat een icoon van een huis dat de link is naar de homepage. De afbeelding heeft een emoji in de alt-tekst. Omdat emoji's niet altijd correct worden geïnterpreteerd door alle hulpsoftware, zoals Safari, waarbij bijvoorbeeld 'huis met tuin' wordt voorgelezen, is het raadzaam om geen emoji's in het alt-attribuut van afbeeldingen te gebruiken. Een vergelijkbare situatie doet zich voor bij de afbeelding met de tekst 'Helpdesk'. Zie portal.stempunt.nu/portal/stempunt. Geef de afbeeldingen een naam die de bedoeling van de afbeelding weergeeft, dus niet 'huis' maar 'homepage'.

De blauwe knop met de tekst 'Inloggen' opent een nieuw scherm met een loginformulier. De sluitknop in het nieuwe venster heeft een afbeelding met de alternatieve tekst 'X', wat de functie van deze knop niet adequaat beschrijft. Geef deze afbeelding het tekstalternatief 'Sluit venster'. Zie portal.stempunt.nu/portal/stempunt.

Als de website wordt bekeken op een klein scherm, verschijnt de zogenaamde hamburgerknop (drie horizontale streepjes). Deze knop heeft de naam 'Open menu'. Wanneer erop wordt geklikt, opent het menu en verandert de afbeelding op de knop in een kruisje. In overeenstemming met de verandering in functie en afbeelding, dient ook de alt-tekst te worden aangepast. Bij de initiële staat moet de alt-tekst 'Open menu' zijn en bij de veranderde staat zou deze moeten worden bijgewerkt naar 'Sluit menu'. Zie portal.stempunt.nu/portal/stempunt.

Op de homepage onder het kopje 'Gratis cadeaubonnen verdienen?' staan drie decoratieve afbeeldingen met tekstalternatieven die dezelfde tekst bevatten als de kopjes. Evenzo is er tegenover het kopje 'Geef jouw mening!' een decoratieve afbeelding aanwezig die niet verborgen is voor hulpsoftware en dezelfde tekstalternatief deelt als het kopje. Geef de afbeeldingen een lege alternatieve tekst: alt="". Dit probleem doet zich op meerdere plaatsen voor, zoals te zien is op portal.stempunt.nu/portal/stempunt.

Op de homepage onder het kopje 'Wat zeggen anderen over StemPunt?' worden klantcitaten weergegeven, elk vergezeld van een foto van een persoon. Momenteel hebben alle foto's dezelfde alt-tekst, namelijk 'Geef ook jouw mening in online enquêtes'. Het is aan de webredactie om te bepalen of de foto's van personen als informatief of decoratief worden beschouwd.
Indien de foto's als informatief worden beschouwd, is het belangrijk om elk van hen een correct tekstalternatief te geven dat de context van de foto en de persoon beschrijft. Als de foto's echter decoratief zijn, dienen de alt-attributen leeggelaten te worden. Deze beslissing moet zorgvuldig worden genomen om ervoor te zorgen dat de juiste informatie aan gebruikers wordt overgebracht en dat de toegankelijkheid van de content wordt gewaarborgd. Zie portal.stempunt.nu/portal/stempunt.

In de footer bevindt zich een widget met beoordelingen van bezoekers. De gele sterren zijn inline SVG-afbeeldingen. Het is belangrijk op te merken dat deze afbeeldingen decoratief van aard zijn, aangezien de informatie die ze weergeven al in tekstvorm op de pagina aanwezig is. Deze afbeeldingen dienen daarom verborgen te worden voor hulpsoftware. Dit kan onder andere door middel van aria-hidden="true". Hierdoor worden ze niet door hulpsoftware voorgelezen, waardoor de toegankelijkheid van de inhoud wordt verbeterd. Zie portal.stempunt.nu/portal/stempunt.

In de footer staan drie iconen met namen van sociale netwerken. Deze iconen fungeren als links naar de respectievelijke socialmediapagina's van StemPunt. Momenteel is deze functie niet duidelijk af te leiden uit de huidige alt-teksten. Momenteel bevat de alt-tekst slechts de naam van een socialmediakanaal, bijvoorbeeld 'Facebook'. Dit zou echter moeten worden aangepast naar alt='Facebook pagina van StemPunt' om het doel van de specifieke link naar de sociale mediapagina van StemPunt correct aan te geven en de functionaliteit voor blinde gebruikers duidelijk te maken.
Zie portal.stempunt.nu/portal/stempunt.

Op de pagina's met topics of the day, waar op een stelling gestemd kan worden, zoals portal.stempunt.nu/portal/stempunt/opinion/topic-of-the-day, verschijnt na het stemmen de uitslag van de poll. Daarbij zijn afbeeldingen te zien waarop het percentage af te lezen is dat heeft gestemd voor 'eens' of 'oneens'. Deze afbeeldingen zijn voor hulpsoftware verborgen doormiddel van een aria-hidden=true op de svg-illustratie. Daardoor zijn de percentages niet beschikbaar voor hulpsoftware. Zorg ervoor dat deze informatieve illustratie ook voor mensen die hulpsoftware gebruiken af te lezen is.

Op de pagina portal.stempunt.nu/portal/stempunt/helpdesk/orders, tegenover het kopje 'Bestellen en leveren', bevindt zich een decoratieve afbeelding met de alternatieve tekst 'Bestellen en leveren'. Om deze afbeelding te verbergen voor hulpsoftware, dient het alt-attribuut van de afbeelding leeg te worden gelaten. Het title-attribuut is overbodig omdat het dezelfde informatie biedt als het aangrenzende kopje.
Daarnaast, onderaan deze pagina, bevindt zich een decoratief icoontje van een geel envelopje met de alt-tekst 'Mail ons'. Het is eveneens gepast om het alt-attribuut van deze afbeelding leeg te laten om de afbeelding te verbergen voor hulpsoftware.

Op de detailpagina van de polls, zoals te zien op bijvoorbeeld portal.stempunt.nu/portal/stempunt/opinie/poll/1714, bevinden zich opmerkingen van bezoekers. Elke opmerking wordt begeleid door een icoon van een duim omhoog, dat gebruikt wordt om likes aan het bericht toe te kennen. Deze iconen zijn momenteel niet zichtbaar voor hulpsoftware. Deze iconen hebben een tekstalternatief nodig. Hierdoor wordt duidelijk wat het cijfer naast het icoon betekent.

Op de pagina portal.stempunt.nu/portal/stempunt/profile, onder het kopje ‘Jouw profiel is niet meer up-to-date’, bevindt zich een carrousel met afbeeldingen en teksten. Decoratieve afbeeldingen in deze carrousel hebben alternatieve teksten die geen informatie aan de inhoud van de pagina toevoegen. Laat de alt-attributen leeg. De carrousel komt op meerdere plaatsen voor.

Op de pagina portal.stempunt.nu/portal/stempunt/profile, wordt een kaartje weergegeven met de tekst 'Ik vind het belangrijk goede doelen te steunen'. Direct daaronder worden de antwoorden van bezoekers weergegeven, met het aantal 'eens' en 'oneens' als tekst in een inline SVG. Momenteel is de SVG verborgen voor hulpsoftware met behulp van aria-hidden, wat resulteert in het niet voorlezen van de getallen.
Het is aan te raden om geen tekst in een SVG te plaatsen. Als het onvermijdelijk is om tekst in een SVG te gebruiken, dan moet je de SVG de rol img geven en een title-element toevoegen. Geef het title-element en het tekst-element unieke id’s die terugkomen in een aria-labelledby op de SVG. Dit zorgt ervoor dat de tekst binnen de SVG wordt voorgelezen. Deze situatie komt op meerdere pagina’s voor. Zie bijvoorbeeld detailpagina’s van polls.
Daarnaast, naast deze widget, staat een andere widget met de koptekst 'Nog even doorsparen'. De afbeelding die punten symboliseert, heeft momenteel als tekstalternatief 'P'. Dit is inderdaad onvoldoende om aan een blinde bezoeker duidelijk te maken wat de cijfers ernaast betekenen. Om dit te verduidelijken, is het raadzaam om de afbeelding het tekstalternatief 'Punten' te geven. Houd er rekening mee dat sommige voorleessoftware het title-attribuut mogelijk niet voorleest als er al een alt-tekst aanwezig is, dus het is nodig om voor het alt-attribuut te kiezen om de informatie adequaat over te brengen.

Op de pagina www.stempunt.nu/s.asp staat een enquête waarin alt-attributen ontbreken bij vele afbeeldingen.
In de footer van alle pagina's binnen de enquête is er een logo zichtbaar met de tekst 'S', echter, momenteel ontbreekt het alt-attribuut voor deze afbeelding. De voorleessoftware leest ‘s_logo.svg’ voor.
Het is noodzakelijk om het alt-attribuut toe te voegen en een duidelijke alternatieve tekst te gebruiken, zoals 'Logo Stempunt'.

Op de volgende twee pagina's worden vragen gesteld, bijvoorbeeld 'Welke vliegmaatschappij spreekt je het meeste aan?'. De antwoorden bestaan uit afbeeldingen die niet worden voorgelezen omdat de tekstalternatieven ontbreken.
Zie www.stempunt.nu/s.asp en www.stempunt.nu/s.asp.

Op pagina www.stempunt.nu/s.asp staan twee afbeeldingen zonder tekstalternatieven. De grote afbeelding is verborgen voor hulpsoftware met een leeg alt-attribuut. Omdat in de tekst op de pagina verwezen wordt naar deze afbeelding, mag de alternatieve tekst niet ontbreken.

Op de pagina www.stempunt.nu/s.asp staan twee knoppen met afbeeldingen van een kruis en een vinkje. Momenteel ontbreekt het tekstalternatief voor deze afbeeldingen. Voeg een tekstalternatief toe aan deze afbeeldingen, zodat de functie van de knoppen kan worden voorgelezen. Bijvoorbeeld: voor de knop met het kruis: alt="Afwijzen" en voor de knop met het vinkje: alt="Bevestigen".

Uitkomst: Niet aanwezig

Bevindingen: Op de pagina www.stempunt.nu/s.asp staat een geluidsbestand. Het transcript ontbreekt. Zorg ervoor dat alle audiobestanden worden voorzien van een transcript.

Uitkomst: Niet aanwezig

Bevindingen: Op de pagina www.stempunt.nu/s.asp staat een videospeler. De video kon niet worden geladen en is daarom niet beoordeeld. In een video met gesproken taal en/of belangrijke geluiden mag ondertiteling niet ontbreken.

Uitkomst: Niet aanwezig

Bevindingen: Op de pagina www.stempunt.nu/s.asp staat een videospeler. De video kon niet worden geladen en is daarom niet beoordeeld.

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Bevindingen: Op de pagina www.stempunt.nu/s.asp staat een videospeler. De video kon niet worden geladen en is daarom niet beoordeeld.

Uitkomst: Onvoldoende

Bevindingen: Op de pagina portal.stempunt.nu/ staan carrousels met bewegende beelden. In deze widgets worden aria-attributen gebruikt die niet zijn toegestaan. Het gaat om het attribuut aria-selected="false". Verwijder deze attributen.
Op de pagina portal.stempunt.nu/ staat een formulier. De knoppen 'Man', 'Vrouw' en 'Anders' zijn gecodeerd als aankruisvakjes in de HTML-code. Hoewel de individuele labels van deze elementen zelfverklarend zijn en groepering en een groepslabel niet strikt verplicht zijn, wordt het toch aangeraden om dit te doen. Hierdoor kan de associatie met een foutmelding die verschijnt wanneer er geen optie is geselecteerd, duidelijker worden gemaakt. Voor meer informatie over deze richtlijn, zie Succescriterium 3.3.1.
Hetzelfde advies is ook van toepassing op de knoppen op de pagina portal.stempunt.nu/portal/stempunt/opinie/poll. Onder een pollvraag staan knoppen met antwoordopties. Door de vraag te verbinden met de bijbehorende antwoorden wordt het voor een gebruiker met een schermlezer duidelijker op welke vraag deze antwoorden betrekking hebben. Dit helpt bij het verbeteren van de begrijpelijkheid en toegankelijkheid van de content.

Op de pagina portal.stempunt.nu/portal/stempunt/helpdesk/contact is na inloggen de optie 'Mijn account - wachtwoord wijzigen'. Als deze wordt geselecteerd verschijnt er extra informatie op het scherm die momenteel niet wordt voorgelezen. De tekst binnen het formulier die tussen de invoervelden staat, moet worden geassocieerd met de juiste invoervelden. Dit kan door middel van aria-describedby. Hierdoor wordt deze tekst voorgelezen.

Op de pagina portal.stempunt.nu/portal/stempunt/home/cookiestatement zijn de tussenkopjes momenteel niet als kopteksten opgemaakt. Dit betreft de vet- en cursiefgedrukte tussenkopjes die na een tabel verschijnen. Het is belangrijk om een correcte koppenstructuur te hanteren, zodat een blinde gebruiker van kop naar kop kan navigeren en de hiërarchie van de content kan begrijpen.

Op de pagina portal.stempunt.nu/portal/stempunt/home/cookiestatement wordt het strong-element en het em-element gebruikt op een manier die niet overeenkomt met hun semantische betekenis. Deze elementen dienen alleen gebruikt te worden om nadruk te leggen op enkele woorden of zinsdelen, en niet voor opmaak of voor kopteksten. Het is raadzaam om deze elementen op een correcte manier te gebruiken, in lijn met hun semantische betekenis, om de toegankelijkheid en semantische structuur van de content te verbeteren.

Op de pagina portal.stempunt.nu/portal/stempunt/helpdesk/giftshop staat ‘Thuisbezorgd - Hoe verzilver ik een Thuisbezorgd cadeaubon?’ In de verborgen sectie staan drie onderstreepte tussenkopjes die niet als koppen zijn opgemaakt.

Op de pagina portal.stempunt.nu/portal/stempunt/mgm/share achter de inlog zijn teksten opgemaakt met headings elementen terwijl het geen koppen zijn. Het gaat om drie blokken onder het kopje ‘Hoe werkt StemPunt vriendenvoordeel?’. Tekst ‘Je nodigt een vriend(in) uit’ en andere twee kopjes mogen niet als kopteksten worden opgemaakt omdat het geen koppen zijn. Er staat geen content onder deze teksten.

Op de pagina portal.stempunt.nu/portal/stempunt/home/cookiestatement zijn datatabellen aangetroffen die niet correct zijn opgemaakt. De kolomkoprij mist de juiste elementen (td-element wordt gebruikt in plaatst van een th-element).

Op de pagina portal.stempunt.nu/portal/stempunt/home/cookiestatement en www.stempunt.nu/s.asp is een datatabel die niet correct is opgemaakt. De kolomkoprij mist de juiste elementen (td-element wordt gebruikt in plaatst van een th-element) en de middelste kolom mist een koptekst.

Op de pagina portal.stempunt.nu/portal/stempunt/opinie/topics zijn invoervelden genest binnen a-elementen. Volgens de HTML-specificatie is het niet toegestaan om een <input>-element (invoerveld) direct binnen een <a>-element (anker of link) te nesten. De reden hiervoor heeft te maken met de semantiek en verwachtingen van de gebruiker.

Op de pagina portal.stempunt.nu/portal/stempunt/opinie/topic-van-de-dag/994 staan opmerkingen van bezoekers als je bent ingelogd. Visueel is het duidelijk wanneer een opmerking is geplaatst als reactie op een andere opmerking. In de HTML-code is deze relatie niet duidelijk. Zorg ervoor dat de screen reader deze relatie of volgordelijkheid kan voorlezen.

Op de pagina portal.stempunt.nu/portal/stempunt/register/validate staan stappen 1 tot en met 4 die de volgorde van het proces aangeven. De afbeeldingen van cijfers zijn als CSS toegevoegd en worden niet voorgelezen door hulpsoftware. Een mogelijke oplossing is om het ul-element te vervangen door een ol-element om de visuele presentatie in de code te creëren.

Op de pagina portal.stempunt.nu/portal/stempunt/profile staat een kaartje met een stelling ‘Ik vind het belangrijk goede doelen te steunen’. Direct daaronder worden de antwoorden van bezoekers weergegeven, met het aantal 'eens' en 'oneens'. De stelling dient als een kopje te worden opgemaakt om een blinde bezoeker de relatie tussen deze tekst en informatie eronder te kunnen voorlezen.

In de enquête die op meerdere schermen staat, staan koppen die niet als kopteksten zijn opgemaakt. Zie tekst ‘Single response’ op de pagina www.stempunt.nu/dd/start.

In de enquête die op meerdere schermen staat, komen veel multiple choice vragen voor. Deze vragen en de bijbehorende antwoorden zijn niet programmatisch met elkaar verbonden. Zorg voor een groepering zodat hulpsoftware relatie tussen deze teksten kan voorlezen. Dit komt op meerdere schermen voor. Zie bijvoorbeeld www.stempunt.nu/s.asp.
Op de pagina www.stempunt.nu/s.asp staat een grafisch element waarmee de keuze kan worden gemaakt tussen twee begrippen. De voorleessoftware kan deze informatie niet aan een blinde bezoeker voorlezen. De visuele presentatie is niet terug te vinden in de HTML-code. Dit geldt ook voor de slider op de pagina www.stempunt.nu/s.asp.

Op de pagina www.stempunt.nu/s.asp verdwijnen de afbeeldingen als de bezoeker met zijn muis over de afbeeldingen gaat. Deze informatie wordt niet door de voorleessoftware uitgesproken. Op de pagina www.stempunt.nu/s.asp kan de tekst worden gearceerd. Het resultaat wordt niet uitgesproken door voorleessoftware.

Op de pagina portal.stempunt.nu/portal/stempunt/questionnaire/profile is er een vraag met de tekst 'Je hebt aangegeven buiten Nederland te wonen'. Echter, de opties 'ja' en 'nee' worden niet voorgelezen omdat ze zijn verborgen met behulp van aria-hidden. De voorleessoftware meldt in plaats daarvan dat er een tabel aanwezig is. Om deze lay-out tabel te verbergen voor de voorleessoftware, kan het attribuut 'role="presentation"' aan de tabel worden toegevoegd. Dit zal helpen om de juiste informatie aan de gebruikers van voorleessoftware te verstrekken.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de pagina portal.stempunt.nu/portal/stempunt/helpdesk/contact staat een contactformulier. In dit formulier moeten persoonlijke gegevens worden ingevuld, waaronder een achternaam en e-mailadres. Voor deze invoervelden is een autocomplete-attribuut nodig bij de input-elementen. Dit zorgt ervoor dat browsers, maar ook hulpsoftware, ondersteuning kunnen geven bij het invullen van deze invoervelden. Dit kan door bijvoorbeeld de invoervelden al automatisch in te vullen. Het autocomplete-attribuut ontbreekt op dit moment bij deze invoervelden. Bij het invoerveld voor een e-mailadres moet bijvoorbeeld autocomplete=”email” gebruikt worden.

Op de pagina portal.stempunt.nu/portal/stempunt/settings/mail staat een formulier. Het veld met label ‘Huidig e-mailadres’ heeft een autocomplete attribuut met waarde ‘email’. Dit moet ‘current-password’ zijn.

Informatie over de velden waar het autocomplete-attribuut voor gebruikt moet worden en de bijbehorende waarden is te vinden op pagina www.w3.org/TR/WCAG21/

Uitkomst: Onvoldoende

Bevindingen: In de slider op de pagina www.stempunt.nu/s.asp wordt rode en groene kleur gebruikt om informatie te geven. Niet alle bezoekers kunnen deze informatie waarnemen. Zorg voor een tekstalterntief. Dat kan door bijvoorbeeld cijfers of tekst toe te voegen.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: In de cookiebanner heeft de witte statische tekst onvoldoende kleurcontrast met de blauwe achtergrond (HEX#4998d2). Het kleurcontrast is 3,1:1. De link met een crèmekleurige (HEX#dbeaf6) tekst heeft het kleurcontrast van 2,6:1. Het kleurcontrast van de tekst en de link moet minimaal 4,5:1 zijn.

Op de homepagina als foutieve waarde in het formulier wordt ingevoerd, verschijnen onder de invoervelden rode foutmeldingen. De tekstkleur van de foutmelding HEX##e74c3c. De achtergrond is HEX##ACACAD. Het kleurcontrast is 1,7:1. Dit moet minimaal 4,5:1 zijn.

In het formulier bovenaan de homepagina staan knoppen met witte tekst op een blauwe achtergrond (HEX##4998d2): 3,1:0. Dit is onvoldoende omdat het on tekst gaat. Het kleurcontrast moet minimaal 4,5:1 zijn. Deze combinatie komt op meerdere pagina’s voor. Zie bijvoorbeeld portal.stempunt.nu/portal/stempunt/opinie/topics. Onderaan deze pagina staat paginering. Het woordje ‘Eerste’ heeft dezelfde blauwe tekstkleur en heeft dus onvoldoende contrast. De paginering met dezelfde contrastproblemen komt ook op pagina portal.stempunt.nu/portal/stempunt/profile/balance voor.

Op de homepagina onder het formulier staat tekst ‘Ik ga akkoord met ..”. De tekst is wit, de achtergrond is grijs (HEX#89888A). Het kleurcontrast is 3,5:1. Dit moet minimaal 4,5:1 zijn.

Op de pagina portal.stempunt.nu/portal/stempunt/helpdesk/contact staat een contactformulier. Een foutmelding wordt weergegeven met een rode tekstkleur (HEX #e74c3c) en een contrastwaarde van 3,5:1. Deze waarde moet echter minimaal 4,5:1 zijn.

Op de pagina portal.stempunt.nu/portal/stempunt/register/validate verschijnt een rode (HEX#e74c3c) foutmelding als geen code is ingevuld. De achtergrond is grijs. Het kleurcontrast van 3,8:1 is onvoldoende. De minimale waarde dient 4,5:1 te zijn.

Op de pagina portal.stempunt.nu/portal/stempunt/opinie/topics staan teksten op afbeeldingen. Het contrast voldoet niet aan de minimale eis van 4,5:1 voor alle teksten. Het wordt aanbevolen om de afbeeldingen nog donkerder te maken of de teksten te voorzien van een extra achtergrond.

Boven de footer staat een widget met beoordelingen. Als de bezoeker de muis boven het icoontje van de Feedback company beweegt, opent een nieuw venster. In dat venster staan teksten met onvoldoende contrast. Een grijze tekst (HEX#9bafb9) heeft een contrastwaarde van 2,3:1. De witte tekst op de blauwe (HEX#438bf8) achtergrond van een knop heeft een contrast van 3,3:1. De minimale waarde dient 4,5:1 te zijn.

Op de pagina portal.stempunt.nu/portal/stempunt/opinie/poll staat een groene link met tekst ‘HIER’. Deze groene kleur (HEX#68b82c) heet een contrastwaarde van 2,5:1. De minimale waarde dient 4,5:1 te zijn.

Op de detailpagina van de polls worden opmerkingen van bezoekers weergegeven als je ingelogd bent. Zie bijvoorbeeld portal.stempunt.nu/portal/stempunt/opinie/poll/1714. Wanneer een bezoeker de muis over de naam van een persoon beweegt, verschijnt er aan de rechterkant een icoon van een grijze pijl (HEX #C4C8CE). Een van de opties in het menu is het markeren van het bericht als spam. Zodra het bericht is gemarkeerd als spam, verschijnt er een tekst die dit aangeeft. De tekstkleur van deze melding is HEX #90949B en het kleurcontrast bedraagt 2,8:1.
Verder heeft elk bericht ook een link die aangeeft hoeveel dagen of weken geleden het bericht is geplaatst. De tekstkleur van deze link is grijs (HEX #90949C) en deze wordt weergegeven op een lichtgrijze achtergrond. Het kleurcontrast in dit geval is 2,8:1.

Onderaan de pagina portal.stempunt.nu/portal/stempunt/opinie/topic-van-de-dag/1709 bevindt zich een blauwe knop met de tekst 'Nog 10 reacties laden' als je ingelogd bent. Wanneer een bezoeker de muis over deze knop beweegt, verandert de blauwe achtergrond in lichtgrijs, terwijl de tekst op de knop wit blijft. Het kleurcontrast tussen de witte tekst en de lichtgrijze achtergrond is dan 1,1:1.

Op de pagina portal.stempunt.nu/portal/stempunt/mgm/share staat een zogenaamde persoonlijke link met een grijze tekstkleur (HEX #ACACAC) op een witte achtergrond. Het kleurcontrast 2,3:1 terwijl het 4,5:1 moet zijn.

Op de pagina portal.stempunt.nu/portal/stempunt/mgm/share bevindt zich een widget om deze website met vrienden te delen. In de sectie ‘Whatsapp’ staat een groene knop (HEX #4DC247) met een witte tekst. Het kleurcontrast is 2,3:1. Deze waarde moet echter minimaal 4,5:1 zijn.

Op de pagina portal.stempunt.nu/portal/stempunt/settings/mail bevindt zich een grijze knop (HEX #bbb) met een witte tekst ‘Annuleren’. Het kleurcontrast is 1,6:1. Deze waarde moet echter minimaal 4,5:1 zijn.

Op de pagina www.stempunt.nu/s.asp staat een rode tekst (HEX #FF0000). Het kleurcontrast is 4,0:1. Dit moet minimaal 4,5:1 zijn.

In de enquête die op meerdere schermen staat komt een blauwe tekst (HEX##0276BF) voor die op een lichtblauwe (HEX #E8F0F2) achtergrond staat. Het kleurcontrast is 4,2:1. Dit moet minimaal 4,5:1 zijn. Op de pagina www.stempunt.nu/s.asp wordt een lichtblauwe kleur (HEX#F8FBFC) gebruikt als achtergrond in knoppen. Wanneer een bezoeker de muis over deze knoppen beweegt, wordt de achtergrond lichtblauw en de tekstkleur wordt wit. Dit zorgt voor een kleurcontrast van 1,3:1. De waarde moet minimaal 4,5:1 zijn.

Uitkomst: Onvoldoende

Bevindingen: Als de pagina portal.stempunt.nu/portal/stempunt/helpdesk/orders bekeken wordt in een schermresolutie van 1280px bij 1024px en ingezoomd is op 200% dan valt een deel van de content weg. De zijkolom met navigatie verdwijnt. Dit is verlies van content.

Als de pagina StemPunt portal.stempunt.nu/portal/stempunt/opinie/poll/1714
bekeken wordt in een schermresolutie van 1280px bij 1024px en ingezoomd is op 200% dan verdwijnt een deel van de content. De elementen onder meest recente polls verdwijnen van de pagina. Zorg er voor dat alle elementen beschikbaar blijven bij inzoomen.

In de footer op elke pagina staan reviews. Als je met de muis over de reviews gaat verschijnt er een popup van de Feedback Company. Deze komt slechts deels in beeld bij een schermresolutie van 1280px bij 1024px en ingezoomd is op 200%. Je kunt niet naar het deel dat buiten beeld staat scrollen. Zorg dat alle content bereikbaar blijft.

Uitkomst: Onvoldoende

Bevindingen: Op de pagina portal.stempunt.nu/portal/stempunt/mgm/share achter de inlog staat een widget waarmee je een bericht kunt delen op een van de drie socialmediakanalen. Deze widget is opgezet als een tab: door te klikken op een van de drie knoppen wordt een bijbehorende sectie geopend.
Zowel het Facebook- als het WhatsApp-deel van de widget bevat afbeeldingen van tekst. Deze tekst had ook als platte tekst op de pagina kunnen worden geplaatst, zodat bezoekers de tekst konden aanpassen met hun eigen stylesheet.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de pagina portal.stempunt.nu/portal/stempunt, naast het kopje 'Wat doet StemPunt?', is er een carrousel met dia's waarop tekst staat. De kleur van de niet-geselecteerde knopjes is grijs (HEX #CCCCCC), met een contrastverhouding van 1,6:1. Dit moet echter minimaal 3,0:1 zijn.

Op de pagina portal.stempunt.nu/portal/stempunt/opinie/poll staat, als je ingelogd bent onder het artikel een tekstvak om je reactie te geven. De randkleur is grijs (HEX#D3D6DA). De contrastverhouding met de witte achtergrond in onvoldoende, namelijk 1,5:1. Dit moet minimaal 3,0:1 zijn.

Op een detailpagina van een poll staan opmerkingen van bezoekers als je ingelogd bent. Zie bijvoorbeeld portal.stempunt.nu/portal/stempunt/opinie/poll/1714. Wanneer een bezoeker de muis over de naam van een persoon beweegt, verschijnt er aan de rechterkant een icoon van een grijze pijl (HEX##C4C8CE). Het kleurcontrast is 1,5:1. Een van de opties in het menu is het insluiten van berichten. Als deze optie wordt gekozen, verschijnt er een extra venster. De sluitknop heeft onvoldoende contrast, namelijk 1,5:1. Dit moet minimaal 3,0:1 zijn.

Op de pagina portal.stempunt.nu/portal/stempunt/mgm/share staat als je ingelogd bent een widget waarmee je een bericht kunt delen op een van de drie socialmediakanalen. Zowel het Facebook- als het WhatsApp-deel van de widget hebben een donkere overlay die deze iconen minder zichtbaar maakt. In geval van WhatsApp is de overlay HEX#193915 en de kleur van het icoon is #4B4B4B. Het kleurcontrast is 1,5:1. Dit moet minimaal 3,0:1 zijn.

Op de pagina www.stempunt.nu/s.asp staat een tabel met keuzerondjes. De randkleur van een keuzerondje is grijs en heeft daarmee een onvoldoende kleurcontrast van 2,9:1. Wanneer dit element wordt geselecteerd, krijgt het rondje een groene achtergrondkleur. Het contrast is onvoldoende, namelijk 2,3:1.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Boven de footer op de homepagina staat een widget met beoordelingen. Wanner een bezoeker de muis boven het icoontje van de Feedback company beweegt, opent een nieuw venster. Dit venster voldoet niet aan dit succescriterium omdat deze nieuwe content niet kan worden afgesloten zonder de muis te bewegen. Zie pagina portal.stempunt.nu/portal/stempunt/opinie/topics.

Op de pagina portal.stempunt.nu/portal/stempunt/profile, wanneer de focus op de knop met bezoekers initialen komt, opent een dropdownmenu. Dit extra scherm voldoet niet aan dit succescriterium omdat het niet kan worden afgesloten zonder de muis te bewegen of de focus te verplaatsen.

Uitkomst: Onvoldoende

Bevindingen: Op de pagina portal.stempunt.nu/portal/stempunt, naast het kopje ‘Wat doet StemPunt?’, bevindt zich een carrousel met dia’s waar teksten op staan. De knopjes waarmee de slides worden bediend, reageren niet op het toetsenbord. De carrousel komt op meerdere pagina’s voor.

In de cookiebanner staat een knop met de tekst ‘Oke’ erop. Deze knop is niet met het toetsenbord te bedienen.

Op sommige pagina’s zoals portal.stempunt.nu/portal/stempunt/helpdesk/giftshop staan zogenaamde accordions. Elke vraag is klikbaar en toont na klikken extra informatie. Met toetsenbord zijn deze vragen niet bereikbaar en dus ook niet uit te klappen.

Op de homepagina, boven de footer, staat een widget met beoordelingen. De knop om meer informatie over de Feedback company te openen is niet met toetsenbord te bedienen.

Op detailpagina’s van polls staan opmerkingen van bezoekers. Zie bijvoorbeeld portal.stempunt.nu/portal/stempunt/opinie/poll/1714. Wanneer een bezoeker de muis over de naam van een persoon gaat, verschijnt er aan de rechterkant een knop met de tekst ‘Menu’. Deze knop is niet met het toetsenbord te bedienen.

Op de pagina portal.stempunt.nu/portal/stempunt/register/intake zijn niet alle invoervelden met het toetsenbord te bedienen. Na het tweede e-mailadresveld begint de focus weer bovenaan de pagina terwijl er nog andere interactieve elementen onder dit veld aanwezig zijn.

Op de pagina www.stempunt.nu/s.asp staat een enquête die over meerdere schermen loopt.
Op het eerste scherm kan de bezoeker op Enter drukken om de vraag te openen. Echter, op onderliggende schermen is het niet mogelijk om interactieve elementen, zoals keuzevakjes en knoppen, met het toetsenbord te bedienen. In sommige gevallen reageert het scherm op de pijltoetsen, maar de Tab-toets kan op geen enkel scherm gebruikt worden. Bovendien is de selectie van elementen niet mogelijk met de spatiebalk of de Enter-toets. Dit probleem geldt voor meerdere vragen. Zie ook de dropdown op www.stempunt.nu/s.asp.

Op de pagina www.stempunt.nu/s.asp kan de actie van het slepen van punaises niet met het toetsenbord worden voltooid. Zorg ervoor dat deze functionaliteit ook beschikbaar wordt met het toetsenbord.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op de pagina portal.stempunt.nu/portal/stempunt, naast het kopje 'Wat doet StemPunt?', is er een carrousel met dia's waar teksten op staan. Echter, dit carrouselmechanisme kan momenteel alleen worden gestopt met behulp van een muis door op een bolletje te klikken. Om te voldoen aan dit succescriterium moet dit mechanisme ook toetsenbordtoegankelijk worden gemaakt. Hier is een tijdslimiet aanwezig voor het lezen van de teksten. Deze kan niet uitgezet, aangepast of verlengd worden.

Op de pagina portal.stempunt.nu/portal/stempunt/questionnaire/profile verschijnt onderaan de pagina een balk met de foutmelding: 'Bij ‘Wat is je geboortedatum?’ is nog geen antwoord ingevuld.' Deze foutmelding wordt slechts kort weergegeven. Om te voldoen aan dit succescriterium, dient de foutmelding zichtbaar te blijven, zodat altijd duidelijk is wat de fout is totdat deze correct wordt gecorrigeerd.

Uitkomst: Onvoldoende

Bevindingen: Op de pagina portal.stempunt.nu/portal/stempunt, naast het kopje 'Wat doet StemPunt?', is er een carrousel met dia's waar teksten op staan. Echter, dit carrouselmechanisme kan momenteel alleen worden gestopt met behulp van een muis door op een bolletje te klikken. Om te voldoen aan dit succescriterium moet dit mechanisme ook toetsenbordtoegankelijk worden gemaakt.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website ontbreekt een mechanisme om herhalende blokken met content over te slaan. Daarnaast ontbreekt ook het gebruik van een main element. De koppenstructuur is verwarrend en biedt onvoldoende inzicht in de paginastructuur. Op sommige pagina’s ontbreken zelfs koppen. Een voorbeeld hiervan is te zien op portal.stempunt.nu/portal/stempunt/profile/balance.

Uitkomst: Onvoldoende

Bevindingen: De titel van de webpagina geeft geen adequate beschrijving van de inhoud van de pagina. Een geschikte paginatitel hoort de inhoud van de pagina te omschrijven en vervolgens gevolgd te worden door de naam van de organisatie. Voor de onderstaande pagina's zou de titel een beknopte benaming van de poll kunnen bevatten, gevolgd door de organisatienaam.
Zie pagina’s portal.stempunt.nu/portal/stempunt/opinie/topic-van-de-dag/994,
portal.stempunt.nu/portal/stempunt/opinie/topic-van-de-dag/894 en
portal.stempunt.nu/portal/stempunt/opinie/topic-van-de-dag/1579.

Advies: Op de pagina www.stempunt.nu/s.asp staat een enquête die over meerdere schermen loopt. Alle schermen hebben dezelfde titel. Dit wordt niet afgekeurd omdat het om een proces gaat. Toch wordt er aangeraden om aan elke pagina van de enquête een unieke titel toe te voegen. Wanneer deze vraag pagina's los worden aangeboden, moeten ze unieke, beschrijvende paginatitels krijgen.

Uitkomst: Onvoldoende

Bevindingen: Op elke pagina is bovenin een knop om in te loggen aanwezig. Met de knop kan je een popup oproepen waarmee je je kunt aanmelden. De content in deze popup is ook beschikbaar als de popup niet opgeroepen is. Bij navigeren met het toetsenbord kom je daarom ook in deze niet zichtbare content terecht. Dat is niet de bedoeling. Zorg ervoor dat deze content niet beschikbaar is voor hulpsoftware als de popup niet opgeroepen is.

Op de pagina portal.stempunt.nu/portal/stempunt/helpdesk/contact bevindt zich een contactformulier. Als foutieve gegevens in het formulier worden ingevuld, verschijnen er foutmeldingen. Wanneer een schermlezer aanstaat, gaat de focus niet naar de eerste foutmelding, maar naar de laatste (e-mailadres).

Op de pagina portal.stempunt.nu/portal/stempunt/profile, wanneer een bezoeker voor het eerst inlogt, wordt er een rondleiding geactiveerd. Dit is een extra scherm dat als een overlay verschijnt. Echter, de focus wordt niet automatisch naar dit scherm verplaatst, maar blijft onder de overlay gaan langs de interactieve elementen die op dat moment niet zichtbaar zijn. Dit specifieke scherm bevindt zich helemaal onderaan in de HTML-code, wat betekent dat de bezoeker door de hele pagina moet tabben om toegang te krijgen tot dit scherm om het te kunnen afsluiten.
Op de pagina portal.stempunt.nu/portal/stempunt/register/intake is de focusvolgorde niet logisch. Na het tweede e-mailadresveld begint de focus weer bovenaan de pagina terwijl er nog andere interactieve elementen onder dit veld aanwezig zijn.

Op de pagina portal.stempunt.nu/portal/stempunt/profile, onder het kopje 'Jouw profiel is niet meer up-to-date', is er een carrousel aanwezig. Echter, de focusvolgorde in deze widget is onjuist. Eerst krijgen dia's focus en pas daarna komen de knoppen 'Vorige' en 'Volgende' aan bod.

Op de pagina www.stempunt.nu/s.asp zijn twee invoervelden aanwezig. Na het invoeren van getallen in deze velden en wanneer de bezoeker met de tabtoets naar de knop 'Oke' navigeert om verder te gaan, springt de focus onverwacht naar het eerste tabblad van de browser. Dit gedrag is niet logisch en komt voor op alle schermen van de enquête waar de knop met de tekst ‘Oke’ op staat. Dit komt doordat deze knop niet met het toetsenbord te bedienen is.Zie www.stempunt.nu/s.asp .

Uitkomst: Onvoldoende

Bevindingen: Op de homepagina, onder het kopje 'Gratis cadeaubonnen verdienen?', zijn er drie 'lees meer' links in de tekst aanwezig. De linktekst biedt onvoldoende informatie om gebruikers van hulpsoftware te helpen het doel van de links te begrijpen, waardoor ze niet kunnen beslissen of ze de link willen volgen. Het is belangrijk om ervoor te zorgen dat de links duidelijk en begrijpelijk het doel beschrijven. Zie portal.stempunt.nu/ .

Onderaan de pagina portal.stempunt.nu/portal/stempunt/opinie/poll/1714 staan opmerkingen van bezoekers. Elke opmerking heeft een foto van een bezoeker. Bij deze foto’s die als links fungeren, ontbreekt een linkdoel. Zorg ervoor dat alle links een duidelijk linkdoel krijgen.

Onderaan de pagina portal.stempunt.nu/portal/stempunt/opinie/poll/1714 bevinden zich opmerkingen van bezoekers. Elke opmerking heeft een link met een kort tekstje (een combinatie van een getal en een letter) die aangeeft hoeveel dagen of weken geleden de opmerking is geplaatst. Bij al deze links is deze linktekst hetzelfde, waardoor het linkdoel niet uniek is. Om deze reden wordt aanbevolen om deze tekstjes om te zetten in gewone platte tekst. De huidige links bieden geen extra content omdat ze allemaal dezelfde pagina openen.

In de paginering op de pagina portal.stempunt.nu/portal/stempunt/opinie/topics zijn er twee lege links aanwezig. Deze links hebben als linktekst '...', wat niet voldoende is om een duidelijk linkdoel te communiceren. Het wordt aanbevolen om deze lege links te verwijderen.

Op de pagina portal.stempunt.nu/portal/stempunt/opinie/topic-van-de-dag/994 bevinden zich opmerkingen van bezoekers. Sommige threads zijn ingevouwen en bevatten een link om meer opmerkingen te plaatsen. De linktekst ‘Nog 2 antwoorden in deze thread weergeven’ komt meer dan eens voor binnen de pagina. Voor een blinde bezoeker die een lijst met links kan genereren om de inhoud van de pagina te scannen, is het doel van deze links niet duidelijk.

Advies: Op de pagina portal.stempunt.nu/portal/stempunt/opinie/poll/1714 is er een zijbalk met links en bijbehorende afbeeldingen. Om de toegankelijkheid te verbeteren, worden de afbeeldingen terecht verborgen voor hulpsoftware door het gebruik van een leeg alt-attribuut. Dit is juist, omdat de afbeeldingen louter decoratief zijn en geen inhoudelijke waarde bieden aan deze sectie. Echter, het valt op dat elke afbeelding voorzien is van een title-attribuut met dezelfde tekst als een naastgelegen link. Dit zorgt ervoor dat wanneer de bezoeker de pagina laat voorlezen en op deze afbeeldingen stuit tijdens het navigeren met de tabtoets, de tekst van het title-attribuut wordt voorgelezen. Dit veroorzaakt een situatie waarin een blinde bezoeker dezelfde tekst twee keer te horen krijgt. Het is raadzaam om het title-attribuut van deze afbeeldingen te verwijderen. Deze situatie doet zich op elke pagina voor.

Uitkomst: Onvoldoende

Bevindingen: Op deze website ontbreekt een tweede manier om pagina's te vinden. Zorg ervoor dat iedere pagina op de website op minstens twee verschillende manieren te bereiken is. Bijvoorbeeld door naast de standaard navigatie tevens een zoekveld of sitemap te bieden.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina portal.stempunt.nu/portal/stempunt is de focus niet zichtbaar als de focus op 'Man', 'Vrouw' of 'Anders' staat.

Op de pagina portal.stempunt.nu/portal/stempunt/helpdesk/orders, na het doorlopen van de pagina met behulp van het toetsenbord, wordt de focus gericht op niet-zichtbare interactieve elementen. De laatste link in de footer is 'Kwetsbaarheid'. Na deze link zou de focus moeten teruggaan naar het eerste interactieve element bovenaan de pagina. Echter, in plaats daarvan loopt de focus over vier andere elementen die momenteel niet zichtbaar zijn.

Op de pagina portal.stempunt.nu/portal/stempunt/profile, onder het kopje 'Jouw profiel is niet meer up-to-date', is er een carrousel aanwezig. De focus is niet zichtbaar op de twee pijlen waarmee de carrousel kan worden bediend.

Op meerdere plaatsen op deze website is de standaardfocus uitgeschakeld en vervangen door een subtiele blauwe schaduw. Echter, deze aanpak voldoet niet aan de minimale contrastvereisten omdat het kleurcontrast lager is dan 3,0:1. Het is belangrijk om ervoor te zorgen dat zelfgemaakte focusindicatoren voldoen aan de vereiste contrastniveaus. Dit is te zien op de pagina portal.stempunt.nu/portal/stempunt/mgm/share, in een widget waarmee je een bericht kunt delen op een van de drie socialmediakanalen.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de cookiebanner bevindt zich een knop met de zichtbare tekst 'Oke'. De toegankelijkheidsnaam van dit element is 'dismiss cookie message'. Daarnaast is er een link met de zichtbare tekst 'Lees onze Cookie Statement' die de naam 'learn more about cookies' heeft. Deze knop en de link zijn niet met stem te bedienen omdat de zichtbare tekst niet overeenkomt met de toegankelijkheidsnaam.
Zie ‘portal.stempunt.nu/�__.

Op de pagina portal.stempunt.nu/portal/stempunt/mgm/share staat een widget waarmee je een bericht kunt delen op een van de drie socialmediakanalen. Zowel het Facebook- als het WhatsApp-deel van de widget bevat afbeeldingen van tekst die tevens als een link fungeert. De zichtbare tekst op de afbeelding is ‘Gratis cadeaubonnen ..”. De toegankelijke naam van de afbeelding (via aria-label) is ‘Vriendenvoordeel!’. Omdat deze teksten verschillen, is deze link niet met stem te bedienen.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: In de HTML-code van de homepagina is de waarde van het lang-attribute ‘en’ terwijl de content van de pagina in het Nederlands is. De inhoud van de pagina wordt nu met de Engelstalige uitspraakregels voorgelezen. Het lijkt erop dat de taal van de pagina wordt ingesteld aan de hand van de taal van de browser. Zorg voor een correcte waarde in het lang-attribuut die altijd gelijk is aan de taal van de pagina..

Op de pagina www.stempunt.nu/s.asp staat een enquête die over meerdere schermen loopt. Op al deze pagina’s ontbreekt het lang attribuut.

Uitkomst: Onvoldoende

Bevindingen: In de cookiebanner bevindt zich een knop met de zichtbare tekst 'Oke'. De toegankelijkheidsnaam van dit element is 'dismiss cookie message'. Daarnaast is er een link met de zichtbare tekst 'Lees onze Cookie Statement' die de naam 'learn more about cookies' heeft. Deze teksten dienen Nederlandstalig te zijn, omdat de basistaal van de pagina Nederlands is.

Op de pagina portal.stempunt.nu/portal/stempunt, naast het kopje 'Wat doet StemPunt?', is er een carrousel met dia's waarop tekst staat. De knoppen waarmee de dia's worden bediend hebben aria-labels met de tekst 'Page dot one', 'Page dot two', enzovoort. Aangezien de basistaal van de pagina Nederlands is, dienen deze teksten ook in het Nederlands te zijn. Indien deze teksten toch Engelstalig blijven, is het aan te raden om via een lang attribuut aan te geven dat het om Engelse tekst gaat, om ervoor te zorgen dat het correct wordt voorgelezen. Hetzelfde geldt voor soortgelijke carrousels op andere pagina's.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Boven de footer op de pagina portal.stempunt.nu/portal/stempunt/opinie/topics bevindt zich een select element. Wanneer een andere waarde wordt geselecteerd, wordt de pagina opnieuw geladen. Dit leidt tot een ingrijpende verandering die niet mag plaatsvinden bij het kiezen van een optie in een select element. Om dit aan te pakken, is het aan te raden om bezoekers van tevoren te waarschuwen dat de pagina opnieuw zal worden geladen bij het selecteren van een andere optie. Dit specifieke select element komt ook voor op meerdere andere pagina's.
Zie bijvoorbeeld portal.stempunt.nu/portal/stempunt/profile/balance.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Boven de footer op de pagina portal.stempunt.nu/portal/stempunt/opinie/topics bevindt zich een keuzemogelijkheid om het aantal items op een pagina op te geven. Wanneer een andere waarde wordt geselecteerd, wordt de pagina automatisch opnieuw geladen. Dit leidt tot een ingrijpende verandering die niet mag plaatsvinden bij het kiezen van een optie in een select element. Waarschuw de bezoeker vooraf of gebruik een knop om de nieuwe waarde te versturen. Dit komt ook voor op bijvoorbeeld portal.stempunt.nu/portal/stempunt/profile/balance.

Uitkomst: Onvoldoende

Bevindingen: De invoervelden op de pagina portal.stempunt.nu/portal/stempunt hebben geen zichtbare labels. De placeholder teksten kunnen niet als labels dienen, omdat ze verdwijnen zodra een bezoeker begint te typen. Dit probleem komt ook voor op pagina portal.stempunt.nu/portal/stempunt/opinie/poll waar onder het artikel een tekstvak staat om je reactie te geven. De placeholder tekst verdwijnt zodra bezoeker begint te typen.
Zie ook het formulier onderaan portal.stempunt.nu/portal/stempunt/mgm/share.

Op de pagina portal.stempunt.nu/portal/stempunt/helpdesk/contact staat een contactformulier. Alle velden zijn verplicht. Deze informatie ontbreekt op de pagina. Voorkom dat een bezoeker een fout maakt in het formulier door een instructie te plaatsen dat alle velden verplicht zijn.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: De knop waarmee het menu kan worden uitgeklapt wanneer je bent ingezoomd (het mobiele menu), geeft niet aan of het menu geopend of gesloten is. Dit kan op verschillende manieren worden opgelost, bijvoorbeeld door het ‘aria-expanded’ attribuut toe te voegen. Zie portal.stempunt.nu/portal/stempunt.

Op de pagina portal.stempunt.nu/portal/stempunt wordt een definitielijst gebruikt onder het kopje ‘Hoe werkt onze cadeaushop?’ voor het weergeven van vragen en antwoorden. De vraag staat in een dt element en het antwoord in een dd element. Dat is goed. Het dt element is hierbij interactief gemaakt met JavaScript en binnen het dt element staat ook een a element die interactief is en indien geactiveerd ook de JavaScript code bij het dt element activeert. Dit is wel verwarrend. Het is beter om hier gewoon één interactief element te gebruiken. De JavaScript kan dan beter op het a element toegepast worden. Die is namelijk al toetsenbordtoegankelijk en de rol ervan is duidelijk voor hulpsoftware.

De JavaScript zorgt ervoor dat de verborgen content in het dd element wordt getoond of verborgen. De status van het verborgen zijn of zichtbaar zijn moet voor hulpsoftware duidelijk zijn bij het interactieve element welke de content toont of verbergt. Bij voorkeur dus bij het a element. Deze informatie staat nu op de verkeerde plek, namelijk binnen het dd element, maar dat is niet handig. Bij het interactieve element moet duidelijk zijn wat de functie doet (verbergen of tonen) en die informatie is daar nu niet aanwezig. Deze informatie kan eventueel ook door middel van een aria-expanded attribuut bij het a element worden doorgegeven (in plaats van de verborgen tekst).
Meer informatie hierover is op de volgende pagina te vinden: www.w3.org/TR/wai-aria-practices-1.2/. Deze accordions komen ook op andere pagina’s voor.

Op de pagina portal.stempunt.nu/portal/stempunt/helpdesk/orders zijn er vragen en bijbehorende antwoorden. De antwoorden zijn initieel verborgen en worden pas zichtbaar wanneer er op een vraag wordt geklikt. Echter, deze interactieve elementen zijn niet toegankelijk voor een blinde bezoeker. Het wordt niet voorgelezen dat de vragen als knoppen fungeren om antwoorden weer te geven. Dit komt doordat de rol van deze elementen ontbreekt. Om dit op te lossen, is het aan te raden om de juiste rol toe te voegen, bijvoorbeeld 'button', aan de vragen om aan te geven dat ze interactief zijn en antwoorden onthullen. Als de juiste rol is toegevoegd, moet ook de status van deze elementen aangegeven worden. Dit kan worden gedaan met het 'aria-expanded' attribuut op de knoppen.

Op de pagina portal.stempunt.nu/portal/stempunt/home/cookiestatement heeft het iframe geen toegankelijkheidsnaam. Het title-attribuut ontbreekt. Zorg dat iframes een naam hebben middels een title-attribuut. Gebruikers van hulpsoftware weten niet wat er in dit iframe staat en of ze deze daarom willen openen of overslaan. Voeg een beschrijvende en unieke title toe.

Op de pagina portal.stempunt.nu/portal/stempunt/opinie/topics bevindt zich onder de content van de pagina een select-element. Dit element heeft geen toegankelijkheidsnaam. Een mogelijke oplossing zou kunnen zijn om de tekst die ernaast staat te verbinden door middel van een ‘for en id’. Dit select-element komt ook op pagina portal.stempunt.nu/portal/stempunt/profile/balance voor.

Boven de footer staat een widget met beoordelingen. De knop om meer informatie over de Feedback company te openen mist de juiste rol en naam.

Op de pagina portal.stempunt.nu/portal/stempunt/opinie/poll, onder het artikel, bevindt zich een element dat op een select-element lijkt. De tekst ernaast zegt ‘sorteren op:’. De optie die gekozen is heeft een vinkje. De status van deze optie is niet in de HTML af te lezen.

Op detailpagina’s van polls staan opmerkingen van bezoekers. Zie bijvoorbeeld portal.stempunt.nu/portal/stempunt/opinie/poll/1714. Wanneer een bezoeker met de muis over de naam van een persoon beweegt, verschijnt er aan de rechterkant een knop met de tekst ‘Menu’. Deze knop heeft geen toegankelijkheidsnaam.

Op de pagina
portal.stempunt.nu/portal/stempunt/profile bevindt zicht een widget met pijlknoppen. Deze pijlknoppen hebben geen toegankelijkheidsnaam en geen rol.

Op de pagina portal.stempunt.nu/portal/stempunt/opinie/poll/1714 staan opmerkingen van bezoekers. Elke opmerking bevat een foto van een persoon die de opmerking heeft geplaatst. Bij deze foto’s die als links fungeren, ontbreekt een toegankelijkheidsnaam.

Op de pagina portal.stempunt.nu/portal/stempunt/mgm/share bevindt zich een widget om berichten te sturen via e-mail, Facebook en Whatsapp. De blauwe knop met een wit plusteken heeft als toegankelijkheidsnaam ‘+’. Dit is onvoldoende om de functie van de knop te beschrijven.

In de enquête die over meerdere schermen loopt kan selectie worden gemaakt van keuzevakjes of rondjes. De geselecteerde optie wordt niet voorgelezen. De status van een element is niet in de HTML-code af te lezen. Daarnaast worden de blauwe pijl knoppen onderaan de pagina niet voorgelezen. De toegankelijkheidsnaam en rol ontbreken. Zie
portal.stempunt.nu/portal/stempunt/questionnaire/profile.
In deze enquete zijn veel meer interactieve elementen aangetroffen waarbij de toegankelijkheidsnaam, rol en status ontbreken.
Zie bijvoorbeeld keuzerondjes op pagina www.stempunt.nu/dd/start en de knop met een toetsenbord op www.stempunt.nu/dd/start.
Zie ook de dropdown op www.stempunt.nu/s.asp.
Zie een checkbox op www.stempunt.nu/dd/start. En de schaal op pagina www.stempunt.nu/s.asp.
Zie alle invoervelden op www.stempunt.nu/s.asp.
Zie ook select-elementen zonder toegankelijkheidsnaam op www.stempunt.nu/s.asp.

Op de pagina www.stempunt.nu/s.asp staat een iframe zonder toegankelijkheidsnaam. Voeg een titel attribuut toe om dit op te lossen.

Op de pagina www.stempunt.nu/s.asp staat een knop om de bestanden te uploaden. Bij deze knop ontbreekt de rol. Deze knop bestaat in de HTML uit een platte tekst. Zorg ervoor dat de interactieve rol van dit element door hulpsoftware wordt voorgelezen.

Uitkomst: Onvoldoende

Bevindingen: Op de pagina portal.stempunt.nu/portal/stempunt/questionnaire/profile verschijnt onderaan de pagina een balk met de foutmelding: 'Bij ‘Wat is je geboortedatum?’ is nog geen antwoord ingevuld.' Dit is een statusbericht dat niet door hulpsoftware wordt voorgelezen.