1.1.1 Niet-tekstuele inhoud

EN 301 549:

9.1.1.1, 10.1.1.1, 11.1.1.1

Aceit:

U201

Icoon zonder alternatieve tekst

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een icoon gevonden waarvan het tekstueel alternatief verkeerd of niet voldoende omschrijvend is. Zie:

Zie het pop-up venster welke geopend wordt wanneer er op de Bewerken-knop wordt gedrukt op de Gegevens wijzigen-pagina. De pop-up die dan tevoorschijn komt, heeft een kruisje-icoon om de pop-up te sluiten. Dit kruisje heeft als tekstueel alternatief ‘’OK’’, dit is een verkeerde omschrijving. Een betere alternatieve tekst zou zijn ‘’Sluiten’’. Ditzelfde gebeurt bij de pop-up op de API instellingen-pagina wanneer er op de Bewerken-knop wordt gedrukt. Dit probleem komt voor op onder andere pagina('s):
- Ondernemingsgegevens wijzigen
- API instellingen
Zie de afbeelding (zie afbeelding) in de tabel op de pagina Wachttijden GGZ > Ingediend > Juli 2024, deze mist een alternatieve tekst. Dit probleem komt voor op onder andere pagina('s):
- Wachttijden GGZ > Ingediend > Juli 2024 > Bekijken
- Wachttijden GGZ > Actueel > Augustus 2024 > Wijzigen
Zie het i-icoon (informatie-icoon) bijvoorbeeld op de pagina GGZ Wachttijden, deze mist een alternatieve tekst. Ditzelfde icoon komt ook voor op andere pagina’s waar het ook een alternatieve tekst mist. Dit probleem komt voor op onder andere pagina('s):
- Alle webpagina's
Zie het kleiner dan-teken (<) in het broodkruimelpad, dit icoon heeft geen alternatieve tekst. Dit probleem komt voor op onder andere pagina('s):
- Alle webpagina's
De naar-beneden-gerichte pijl in de header heeft geen alternatieve tekst. Dit probleem komt voor op onder andere pagina('s):
- Alle webpagina's
Het profiel-icoon in de header mist een alternatieve tekst. Dit probleem komt voor op onder andere pagina('s):
- Alle webpagina's

WCAG SC:

EN 301 549:

9.1.1.1, 10.1.1.1, 11.1.1.1

Aceit:

U201

U202: Afbeeldingen die decoratief zijn, of waar een tekstueel alternatief zou leiden tot herhaling voor de gebruiker, hebben geen tekstueel alternatief Onvoldoende

Toelichting

Als afbeeldingen gebruikt worden als een link, en er ook tekst in de link staat, moet er geen alt-tekst toegevoegd worden als deze dezelfde informatie zou geven.

Om decoratieve afbeeldingen goed te delen kan je CSS background images gebruiken, je kan het alt-attribuut leeg laten, of je kan role="presentation" op de afbeelding zetten.

Bevindingen per richtlijn

Icoon met verkeerd tekstueel alternatief

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een icoon gevonden waarvan het tekstueel alternatief verkeerd of niet voldoende omschrijvend is. Zie:

Zie het pop-up venster welke geopend wordt wanneer er op de Bewerken-knop wordt gedrukt op de Gegevens wijzigen-pagina. De pop-up die dan tevoorschijn komt, heeft een kruisje-icoon om de pop-up te sluiten. Dit kruisje heeft als tekstueel alternatief ‘’OK’’, dit is een verkeerde omschrijving. Een betere alternatieve tekst zou zijn ‘’Sluiten’’. Ditzelfde gebeurt bij de pop-up op de API instellingen-pagina wanneer er op de Bewerken-knop wordt gedrukt.
Zie de afbeelding (zie afbeelding) in de tabel op de pagina Wachttijden GGZ > Ingediend > Juli 2024, deze mist een alternatieve tekst.
Zie de afbeelding (afbeelding).
Zie het i-icoon (informatie-icoon) bijvoorbeeld op de pagina GGZ Wachttijden, deze mist een alternatieve tekst. Ditzelfde icoon komt ook voor op andere pagina’s waar het ook een alternatieve tekst mist.
Zie het kleiner dan-teken (<) in het broodkruimelpad, dit icoon heeft geen alternatieve tekst.
De naar-beneden-gerichte pijl in de header (zie afbeelding) heeft geen alternatieve tekst.
Het profiel-icoon in de header (zie afbeelding) mist een alternatieve tekst.

WCAG SC:

EN 301 549:

9.1.1.1, 10.1.1.1, 11.1.1.1

Aceit:

U202

Afbeelding niet opgemaakt als decoratief

Prioriteit:

Laag

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een decoratieve afbeelding gevonden die niet te negeren is voor hulptechnologie. Zie de bannerafbeelding. Deze afbeelding heeft een alternatieve tekst, terwijl deze decoratief is. Daarom zou deze afbeelding een lege alternatieve tekst moeten hebben. Dit probleem komt voor op:

Inlogpagina

WCAG SC:

EN 301 549:

9.1.1.1, 10.1.1.1, 11.1.1.1

Aceit:

U202

U203: Video's en animaties hebben een titel nodig die het onderwerp beschrijft Niet van toepassing

Toelichting

Video's en animaties moeten een titel hebben die het onderwerp beschrijft. Hier wordt verwacht dat het element een titel heeft van wat de content van de video of animatie is.

Dit kan je doen door een kop boven de video of tekst te zetten. Als je bijvoorbeeld een video op de website zet waarin een introductie wordt gegeven over digitale toegankelijkheid, is het afdoende om een kop met de tekst "Introductie digitale toegankelijkheid" te plaatsen.

U212: Een kaart heeft een titel en beschrijving die het doel van de kaart beschrijft Niet van toepassing

Toelichting

Als een plattegrond wordt toegevoegd aan de pagina, moet er een titel worden toegevoegd aan de plattegrond. Op deze manier is het duidelijk voor gebruikers wat de context en onderwerp is van de plattegrond.

1.2.1 Alleen audio en alleen video (vooraf gemaakt)

U204: Vooraf opgenomen audio fragmenten hebben een gelijk tekstueel alternatief Niet van toepassing

Toelichting

Een link naar de text versie is voldoende, maar het moet duidelijke gelabeld zijn zodat de gebruiker het makkelijk kan vinden

1.2.2 Bijschriften (vooraf opgenomen)

U205: Alle vooraf opgenomen video content heeft ondertiteling Niet van toepassing

Toelichting

Om te voldoen aan de EN 301 549 en WCAG richtlijnen moeten de ondertitelingen in dezelfde taal zijn als de video.

1.2.3 Audiobeschrijving of media-alternatief (vooraf opgenomen)

U213: Er is audiobeschrijving of een media-alternatief voor video's Niet van toepassing

Toelichting

r wordt een alternatief geleverd voor video’s. Hier kan op twee manieren aan worden voldaan:

Het aanbieden van audiobeschrijving: Een audiobeschrijving legt uit wat er visueel gebeurt in een video in de vorm van een audiotrack. Er wordt zo context toegevoegd aan visuele informatie. Dit is dus een extra toevoeging aan de normale bijschriften van een video, zoals ondertiteling. Als de video een verteller of spreker heeft die alle relevante informatie geeft, is er geen behoefte aan een aparte audiobeschrijving.
Of het aanbieden van een media-alternatief: Hieronder valt bijvoorbeeld een volledig teksttranscriptie van de video.

Er zijn uitzonderingen:

Wanneer de video zelf al een alternatief is en is duidelijk als zodanig gemarkeerd.
Je hebt geen audiobeschrijving nodig als alle informatie in de video in de reguliere soundtrack wordt verstrekt.

1.2.4 Bijschriften (live)

U206: Er worden ondertitels voor doven en slechthorende geleverd voor alle live audiocontent in gesynchroniseerde media Niet van toepassing

1.2.5 Audiobeschrijving (vooraf opgenomen)

U208: Er wordt een audiodescriptie geleverd voor alle vooraf opgenomen videocontent in gesynchroniseerde media Niet van toepassing

Toelichting

Een audiobeschrijving legt uit wat er visueel gebeurt in de video aan gebruikers die niet kunnen zien. Dit wordt vaak gedaan als een aparte video met een audiodescriptie, maar kan ook worden gedaan als een extra audiotrack op de originele video dat de gebruiker kan aan- en uitzetten.

Voorbeelden van visuele informatie die moet worden opgenomen in de audiobeschrijving zijn tekstlabels en naamborden.

Als de video een verteller of spreker heeft die alle relevante informatie geeft, is er geen behoefte aan een aparte audiobeschrijving.

Hier is een voorbeeld van een audiobeschrijving: https://www.youtube.com/watch?v=O7j4_aP8dWA

1.3.1 Info en relaties

U302: Alle visuele koppen zijn in de code weergeven als semantische koppen met het bijbehorende kop-niveau Onvoldoende

Toelichting

Gebruik HTML elementen H1 tot H6. Als dat niet mogelijk is kunt u WAI-ARIA gebruiken.

Bevindingen per richtlijn

Kop niet programmatisch opgemaakt

Prioriteit:

Hoog

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een kop gevonden die niet is opgemaakt als kop in de code. Zie bijvoorbeeld de visuele koppen ‘’Zorgbeeld’’ en ‘’Inloggen’’ op de Inlog-pagina. Deze zijn niet opgemaakt als kop (<h>-element), maar bijvoorbeeld als <strong>. Ditzelfde gebeurt bij de koppen in de Digitoegankelijk pop-up op de Inlog-pagina. Ook op de pagina Augustus 2024 > Wijzigen zijn de visuele koppen zoals ‘’Uw rol’’ niet opgemaakt in de code als kop. Dit probleem komt onder andere voor op pagina:

Inlogpagina
Wachttijden GGZ > Actueel > Augustus 2024 > Wijzigen

WCAG SC:

EN 301 549:

9.1.3.1, 10.1.3.1, 11.1.3.1.1, 11.1.3.1.

Aceit:

U302

Kopniveaus niet logisch genest

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

De niveaus en volgorde van de koppen (h-elementen) gebruikt op de pagina zijn niet logisch en kunnen verwarrend werken voor de gebruiker. Het is belangrijk om erop te letten dat de verschillende kopniveau’s goed genest zijn; het gebruik van de verschillende niveaus dient te gebeuren op basis van de functie en niet de styling. Ook is het aan te raden geen kopniveau’s over te slaan.

Zie het broodkruimelpad. Daarin is de titel van de pagina ook gecodeerd als <H1>, hierdoor zijn er meerdere H1’s. Dit probleem komt onder andere voor op pagina's:
- Alle webpagina's
De kop van de pop-up ‘’Importeren wachttijden’’ is een H4, terwijl de koppen die daaronder vallen, zoals ‘’stap 1’’ en ‘’stap 2’’ ook zijn opgemaakt als h4. Dit laatste kan dan bijvoorbeeld beter worden opgemaakt als h5. Dit probleem komt onder andere voor op pagina's:
- Wachttijden GGZ > Actueel > April 2024 > Importeren

WCAG SC:

EN 301 549:

9.1.3.1, 10.1.3.1, 11.1.3.1.1, 11.1.3.1.

Aceit:

U302

U303: Er worden geen kop-niveaus overgeslagen Voldoende

Toelichting

H1 zou gevolgd moeten worden door een andere H1 of H2 kop. H2 zou gevolgd moeten worden door H1, H2 of H3 enz. Ga niet direct van H1 naar H4.

U304: Er worden geen witregels of lege paragrafen gebruikt om ruimte te maken in de tekst Onvoldoende

Toelichting

Typografie is belangrijk voor leesbaarheid. Onderdeel van typografie is de witruimte tussen tekstregels en rondom headings. Ruimte tussen tekst moet door formatting gemaakt worden, niet door witregels toe te voegen.

Witregels met meerdere line breaks of met lege paragrafen worden voorgelezen door hulpsoftware als "leeg" wat een vervelende UX tot gevolg heeft.

Bevindingen per richtlijn

Onjuist gebruik gemaakt van br

Prioriteit:

Laag

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is gebruik gemaakt van een <br> om witruimte te creëren. Zie de witruimte bij de tekst op de Inlog-pagina, hier is gebruik gemaakt van <br> om witruimte te creëren. Dit probleem komt onder andere voor op pagina:

Inlogpagina

WCAG SC:

EN 301 549:

9.1.3.1, 10.1.3.1, 11.1.3.1.1, 11.1.3.1.

Aceit:

U304

U305: Lijsten hebben een juiste opmaak in de code Onvoldoende

Toelichting

In HTML zijn er drie verschillende soorten lijsten:

Niet-gesorteerde lijsten, gemaakt met ul en li elementen
Gesorteerde lijsten, gemaakt met ol en li elementen
Omschrijvende lijsten, gemaakt met dl, dt en dd elementen

Bevindingen per richtlijn

Lijst niet programmatisch opgemaakt

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een lijst gevonden die in de code niet of niet als een goede lijst is opgemaakt, hierdoor kan deze niet goed gedetecteerd worden door hulpsoftware. De genummerde lijsten kolom 1 t/m kolom 9 zijn niet opgemaakt als lijst bij de April 2024 > Importeren. Bij Augustus 2024 > Importeren, is er ook een lijst niet die programmatisch is opgemaakt, zie de twee lijst items onder ‘’let op’’. Dit probleem komt onder andere voor op pagina:

Wachttijden GGZ > Actueel > Augustus 2024 > Importeren
Wachttijden GGZ > Actueel > April 2024 > Importeren

WCAG SC:

https://www.w3.org/WAI/tutorials/page-structure/content/#blockquote

EN 301 549:

9.1.3.1, 10.1.3.1, 11.1.3.1.1, 11.1.3.1.

Aceit:

U305

U306: Het blockquote HTML-element wordt gebruikt voor langere citaten, en q voor kortere citaten Niet van toepassing

Toelichting

Informatie over het blockquote element kan je vinden op:

Informatie over het q element kan je vinden op:

https://www.w3.org/TR/WCAG20-TECHS/H49

Denk er aan zelf geen aanhalingstekens te gebruiken bij q- en blockquote-elementen. Dit wordt door de browser of user agent gedaan.

U307: Er wordt correct gebruik gemaakt van WAI-ARIA Voldoende

Toelichting

WAI-ARIA, oftewel ARIA, staat voor *Web Accessibility Initiative - Accessible Rich Internet Applications,* dit zijn extra attributen die ontbrekende informatie kan melden aan hulptechnologieën.

Hiervoor is het belangrijk aria-attributen op correcte wijze te gebruiken. Als er gebruik gemaakt van onjuiste of overbodige aria-attributen, kan dit verwarring opleveren, vooral bij gebruik van een schermlezer.

U308: Regel- en kolomkoppen worden met th-elementen aangegeven en hebben het juiste scope- of header-attribuut Voldoende

Toelichting

Het th-element wordt gebruikt om header-cellen van een tabel aan te geven. Dit kan een regel of kolom zijn, maar ook meerdere regels of kolommen. Zorg er voor dat cellen met data en cellen met headers goed aangegeven zijn. Dat kan bijvoorbeeld met het scope attribuut.

Het scope attribuut kan de volgende waardes hebben:

row = een rij
col = een kolom
rowgroup = alle regels na deze cel binnen een tbody-element
colgroup = alle volgende kolommen in een groep binnen een colgroup-element

In complexere tabellen kan je header-attributen gebruiken.

Bijvoorbeeld:

<th id=”aheading”>A heading</th>

<th id=”asecondheading”>A second heading</th>

<td headers=”aheading asecondheading”>Data cell with two headings</td>

Let op dat header cellen zelf kunnen linken aan andere header cellen.

U309: Alle tabellen zijn opgemaakt met de juiste HTML tabel Onvoldoende

Toelichting

Gebruik native HTML elementen (table, thead, tbody, caption, tr, th, td) of respectievelijke WAI-ARIA rollen

Bevindingen per richtlijn

Er worden tabellen gebruikt voor lay-out doeleinden

Prioriteit:

Hoog

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een tabel gebruikt voor presentatie van de content, zonder dat de content data betreft. Dit is verwarrend voor gebruikers van een schermlezer en kan ook leiden tot problemen met reflow (1.4.10) en herschalen van tekst (1.4.4). Zie bijvoorbeeld de persoonlijke informatie in de header van webpagina. En ook bijvoorbeeld op de Wachttijden GGZ > ingediend > Juli 2024 is ook de tekst in een tabel gezet voor presentatie doeleinden. Dit probleem komt onder andere voor op:

Alle webpagina's

WCAG SC:

EN 301 549:

9.1.3.1, 10.1.3.1, 11.1.3.1.1, 11.1.3.1.

Aceit:

U309

U311: Tabel-onderschriften zijn gemaakt het het caption-element Voldoende

Toelichting

Gebruik het <caption> element om een tabel-onderschrift te maken. Als dit niet mogelijk is, kan je een normale heading gebruiken met het juiste h-niveau (H1-H6).

U316: Foutmeldingen die te maken hebben met specifieke formuliervelden zijn gekoppeld aan het bijbehorende element Voldoende

Toelichting

Dit kan je doen door de foutmelding in het label-element te zetten, of door aria-describedby attributen te gebruiken.

U317: Formuliervelden die bij elkaar horen, zijn gegroepeerd, zijn in dezelfde fieldset en hebben een omschrijvende legenda Voldoende

Toelichting

Gebruik het fieldset-element om gerelateerde functionaliteiten binnen formulieren te linken, zoals radio buttons. Gebruik het legend-element om een korte omschrijving aan de groep te geven. Let er op dat de legenda het eerste child-element van de fieldset moet zijn.

Je kan ook het respectievelijke WAI-ARIA attribuut role="group" gebruiken en aria-labelledby

U318: Alle omschrijvingen en labels zijn in de code gekoppeld aan het bijbehorende formulierveld Onvoldoende

Toelichting

Dit wordt meestal gedaan door het visuele label in het label-element te zetten, en deze te koppelen met form control. Als het nodig is, kan je aria-label gebruiken om instructies in de code toe te voegen aan form control zonder deze visueel te tonen.

Bevindingen per richtlijn

Label en invoerveld niet goed gekoppeld

Prioriteit:

Hoog

Status:

Open

Omschrijving en voorgestelde oplossing:

Het label voor het invoerveld is programmatisch niet of niet goed gekoppeld aan het invoerveld zelf. Het beste, en de door de meeste hulpsoftware ondersteunde methode, is het label een “for”-attribuut te geven en daarmee te refereren aan het “id”-attribuut van het invoerveld. Zie bijvoorbeeld het gebruikersnaam-invoerveld op de inlog-pagina. Ook is dit probleem te zien bij bijvoorbeeld de API instellingen pagina wanneer de ‘’Toon filters’’ wordt weergeven. De invoervelden die dan tevoorschijn komen, zijn ook niet gekoppeld aan het label. Dit probleem komt onder andere voor op pagina:

Inlogpagina
Accoutnbeheer
API Instellingen

WCAG SC:

EN 301 549:

9.1.3.1, 10.1.3.1, 11.1.3.1.1, 11.1.3.1.

Aceit:

U318

Radiobuttons zijn niet semantisch gekoppeld aan groepslabel

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een groep selectievakjes of keuzerondjes waarvan het groepslabel semantisch niet correct gekoppeld is aan de keuzeopties. Zie de radiobuttons zoals ‘’Levert u gespecialiseerde GGZ?’’ met als opties ‘’Ja’’ en ‘’Nee’’. Hierbij is de label niet goed gekoppeld aan de keuzerondjes. Dit probleem komt onder andere voor op pagina:

Wachttijden GGZ > Actueel > April 2024 > Wijzigen

WCAG SC:

EN 301 549:

9.1.3.1, 10.1.3.1, 11.1.3.1.1, 11.1.3.1.

Aceit:

U318

U324: Waar mogelijk wordt gebruik gemaakt van semantische HTML Voldoende met advies

Toelichting

Het wordt aanbevolen dat HTML wordt gebruikt op een manier waarmee mensen bekend zijn. Dit betekent het gebruik van semantische HTML en de conventies volgt die we vaak op het internet zien. Deze consistentie zorgt ervoor dat mensen ermee kunnen communiceren zoals ze gewend zijn, wat de cognitieve belasting zal verminderen.

Bijvoorbeeld links in tekst die niet zijn opgemaakt zijn als link, hierdoor zijn ze niet aanklikbaar met de muis en ook niet bedienbaar via het toetsenbord. Dit is verwarrend voor gebruikers, met name gebruikers van schermlezers of mensen met een cognitieve beperking, omdat de verwachting is dat je een link direct kunt aanklikken en niet nog los hoeft te selecteren en kopiëren.

Bevindingen per richtlijn

Maak tekstuele links werkend

Prioriteit:

Advies

Status:

Open

Omschrijving en voorgestelde oplossing:

Er zijn links in de tekst gevonden die niet opgemaakt zijn als link, hierdoor zijn ze niet aanklikbaar met de muis en ook niet bedienbaar via het toetsenbord. Dit is verwarrend voor gebruikers, met name schermlezergebruikers of mensen met een cognitieve beperking, omdat de verwachting is dat je een link direct kunt aanklikken en niet nog los hoeft te selecteren en kopiëren. Zie bijvoorbeeld het e-mailadres op de Startpagina. Dit probleem komt voor op onder andere pagina:

Startpagina

WCAG SC:

EN 301 549:

9.1.3.1, 10.1.3.1, 11.1.3.1.1, 11.1.3.1.

Aceit:

U324

U325: Alle visuele relaties die zichtbaar zijn in de content, zijn ook zichtbaar in de code Onvoldoende

Toelichting

Denk bijvoorbeeld aan een chat widget. Je kan zien dat de linker berichten van de andere persoon zijn, en de rechter berichten van jou. Dit moet ook duidelijk zijn in de code.

Bevindingen per richtlijn

Semantische en visuele opmaak matchen niet

Prioriteit:

Hoog

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een verschil tussen wat visueel getoond wordt en hoe dit semantisch in de code verwerkt is. Dit kan verwarring opleveren, vooral bij gebruik van ondersteunende technologieën, zoals een schermlezer. Zie de aanvullende content die verschijnt wanneer de hover op de afbeelding staat (zie afbeelding), wordt voorgelezen door voorleessoftware ook al is deze aanvullende content niet te zien. Dit probleem komt onder andere voor op pagina:

Wachttijden GGZ > Ingediend > Juli 2024 > bekijken

ge7ciTDcSNjrwAAAABJRU5ErkJggg==

WCAG SC:

EN 301 549:

9.1.3.1, 10.1.3.1, 11.1.3.1.1, 11.1.3.1.

Aceit:

U325

Pdf met verkeerde tag opmaak

Prioriteit:

Laag

Status:

Open

Omschrijving en voorgestelde oplossing:

De PDF heeft wel een tag of elementen structuur, maar deze is niet goed opgebouwd, waardoor de tags niet voldoende overeenkomen met de semantische structuur. Het is belangrijk de tags altijd goed te controleren, met name als je software gebruikt om de tags automatisch toe te voegen, zodat hulpsoftware het document goed uit kan lezen. Zie de pdf ‘’API rest service aanleveren Wachttijden (ACCP)’’. De koppen zijn bijvoorbeeld niet altijd aangemerkt als <h>-element. Dit probleem komt onder andere voor op pagina:

API rest service aanleveren wachttijden (pdf)

WCAG SC:

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

EN 301 549:

9.1.3.1, 10.1.3.1, 11.1.3.1.1, 11.1.3.1.

Aceit:

U325

U326: Help-teksten en instructies voor een specifiek formulierveld zijn in de code aan dit formulierveld gekoppeld Voldoende

Toelichting

Dit betreft hulpteksten in instructieteksten, niet het label zelf.

Je kan de aria-labelledby of aria-describedby attributen gebruiken om te refereren aan een hulptekst.

Gebruik aria-labelledby als de instructie het formulier volledig omschrijft.

Gebruik het aria-describedby als de hulptekst een extra omschrijving geeft, of als er al een label is gelinked aan het formulier.

U631: Het menu staat binnen een nav-element Voldoende

Toelichting

Het nav-element wordt gebruikt om gebruikers met een visuele beperking te laten weten dat dit links zijn voor websitenavigatie.

1.3.2 Betekenisvolle volgorde

U319: Elementen zijn in een logische volgorde geplaatst in de broncode Onvoldoende

Toelichting

Dit is belangrijk voor gebruikers van schermlezers, omdat de volgorde in de broncode de leesvolgorde bepaalt. Als regel moet de volgorde van de paginainhoud zinvol zijn, zelfs wanneer CSS is uitgeschakeld.

Bevindingen per richtlijn

Geen betekenisvolle volgorde

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

De volgorde van de elementen verliest bij het voorlezen door een schermlezer betekenis of is verwarrend voor de gebruiker. Zie:

De volgorde op de ondernemingsgegevens wijzigen pop-up. Visueel moeten de invoervelden van links naar rechts worden gelezen, maar de tabvolgorde gaat van boven naar beneden. Dit probleem komt onder andere voor op pagina('s):
- Ondernemingsgegevens wijzigen
In de header is een tabel gebruikt voor presentatie doeleinden. De volgorde waarmee hulpsoftware door de tabel heen gaat is niet logisch. Dit probleem komt onder andere voor op pagina('s):
- Alle webpagina's

WCAG SC:

1.3.2

EN 301 549:

9.1.3.2, 10.1.3.2, 11.1.3.2.1, 11.1.3.2.

Aceit:

U319

U617: Componenten die bedoeld zijn als modal dialogs staan gebruikers niet toe om content op de achtergrond te selecteren Voldoende

Toelichting

Modal dialogs zijn componenten die bovenop normale content op de pagina getoond worden. Er wordt van de gebruiker verwacht dat er iets gedaan wordt met deze content, voordat de gebruiker verder kan met de originele content. Modals moeten worden aangegeven in HTML met aria-modal="true".

Een belangrijk aspect hierbij is dat gebruikers die met het toetsenbord navigeren en gebruikers met schermlezers de focus in het modale dialoogvenster moeten behouden totdat ze hun mening over de inhoud hebben gevormd en het actief hebben gesloten. Daarom zou je niet per ongeluk de focus op de achtergrond moeten kunnen krijgen.

1.3.3 Zintuiglijke kenmerken

U402: Instructies zijn niet alleen afhankelijk van zintuiglijke eigenschappen van componenten Voldoende

Toelichting

Vermijd "klik op de knop aan de rechterkant" en soortgelijke uitdrukkingen.

Je kunt richtingen, grootte, vormen en kleuren gebruiken in je instructies, maar er niet volledig op vertrouwen. Bijvoorbeeld "klik op de knop 'ja' aan de rechterkant" zou acceptabel zijn omdat het ook het zichtbare label bevat.

1.3.4 Weergavestand

U506: De website/ app kan worden gebruikt in alle schermoriëntaties Voldoende

1.3.5 Identificeer het doel van de input

U406: Het doel van elk invoerveld is gespecifieerd in de opmaak Onvoldoende

Toelichting

Wanneer mogelijk, moet je markup gebruiken om het doel van elk invoerveld aan te geven. Dit kan gedeeltelijk worden gedaan door het juiste element/type/markup te kiezen.

In HTML moet je het attribuut autocomplete gebruiken om te verklaren welk type gegevens de gebruiker moet invoeren in invoervelden die gegevens over de gebruiker verzamelen. Dit maakt het gemakkelijker voor browsers en ondersteunende technologie om eerder opgeslagen gegevens automatisch in te vullen. Lees meer over het attribuut en mogelijke waarden hier:

Bevindingen per richtlijn

Invoerveld zonder en/of incorrect autocomplete-attribuut

Prioriteit:

Laag

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een invoerveld zonder het juiste autocomplete-attribuut, terwijl deze wel bestaat in de HTML 5.2, zoals gespecificeerd in sectie 7 van de WCAG. Zie:

Bijvoorbeeld het invoerveld gebruikersnaam op de inlog-pagina, dit invoerveld mist een autocomplete attribuut. Dit probleem komt onder andere voor op pagina('s):
- Inlogpagina
Bijvoorbeeld het invoerveld naam op de pagina Accountbeheer. Het invoerveld heeft een autocomplete-attribuut welke verkeerd is toegepast, namelijk autocomplete=’’on’’, dit is een ongeldige waarde. Bij het invoerveld e-naam zou het de waarde autocomplete=’’name’’. Dit gebeurt bij meerdere invoervelden op de pagina Accountbeheer. Dit probleem komt onder andere voor op pagina('s):
- Accountbeheer

WCAG SC:

1.3.5

EN 301 549:

9.1.3.5, 10.1.3.5, 11.1.3.5.1, 11.1.3.5.

Aceit:

U406

1.4.1 Gebruik van kleur

U403: Kleur wordt niet als het enige visuele middel gebruikt om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden Onvoldoende

Toelichting

Voor gebruikers die moeite hebben met het onderscheiden van kleuren, of die cognitieve beperkingen hebben, is het belangrijk dat kleur niet de enige manier is om een status of informatie door te geven.

Kleur mag je niet als het enige visuele middel gebruiken om informatie over te brengen, om een actie aan te geven, tot een reactie op te roepen of om een visueel element te kunnen onderscheiden.

Kleuren en vormen worden meestal decoratief gebruikt, maar soms vervullen ze ook een communicatieve functie of zijn ze essentieel om de inhoud van een webpagina te begrijpen. Dit ijkpunt gaat, naast kleur, ook over het gebruik van vormen of verwijzingen naar locaties op het scherm. Denk hierbij aan foutmeldingen, bevestigingen of aanduidingen van beschikbaarheid.

Bevindingen per richtlijn

Kleur is gebruikt als enige vorm van onderscheid

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een component gevonden waarbij kleur de enige indicator is tot onderscheid met andere componenten. Wanneer een onderdeel is geselecteerd in de tabel (bijvoorbeeld bij de Accountbeheer pop-up onder de tab Collega accounts), kleurt deze lichtgrijs. Wanneer het onderdeel geselecteerd is kan vervolgens op de Bewerken-knop worden geklikt om het formulier aan te passen. Wanneer het formulier niet geselecteerd is, lukt het niet om deze te openen. De indicatie dat het formulier is geselecteerd is op basis van kleur. Dit probleem komt onder andere voor op pagina:

Accountbeheer
Ondernemingsgegevens wijzigen
Wachttijden GGZ > Ingediend > Juli 2024 > Bekijken

WCAG SC:

1.4.1

EN 301 549:

9.1.4.1, 10.1.4.1, 11.1.4.1

Aceit:

U403

U404: Links zijn niet alleen herkenbaar door hun kleur Onvoldoende

Toelichting

Je kan onderstrepen of icoontjes, dikgedrukte tekst, of andere visuele indicatoren gebruiken,

Het is niet voldoende als deze indicatoren alleen zichtbaar zijn als je over het element hovered, omdat ze dan niet toegankelijk zijn voor hulpsoftware.

Het moet makkelijk te zien zijn welk element op een pagina interactief is, zonder op de elementen te hoeven focussen.

Bevindingen per richtlijn

Link binnen tekst alleen te onderscheiden door kleur

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een link gevonden binnen tekst, waarbij kleur het enige visuele middel is om het verschil tussen de link en tekst te zien. Zie de blauwe links binnen de zwarte tekst. Geef deze links bijvoorbeeld een onderlijning zodat deze links niet alleen op basis van kleur te onderscheiden zijn. Dit probleem komt onder andere voor op pagina:

Inlogpagina

WCAG SC:

1.4.1

EN 301 549:

9.1.4.1, 10.1.4.1, 11.1.4.1

Aceit:

U404

Links visueel niet te onderscheiden

Prioriteit:

Advies

Status:

Open

Omschrijving en voorgestelde oplossing:

De links ‘’Bekijk de Handleiding Zorgbeeldportaal’’ en het telefoonummer in de header op elke webpagina zijn visueel niet te herkennen als links. Maak het zichtbaarder dat deze elementen links zijn. Dit porbleem komt voor op:

Alle webpagina's

WCAG SC:

1.4.1

EN 301 549:

9.1.4.1, 10.1.4.1, 11.1.4.1

Aceit:

U404

1.4.2 Audiobesturing

U429: Elk geluid dat automatisch start en meer dan 3 seconden speelt, kan worden gepauzeerd of uitgeschakeld Voldoende

Toelichting

Dit criterium is van toepassing op geluiden die minstens 3 seconden duren.

1.4.3 Contrast (minimaal)

U409: Alle tekst heeft voldoende contrast ten opzichte van de achtergrond Voldoende

Toelichting

Kleine tekst (lager dan 14px bold of 18px regular) minimaal een contrastverhouding van 4.5:1

Grote tekst (14px bold of hoger en 18px regular of hoger) minimaal een contrastverhouding van 3.0:1.

Als de achtergrond varieert, meet dan waar de contrast het laagste is.

https://developer.paciellogroup.com/resources/contrastanalyser/

1.4.4 Formaat wijzigen

U503: Gebruikers kunnen de tekstinhoud minstens 200 procent vergroten Onvoldoende

Toelichting

Voor veel gebruikers is het belangrijk om de tekstgrootte te kunnen vergroten. Dit is niet alleen belangrijk voor gebruikers met een visuele beperking, maar ook voor gebruikers die de website/ app op een klein apparaat zoals een smartphone gebruiken of in fel zonlicht.

Om aan de criteria in WCAG en EN 301 549 te voldoen, is het voldoende om een mechanisme in de website/ app aan te bieden waarmee gebruikers de tekst met 200% kunnen vergroten, maar voor veel gebruikers is het belangrijk om de website/ app op andere manieren te kunnen vergroten. Blokkeer de mogelijkheid van gebruikers niet om de website/ app in een webbrowser te vergroten. Probeer ervoor te zorgen dat de website/ app reageert op de instellingen van gebruikers binnen de webbrowser en het besturingssysteem. Om aan dit criterium in WCAG en EN 301 549 te voldoen, hoef je dit niet te doen, maar er is een ander criterium in EN 301 549 die vereist dat de website/ app luistert naar gebruikersinstellingen binnen het besturingssysteem. Lees hier meer over op U510/U511.

Let op dat je niet per se zo'n functie in je website/ app nodig hebt. Het is veel beter voor de gebruiker om gebruikersinstellingen binnen de browser en het besturingssysteem te respecteren. Dat zou de belangrijkste aanpak moeten zijn.

Bevindingen per richtlijn

Herschalen van tekst met verlies van functionaliteit

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Bij het vergroten van tekst naar 200% ontstaat er een verlies van functionaliteit. Zie de tabellen, bijvoorbeeld bij bij de Gegevens wijzigen pop-up. De content in de tabel is niet meer leesbaar bij herschalen (ook in reflow 1.4.10). In deze situatie is het beter om de gebruiker de mogelijkheid te geven om in de tabel tweedimensioneel te scrollen, zodat alle content leesbaar wordt. Dit probleem komt onder andere voor op pagina:

API Instellingen
Ondernemingsgegevens wijzigen
Wachttijden GGZ > Actueel > Augustus 2024 > Wijzigen

WCAG SC:

1.4.4

EN 301 549:

9.1.4.4, 10.1.4.4, 11.1.4.4

Aceit:

U503

Herschalen met verlies van leesbaarheid

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Bij het vergroten van tekst naar 200% ontstaat er een verlies van leesbaarheid. Bij het inzoomen is er overlap van knoppen en tekst (zie afbeelding), waardoor deze minder goed leesbaar zijn. Dit probleem komt onder andere voor op pagina:

Alle webpagina's

5necO5SCg21AAAAAElFTkSuQmCC

WCAG SC:

1.4.4

EN 301 549:

9.1.4.4, 10.1.4.4, 11.1.4.4

Aceit:

U503

1.4.5 Afbeeldingen van tekst

U411: Gebruik tekst, geen afbeeldingen van tekst Voldoende

Toelichting

In complexe afbeeldingen zoals diagrammen is het acceptabel dat sommige tekst als onderdeel van de afbeelding wordt weergegeven.

Logotypen zijn ook een acceptabele uitzondering.

1.4.10 Reflow

U501: De lay-out is responsive en past zich aan aan de grootte van het scherm Onvoldoende

Toelichting

Alle content moet responsief zijn, maar het wettelijke criterium staat enkele uitzonderingen toe. Situaties waarin het moeilijk of onmogelijk is om de functionaliteit te behouden wanneer de viewport- of schermgrootte te klein wordt, zijn acceptabele uitzonderingen. Uitzonderingen zijn onder meer complexe tabellen, kaarten, spelletjes en videospelers. Onze aanbeveling is om de inhoud indien mogelijk volledig responsief te maken.

Bevindingen per richtlijn

Reflow tweedimensioneel scrollen

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

De pagina of onderdeel op de pagina scrolt in twee dimensies, zonder dat dit noodzakelijk is voor het element, zoals bij een tabel of grafiek. Voor kleine schermen is het belangrijk dat content in één scrol (lees) richting geplaatst is. Bijvoorbeeld op de Startpagina, er moet daar tweedimensioneel gescrold worden om alle content te kunnen lezen. Op alle pagina’s moet er tweedimensioneel gescrold worden, maar niet elke pagina verliest hierdoor content. Dit probleem komt onder andere voor op pagina's:

Alle webpagina's

WCAG SC:

1.4.10

EN 301 549:

9.1.4.10, 10.1.4.10, 11.1.4.10

Aceit:

U501

Verlies van functionaliteit bij reflow

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een component gevonden met verlies van functionaliteit tijdens reflow. Zie bijvoorbeeld de header (zie afbeelding), er is veel overlappende tekst waardoor het niet goed leesbaar is. Daarnaast valt het uitklapbare menu met de links ‘’Accountbeheer’’ en ‘’Uitloggen’’ weg. Dit probleem komt onder andere voor op pagina('s):

Alle webpagina's

Overlappende tekst in de header

WCAG SC:

1.4.10

EN 301 549:

9.1.4.10, 10.1.4.10, 11.1.4.10

Aceit:

U501

1.4.11 Contrast van niet-tekstuele content

U408: Grafische inhoud die wordt gebruikt voor interactieve besturingselementen, het tonen van status of het verstrekken van informatie, heeft voldoende contrast ten opzichte van de achtergrond. Onvoldoende

Toelichting

Onderdelen van de interface en grafische objecten moeten een contrastverhouding van ten minste 3:1 hebben ten opzichte van de aangrenzende kleuren.

https://developer.paciellogroup.com/resources/contrastanalyser/

Bevindingen per richtlijn

Invoerveld met onvoldoende contrast

Prioriteit:

Laag

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een invoerveld gevonden met een rand of achtergrondkleur, met een te laag contrast ten opzichte van naastgelegen kleuren. Zie bijvoorbeeld het gebruikersnaam-invoerveld op de inlog-pagina, dit probleem komt voor bij meerdere invoervelden op de website. Dit geldt ook voor het niet geselecteerde selectievakje op de pagina Accountbeheer. Dit probleem komt voor op onder andere pagina's:

Inlogpagina
Accoutnbeheer
Wachttijden GGZ > Ingediend > Juli 2024 > Bekijken

WCAG SC:

1.4.11

EN 301 549:

9.1.4.11, 10.1.4.11, 11.1.4.11

Aceit:

U408

Grafisch object met onvoldoende contrast

Prioriteit:

Laag

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een grafisch object gevonden met een te laag contrast ten opzichte van naastgelegen kleuren. Zie de lijn van de actieve tab op de pop-up Accountbeheer. Hierdoor is lastig te onderscheiden welke tab actief is. Dit probleem komt onder andere voor op pagina:

Accoutnbeheer

WCAG SC:

1.4.11

EN 301 549:

9.1.4.11, 10.1.4.11, 11.1.4.11

Aceit:

U408

1.4.12 Tekstafstand

U502: Bij het wijzigen van de instellingen voor tekstafstand is er geen verlies van content of functionaliteit Voldoende

Toelichting

Tekst mag nooit afgesneden worden of overlappen als de tekstinstellingen worden aangepast. Om dit te testen moet een tool gebruikt worden zoals:

https://codepen.io/stevef/pen/YLMqbo/

Als een bezoeker van je website een of meerdere van onderstaande stijleigenschappen wijzigt — met behulp van de browserinstellingen of door een persoonlijke stylesheet aan te maken — moet alle inhoud leesbaar blijven en mag geen functionaliteit verloren gaan.

De regelafstand moet minstens 1,5 keer groter gemaakt kunnen worden dan de lettergrootte.
De afstand onder (of tussen) paragrafen moet minstens 2 keer groter gemaakt kunnen worden dan de lettergrootte.
De letterafstand (tracking) moet minstens 0,12 keer groter gemaakt kunnen worden dan de lettergrootte.
De woordafstand (spacing) moet minstens 0,16 keer groter gemaakt kunnen worden dan de lettergrootte.

1.4.13 Content bij hover of focus

U602: Aanvullende content die door hover met de aanwijzer zichtbaar wordt, kan door de gebruiker naar wens behouden of verborgen worden Voldoende

Toelichting

Het moet ook mogelijk zijn om hovercontent te verbergen zonder de focus te verplaatsen van het object dat de content activeert, bijvoorbeeld door op de ESC-toets te drukken.

2.1.1 Toetsenbord toegankelijk

U601: Elke gebruikersinteractie die mogelijk is met een muis of een touchscreen, kan ook worden uitgevoerd met een toetsenbord Onvoldoende

Toelichting

Een fundamenteel aspect van een website/ app die toegankelijk is, is dat deze volledig kan worden bediend met alleen een toetsenbord. Veel alternatieve bedieningsmethoden zijn gebaseerd op toetsenbordopdrachten. Spraakbesturing is bijvoorbeeld ook gedeeltelijk gebaseerd op toetsenbordopdrachten. Voor blinde gebruikers op pc's en Macs is er geen alternatief voor toetsenbordnavigatie.

Toetsenbordnavigatie is gebaseerd op het verplaatsen van de focus tussen interactieve objecten zoals links, knoppen en formuliervelden door op de TAB-toets te drukken. Door spaties, Enter of pijltoetsen te gebruiken, kunt u waarden wijzigen of links/knoppen activeren, afhankelijk van de situatie.

*U kunt knoppen activeren door op de spatiebalk te drukken.

*U kunt een link volgen door op Enter te drukken.

*Selecteer tabbladen en keuzerondjes met de pijltoetsen.

Toetsenbordnavigatie moet ook werken in mobiele websites en apps. Gebruikers met motorische beperkingen hebben met name moeite met touchscreens en gebruiken vaak toetsenborden die via Bluetooth zijn verbonden met de mobiele telefoon.

Bevindingen per richtlijn

Knop niet bedienbaar met toetsenbord

Prioriteit:

Kritisch

Status:

Open

Omschrijving en voorgestelde oplossing:

Niet alle websitefunctionaliteit kan worden gebruikt met alleen een toetsenbord. Zie de naar-beneden-gerichte pijl in de header, het uitklapbare menu dus. Dit probleem komt voor op pagina:

Alle webpagina's

WCAG SC:

EN 301 549:

9.2.1.1, 10.2.1.1, 11.2.1.1.1, 11.2.1.1.

Aceit:

U601

Hover content niet toegankelijk met toetsenbord

Prioriteit:

Hoog

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een hover-component gevonden die niet toegankelijk is voor toetsenbordgebruikers. Zie de afbeelding in de tabel op de pagina Wachttijden GGZ > Ingediend > Juli 2024. Wanneer de hover op deze afbeelding staat, komt er content tevoorschijn, dit is niet toegankelijk met het toetsenbord. Dit probleem komt onder andere voor op pagina:

Wachttijden GGZ > Ingediend > Juli 2024 > Bekijken
Wachttijden GGZ > Actueel > April 2024 > Wijzigen

A1bacS6ap4WsAAAAAElFTkSuQmCC

WCAG SC:

EN 301 549:

9.2.1.1, 10.2.1.1, 11.2.1.1.1, 11.2.1.1.

Aceit:

U601

Element niet bedienbaar met toetsenbord

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Niet alle websitefunctionaliteit kan worden gebruikt met alleen een toetsenbord. Zie bijvoorbeel de tabel op de Accountbeheer pop-up bij de tab Collega accounts. Het is niet mogelijk om per tabelkop te sorteren via het toetsenbord. Dit is wel mogelijk met de muis door op de tabelkop Naam te klikken. Dit gebeurt bij meerdere tabellen op de website. Dit probleem komt onder andere voor op pagina:

Accountbeheer
Wachttijden GGZ > Actueel > April 2024 > Wijzigen

WCAG SC:

EN 301 549:

9.2.1.1, 10.2.1.1, 11.2.1.1.1, 11.2.1.1.

Aceit:

U601

Tabindex

Prioriteit:

Advies

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een component gevonden voor interactie met de gebruiker, die geen goede waarde heeft.

Er wordt gebruikt gemaakt van tabindex=-1, bijvoorbeeld bij de links in de header ‘’Bekijk de Handleiding Zorgbeeldportaal | Vragen? WhatsApp 088 - 770 87 70’’. Dit probleem komt voor op ondere andere:
- Alle webpagina's
Zie ook de footer tekst op de Inlog-pagina. Deze tekst heeft een tabindex=’’0’’, hierdoor kan de tekst toetsenbordfocus krijgen, terwijl dat niet nodig is. Dit probleem komt voor op ondere andere:
- Inlogpagina

WCAG SC: