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 informatiedragende icoon gevonden zonder alternatieve tekst. Zie bijvoorbeeld:

het icoon achter sommige links, welke aangeeft dat er een nieuw tabblad wordt geopend, heeft geen alt-tekst. Dit probleem komt voor op onder andere de volgende pagina('s):
- Zorgaanbieder

WCAG SC:

EN 301 549:

9.1.1.1, 10.1.1.1, 11.1.1.1

Aceit:

U201

Icoon met verkeerd of ontoereikend tekstueel alternatief

Prioriteit:

Laag

Status:

Open

Omschrijving en voorgestelde oplossing:

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

de knoppen met pijlen omhoog en omlaag hebben een ontoereikende alt-tekst. Dit probleem komt voor op onder andere de volgende pagina('s):
- Modal Instellingen

bijna alle iconen op de gehele website, bijvoorbeeld het aanwijzer-icoon of pijltje-icoon om content in of uit te klappen, hebben een Engelse naam die niet voldoende duidelijk is. Bijna alle iconen hebben dus een beter alternatief nodig. Dit probleem komt voor op:
- alle webpagina's.

het min- of plus-icoon bij de tegels heeft als naam ‘’minus icon’’, het maakt niet uit welke staat het is. Een mogelijk oplossing is om het icoon de naam ‘’in- en uitklappen’’ te gaven en een juiste expanded status toe te wijzen. Dit probleem komt voor op onder andere de volgende pagina('s):
- Zorgfinanciën (voor inlog)
- Zorgaanbieder

het profiel-icoon in de header heeft een niet-toereikende alt-tekst. Het aria-label heeft als naam ‘’user-check-icon’’, het is beter de functie van deze deze knop uit te leggen, bijvoorbeeld ‘’Account’’. Dit probleem komt voor op:
- alle webpagina's.

het instellingen-icoon heeft als linkdoel ‘’gears icon’’, een duidelijkere naam is bijvoorbeeld ‘’Instellingen’’. Dit probleem komt voor op:
- alle webpagina's.

WCAG SC:

EN 301 549:

9.1.1.1, 10.1.1.1, 11.1.1.1

Aceit:

U201

Gebruik gemaakt van title-attribuut

Prioriteit:

Advies

Status:

Open

Omschrijving en voorgestelde oplossing:

Het vraagteken-icoon of informatie-icoon heeft een alternatieve tekst, dit is toegankelijk voor schermlezers. Het icoon heeft ook een title-attribuut welke meer informatie geeft. Deze informatie wordt niet voorgelezen door alle schermlezers. Daarnaast is deze tekst niet zichtbaar voor mensen die geen gebruik maken van schermlezers. Dit probleem komt voor op:

Feedback
Zorgaanbieder

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 niet opgemaakt als decoratief

Prioriteit:

Laag

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een decoratief icoon gevonden die niet is opgemaakt als decoratief. Het icoon kan als decoratief worden opgemaakt omdat er een tekstueel alternatief van het icoon naast het icoon te vinden is, anders is deze informatie dubbel. Zie bijvoorbeeld:

de iconen welke in de knoppen staan met tekst ernaast, moeten worden opgemaakt als decoratief. Dit probleem komt voor op onder andere de volgende pagina('s):
- Modal Instellingen

de iconen die naast de koppen staan zoals Help, Zorgaanbieder etc. moeten worden opgemaakt als decoratief. Anders is deze informatie dubbel voor schermlezergebruikers. Dit probleem komt voor op onder andere de volgende pagina('s):
- Welkom (na inlog)

het <<-icoon in het menu met daarachter de tekst ‘’Klap het menu in’’. Dit icoon moet als decoratief worden opgemaakt. Dit probleem komt voor op:
- alle webpagina's.

de iconen in het menu, bijvoorbeeld het huis-icoon met daarachter het woord ‘’Welkom’’. Wanneer het woord zichtbaar is, is de alternatieve tekst van het icoon overbodig. Wanneer het woord erachter niet meer zichtbaar is (het menu is ingeklapt), dan moet het icoon wel een alt-tekst hebben. Dit probleem komt voor op:
- alle webpagina's.

WCAG SC:

EN 301 549:

9.1.1.1, 10.1.1.1, 11.1.1.1

Aceit:

U202

Niet-informatiedragend element is niet opgemaakt als decoratief

Prioriteit:

Laag

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een niet-informatiedragend element gevonden dat niet als decoratief is opgemaakt. Zie bijvoorbeeld:

De horizontale splitser in de modal is niet opgemaakt als decoratief. Hierdoor horen schermlezergebruikers dit decoratieve element wanneer ze door de modal navigeren. Dit probleem komt voor op onder andere de volgende pagina('s):
- Modal Account

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 Onvoldoende

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.

Bevindingen per richtlijn

Animatie met verkeerd of ontoereikend tekstueel alternatief

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

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

onder de kop “Blog’’ is een animatie die niet te pauzeren is (zie afbeelding). Dit probleem komt voor op onder andere de volgende pagina('s):
- Zorgfinanciën (voor inlog)

WCAG SC:

EN 301 549:

9.1.1.1, 10.1.1.1, 11.1.1.1

Aceit:

U203

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

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.

Bevindingen per richtlijn

Plattegrond of kaart zonder titel of beschrijving

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een kaart of plattegrond op de pagina, maar deze heeft geen toegankelijke naam en/of beschrijving. Het is belangrijk wel een duidelijke toegankelijke naam en beschrijving mee te geven. Zie bijvoorbeeld:

de plattegrond onder de kop ‘’Omgeving’’. Een mogelijke toevoeging om een alternatief van deze plattegrond toe te voegen is bijvoorbeeld via een tree view: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/ . Dit probleem komt voor op onder andere de volgende pagina('s):
- Zorgaanbieder

WCAG SC:

EN 301 549:

9.1.1.1, 10.1.1.1, 11.1.1.1

Aceit:

U212

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

Er 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:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een kop gevonden die niet goed is opgemaakt als kop in de code. Zie bijvoorbeeld:

de kop ‘’Disclaimer’’ is programmatisch niet opgemaakt als kop. het zou bijvoorbeeld net als de andere koppen op deze pagina opgemaakt moeten worden als een h3. Dit probleem komt voor op onder andere de volgende pagina('s):
- Welkom (na inlog)

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

Gebruik gemaakt van witregel voor opmaak

Prioriteit:

Laag

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is gebruik gemaakt van een <br> om witruimte te creëren. Zie bijvoorbeeld:

onder de kop Governance is een lijst, bij deze lijst is gebruik gemaakt van <br>. Dit probleem komt voor op onder andere de volgende pagina('s):
- Zorgaanbieder

In de disclaimer is witruimte tussen de alinea’s gecreëerd door <br> te gebruiken. Dit probleem komt voor op onder andere de volgende pagina('s):
- Zorgfinanciën (voor inlog)
- Welkom (na inlog)

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 (voldoende) programmatisch opgemaakt

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een lijst gevonden die in de code niet of niet voldoende als een lijst is opgemaakt. Hierdoor kan deze niet goed gedetecteerd worden door hulpsoftware. Zie bijvoorbeeld:

onder de kop Governance is een lijst met vinkjes. Deze lijst is niet opgemaakt als lijst. Dit probleem komt voor op onder andere de volgende pagina('s):
- Zorgaanbieder

WCAG SC:

EN 301 549:

9.1.3.1, 10.1.3.1, 11.1.3.1.1, 11.1.3.1.

Aceit:

U305

Definitielijst niet opgemaakt als definitielijst in code

Prioriteit:

Laag

Status:

Open

Omschrijving en voorgestelde oplossing:

Er wordt informatie gepresenteerd op de pagina die programmatisch opgemaakt zou moeten worden als een definitielijst, maar niet als dusdanig is opgemaakt. Zie bijvoorbeeld:

onder de kop ‘’Algemene informatie’’ zijn twee tabellen, deze moeten eigenlijk als definitielijst opgemaakt worden. Dit probleem komt voor op onder andere de volgende pagina('s):
- Zorgaanbieder

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

Tabel programmatisch incorrect

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een element dat visueel en functioneel een tabel is, maar deze is in de code niet goed of niet als dusdanig opgemaakt. Dit leidt tot problemen bij het gebruik van hulpsoftware. Zie bijvoorbeeld:

de tabel onder ‘’Indicator gegevens’’ is niet goed programmatisch opgemaakt. Zo bestaat de tabel uit twee tabellen. De tabelkop met de jaartallen is één tabel. De rijen daaronder is ook een aparte tabel, welke ook tabelkoppen heeft. Dit moet een tabel zijn, waarbij alleen de jaartallen zijn opgemaakt als tabelkop. Dit probleem komt voor op onder andere de volgende pagina('s):
- Zorgfinanciën (voor inlog)

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 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

Dropdown selectie programmatisch niet goed opgemaakt

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een uitklapbaar keuzemenu gevonden dat programmatisch niet goed is opgemaakt. Zie bijvoorbeeld:

de dropdown lijsten zijn programmatisch niet goed opgemaakt. Ze werken niet zoals toetsenbordgebruikers gewend zijn. Voor meer informatie over toegankelijke dropdown lijsten, is hier te vinden: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/. Dit probleem komt voor op onder andere de volgende pagina('s):
- Zorgfinanciën (voor inlog)
- Zorgaanbieder
- Modal 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

U324: Waar mogelijk wordt gebruik gemaakt van semantische HTML Onvoldoende

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

Tab niet goed programmatisch opgemaakt

Prioriteit:

Laag

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een tab gevonden welke niet goed programmatisch is opgemaakt. Lees hier meer informatie over toegankelijke tabs: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/ Zie bijvoorbeeld:

zie de tab bijvoorbeeld onder ‘’omgeving’’. Dit probleem komt voor op onder andere de volgende pagina('s):
- Zorgfinanciën (voor inlog)
- Zorgaanbieder

de tabs (huidige versie / Oudere versies) zijn opgemaakt als link, terwijl ze als button functioneren. De tab is dus niet goed programmatisch opgemaakt. Dit probleem komt voor op onder andere de volgende pagina('s):
- Over Zicht op Zorgaanbieders

WCAG SC:

EN 301 549:

9.1.3.1, 10.1.3.1, 11.1.3.1.1, 11.1.3.1.

Aceit:

U324

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 mailadres is niet opgemaakt als werkende link. Dit probleem komt voor op onder andere de volgende pagina('s):
- Inlog modal

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 komen niet overeen

Prioriteit:

Gemiddeld

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 bijvoorbeeld:

wanneer het grijze informatie-icoon wordt geopend, komt een pop-up tevoorschijn. De informatie is visueel gekoppeld aan een element (zie afbeelding). Deze relatie is niet in de code zichtbaar. Dit probleem komt voor op onder andere de volgende pagina('s):
- Zorgaanbieder
- Modal Instellingen

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:

Hoog

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 bijvoorbeeld:

de Instellingen modal krijgt altijd pas focus nadat alle onderdelen van de website focus hebben gehad. Ook als de instellingen modal wordt geopend, krijgt deze niet direct focus, pas nadat alle onderdelen op pagina focus hebben gehad. Dit probleem komt voor op onder andere de volgende pagina('s):
- Modal Instellingen

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

Focusindicator verlaat modal, maar modal sluit niet

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

De focusindicator verlaat het dialoogvenster zonder dat deze gesloten wordt. De focusindicator moet het dialoogvenster blijven doorlopen tot er een keuze gemaakt is, of het dialoogvenster moet automatisch worden gesloten zodra de focus erbuiten komt. Zie bijvoorbeeld:

Dit probleem komt voor op onder andere de volgende pagina('s):
- Modal Account

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 met advies

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.

Bevindingen per richtlijn

Zintuiglijke aanwijzing gebruikt - visueel

Prioriteit:

Advies

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is in instructies een verwijzing naar visuele aanwijzingen, zoals 'rechts', 'links' of 'hiernaast’. Zie bijvoorbeeld:

er wordt in de tekst verwezen naar ‘’hieronder’’. Dit is een zintuigelijke aanwijzing. Een oplossing zou zijn om meer informatie te geven, bijvoorbeeld ‘’het invoerveld hieronder’’. Dit probleem komt voor op onder andere de volgende pagina('s):
- Feedback

WCAG SC:

1.3.3

EN 301 549:

9.1.3.3, 10.1.3.3, 11.1.3.3

Aceit:

U402

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 Voldoende

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:

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 communicatie en/of 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. Zie bijvoorbeeld:

bij sommige grafieken is er alleen gebruik gemaakt van kleur als enige vorm van communicatie (zie afbeelding). Dit probleem komt voor op onder andere de volgende pagina('s):
- Zorgfinanciën (voor inlog)
- Zorgaanbieder

wanneer de limiet is overschreden wordt, wordt alleen de aandacht van de gebruiker getrokken door kleur. Er zou ook een melding of icoon bijvoorbeeld moeten verschijnen zodat er ook naast kleur op een andere manier wordt gecommuniceerd. Dit probleem komt voor op onder andere de volgende pagina('s):
- Feedback

bij de tabel onder ‘’Indicator gegevens’’, is gebruik gemaakt van kleur om te communiceren. De kleuren communiceren namelijk hoe hoog het risico is. Dit probleem komt voor op onder andere de volgende pagina('s):
- Zorgfinanciën (voor inlog)

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 Voldoende met advies

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

Links mogen niet alleen herkenbaar zijn door hun kleur

Prioriteit:

Advies

Status:

Open

Omschrijving en voorgestelde oplossing:

Er zijn links binnen een tekst gevonden, waarbij er wel voldoende contrast is tussen de kleur van de tekst en de kleur van de link. Hierdoor wordt het niet afgekeurd. Het is wel geadviseerd om een andere indicatie te geven aan de gebruiker om te laten zien dat het een link is, bijvoorbeeld door een underline toe te voegen. Zie bijvoorbeeld:

de links binnen de tekst zijn alleen aangegeven met kleur. Er is wel voldoende contrast tussen de blauwe linktekst en zwarte tekst. Maar het is beter om naast kleur nog een andere indicatie te hebben dat het een link is, bijvoorbeeld een onderstreping toevoegen. Dit probleem 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 Onvoldoende

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/

Bevindingen per richtlijn

Tekst van foutmelding met onvoldoende contrast

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een tekst gevonden van een foutmelding met een contrastverhouding lager dan 4,5:1 ten opzichte van de achtergrondkleur. Zie bijvoorbeeld:

zie afbeelding. Dit probleem komt voor op onder andere de volgende pagina('s):
- Inlog modal

WCAG SC:

1.4.3

EN 301 549:

9.1.4.3, 10.1.4.3, 11.1.4.3

Aceit:

U409

Tekst met onvoldoende contrast

Prioriteit:

Laag

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een tekst gevonden met een te lage contrastverhouding (4,5:1) ten opzichte van de achtergrondkleur. Zie bijvoorbeeld:

het lichtblauw en wit hebben onvoldoende contrast, dit is bijvoorbeeld te zien in de titel van de modal ‘’Account’’ en linktekst ‘’Wachtwoord vergeten?’’. Dit probleem komt voor op onder andere de volgende pagina('s):
- Inlog modal

de placeholderteksten E-mailadres en Wachtwoord hebben onvoldoende contrast met de omliggende kleuren (2,6:1). Dit probleem komt voor op onder andere de volgende pagina('s):
- Inlog modal

sommige zwarte teksten op rode achtergronden in de tabel hebben onvoldoende contrast met de achtergrond (4,1:1). Dit probleem komt voor op onder andere de volgende pagina('s):
- Zorgfinanciën (voor inlog)

de grijze teksten, zoals onder de kop ‘’Verdeling’’, hebben onvoldoende contrast (2,7:1) (pagina Zorgfinanciën). Ook op de Zorgaanbieder-pagina is dezelfde tekstkleur gevonden. Dit probleem komt voor op onder andere de volgende pagina('s):
- Zorgfinanciën (voor inlog)

de blauwe links in de tekst heeft onvoldoende contrast met de witte achtergrond (2,8:1). Dit probleem komt voor op:
- alle webpagina's.

de tekst van de tooltips die te vinden zijn bij de grafieken en diagrammen, hebben vaak niet voldoende contrast met de achtergrondkleur van de tooltip. Dit probleem komt voor op onder andere de volgende pagina('s):
- Zorgfinanciën (voor inlog)
- Zorgaanbieder

WCAG SC:

1.4.3

EN 301 549:

9.1.4.3, 10.1.4.3, 11.1.4.3

Aceit:

U409

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 bijvoorbeeld:

wanneer bij reflow (1.4.10) en bij herschalen van tekst het navigatiemenu wordt geopend, is alleen de actieve pagina te bereiken via het toetsenbord. De andere pagina’s zijn niet te bereiken via het toetsenbord. Dit probleem komt voor op:
- alle webpagina's.

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. Zie bijvoorbeeld:

er moet soms tweedimensioneel gescrold worden om alle tekst te kunnen lezen (zie afbeelding). Dit probleem komt voor op onder andere de volgende pagina('s):
- Zorgfinanciën (voor inlog)
- Zorgaanbieder

er moet tweedimensioneel gescrold worden om het onderdeel ‘’Help’’ te zien op de pagina. Dit probleem komt voor op onder andere de volgende pagina('s):
- Welkom (na inlog)

er kan op de pagina tweedimensioneel worden gescrold. Dit is nodig om de volledige tabel te kunnen weergeven, bij tabellen is het toegestaan dat er tweedimensioneel kan worden gescrold om alle content te zien. Maar nu is dat niet goed toegepast, de gehele pagina kan nu horizontaal en verticaal gescrold worden in plaats van alleen de tabel. Dit probleem komt voor op onder andere de volgende pagina('s):
- Over Zicht op Zorgaanbieders

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:

niet alle content van de Instellingen modal is te bereiken in reflow. De content onderaan in de modal is niet zichtbaar, omdat er niet voldoende naar beneden gescrold kan worden in reflow. Dit probleem komt voor op onder andere de volgende pagina('s):
- Modal Instellingen

wanneer bij reflow en bij herschalen van tekst (1.4.4) het navigatiemenu wordt geopend, is alleen de actieve pagina te bereiken via het toetsenbord. De andere pagina’s zijn niet te bereiken via het toetsenbord. Dit probleem komt voor op:
- alle webpagina's.

er is overlap van tekst in de header (zie afbeelding). Dit probleem komt voor op 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

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

Focusindicator met onvoldoende contrast

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Wanneer het element focus krijgt, is het contrast tussen de focusindicator en de omliggende kleuren niet voldoende. Dit moet 3,0:1 zijn. Hierdoor kan dit makkelijk gemist kan worden, en is het niet (goed) zichtbaar is voor bijvoorbeeld mensen met een vorm van kleurenblindheid, of personen die slechtziend zijn. Het is belangrijk een goed zichtbare focusindicator te gebruiken.

Een voorbeeld van een focusindicator die op verschillende achtergrondkleuren goed zichtbaar is, is te vinden op de volgende site: https://www.erikkroes.nl/blog/the-universal-focus-state/ . Zie bijvoorbeeld:

de custom focusindicator heeft niet altijd voldoende contrast, hij is namelijk niet altijd zichtbaar. Dit probleem komt voor op:
- alle webpagina's.

WCAG SC:

EN 301 549:

9.1.4.11, 10.1.4.11, 11.1.4.11

Aceit:

U408

Grafisch object met onvoldoende contrast

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een afbeelding, diagram, kaart, functioneel element of ander grafisch object gevonden met een te laag contrast ten opzichte van naastgelegen kleuren. Zie bijvoorbeeld:

de vormpjes (cirkel en driehoek) die op de plattegrond te vinden zijn, hebben niet voldoende contrast met de achtergrond. Dit probleem komt voor op onder andere de volgende pagina('s):
- Zorgaanbieder

WCAG SC:

EN 301 549:

9.1.4.11, 10.1.4.11, 11.1.4.11

Aceit:

U408

Icoon met onvoldoende contrast

Prioriteit:

Gemiddeld

Status:

Open

Omschrijving en voorgestelde oplossing:

Er is een icoon gevonden met onvoldoende contrast met naastgelegen kleuren. Zie bijvoorbeeld:

het lichtblauwe icoon welke aangeeft dat er een nieuw tabblad wordt geopend, heeft onvoldoende contrast met de achtergrond. Dit probleem komt voor op onder andere de volgende pagina('s):
- Zorgaanbieder

het plus- en min-icoon om de content in en uit te klappen heeft onvoldoende contrast met de omliggende kleuren (2,6:1). Ook andere iconen hebben dezelfde contrastverhouding. Dit probleem komt voor op onder andere de volgende pagina('s):
- Zorgfinanciën (voor inlog)
- Zorgaanbieder

het mobiele menu-icoon (zie afbeelding) heeft onvoldoende contrast met de achtergrond (1,2:1). Dit probleem komt voor op:
- alle webpagina's.

WCAG SC:

EN 301 549:

9.1.4.11, 10.1.4.11, 11.1.4.11

Aceit:

U408

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 invoerveld op de Feedback-pagina heeft onvoldoende contrast met de omliggende kleuren (1,5:1). Dit probleem komt voor op onder andere de volgende pagina('s):
- Feedback

WCAG SC: