WCAG-EM 2.2 AA audit rapport voor het Centric Inwonerportaal

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Onvoldoende

Startscherm

Uitkomst: Onvoldoende

Mijn Profiel

Uitkomst: Voldoende

Mijn Processen

Uitkomst: Onvoldoende

Documenten

Uitkomst: Voldoende

Acties en Afspraken

Uitkomst: Onvoldoende

Betalingen

Uitkomst: Onvoldoende

Vakantiegeld

Uitkomst: Onvoldoende

Schulden

Uitkomst: Onvoldoende

WMO ondersteuning: Producten

Uitkomst: Onvoldoende

Werk en Participatie: Activiteiten

Uitkomst: Onvoldoende

Contactpersonen

Uitkomst: Onvoldoende

Wijzigingen doorgeven

Uitkomst: Onvoldoende

Periodieke verklaringen

Uitkomst: Voldoende

Wijziging doorgeven: Ik heb een baan en wil mijn uitkering beëindigen

Uitkomst: Onvoldoende

Wijziging doorgeven: Verblijf in binnen- of buitenland doorgeven

Uitkomst: Onvoldoende

PDF: Jaaropgave 12-12-2025

Uitkomst: Onvoldoende

PDF: Schulden 12-12-2025

Uitkomst: Onvoldoende

PDF: Stortingen uitkeringen (Betalingen)

Uitkomst: Onvoldoende

PDF: Uitkeringsspecificatie 12-12-2025

Uitkomst: Onvoldoende

Inkomen Startscherm

Uitkomst: Onvoldoende

Jeugdwet ondersteuning: Producten

Uitkomst: Onvoldoende

Wijziging doorgeven: Ik ben ontslagen

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Opmerking (geen afkeuring): Op alle pagina's staat aan de linkerkant een navigatie menu. De menu items zijn opgemaakt als links. Deze links staan niet in een lijst. Hierdoor kan hulpsoftware niet bepalen uit hoeveel items het menu bestaat. Dit helpt gebruikers van voorleessoftware om de content hoog over waar te nemen. De role="navigation" is wel aanwezig. Hierdoor weten gebruikers die afhankelijk zijn van voorleessoftware dat het menu items betreft.

Advies: Plaats de menu items in een ongeordende lijst. Dit kan middels een ul-element en li-elementen.

Startscherm

Op de Startpagina staat onder de kop "Ga direct door naar..." een aantal links. De links vormen een samenhangende lijst van links die bij elkaar horen en dat dient waargenomen te kunnen worden door hulpsoftware. Dit helpt bij het begrip van de content.

Advies: Plaats de links in een ongeordende lijst middels een ul-element en li-elementen.

Opmerking (geen afkeuring): Op het startscherm staat onder de h2-kop "Acties en afspraken" een stepper. De dikgedrukte teksten bij elke stap zijn niet geprogrammeerd als een kop, terwijl deze er visueel wel uitzien als een kop.

Advies: Programmeer de dikgedrukte teksten bij elke stap als h3-kop. Hierdoor is de relatie beter te bepalen tussen de h2-kop "Acties en afspraken" en de onderliggende stappen.

Mijn Profiel

Opmerking (geen afkeuring): Op de Mijn profiel pagina staat informatie dat opgemaakt is met label-elementen en span-elementen. Het betreft hier de persoonlijke gegevens van een gebruiker voordat er aanpassingen gedaan worden. De label-element zijn overigens niet gekoppeld aan de betreffende informatie. Hierdoor kan hulpsoftware de structuur en relatie van deze content niet goed bepalen.

Advies: Plaats de informatie in een description list middels een dl-element, dt-elementen en dd-elementen. Bijvoorbeeld:

<dl>
  <dt></dt>
  <dd></dd>

  <dt>/dt>
  <dd></dd>

  <dt></dt>
  <dd></dd>
</dl>

Mijn Processen

Op de Mijn Processen pagina staat aan de rechterkant dikgedrukte tekst "Documenten bekijken" dat niet als kop is opgemaakt. Hierdoor kan hulpsoftware niet bepalen dat dit het onderwerp is van de onderliggende content, in dit geval een document.

Advies: Programmeer de dikgedrukte tekst "Documenten bekijken als h2-kop. Hierdoor is de relatie beter te bepalen tussen de h1-kop "Mijn processen" en de onderliggende stappen.

Op de Mijn Processen pagina staan "Actieve processen" en "Historische processen" in een tabel. De rijen van de tabel kunnen uitgeklapt worden. De informatie die dan gepresenteerd wordt is opgemaakt met label- en input-elementen. De informatie betreft platte tekst en zijn visueel geen invoervelden.

Advies: Plaats de informatie dat zichtbaar wordt als een rij is uitgeklapt in een description list middels een dl-element, dt-elementen en dd-elementen. Bijvoorbeeld:

<dl>
  <dt></dt>
  <dd></dd>

  <dt>/dt>
  <dd></dd>

  <dt></dt>
  <dd></dd>
</dl>

Op de Mijn Processen pagina staan "Actieve processen" en "Historische processen" in een tabel. Onder deze tabel staat een paginator. Bij deze paginator is een combobox aanwezig. Deze combobox heeft geen toegankelijkheidsnaam. Een aria-description geeft geen naam aan een component. Hierdoor kan hulpsoftware niet waarnemen wat het doel is van deze combobox.

Hetzelfde probleem is te vinden bij de paginator onder de tabel van "Documenten bekijken".

Advies: Koppel deze comboxbox aan het label "Resultaten per pagina". Dit kan middels de for en id attributen.

Opmerking (geen afkeuring): Op de Mijn Processen pagina staan "Actieve processen" en "Historische processen" in een tabel. Onder deze tabel staat een paginator. De paginator is niet opgemaakt binnen een nav-element of heeft een `role="navigation". Hierdoor kan hulpsoftware niet bepalen dat dit navigatie-items zijn.

Hetzelfde probleem is te vinden bij de paginator onder de tabel van "Documenten bekijken".

Advies: Plaats de gehele paginator binnen een nav-element.

Documenten

Opmerking (geen afkeuring): Op de Documenten pagina staat documenten in een tabel. Zodra een ontvangen document waar akkoord is op gegeven bekeken wordt, dan verschijnt er een dialoogvenster. De informatie binnen dit dialoogvenster is opgemaakt met label-elementen en span-elementen. De label-element zijn overigens niet gekoppeld aan de betreffende informatie. Hierdoor kan hulpsoftware de structuur en relatie van deze content niet goed bepalen.

Advies: Plaats de informatie dat in het dialoogvenster staat in een description list middels een dl-element, dt-elementen en dd-elementen. Bijvoorbeeld:

<dl>
  <dt></dt>
  <dd></dd>

  <dt>/dt>
  <dd></dd>

  <dt></dt>
  <dd></dd>
</dl>

Acties en Afspraken

Op de Acties en Afspraken pagina is er bij een actie soms de mogelijkheid om deze af te ronden middels een switch-button (toggle). Deze switch-button staat in een fieldset-element. Het bijbehorende legend-element is niet programmatisch gekoppeld aan de switch-button. Hierdoor kan deze switch-button onduidelijk zijn voor gebruikers die afhankelijk zijn van voorleessoftware. Dit is met name een probleem als de switch-button op "Nee" staat en als er maar één interactief element staat in een fieldset-element.

Advies: Koppel het legend-element aan de switch-button middels een aria-labelledby attribuut en id-attribuut. Bijvoorbeeld:

<fieldset>
  <legend id="share-legend">Afgerond</legend>
  <button
    role="switch"
    aria-checked="false"
    aria-labelledby="share-legend share-toggle-label">
    <label id="share-toggle-label">Ja, afgerond op 24 december 2025</label>
  </button>
</fieldset>

Opmerking (geen afkeuring): Op dezelfde pagina staat een stepper opgemaakt als een lijst. Zodra een stap geactiveerd wordt verschijnt er een dialoogvenster. De informatie binnen dit dialoogvenster is opgemaakt met label-elementen en span-elementen. De label-element zijn overigens niet gekoppeld aan de betreffende informatie. Hierdoor kan hulpsoftware de structuur en relatie van deze content niet goed bepalen.

Advies: Plaats de informatie dat in het dialoogvenster staat in een description list middels een dl-element, dt-elementen en dd-elementen. Bijvoorbeeld:

<dl>
  <dt></dt>
  <dd></dd>

  <dt>/dt>
  <dd></dd>

  <dt></dt>
  <dd></dd>
</dl>

Betalingen

Als de Betalingen pagina wordt bekeken op een schermweergave van 1280 bij 1024 pixels en 200% of 400% zoom dan veranderd de informatie dat binnen de tabellen staat naar span-elementen die geen duidelijke relatie met elkaar hebben. Dit is verwarrend voor gebruikers die afhankelijk zijn van voorleessoftware. Teksten binnen de span-elementen worden bijvoorbeeld worden bijvoorbeeld achter elkaar voorgelezen zonder onderbrekingen.

Advies: Plaats de informatie in een description list middels een dl-element, dt-elementen en dd-elementen. Bijvoorbeeld:

<dl>
  <dt></dt>
  <dd></dd>

  <dt>/dt>
  <dd></dd>

  <dt></dt>
  <dd></dd>
</dl>

Een andere oplossing is om de tabel niet te verwijderen in de aangepaste schermweergave, horizontaal scrollen is toegestaan voor tabellen dus geen afkeuring onder 1.4.10 en 1.4.4.

Vakantiegeld

Op de Vakantiegeld pagina staan twee h2-koppen "Periode" en "Opgebouwd saldo". De h2-kop "Periode" wordt direct gevolgd door de h2-kop "Opgebouwd saldo". Hierdoor heeft de h2-kop "Periode" geen onderliggende content. Een kop dient altijd onderliggende content te hebben. Ook is er geen relatie met de kop "Opgebouwde saldo" en de bedragen. Dit geldt ook voor dezelfde koppen in de aangepaste schermweergave van 1280 bij 1024 pixels en 200% of 400% zoom.

Advies: Het advies is om de h2-koppen samen te voegen tot één h2-kop "Periode en Opgebouwd saldo". Hierdoor wordt de content van de uitklapbare rijen ook verduidelijkt. Dit geldt ook voor dezelfde koppen in de aangepaste schermweergave van 1280 bij 1024 pixels en 200% of 400% zoom. Een andere oplossing is om deze content binnen een table-element te programmeren. De koppen "Periode" en "Opgebouwd saldo" zijn dan de table-headers.

Opmerking (geen afkeuring): Op de Vakantiegeld pagina staan uitklapbare rijen. De koppen binnen de rijen hebben de role="heading" gekregen. Echter is er geen aria-level gedefinieerd.

Advies: Voeg een heading-level toe, bijvoorbeeld aria-level="3". Hierdoor is er een duidelijke hiërarchische structuur.

Schulden

Op de Schulden pagina staat een tabel dat de Role: LayoutTable heeft gekregen. Hiermee wordt aangegeven dat de tabel alleen voor visuele layout bedoelt is. Echter ontbreekt er een role="presentation" attribuut waardoor (nieuwere) hulpsoftware in sommige gevallen de semantische structuur van een tabel herkent en dat is voor deze content niet de bedoeling.

Advies: Voeg een role="presentation" of role="none" attribuut toe aan het table-element.

WMO ondersteuning: Producten

Op de WMO ondersteuning: Producten pagina staan uitklapbare rijen. De informatie die gepresenteerd wordt als een rij is uitgeklapt is opgemaakt met label- en input-elementen. De informatie betreft platte tekst en zijn visueel geen invoervelden.

Advies: Plaats de informatie dat zichtbaar wordt als een rij is uitgeklapt in een description list middels een dl-element, dt-elementen en dd-elementen. Bijvoorbeeld:

<dl>
  <dt></dt>
  <dd></dd>

  <dt>/dt>
  <dd></dd>

  <dt></dt>
  <dd></dd>
</dl>

Werk en Participatie: Activiteiten

Op de WMO ondersteuning: Activiteiten pagina staan uitklapbare rijen. De informatie die gepresenteerd wordt als een rij is uitgeklapt is opgemaakt met label- en input-elementen. De informatie betreft platte tekst en zijn visueel geen invoervelden.

Advies: Plaats de informatie dat zichtbaar wordt als een rij is uitgeklapt in een description list middels een dl-element, dt-elementen en dd-elementen. Bijvoorbeeld:

<dl>
  <dt></dt>
  <dd></dd>

  <dt>/dt>
  <dd></dd>

  <dt></dt>
  <dd></dd>
</dl>

Contactpersonen

Op de Contactpersonen pagina staat bij elke contactpersoon drie links "Afspraak maken", "Bel me terug" en "Verstuur een e-mail". Deze links zijn niet opgemaakt in een lijst. De links vormen een samenhangende lijst van links die bij elkaar horen en dat dient waargenomen te kunnen worden door hulpsoftware. Dit helpt bij het begrip van de content.

Advies: Plaats de links in een ongeordende lijst middels een ul-element en li-elementen.

Wijzigingen doorgeven

Op de Wijzigingen doorgeven pagina staat koptekst dat niet geprogrammeerd is als kop. Het betreft de tekst "Doorstarten aanvragen uitkeringen". Om de relate met de onderliggende lijst met links te leggen, dient deze tekst als kop geprogrammeerd te worden.

Advies: Programmeer de tekst "Doorstarten aanvragen uitkeringen" als h2-kop. Dit is consistent met alle andere h2-koppen op deze pagina.

Periodieke verklaringen

Opmerking (geen afkeuring): Op de Periodieke verklaringen pagina staat informatie dat opgemaakt is met label- en span-elementen. De informatie betreft platte tekst en zijn visueel geen invoervelden. Het betreft alle content op deze pagina dat opgemaakt is met label- en span-elementen. Hierdoor hebben de label-elementen geen semantische betekenis en dat kan bij hulpsoftware voor problemen zorgen.

Advies: Plaats de informatie in een description list middels een dl-element, dt-elementen en dd-elementen. Bijvoorbeeld:

<dl>
  <dt></dt>
  <dd></dd>

  <dt>/dt>
  <dd></dd>

  <dt></dt>
  <dd></dd>
</dl>

Wijziging doorgeven: Ik heb een baan en wil mijn uitkering beëindigen

Op de Wijziging doorgeven: Ik heb een baan en wil mijn uitkering beëindigen pagina kunnen documenten geüpload worden. Zodra een document geüpload is dan verschijnt deze onder het uploadveld. De documenten staan niet in een lijst en dat is wel nodig zodat gebruikers die afhankelijk zijn van voorleessoftware kunnen waarnemen hoeveel documenten er op dat moment zijn geüpload. Een lijst-element kan dit doen door de totale aantallen te benoemen als de lijst de focus krijgt.

Advies: Plaats de geüploade documenten binnen een ongeordende lijst. Dit kan middels een ul-element en li-elementen.

Opmerking (geen afkeuring): Op dezelfde pagina staat informatie dat opgemaakt is met label- en lijst-elementen. Een label-element hiervoor gebruiken is semantisch niet correct en deze is ook niet gekoppeld aan de betreffende lijst. Een gebruiker die afhankelijk is van voorleessoftware kan dit interpreteren als labels van invoervelden. Het gaat om de label "Voeg de volgende documenten toe om de wijziging te versturen:" en bijbehorende lijst items "Getekende arbeidsovereenkomst of uitzendovereenkomst" en "Eventuele specificaties".

Advies: Plaats de tekst binnen het label-element in een p- of span-element en koppel deze content middels een id-attribuut en aria-labelledby attribuut op het ul-element. Bijvoorbeeld:

<p id="list-title" class="list-title">Voeg de volgende documenten toe om de wijziging te versturen:</p>

<ul aria-labelledby="list-title">
  <li>Getekende arbeidsovereenkomst of uitzendovereenkomst</li>
  <li>Eventuele specificaties</li>
</ul>

Wijziging doorgeven: Verblijf in binnen- of buitenland doorgeven

Op de Wijziging doorgeven: Verblijf in binnen- of buitenland doorgeven pagina kunnen documenten geüpload worden. Zodra een document geüpload is dan verschijnt deze onder het uploadveld. De documenten staan niet in een lijst en dat is wel nodig zodat gebruikers die afhankelijk zijn van voorleessoftware kunnen waarnemen hoeveel documenten er op dat moment zijn geüpload. Een lijst-element kan dit doen door de totale aantallen te benoemen als de lijst de focus krijgt.

Advies: Plaats de geüploade documenten binnen een ongeordende lijst. Dit kan middels een ul-element en li-elementen.

Opmerking (geen afkeuring): Op dezelfde pagina staat informatie dat opgemaakt is met label- en lijst-elementen. Een label-element hiervoor gebruiken is semantisch niet correct en deze is ook niet gekoppeld aan de betreffende lijst. Een gebruiker die afhankelijk is van voorleessoftware kan dit interpreteren als labels van invoervelden. Het gaat om de label "Voeg de volgende documenten toe om de wijziging te versturen:" en bijbehorende lijst items "Getekende arbeidsovereenkomst of uitzendovereenkomst" en "Eventuele specificaties".

Advies: Plaats de tekst binnen het label-element in een p- of span-element en koppel deze content middels een id-attribuut en aria-labelledby attribuut op het ul-element. Bijvoorbeeld:

<p id="list-title" class="list-title">Voeg de volgende documenten toe om de wijziging te versturen:</p>

<ul aria-labelledby="list-title">
  <li>vliegtickets</li>
  <li>boeking</li>
  <li>Treinkaartje</li>
</ul>

PDF: Jaaropgave 12-12-2025

Het PDF-document Jaaropgave 12-12-2025 is getagd, dat is goed. Echter zijn er meerdere problemen gevonden bij het gebruik van de tags:

• De kopteksten zijn niet getagd als koppen
• De informatie bij "Cliënt" en "Organisatie" is opgemaakt en getagd in een tabel. Tabellen mogen niet gebruikt worden voor visuele opmaak.
• Tabelkoppen zijn niet getagd als tabelkoppen

Adviezen:

• Tag de koppen middels h1-h6 tags.
• Tag de informatie onder de koppen "Cliënt" en "Organisatie" middels lijst-tags (L, LI, Lbl, LBody).
• Tag de tabelkoppen "Totale jaaropgave", "Ontvangen vorig dienstjaar" en "Loonheffingskorting" als tabelkoppen middels een th-tag.

PDF: Schulden 12-12-2025

Het PDF-document Schulden 12-12-2025 is getagd, dat is goed. Echter zijn er meerdere problemen gevonden bij het gebruik van de tags:

• Tabelkoppen zijn niet getagd als tabelkoppen. Ook is de scope niet goed aangegeven. Hierdoor denkt hulpsoftware dat de koppen "Soort Schuld", "Periode van", "Periode t/m" en "Saldo" bij alle tabelrijen van de tabel horen.

Adviezen:

• Tag de tabelkoppen "Soort Schuld", "Periode van", "Periode t/m" en "Saldo" als tabelkoppen middels een th-tag. Geef hierbij de scope aan. Bijvoorbeeld:

  <TR>
    <TH Scope="Column">Soort schuld</TH>
    <TD>Krediethypotheek PW</TD>
  </TR>
  

PDF: Stortingen uitkeringen (Betalingen)

Het PDF-document Jaaropgave 12-12-2025 is getagd, dat is goed. Echter zijn er meerdere problemen gevonden bij het gebruik van de tags:

• De kopteksten zijn niet getagd als koppen
• Tabelkoppen zijn niet getagd als tabelkoppen. Ook is de scope niet goed aangegeven. Hierdoor denkt hulpsoftware dat de koppen bij alle tabelrijen van een tabel horen.

Adviezen:

• Tag de koppen middels h1-h6 tags.
• Tag de tabelkoppen zoals "Specificaties" en "Op rekeningnummer" als tabelkoppen middels een th-tag. Geef hierbij de scope aan. Bijvoorbeeld:

  <TR>
    <TH Scope="Column">Soort schuld</TH>
    <TD>Krediethypotheek PW</TD>
  </TR>
  

Overkoepelend advies: Gebruik geen tabellen voor visuele opmaak. De content in deze PDF wordt beter geïnterpreteerd door hulpsoftware als er alleen gebruik gemaakt wordt van getagde koppen met daaronder de informatie getagd middels lijst-tags (L, LI, Lbl, LBody).

PDF: Uitkeringsspecificatie 12-12-2025

Het PDF-document Uitkeringsspecificatie 12-12-2025 is getagd, dat is goed. Echter is er het volgende probleem gevonden bij het gebruik van tags:

• Tabelkoppen "Omschrijving", "Plus", "Min" en "Basis" zijn niet getagd als tabelkoppen.

Advies: Tag de gehele rij van de betreffende tabel middels een th-tag.

Inkomen Startscherm

Op de pagina Inkomen Startscherm staat onder de kop "Ga direct door naar..." een aantal links. De links vormen een samenhangende lijst van links die bij elkaar horen en dat dient waargenomen te kunnen worden door hulpsoftware. Dit helpt bij het begrip van de content.

Advies: Plaats de links in een ongeordende lijst middels een ul-element en li-elementen.

Jeugdwet ondersteuning: Producten

Op de Jeugdwet ondersteuning: Producten pagina staan uitklapbare rijen. De informatie die gepresenteerd wordt als een rij is uitgeklapt is opgemaakt met label- en input-elementen. De informatie betreft platte tekst en zijn visueel geen invoervelden.

Advies: Plaats de informatie dat zichtbaar wordt als een rij is uitgeklapt in een description list middels een dl-element, dt-elementen en dd-elementen. Bijvoorbeeld:

<dl>
  <dt></dt>
  <dd></dd>

  <dt>/dt>
  <dd></dd>

  <dt></dt>
  <dd></dd>
</dl>

Wijziging doorgeven: Ik ben ontslagen

Op de Wijziging doorgeven: Ik ben ontslagen pagina kunnen documenten geüpload worden. Zodra een document geüpload is dan verschijnt deze onder het uploadveld. De documenten staan niet in een lijst en dat is wel nodig zodat gebruikers die afhankelijk zijn van voorleessoftware kunnen waarnemen hoeveel documenten er op dat moment zijn geüpload. Een lijst-element kan dit doen door de totale aantallen te benoemen als de lijst de focus krijgt.

Advies: Plaats de geüploade documenten binnen een ongeordende lijst. Dit kan middels een ul-element en li-elementen.

Opmerking (geen afkeuring): Op dezelfde pagina staat informatie dat opgemaakt is met label- en lijst-elementen. Een label-element hiervoor gebruiken is semantisch niet correct en deze is ook niet gekoppeld aan de betreffende lijst. Een gebruiker die afhankelijk is van voorleessoftware kan dit interpreteren als labels van invoervelden. Het gaat om de label "Voeg de volgende documenten toe om de wijziging te versturen:" en bijbehorende lijst items "Getekende arbeidsovereenkomst of uitzendovereenkomst" en "Eventuele specificaties".

Advies: Plaats de tekst binnen het label-element in een p- of span-element en koppel deze content middels een id-attribuut en aria-labelledby attribuut op het ul-element. Bijvoorbeeld:

<p id="list-title" class="list-title">Voeg de volgende documenten toe om de wijziging te versturen:</p>

<ul aria-labelledby="list-title">
  <li>Ontslagbrief</li>
  <li>Eventuele specificaties</li>
</ul>

Hele sample

Uitkomst: Onvoldoende

PDF: Uitkeringsspecificatie 12-12-2025

Uitkomst: Onvoldoende

PDF: Uitkeringsspecificatie 12-12-2025

Het PDF-document Uitkeringsspecificatie 12-12-2025 is getagd, dat is goed. Echter is er een probleem gevonden met de betekenisvolle volgorde. De kop "Organisatie" en tabel onder de betreffende kop komen na de rij "Netto ontvangen bedrag" van de tabel onder de kop "Opbouw uitkering". Dit is niet correct omdat de content van "Organisatie" bovenaan de pagina staat.

Advies:

• Plaats de kop "Organisatie" en onderliggende tabel na de kop "Cliënt" en onderliggende tabel. Hierdoor klopt de betekenisvolle volgorde met de visuele volgorde.

Hele sample

Uitkomst: Onvoldoende

Mijn Processen

Uitkomst: Onvoldoende

Documenten

Uitkomst: Onvoldoende

Mijn Processen

Op de Mijn Processen pagina staat in een instructie "Selecteer een proces in de tabel om hier de documenten van een proces te zien.". Het woord "hier" verwijst naar een visuele locatie. Een gebruiker met een visuele beperking die afhankelijk is van voorleessoftware kan deze oriëntatie (linkerkant) niet waarnemen.

Advies: Pas de instructie aan zodat het woord "hier" verwijderd is. Bijvoorbeeld "Selecteer een proces in de tabel om de documenten van een proces te zien.".

Documenten

Op de Documenten pagina staat een instructie "Klik op het icoon aan de rechterkant om deze te downloaden.". Het woord "rechterkant" verwijst naar een visuele locatie. Een gebruiker met een visuele beperking die afhankelijk is van voorleessoftware kan deze oriëntatie (linkerkant) niet waarnemen.

Advies: Pas de instructie aan zodat het woord "rechterkant" verwijderd is. Bijvoorbeeld "Klik op de download link met de naam "Downloaden" bij een document om deze te downloaden of bekijken.".

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Wijziging doorgeven: Verblijf in binnen- of buitenland doorgeven

Uitkomst: Voldoende

Wijziging doorgeven: Verblijf in binnen- of buitenland doorgeven

Opmerking (geen afkeuring): Op de Wijziging doorgeven: Verblijf in binnen- of buitenland doorgeven pagina staan datum invoervelden. Op deze velden staat een autocomplete="off" attribuut. Deze velden missen een autocomplete="on" attribuut. Dit helpt gebruikers bij het opnieuw invullen van data's.

Advies: Zet het autocomplete-attribuut op "on" op alle datum invoervelden.

Hele sample

Uitkomst: Onvoldoende

Startscherm

Uitkomst: Onvoldoende

Mijn Processen

Uitkomst: Onvoldoende

Inkomen Startscherm

Uitkomst: Onvoldoende

Startscherm

Op de Startpagina staan onder de kop "Acties en Afspraken" een stepper. Bij elke stap staat een link met de tekst "hier". Deze blauwe link is visueel alleen met kleur te onderscheiden van de lopende tekst. Het kleurcontrast verschil tussen de blauwe (#004EAD) link en de zwarte (#0A0C1F) lopende tekst is 2.5:1. Dit is onvoldoende om het verschil te bepalen voor gebruikers met een visuele beperking.

Advies: Pas het kleurcontrast van de blauwe links aan zodat het een minimale waarde heeft van 3.0:1 ten opzichte van de lopende tekst. Een andere oplossing is om de links te onderstrepen, hiermee is de onderscheidbaarheid niet alleen afhankelijk van kleur.

Mijn Processen

Op de Mijn Processen pagina wordt een actieve tabel rij alleen met kleur gecommuniceerd. Dit gebeurd op het moment als de "Documenten bekijken" knop wordt geactiveerd. Het kleurcontrast verschil tussen de actieve en de niet actieve rij is 1.1:1, waardoor dit niet als alternatief kan gelden.

Advies: Zorg dat het kleurcontrast verschil tussen de actieve en niet actieve rij minimaal 3,0:1 is. Een andere oplossing is om de rij ook uit te laten klappen als de "Document bekijken" knop wordt geactiveerd. Het Chevron-pijltje geeft dan aan dat de rij is opengeklapt.

Inkomen Startscherm

Op de Inkomen Startscherm staan onder de kop "Acties en Afspraken" een stepper. Bij elke stap staat een link met de tekst "hier". Deze blauwe link is visueel alleen met kleur te onderscheiden van de lopende tekst. Het kleurcontrastverschil tussen de blauwe (#004EAD) link en de zwarte (#0A0C1F) lopende tekst is 2.5:1. Dit is onvoldoende om het verschil te bepalen voor gebruikers met een visuele beperking.

Hetzelfde probleem is te vinden bij de rode notificatie met de tekst "Uw inkomsten moeten nog vóór 31 januari 2025 worden ingevuld, klik hier om uw inkomsten door te geven."

Advies: Pas het kleurcontrast van de blauwe links aan zodat het een minimale waarde heeft van 3.0:1 ten opzichte van de lopende tekst. Een andere oplossing is om de links te onderstrepen, hiermee is de onderscheidbaarheid niet alleen afhankelijk van kleur.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Uitkeringsspecificaties: Januari 2025

Uitkomst: Onvoldoende

Uitkeringsspecificaties: Maart 2025

Uitkomst: Onvoldoende

Uitkeringsspecificaties: Januari 2025

Op de Uitkeringsspecificaties: 2025 pagina staan tabellen. Zodra de pagina wordt bekeken op een schermweergave van 1280 bij 1024 pixels en 200% zoom dan verdwijnen de tabel headers "Omschrijving", "Plus", "Min" en "Basis". Dit is verlies aan content.

Advies: Zorg dat de tabel headers zichtbaar blijven. Horizontaal scrollen is toegestaan voor tabellen waardoor er bijvoorbeeld één kolom zichtbaar mag zijn in deze schermweergave. Hierdoor ontstaat er ook meer ruimte om de tabel headers te tonen.

Uitkeringsspecificaties: Maart 2025

Op de Uitkeringsspecificaties: Maart 2025 pagina staan tabellen. Zodra de pagina wordt bekeken op een schermweergave van 1280 bij 1024 pixels en 200% zoom dan verdwijnen de tabel headers "Omschrijving", "Plus", "Min" en "Basis". Dit is verlies aan content.

Advies: Zorg dat de tabel headers zichtbaar blijven. Horizontaal scrollen is toegestaan voor tabellen waardoor er bijvoorbeeld één kolom zichtbaar mag zijn in deze schermweergave. Hierdoor ontstaat er ook meer ruimte om de tabel headers te tonen.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Startscherm

Uitkomst: Onvoldoende

Mijn Processen

Uitkomst: Onvoldoende

Acties en Afspraken

Uitkomst: Onvoldoende

Uitkeringsspecificaties: Januari 2025

Uitkomst: Onvoldoende

Saldobiljet

Uitkomst: Onvoldoende

WMO ondersteuning: Producten

Uitkomst: Onvoldoende

Uitkeringsspecificaties: Maart 2025

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Op alle pagina's valt de applicatie titel in de header deels buiten beeld als de pagina's worden bekeken op een schermresolutie van 1280 bij 1024 pixels en 400% zoom. Dit is verlies aan content en is met name een probleem voor visueel beperkte gebruikers.

Advies: De titel dient volledig zichtbaar te blijven in deze aangepaste schermweergave. Er zijn meerdere oplossingen hiervoor. Plaats bijvoorbeeld de titel boven het hamburger menu, zoekknop, profielknop en uitlogknop. Een andere oplossing is om de zoekknop, profielknop en uitlogknop achter een uitklapbare menu te verbergen, hierdoor ontstaat er meer ruimte voor de applicatie titel.

Startscherm

Op de Startscherm pagina valt tekst bij de Acties en Afspraken deels buiten beeld zodra de pagina bekeken wordt op een schermweergave van 1280 bij 10124 pixels en 400% zoom. Hierdoor ontstaat er een horizontale scrolbalk om deze tekst zichtbaar te maken. Horizontaal scrollen om content zichtbaar te maken is voor dit type content niet toegestaan.

Advies: Zorg dat alle tekst volledig zichtbaar blijft als de pagina bekeken wordt op een schermweergave van 1280 bij 1024 pixels en 400% zoom.

Mijn Processen

Op de Mijn Processen pagina valt tekst bij het onderwerp "Medewerker" deels buiten beeld als de pagina wordt bekeken op een schermweergave van 1280 bij 1024 pixels. Het betreft de tekst "Consultant Suites voor het Sociaal D..." als een proces is uitgeklapt. Deze content is binnen een table-element opgemaakt waardoor horizontaal scrollen binnen deze tabel is toegestaan. Alle content van één kolom moet echter wél zichtbaar zijn in deze aangepaste schermweergave en dat is nu niet het geval.

Advies: Zorg dat alle tekst binnen één kolom volledig zichtbaar blijft als de pagina bekeken wordt op een schermweergave van 1280 bij 1024 pixels en 400% zoom. Maak gebruik van woordafbreking zodat de tekst op twee regels komt.

Acties en Afspraken

Op de Acties en Afspraken pagina valt de datum "10 december 2025, 10:00 - 11:0..." deels buiten beeld als de pagina wordt bekeken op een schermweergave van 1280 bij 1024 pixels. Horizontaal scrollen is nodig om de content zichtbaar te maken en dat is niet toegestaan voor deze type content.

Advies: Zorg dat alle tekst volledig zichtbaar blijft als de pagina bekeken wordt op een schermweergave van 1280 bij 1024 pixels en 400% zoom. Maak gebruik van woordafbreking zodat de tekst op twee regels valt.

Uitkeringsspecificaties: Januari 2025

Op de Uitkeringsspecificaties: Januari 2025 pagina staan tabellen. Zodra de pagina wordt bekeken op een schermweergave van 1280 bij 1024 pixels en 400% zoom dan verdwijnen de tabel headers "Omschrijving", "Plus", "Min" en "Basis". Dit is verlies aan content.

Advies: Zorg dat de tabel headers zichtbaar blijven. Horizontaal scrollen is toegestaan voor tabellen waardoor er één kolom zichtbaar mag zijn in deze schermweergave. Hierdoor ontstaat er ook meer ruimte om de tabel headers te tonen.

Saldobiljet

Op de Saldobiljet pagina valt link "Download saldobiljet" deels buiten beeld als de pagina wordt bekeken op een schermweergave van 1280 bij 1024 pixels en 400% zoom. Horizontaal scrollen is nodig om de content zichtbaar te maken en dat is niet toegestaan voor deze type content.

Advies: Zorg dat alle tekst volledig zichtbaar blijft als de pagina bekeken wordt op een schermweergave van 1280 bij 1024 pixels en 400% zoom. Maak gebruik van woordafbreking zodat de links op twee regels komen.

WMO ondersteuning: Producten

Op de WMO ondersteuning: Producten pagina valt tekst deels buiten beeld zodra de pagina bekeken wordt op een schermweergave van 1280 bij 10124 pixels en 400% zoom. Bijvoorbeeld bij het onderwerp "Soort voorziening" en "Aantal keer" als de onderliggende tekst te lang is. Hierdoor ontstaat er een horizontale scrolbalk om deze tekst zichtbaar te maken. Horizontaal scrollen om content zichtbaar te maken is voor deze type content niet toegestaan.

Advies: Zorg dat alle tekst volledig zichtbaar blijft als de pagina bekeken wordt op een schermweergave van 1280 bij 1024 pixels en 400% zoom. Het betreft invoervelden die buiten beeld vallen. Maak gebruik van woordafbreking zodat de tekst op twee regels komt. Tevens is het beter om deze content niet te programmeren binnen input-elementen.

Uitkeringsspecificaties: Maart 2025

Op de Uitkeringsspecificaties: Maart 2025 pagina staan tabellen. Zodra de pagina wordt bekeken op een schermweergave van 1280 bij 1024 pixels en 400% zoom dan verdwijnen de tabel headers "Omschrijving", "Plus", "Min" en "Basis". Dit is verlies aan content.

Advies: Zorg dat de tabel headers zichtbaar blijven. Horizontaal scrollen is toegestaan voor tabellen waardoor er één kolom zichtbaar mag zijn in deze schermweergave. Hierdoor ontstaat er ook meer ruimte om de tabel headers te tonen.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Startscherm

Uitkomst: Voldoende

Startscherm

Opmerking (geen afkeuring): Op de Startscherm pagina staan tegels naar de verschillende modules. Zodra de tekstafstand is aangepast naar de waarden zoals opgesteld in dit criterium dan breekt de tekst "Jeugdwet ondersteuning" deels af. Dit wordt dan "Jeugdwet ondersteu...". Dit is verlies aan content voor bijvoorbeeld gebruikers met een visuele beperking en de voorkeur hebben aan grotere woord, letter en regelafstanden.

Advies: Alle tekst dient volledig zichtbaar te blijven. Laat de tekst bijvoorbeeld over twee regels lopen bij een bepaalde breakpoint.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Op alle onderzochte pagina's moet een gebruiker na een bepaalde tijd inactief te zijn geweest opnieuw inloggen. De inlogsessie kan verlengt worden met 10 minuten middels een dialoogvenster. Echter kan de inlogsessie niet met minimaal 10x de originele tijd verlengt worden en dat is wel een vereiste voor gebruikers met bijvoorbeeld een cognitieve beperking.

Advies: Zorg dat de inlogsessies met 10x de originele tijd verlengt kan worden.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

PDF: Jaaropgave 12-12-2025

Uitkomst: Onvoldoende

PDF: Schulden 12-12-2025

Uitkomst: Onvoldoende

PDF: Stortingen uitkeringen (Betalingen)

Uitkomst: Onvoldoende

PDF: Uitkeringsspecificatie 12-12-2025

Uitkomst: Onvoldoende

PDF: Jaaropgave 12-12-2025

Dit PDF-document heeft geen documenttitel. Hierdoor kan hulpsoftware niet waarnemen wat het onderwerp van dit document is.

Advies: Voeg een documenttitel toe in de broneigenschappen van het PDF-document. Dit mag de h1-koptekst zijn van het PDF-document. Bijvoorbeeld "Jaaropgave [datum]".

PDF: Schulden 12-12-2025

Dit PDF-document heeft geen documenttitel. Hierdoor kan hulpsoftware niet waarnemen wat het onderwerp van dit document is.

Advies: Voeg een documenttitel toe in de broneigenschappen van het PDF-document. Dit mag de h1-koptekst zijn van het PDF-document. Bijvoorbeeld "Schulden [datum]".

PDF: Stortingen uitkeringen (Betalingen)

Dit PDF-document heeft geen documenttitel. Hierdoor kan hulpsoftware niet waarnemen wat het onderwerp van dit document is.

Advies: Voeg een documenttitel toe in de broneigenschappen van het PDF-document. Dit mag de h1-koptekst zijn van het PDF-document. Bijvoorbeeld "Stortingen uitkeringen [datum]".

PDF: Uitkeringsspecificatie 12-12-2025

Dit PDF-document heeft geen documenttitel. Hierdoor kan hulpsoftware niet waarnemen wat het onderwerp van dit document is.

Advies: Voeg een documenttitel toe in de broneigenschappen van het PDF-document. Dit mag de h1-koptekst zijn van het PDF-document. Bijvoorbeeld "Uitkeringsspecificaties [datum]".

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Startscherm

Uitkomst: Voldoende

Documenten

Uitkomst: Voldoende

Startscherm

Opmerking (geen afkeuring): Op het Startscherm staan er onder de kop "Acties en afspraken" een stepper. Binnen deze stepper staan links met de tekst "hier". Dit beschrijft niet duidelijk wat deze links doen voor gebruikers van voorleessoftware. Het betreft een link in een lopende tekst. Links in lopende tekst kunnen context van de omliggende tekst ontvangen, hier is dus een toegankelijk alternatief voor zodra er bijvoorbeeld een lijst met links opgehaald wordt. Dit is daarom geen directe afkeuring, maar kan wel beter door een deel van de lopende tekst te programmeren als link. Bijvoorbeeld:

• "ww inkomsten nog doorgeven" als linktekst
• "nieuw contactmoment" als linktekst
• "afspraak" als linktekst

Documenten

Opmerking (geen afkeuring): Binnen de Documenten pagina staat een download link in de tabel van "Jouw gedeelde documenten". De toegankelijkheidsnaam is "Downloaden". Hierin wordt niet beschreven welk document gedownload wordt.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Mijn Processen

Uitkomst: Onvoldoende

Wijziging doorgeven: Verblijf in binnen- of buitenland doorgeven

Uitkomst: Voldoende

Hele sample

Bevindingen:

Opmerking (geen afkeuring): Op alle pagina's verschijnt er na een bepaalde tijd inactiviteit te zijn geweest een dialoogvenster waarmee de inlogsessie verlengt kan worden. De knop waarmee dit gedaan kan worden is de knop met het label "Ja". Knoppen kunnen context van omliggende content ontvangen, hierdoor voldoet deze label wel. Echter kan het label alsnog onduidelijk zijn als hulpsoftware alleen navigeert op interactieve elementen zoals knoppen. Dan is "Ja" niet duidelijk genoeg.

Advies: Pas het label van deze knop aan naar bijvoorbeeld "Ingelogd blijven" of "Sessie verlengen".

Opmerking (geen afkeuring): Een soortgelijk probleem is te vinden in het dialoogvenster om uit te loggen. Hierin staat de knoppen met de labels "Ja" en "Nee".

Advies: Pas de labels van deze knoppen aan naar bijvoorbeeld "Uitloggen" en "Annuleren".

Mijn Processen

Op de Mijn Processen pagina hebben rijen een toegankelijkheidsnaam gekregen middels een aria-labelledby attribuut dat gekoppeld is aan het id-attribuut van de knoppen waarmee een rij uitgeklapt kan worden (Chevron-pijltje). Bijvoorbeeld "button-1208". Dit beschrijft niet de inhoud van deze rij. Dit attribuut is overbodig omdat de rij geen referentie met de betreffende knop nodig heeft. De content van de rij zelf biedt al voldoende context.

Advies: Verwijder de aria-labelledby attributen van de row-elementen.

Wijziging doorgeven: Verblijf in binnen- of buitenland doorgeven

Opmerking (geen afkeuring): Op de pagina staat een datum invoerveld. Zodra het kalender dialoogvenster is geopend dan staan er naast de maand twee pijltjes waarmee genavigeerd kan worden naar de vorige en volgende maand. Deze pijltjes hebben als toegankelijkheidsnaam "Previous month" en "Next month". De pagina zelf is in het Nederlands. Hierdoor zijn de toegankelijkheidsnamen niet correct. Omdat het om geringe tekst gaat is dit geen directe afkeuring maar dit kan wel beter.

Advies: Pas de toegankelijkheidsnamen aan binnen de aria-labels naar bijvoorbeeld "Vorige maand" en "Volgende maand".

Hele sample

Uitkomst: Onvoldoende

Wijziging doorgeven: Verblijf in binnen- of buitenland doorgeven

Uitkomst: Onvoldoende

Wijziging doorgeven: Verblijf in binnen- of buitenland doorgeven

Als de pagina Wijziging doorgeven: Verblijf in binnen- of buitenland doorgeven wordt bekeken op een schermweergave van 1280 bij 1024 pixels en 400% zoom en het kalender dialoogvenster is geopend dan is de toetsenbordfocus op een bepaalde datum niet altijd zichtbaar. Hierdoor weten gebruikers die afhankelijk zijn van een toetsenbord om te navigeren niet welke datum de focus heeft.

Advies: Zorg dat de focusranden van de gefocuste datums die buiten beeld vallen zichtbaar zijn in deze aangepaste schermweergave. Dit kan door het gehele kalender dialoogvenster in beeld te brengen. Een andere oplossing is om het scherm mee te bewegen naar beneden als een datum dat niet zichtbaar is de focus krijgt.

Hele sample

Uitkomst: Onvoldoende

Wijziging doorgeven: Verblijf in binnen- of buitenland doorgeven

Uitkomst: Onvoldoende

Wijziging doorgeven: Verblijf in binnen- of buitenland doorgeven

Als de pagina Wijziging doorgeven: Verblijf in binnen- of buitenland doorgeven wordt bekeken op een schermweergave van 1280 bij 1024 pixels en 400% zoom en het kalender dialoogvenster is geopend dan is het bedieningselement dat de toetsenbordfocus heeft niet altijd zichtbaar. Het betreft hier de datums. Hierdoor weten gebruikers die afhankelijk zijn van een toetsenbord om te navigeren niet welke datum de focus heeft. Dit is daarom ook een afkeuring onder criterium 2.4.11.

Advies: Zorg dat de gefocuste datums die buiten beeld vallen zichtbaar zijn in deze aangepaste schermweergave. Dit kan door het gehele kalender dialoogvenster in beeld te brengen. Een andere oplossing is om het scherm mee te bewegen naar beneden als een datum dat niet zichtbaar is de focus krijgt.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Contactpersonen

Uitkomst: Onvoldoende

Wijziging doorgeven: Verblijf in binnen- of buitenland doorgeven

Uitkomst: Onvoldoende

Contactpersonen

Op de contactpagina staan bij de contactpersonen links met de visuele teksten: "Afspraak maken" en "Bel me terug" ("Verstuur een e-mail" gaat dit wel goed). Deze links hebben een andere toegankelijkheidsnaam gekregen middels een aria-label. Bijvoorbeeld bij de link "Bel me terug" die middels een aria-label de toegankelijkheidsnaam "Vraag Beheerder van Centric om terug te bellen" heeft gekregen. Hierdoor kan spraakbesturingssoftware deze links niet bedienen.

Advies: Het aanwezige aria-label overschrijft het zichtbare label. Het aria-label geeft daardoor een toegankelijkheidsnaam aan een link en moet alle zichtbare tekst in dezelfde volgorde bevatten van de link. De toegankelijkheidsnaam mag wel langer zijn dan de zichtbare tekst. Voeg binnen het aria-label de volledige zichtbare tekst van de links toe. Bijvoorbeeld "Afspraak maken met [Contactpersoon]".

Wijziging doorgeven: Verblijf in binnen- of buitenland doorgeven

Op de Wijziging doorgeven: Verblijf in binnen- of buitenland doorgeven pagina staan datum invoervelden. Binnen deze velden kan er een kalender geopend worden in een dialoogvenster. De huidige maand knop heeft een visuele label dat overschreven wordt door een aria-label "Choose month and year". Hierdoor is het aria-label de toegankelijkheidsnaam geworden. Hierin komt niet de huidige maand terug dat visueel zichtbaar is, waardoor spraakbesturingssoftware deze knop niet kunnen bedienen.

Advies: Voeg bij het aria-label ook de huidige maand toe, bijvoorbeeld "Selecteer een maand en jaar, huidige maand en jaar is Dec. 2025". De toegankelijkheidsnaam mag altijd langer zijn, mits de visuele zichtbare tekst hier minimaal in terugkomt.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

PDF: Jaaropgave 12-12-2025

Uitkomst: Onvoldoende

PDF: Schulden 12-12-2025

Uitkomst: Onvoldoende

PDF: Stortingen uitkeringen (Betalingen)

Uitkomst: Onvoldoende

PDF: Uitkeringsspecificatie 12-12-2025

Uitkomst: Onvoldoende

PDF: Jaaropgave 12-12-2025

Het PDF-document heeft als taalinstelling en-US. Hierdoor zal hulpsoftware dit PDF-document als Engels interpreteren. Woorden en zinnen kunnen hierdoor vreemd voorgelezen worden door voorleessoftware.

Advies: Pas de taalinstelling van het PDF-document aan naar Nederlands (NL).

PDF: Schulden 12-12-2025

Het PDF-document heeft als taalinstelling en-US. Hierdoor zal hulpsoftware dit PDF-document als Engels interpreteren. Woorden en zinnen kunnen hierdoor vreemd voorgelezen worden door voorleessoftware.

Advies: Pas de taalinstelling van het PDF-document aan naar Nederlands (NL).

PDF: Stortingen uitkeringen (Betalingen)

Het PDF-document heeft als taalinstelling en-US. Hierdoor zal hulpsoftware dit PDF-document als Engels interpreteren. Woorden en zinnen kunnen hierdoor vreemd voorgelezen worden door voorleessoftware.

Advies: Pas de taalinstelling van het PDF-document aan naar Nederlands (NL).

PDF: Uitkeringsspecificatie 12-12-2025

Het PDF-document heeft als taalinstelling en-US. Hierdoor zal hulpsoftware dit PDF-document als Engels interpreteren. Woorden en zinnen kunnen hierdoor vreemd voorgelezen worden door voorleessoftware.

Advies: Pas de taalinstelling van het PDF-document aan naar Nederlands (NL).

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Mijn Processen

Uitkomst: Onvoldoende

Documenten

Uitkomst: Onvoldoende

Werk en Participatie: Activiteiten

Uitkomst: Voldoende

Mijn Processen

Op de Mijn Processen pagina staan er knoppen in de vorm van een oog-icoon. Deze knoppen hebben (nog) geen toegankelijkheidsnaam, maar is wel een poging gedaan middels een aria-description met de waarde "Documenten bekijken". Soortgelijke knoppen komen ook voor op de Documenten pagina.

Het is van belang dat soortgelijke interactieve elementen dezelfde betekenis hebben.

Advies: Programmeer dit consistent. Dit kan bijvoorbeeld door de knoppen op allebei de pagina's dezelfde toegankelijkheidsnaam te geven. Bijvoorbeeld: "Document bekijken" of "Document beoordelen".

Documenten

Op de Documenten pagina staan er knoppen in de vorm van een oog-icoon. Deze knoppen hebben als toegankelijkheidsnaam "Ga naar de detailpagina voor [Document naam]". Zodra deze pagina wordt bekeken op een schermweergave van 1280 bij 1024 pixels en 200%/400% zoom dan veranderd de toegankelijkheidsnaam van deze knoppen naar "Beoordelen". Dit is inconsistent en kan verwarrend zijn voor alle gebruikers.

Op de Mijn Processen pagina hebben dezelfde soort knoppen geen toegankelijkheidsnaam, maar is wel een poging gedaan middels een aria-description met de waarde "Documenten bekijken".

Het is van belang dat soortgelijke interactieve elementen dezelfde betekenis hebben.

Advies: Programmeer dit consistent. Dit kan bijvoorbeeld door de knoppen op allebei de pagina's dezelfde toegankelijkheidsnaam te geven. Bijvoorbeeld: "Document bekijken" of "Document beoordelen".

Werk en Participatie: Activiteiten

Opmerking (geen afkeuring): Op de Werk en Participatie: Activiteiten pagina is de paginatitel "Inwonerportaal - Participatie - Trajecten". De koptekst en het menu item heeft de titel "Activiteiten". Hierdoor is de paginatitel niet helemaal consistent, maar geen directe afkeuring.

Advies: Pas de paginatitel aan binnen het head-element zodat "Activiteiten" hierin terugkomt. Bijvoorbeeld "Inwonerportaal - Werk en Participatie - Activiteiten".

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Mijn Profiel

Uitkomst: Onvoldoende

Wijziging doorgeven: Ik heb een baan en wil mijn uitkering beëindigen

Uitkomst: Onvoldoende

Wijziging doorgeven: Verblijf in binnen- of buitenland doorgeven

Uitkomst: Onvoldoende

Mijn Profiel

Op de Mijn Profiel pagina kunnen gegevens aangepast worden nadat de knop "Aanpassen" is geactiveerd. De velden waarin een telefoonnummer en extra telefoonnummer hebben een foutmelding in de vorm van een statusbericht. Deze foutmeldingen zijn identiek, waardoor gebruikers die afhankelijk zijn van voorleessoftware niet weten of de fout bij het veld "Jouw telefoonnummer" of "Jouw extra telefoonnummer" heeft plaatsgevonden.

Advies: De label van het invoerveld dient (deels) terug te komen in de foutmelding als dit statusberichten zijn.

Pas de foutmeldingen aan naar bijvoorbeeld:

• "Het ingevoerde telefoonnummer is niet geldig. De lengte is minimaal 8. Toegestane tekens zijn: 0-9 . + - ( ) en spaties."
• "Het ingevoerde extra telefoonnummer is niet geldig. De lengte is minimaal 8. Toegestane tekens zijn: 0-9 . + - ( ) en spaties.".

Een andere oplossing is om de foutmeldingen te koppelen aan de betreffende invoervelden middels een aria-describedby attribuut. De foutmeldingen hoeven dan ook geen statusberichten te zijn.

Op dezelfde pagina staan textarea invoervelden. Zodra er meer dan de toegestane karakters wordt ingevoerd dan verschijnt er een foutmelding in de vorm van een statusbericht "xxx tekens over de limiet Voer niet meer dan xxx tekens in.". In deze tekst van de foutmelding komt (een deel van) het label niet terug, waardoor gebruikers die afhankelijk zijn van voorleessoftware niet weten om welk veld het specifiek gaat.

Advies: Als een foutmelding een statusbericht is en verder niet programmatisch geassocieerd is met het invoerveld dan moet minimaal een deel van het label hierin terugkomen. Pas de tekst van de foutmelding aan naar bijvoorbeeld "398 tekens over het limiet bij het veld [Label naam]. Voer niet meer dan 256 tekens in.".

Een andere oplossing is om de foutmeldingen te koppelen aan de betreffende invoervelden middels een aria-describedby attribuut. De foutmeldingen hoeven dan ook geen statusberichten te zijn.

Wijziging doorgeven: Ik heb een baan en wil mijn uitkering beëindigen

Op de Wijziging doorgeven: Ik heb een baan en wil mijn uitkering beëindigen pagina staan verplichte datum invoervelden. Zodra deze velden leeg zijn of verkeerde waarde zijn ingevuld dat verschijnen de statusberichten "Startdatum is verplicht." en "Datum voldoet niet aan het vereiste formaat 'DD-MM-JJJJ'".

-"Startdatum is verplicht." is geen goede foutmelding omdat er niet wordt aangegeven wat er fout is gegaan. Dat het veld verplicht is wordt al afgevangen met een aria-required="true" attribuut.

• "Datum voldoet niet aan het vereiste formaat 'DD-MM-JJJJ'" is geen goede foutmelding omdat er niet wordt aangegeven waar de fout zit.

Advies: De label van het invoerveld dient (deels) terug te komen in de foutmelding als dit statusberichten zijn.

• Verander de foutmelding "Startdatum is verplicht." naar bijvoorbeeld "Het veld 'Op welke datum vertrekt u?' is niet ingevuld" en "Het veld 'Op welke datum bent u weer thuis?' is niet ingevuld"
• Verander de foutmelding "Datum voldoet niet aan het vereiste formaat 'DD-MM-JJJJ'" naar bijvoorbeeld "De datum ingevoerd bij 'Op welke datum vertrekt u? 'voldoet niet aan het vereiste formaat 'DD-MM-JJJJ'".

Een andere oplossing is om de foutmeldingen te koppelen aan de betreffende invoervelden middels een aria-describedby attribuut. De foutmeldingen hoeven dan ook geen statusberichten te zijn.

Op dezelfde pagina staat bij de keuzerondjes een foutmelding in de vorm van een statusbericht "Er moet minimaal één optie worden gekozen.". Dit is geen foutmelding maar een foutsuggestie.

Advies: De label van het invoerveld dient (deels) terug te komen in de foutmelding als dit statusberichten zijn.

Verander de foutmelding naar bijvoorbeeld "Er is geen keuze geselecteerd bij het veld Verblijft u in Nederland of daarbuiten?".

Een andere oplossing is om de foutmeldingen te koppelen aan de betreffende invoervelden middels een aria-describedby attribuut. De foutmeldingen hoeven dan ook geen statusberichten te zijn.

Wijziging doorgeven: Verblijf in binnen- of buitenland doorgeven

Op de Wijziging doorgeven: Verblijf in binnen- of buitenland doorgeven pagina staan verplichte datum invoervelden. Zodra deze velden leeg zijn of verkeerde waarde zijn ingevuld dat verschijnen de statusberichten "Startdatum is verplicht." en "Datum voldoet niet aan het vereiste formaat 'DD-MM-JJJJ'".

-"Startdatum is verplicht." is geen goede foutmelding omdat er niet wordt aangegeven wat er fout is gegaan en waar. Dat het veld verplicht is wordt al afgevangen met een aria-required="true" attribuut.

• "Datum voldoet niet aan het vereiste formaat 'DD-MM-JJJJ'" is geen goede foutmelding omdat er niet wordt aangegeven waar de fout zit.

Advies: De label van het invoerveld dient (deels) terug te komen in de foutmelding als dit statusberichten zijn.

• Verander de foutmelding "Startdatum is verplicht." naar bijvoorbeeld "Het veld 'Op welke datum vertrekt u?' is niet ingevuld" en "Het veld 'Op welke datum bent u weer thuis?' is niet ingevuld"
• Verander de foutmelding "Datum voldoet niet aan het vereiste formaat 'DD-MM-JJJJ'" naar bijvoorbeeld "De datum ingevoerd bij 'Op welke datum vertrekt u? 'voldoet niet aan het vereiste formaat 'DD-MM-JJJJ'".

Een andere oplossing is om de foutmeldingen te koppelen aan de betreffende invoervelden middels een aria-describedby attribuut. De foutmeldingen hoeven dan ook geen statusberichten te zijn.

Op dezelfde pagina staat bij de keuzerondjes een foutmelding in de vorm van een statusbericht "Er moet minimaal één optie worden gekozen.". Dit is geen foutmelding maar een foutsuggestie.

Advies: De label van het invoerveld dient (deels) terug te komen in de foutmelding als dit statusberichten zijn.

Verander de foutmelding naar bijvoorbeeld "Er is geen keuze geselecteerd bij het veld Verblijft u in Nederland of daarbuiten?".

Een andere oplossing is om de foutmeldingen te koppelen aan de betreffende invoervelden middels een aria-describedby attribuut. De foutmeldingen hoeven dan ook geen statusberichten te zijn.

Hele sample

Uitkomst: Onvoldoende

Mijn Profiel

Uitkomst: Onvoldoende

Wijziging doorgeven: Verblijf in binnen- of buitenland doorgeven

Uitkomst: Onvoldoende

Mijn Profiel

Op de Mijn Profiel pagina kunnen gegevens aangepast worden nadat de knop "Aanpassen" is geactiveerd. De velden waarin een telefoonnummer en extra telefoonnummer ingevuld kunnen worden vereisen een specifiek formaat. Dit formaat wordt niet getoond bij de invoervelden en dat is wel een vereiste zodat alle gebruikers weten hoe ze deze velden moeten invullen.

Advies: Voeg bij het label van de invoervelden ook het specifieke formaat toe. Bijvoorbeeld: "Jouw telefoonnummer (Maximale lengte is 15 tekens. De toegestane tekens zijn 0-9 . + - ( ) en spaties)".

Wijziging doorgeven: Verblijf in binnen- of buitenland doorgeven

Op de Wijziging doorgeven: Verblijf in binnen- of buitenland doorgeven pagina staan verplichte datum invoervelden. Deze invoervelden vereisen een specifiek formaat. Dit formaat wordt niet getoond bij de invoervelden en dat is wel een vereiste zodat alle gebruikers weten hoe ze deze velden moeten invullen.

Advies: Voeg bij het label van de datum invoervelden het formaat toe. Bijvoorbeeld "Op welke datum vertrekt u? (DD-MM-JJJJ)".

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Mijn Processen

Uitkomst: Onvoldoende

Documenten

Uitkomst: Onvoldoende

Wijziging doorgeven: Ik heb een baan en wil mijn uitkering beëindigen

Uitkomst: Onvoldoende

Wijziging doorgeven: Verblijf in binnen- of buitenland doorgeven

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Opmerking (geen afkeuring): Op alle pagina's is een skiplink aanwezig. Deze skiplink heeft een role="uncontained-theme" attribuut. Deze ARIA role bestaat niet, waardoor hulpsoftware mogelijk deze link niet als link-element interpreteert.

Advies: Verwijder de role="uncontained-theme" attribuut.

Opmerking (geen afkeuring): Op alle pagina's zijn componenten te vinden die zowel een role attribuut gebruiken als een native html-component om een component een rol te geven. Dit is dubbelop.

Opmerking (geen afkeuring): Op alle pagina's zijn componenten te vinden die een naam hebben gekregen middels een aria-label en de platte tekst dat in de code zelf staat. Deze namen zijn identiek. De platte tekst binnen een interactief component dient altijd leidend te blijven en dit is overigens dubbelop. Een voorbeeld zijn de tabbladen "Actieve processen" en "Historische processen" op de Mijn Processen pagina. Een ander voorbeeld is de upload button op de wijzigingspagina's.

Mijn Processen

Op de Mijn Processen pagina kunnen documenten bekeken worden middels de knop met een oog-icoon. Deze knop heeft geen toegankelijkheidsnaam. Een aria-description geeft een component geen toegankelijkheidsnaam. Hierdoor weten gebruikers die afhankelijk zijn van voorleessoftware niet wat deze knop doet.

Advies: Geef deze knop een toegankelijkheidsnaam middels een aria-label. Bijvoorbeeld: "Document bekijken" of "Document beoordelen". Houdt dit consistent met de toegankelijkheidsnaam van dezelfde knoppen op de Documenten pagina (zie criterium 3.2.4).

Op de Mijn Processen pagina staan "Actieve processen" en "Historische processen" in een tabel. Onder deze tabel staat een paginator. Bij deze paginator is een combobox aanwezig. Deze combobox heeft geen toegankelijkheidsnaam. Een aria-description geeft geen naam aan een component. Hierdoor kan hulpsoftware niet waarnemen wat het doel is van deze combobox. Dit is ook een afkeuring onder criterium 4.1.2.

Hetzelfde probleem is te vinden bij de paginator onder de tabel van "Documenten bekijken".

Advies: Koppel deze comboxbox aan het label "Resultaten per pagina". Dit kan middels de for en id attributen.

Op de Mijn Processen pagina verschijnt er rechts onderin een toaster zodra er een document is goedgekeurd. De knop in de vorm van een x-icoon waarmee de toaster gesloten kan worden heeft geen toegankelijkheidsnaam. Hierdoor weten gebruikers die afhankelijk zijn van voorleessoftware niet wat deze knop doet.

Advies: Geef deze knop een toegankelijkheidsnaam middels een aria-label. Bijvoorbeeld: "Melding sluiten".

Op de Mijn Processen pagina kan er akkoord gegeven worden op een document middels een dialoogvenster. Binnen dit dialoogvenster staat het dropdown veld "Wilsuiting". Als dit dropdown veld is uitgeklapt dan is er een zoekveld zichtbaar. Dit zoekveld heeft geen goede rol en geen toegankelijkheidsnaam.

Advies: Het advies hier is om dit zoekveld te verwijderen uit het dropdown veld. Het betreffen maar een aantal keuze opties, waardoor het zoeken naar een optie overbodig lijkt.

Op dezelfde pagina kan er akkoord gegeven worden op een document middels een dialoogvenster. Binnen dit dialoogvenster staat het dropdown veld "Wilsuiting". Als dit dropdown veld is uitgeklapt dan is er een zoekveld zichtbaar. Als er waarden zijn ingevoerd dan verschijnt er een verwijder gegevens knop in de vorm van een x-icoon. Deze knop heeft geen toegankelijkheidsnaam.

Advies: Het overkoepelende advies hier is om dit zoekveld te verwijderen uit het dropdown veld. Het betreffen maar een aantal keuze opties, waardoor het zoeken naar een optie overbodig lijkt.

Geef deze knop een toegankelijkheidsnaam. Bijvoorbeeld: "Invoergegevens verwijderen". Dit is dan ook consistent met alle andere x-iconen waarmee waarden verwijderd kunnen worden. binnen invoervelden.

Opmerking (geen afkeuring): Op de Mijn Processen pagina staan "Actieve processen" en "Historische processen" in een tabel. Onder deze tabel staat een paginator. De paginator is niet opgemaakt binnen een nav-element of heeft een `role="navigation". Hierdoor kan hulpsoftware niet bepalen dat dit navigatie-items zijn.

Hetzelfde probleem is te vinden bij de paginator onder de tabel van "Documenten bekijken".

Advies: Plaats de gehele paginator binnen een nav-element.

Opmerking (geen afkeuring): Op de Mijn Processen pagina staan bij de rijen knoppen in de vorm van een Chevron waarmee een rij uitgeklapt kan worden. Deze knoppen hebben geen aria-expanded attribuut. Hierdoor weten gebruikers die afhankelijk zijn van voorleessoftware niet of een rij open of dichtgeklapt is. Dit wordt wel duidelijk doordat de naam van de knop veranderd naar "Details sluiten"/"Details openen".

Advies: Voeg ook een aria-expanded attribuut toe. Hiermee wordt het verduidelijkt dat een rij daadwerkelijk uitgeklapt is.

Documenten

Op de Documenten pagina kan er akkoord gegeven worden op een document middels een dialoogvenster. Binnen dit dialoogvenster staat het dropdown veld "Wilsuiting". Als dit dropdown veld is uitgeklapt dan is er een zoekveld zichtbaar. Dit zoekveld heeft geen goede rol en geen toegankelijkheidsnaam.

Dit probleem is ook te vinden in het "Uploaden documenten" dialoogvenster binnen het dropdown veld "Kies jouw contactpersoon".

Advies: Het advies hier is om dit zoekveld te verwijderen uit het dropdown veld. Het betreffen maar een aantal keuze opties, waardoor het zoeken naar een optie overbodig lijkt.

Op dezelfde pagina kan er akkoord gegeven worden op een document middels een dialoogvenster. Binnen dit dialoogvenster staat het dropdown veld "Wilsuiting". Als dit dropdown veld is uitgeklapt dan is er een zoekveld zichtbaar. Als er waarden zijn ingevoerd dan verschijnt er een verwijder gegevens knop in de vorm van een x-icoon. Deze knop heeft geen toegankelijkheidsnaam.

Dit probleem is ook te vinden in het "Uploaden documenten" dialoogvenster binnen het dropdown veld "Kies jouw contactpersoon".

Advies: Het overkoepelende advies hier is om dit zoekveld te verwijderen uit het dropdown veld. Het betreffen maar een aantal keuze opties, waardoor het zoeken naar een optie overbodig lijkt.

Geef deze knop een toegankelijkheidsnaam. Bijvoorbeeld: "Invoergegevens verwijderen". Dit is dan ook consistent met alle andere x-iconen waarmee waarden verwijderd kunnen worden. binnen invoervelden.

Wijziging doorgeven: Ik heb een baan en wil mijn uitkering beëindigen

Op de Wijziging doorgeven: Ik heb een baan en wil mijn uitkering beëindigen pagina staat onderaan een disclaimer. Het selectievakje bij deze disclaimer staat een verplicht selectievakje. Dit is niet programmatisch te bepalen omdat er een aria-required="true" attribuut ontbreekt.

Advies: Voeg een aria-required="true" toe bij alle selectievakjes van de disclaimers.

Wijziging doorgeven: Verblijf in binnen- of buitenland doorgeven

Op de Wijziging doorgeven: Verblijf in binnen- of buitenland doorgeven pagina staan datum invoervelden. Zodra er een waarde is ingevoerd verschijnt er een knop in de vorm van een x-icoon waarmee de waarde verwijderd kan worden. Deze knop heeft geen toegankelijkheidsnaam. Hierdoor weten gebruikers die afhankelijk zijn van voorleessoftware niet wat deze knop doet.

Advies: Voeg een toegankelijkheidsnaam toe middels een aria-label. Bijvoorbeeld "Invoergegevens verwijderen". Dit is consistent met alle andere knoppen waarmee gegevens verwijderd kunnen worden in een invoerveld binnen de applicatie.

Op de Wijziging doorgeven: Verblijf in binnen- of buitenland doorgeven pagina staat onderaan een disclaimer. Het selectievakje bij deze disclaimer is een verplicht veld. Dit is niet programmatisch te bepalen omdat er een aria-required="true" attribuut ontbreekt.

Advies: Voeg een aria-required="true" toe bij alle selectievakjes van de disclaimers.

Op de Wijziging doorgeven: Verblijf in binnen- of buitenland doorgeven pagina verschijnt er rechts onderin een toaster zodra er verplichte invoervelden niet of verkeerd zijn ingevuld en de knop "Verstuur wijziging" wordt geactiveerd. De knop in de vorm van een x-icoon waarmee de toaster gesloten kan worden heeft geen toegankelijkheidsnaam. Hierdoor weten gebruikers die afhankelijk zijn van voorleessoftware niet wat deze knop doet.

Advies: Geef deze knop een toegankelijkheidsnaam middels een aria-label. Bijvoorbeeld: "Melding sluiten".

Hele sample

Uitkomst: Onvoldoende

Mijn Profiel

Uitkomst: Onvoldoende

Mijn Processen

Uitkomst: Onvoldoende

Documenten

Uitkomst: Onvoldoende

Wijziging doorgeven: Ik heb een baan en wil mijn uitkering beëindigen

Uitkomst: Onvoldoende

Wijziging doorgeven: Verblijf in binnen- of buitenland doorgeven

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Op alle pagina's staat bovenaan een zoek invoerveld. Zodra een gebruiker iets invult dan worden de zoekresultaten direct gefilterd en getoond in een dropdown. Dit is een vorm van een statusbericht en dient gecommuniceerd te worden door voorleessoftware.

Advies: Voeg een aria-live="polite" attribuut toe aan het zoek invoerveld. Geef deze de content "[x] resultaten" Hiermee weet een gebruiker die afhankelijk is van voorleessoftware hoeveel zoekresultaten er zijn.

Op bijna alle pagina's zijn foutmeldingen in de vorm van statusberichten aanwezig. Deze hebben het role="alert attribuut gekregen. Op de pagina's waar meerdere foutmeldingen tegelijk worden gepresenteerd moeten de statusberichten als aria-live="polite" geprogrammeerd worden zodat de foutmeldingen elkaar niet overrulen op een onverwachte manier. Dit is met name een probleem als een formulier, bijvoorbeeld bij een wijziging doorgeven, wordt verstuurd middels de "Verstuur wijziging" knop.

Advies: Geef de foutmeldingen een aria-live="polite" attribuut en verwijder het role="alert attribuut op pagina's waar meer dan één foutmelding voorkomt. Bijvoorbeeld op de "Wijzigingen doorgeven" pagina's.

Mijn Profiel

Op de Mijn Profiel pagina staat onder de textarea invoervelden een karakter teller. Deze karakter teller is een vorm van statusbericht alleen is niet geprogrammeerd als statusbericht. Hierdoor kan hulpsoftware niet waarnemen als de aantal karakters verlaagd of verhoogt wordt tijdens het typen.

Advies: Voeg een aria-live="polite" toe aan de karakter tellers. Een andere oplossing is om de karakter teller programmatisch te koppelen aan het invoerveld middels een aria-describedby attribuut. Dat valt dan onder criterium 1.3.1.

Mijn Processen

Op de Mijn Processen pagina wordt er bij het laden van de pagina of wisselen tussen de tabbladen "Actieve processen" en "Historische processen" een statusbericht "Gegevens worden opgehaald" en "Geen gegevens gevonden" gecommuniceerd door voorleessoftware. De "Geen gegevens gevonden" melding wordt ook voorgelezen als er wel processen aanwezig zijn in de tabellen. Dit is verwarrend voor gebruikers die afhankelijk zijn van voorleessoftware.

Advies: Het is niet strikt noodzakelijk om deze status te communiceren aan gebruikers van voorleessoftware. Indien deze melding in de applicatie blijft dan moet de melding communiceren hoeveel processen er opgehaald zijn. Bijvoorbeeld "3 processen opgehaald".

Op de Mijn Processen pagina kunnen documenten van een werkproces zichtbaar gemaakt worden middels de "Documenten bekijken" knop. Zodra de documenten geladen zijn in het scherm naast de processen dan wordt dit niet gecommuniceerd door voorleessoftware. Er ontbreekt hier een aria-live="polite" attribuut. Voor gebruikers die afhankelijk zijn van voorleessoftware is het van belang om deze statusverandering auditief te communiceren.

Advies: Laat de applicatie de aantal documenten middels een statusbericht communiceren. Gebruik hiervoor het aria-live="polite" attribuut. Bijvoorbeeld "2 documenten".

Op de Mijn Processen pagina kan er akkoord gegeven worden op een document middels een dialoogvenster. Binnen dit dialoogvenster staat onder het textarea invoerveld een karakter teller. Deze karakter teller is een vorm van statusbericht alleen is niet geprogrammeerd als statusbericht. Hierdoor kan hulpsoftware niet waarnemen als de aantal karakters verlaagd of verhoogt wordt tijdens het typen.

Advies: Voeg een aria-live="polite" toe aan de karakter teller. Een andere oplossing is om de karakter teller programmatisch te koppelen aan het invoerveld middels een aria-describedby attribuut. Dat valt dan onder criterium 1.3.1.

Op de Mijn Processen pagina kan er akkoord gegeven worden op een document middels een dialoogvenster. Binnen dit dialoogvenster staat het dropdown veld "Wilsuiting". Als dit dropdown veld is uitgeklapt dan is er een zoekveld zichtbaar. Dit zoekveld filtert automatisch als er iets wordt ingevoerd. Dit is een vorm van een statusbericht en dient gecommuniceerd te worden door voorleessoftware.

Advies: Het advies hier is om dit zoekveld te verwijderen uit het dropdown veld. Het betreffen maar een aantal keuze opties, waardoor het zoeken naar een optie overbodig lijkt.

Documenten

Op de Documenten pagina kan er akkoord gegeven worden op een document middels een dialoogvenster. Binnen dit dialoogvenster staat onder het textarea invoerveld een karakter teller. Deze karakter teller is een vorm van statusbericht alleen is niet geprogrammeerd als statusbericht. Hierdoor kan hulpsoftware niet waarnemen als de aantal karakters verlaagd of verhoogt wordt tijdens het typen.

Advies: Voeg een aria-live="polite" toe aan de karakter teller. Een andere oplossing is om de karakter teller programmatisch te koppelen aan het invoerveld middels een aria-describedby attribuut. Dat valt dan onder criterium 1.3.1.

Opmerking (geen afkeuring): Als er op de Documenten pagina de knop "Uploaden documenten" wordt geactiveerd dan verschijnt er een dialoogvenster waarin documenten geüpload kunnen worden. Zodra de verplichte velden niet (goed) zijn ingevuld dan verschijnt er een statusbericht rechts onderin "Controleer of u de velden juist heeft ingevuld.". Dit statusbericht heeft in de code twee betekenissen omdat het component role="alert" en aria-live="polite" heeft gekregen. role="alert" heeft standaard de aria-live="assertive", waardoor het aria-live="polite" attribuut overschreven wordt. Dit is dus overbodig en kan voor problemen zorgen bij hulpsoftware.

Advies: Verwijder één van deze statusbericht attributen uit de code. In dit geval de aria-live="polite". Overigens is het beter om alleen de attributen aria-live="assertive" en aria-live="polite" te gebruiken. Niet role="alert".

Op de Documenten pagina kan er akkoord gegeven worden op een document middels een dialoogvenster. Binnen dit dialoogvenster staat het dropdown veld "Wilsuiting". Als dit dropdown veld is uitgeklapt dan is er een zoekveld zichtbaar. Dit zoekveld filtert automatisch als er iets wordt ingevoerd. Dit is een vorm van een statusbericht en dient gecommuniceerd te worden door voorleessoftware.

Advies: Het advies hier is om dit zoekveld te verwijderen uit het dropdown veld. Het betreffen maar een aantal keuze opties, waardoor het zoeken naar een optie overbodig lijkt.

Wijziging doorgeven: Ik heb een baan en wil mijn uitkering beëindigen

Op de Wijziging doorgeven: Ik heb een baan en wil mijn uitkering beëindigen pagina staat onder het textarea invoerveld een karakter teller. Deze karakter teller is een vorm van statusbericht alleen is niet geprogrammeerd als statusbericht. Hierdoor kan hulpsoftware niet waarnemen als de aantal karakters verlaagd of verhoogt wordt tijdens het typen.

Advies: Voeg een aria-live="polite" toe aan de karakter teller. Een andere oplossing is om de karakter teller programmatisch te koppelen aan het invoerveld middels een aria-describedby attribuut. Dat valt dan onder criterium 1.3.1.

Wijziging doorgeven: Verblijf in binnen- of buitenland doorgeven

Op de Wijziging doorgeven: Verblijf in binnen- of buitenland doorgeven pagina staat onder het textarea invoerveld een karakter teller. Deze karakter teller is een vorm van statusbericht alleen is niet geprogrammeerd als statusbericht. Hierdoor kan hulpsoftware niet waarnemen als de aantal karakters verlaagd of verhoogt wordt tijdens het typen.

Advies: Voeg een aria-live="polite" toe aan de karakter teller. Een andere oplossing is om de karakter teller programmatisch te koppelen aan het invoerveld middels een aria-describedby attribuut. Dat valt dan onder criterium 1.3.1.