Issues:
Quickscan digitale toegankelijkheid website Flow Pleio

(Alleen de bevindingen)

Scope van de evaluatie

Uitgebreide toetsresultaten

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Bevinding 1: Het logo van Pleio bovenaan elke pagina heeft geen alternatieve tekst. Dit is een svg-afbeelding. Geef het logo bijvoorbeeld een alternatieve tekst door role=img en een aria-label op het svg-element te plaatsen.

1.2 Op tijd gebaseerde media

1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen)

Bevinding 2: Dit criterium is niet (volledig) onderzocht in deze quickscan

1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen)

Bevinding 3: Dit criterium is niet (volledig) onderzocht in deze quickscan

1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)

Bevinding 4: Dit criterium is niet (volledig) onderzocht in deze quickscan

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Bevinding 5: Dit criterium is niet (volledig) onderzocht in deze quickscan

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Bevinding 6: Op pagina https://flow.pleio-test.nl/cases/view/362/ is visueel de relatie tussen teksten zoals 'Startdatum' of 'Looptijd' en de opvolgende tekst duidelijk. In de code is deze relatie niet aangeven. Zorg ervoor dat voor gebruikers van hulpsoftware duidelijk wordt dat deze teksten bij elkaar horen. Dit kan bijvoorbeeld door de dikgedrukte teksten op te maken als een kop of gebruik te maken van een definitielijst (dl-element).

Bevinding 7: Op pagina https://flow.pleio-test.nl/cases/view/362/ is de tekst 'externe auteur' opgemaakt met het strong-element. Het strong-element geeft nadruk aan een woord of korte zin en mag daarom niet puur voor opmaak gebruikt worden. Zie de bevinding hierboven voor een oplossingsrichting.

Bevinding 8: Op pagina https://flow.pleio-test.nl/cases/view/362/ is visueel duidelijk welke tab actief is. Deze informatie is niet beschikbaar in de code. Maak gebruik van aria-current op de link van de huidige pagina om deze informatie beschikbaar te maken voor hulpsoftware.

Bevinding 9: Op pagina https://flow.pleio-test.nl/notifications staat groepen selectievakjes die niet aan elkaar zijn gekoppeld. Zorg ervoor dat de selectievakjes zijn gegroepeerd, bijvoorbeeld door gebruik te maken van een fieldset en legend combinatie.

1.3.3 Zintuiglijke eigenschappen (Niveau A)

Informatie over succescriterium 1.3.3 Zintuiglijke eigenschappen

Bevinding 10: Dit criterium is niet (volledig) onderzocht in deze quickscan

1.3.4 Weergavestand (Niveau AA)

Informatie over succescriterium 1.3.4 Weergavestand

Bevinding 11: Dit criterium is niet (volledig) onderzocht in deze quickscan

1.3.5 Identificeer het doel van de input (Niveau AA)

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Bevinding 12: Dit criterium is niet (volledig) onderzocht in deze quickscan

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Bevinding 13: Dit criterium is niet (volledig) onderzocht in deze quickscan

1.4.2 Geluidsbediening (Niveau A)

Informatie over succescriterium 1.4.2 Geluidsbediening

Bevinding 14: Dit criterium is niet (volledig) onderzocht in deze quickscan

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Bevinding 15: De blauwe teksten (HEX #007BFF) op pagina https://flow.pleio-test.nl/ hebben een te laag contrast op de witte achtergrond. De contrastverhouding is hier 4:!, waar dat minimaal 4,5:1 moet zijn.

1.4.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Bevinding 16: Dit criterium is niet (volledig) onderzocht in deze quickscan

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Bevinding 17: Dit criterium is niet (volledig) onderzocht in deze quickscan

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Bevinding 18: Wanneer bezoekers bij een schermbreedte van 1280 bij 1024 pixels inzoomen tot 200% verdwijnen de filteropties van pagina https://flow.pleio-test.nl/. Zorg ervoor dat geen functionaliteiten van een pagina verdwijnen wanneer bezoekers inzoomen.

Bevinding 19: Wanneer bezoekers bij een schermbreedte van 1280 bij 1024 pixels inzoomen tot 400% komt de knop 'Verstop kolommen' over de kop 'Items' te staan. Hierdoor is de kop niet meer leesbaar bij een ingezoomde weergave. Zorg ervoor dat content niet over elkaar komt te staan als bezoekers inzoomen.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Bevinding 20: Wanneer focus wordt geplaatst op knoppen zoals 'Filteren' of 'Items toevoegen' op pagina https://flow.pleio-test.nl/, wordt de focus aangegeven met een lichtblauwe focusrand (HEX #8FC4FD). Op de witte achtergrond heeft deze focusrand een te laag contrast. De contratsverhouding is hier 1,8:1, waar dat minimaal 3:1 moet zijn. Zorg ervoor dat alle focusranden voldoende contrast hebben.

Bevinding 21: Wanneer de knoppen in het iframe-element op pagina https://flow.pleio-test.nl/cases/view/362/ focus heeft wordt dit aangegeven en een grijze focusrand (HEX #E2E4E7). Op de witte achtergrond heeft deze focusrand onvoldoende contrast. De contrastverhouding is hier 1,2:1, waar dat minimaal 3:1 moet zijn.

1.4.12 Tekstafstand (Niveau AA)

Informatie over succescriterium 1.4.12 Tekstafstand

Bevinding 22: Dit criterium is niet (volledig) onderzocht in deze quickscan

1.4.13 Content bij hover of focus (Niveau AA)

Informatie over succescriterium 1.4.13 Content bij hover of focus

Bevinding 23: Dit criterium is niet (volledig) onderzocht in deze quickscan

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Bevinding 24: Op pagina https://flow.pleio-test.nl/ staan verschillende 'i' iconen die, wanneer er met de muisaanwijzer op wordt geklikt een venster openen. Deze knoppen zijn niet te bedienen met het toetsenbord. Dit komt mogelijk doordat de knoppen zijn opgemaakt met een a-element zonder href-attribuut. Hierdoor is het element niet focusbaar. Een mogelijk oplossing voor dit probleem is door de knoppen op te maken met een button-element.

Bevinding 25: Op pagina https://flow.pleio-test.nl/ is de knop 'Meer/minder filters' niet bereikbaar met het toetsenbord. Dit komt mogelijk doordat deze knop is opgemaakt met aan a-element zonder href-attribuut. Zorg ervoor dat de knop bedienbaar wordt met het toetsenbord, bijvoorbeeld door het op te maken met een button-element.

Bevinding 26: Wanneer bezoekers bij een schermbreedte van 1280 bij 1024 pixels inzoomen tot 175% op pagina https://flow.pleio-test.nl/ verdwijnt content in de header achter een knop. Wanneer deze knop uitgeklapt is is nog een uitklapbare knop zichtbaar, deze is gelabeld met de naam van de persoon die is ingelogd. Deze knop is niet te bedienen met het toetsenbord.

Bevinding 27: Opmerking: Op pagina https://flow.pleio-test.nl/cases/view/362/ staat een iframe waar bezoekers een reactie kunnen invoeren. In dit iframe staan knoppen om de tekst mee op te maken. Deze knoppen zijn beschikbaar met het toetsenbord, maar alleen met bepaalde toetsencombinaties die staan aangegeven in het title-attribuut op het iframe. Toetsenbordgebruikers die geen screenreadergebruiken krijgen de instructie in het title-attribuut niet mee als zij over de pagina navigeren. Zorg ervoor dat deze instructies duidelijk op de pagina zijn geplaatst, bijvoorbeeld als HTML-tekst boven of onder het iframe-element.

2.1.2 Geen toetsenbordval (Niveau A)

Informatie over succescriterium 2.1.2 Geen toetsenbordval

Bevinding 28: Dit criterium is niet (volledig) onderzocht in deze quickscan

2.1.4 Enkel teken sneltoets (Niveau A)

Informatie over succescriterium 2.1.4 Enkel teken sneltoets

Bevinding 29: Dit criterium is niet (volledig) onderzocht in deze quickscan

2.2 Genoeg tijd

2.2.1 Timing aanpasbaar (Niveau A)

Informatie over succescriterium 2.2.1 Timing aanpasbaar

Bevinding 30: Dit criterium is niet (volledig) onderzocht in deze quickscan

2.2.2 Pauzeren, stoppen, verbergen (Niveau A)

Informatie over succescriterium 2.2.2 Pauzeren, stoppen, verbergen

Bevinding 31: Dit criterium is niet (volledig) onderzocht in deze quickscan

2.3 Toevallen en fysieke reacties

2.3.1 Drie flitsen of beneden drempelwaarde (Niveau A)

Informatie over succescriterium 2.3.1 Drie flitsen of beneden drempelwaarde

Bevinding 32: Dit criterium is niet (volledig) onderzocht in deze quickscan

2.4 Navigeerbaar

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Bevinding 33: Dit criterium is niet (volledig) onderzocht in deze quickscan

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Bevinding 34: Elke pagina op de website heeft de paginatitel 'Flow'. Bijvoorbeeld pagina https://flow.pleio-test.nl/ en https://flow.pleio-test.nl/cases/view/362/. Zorg ervoor dat elke pagina een unieke paginatitel krijgt die de inhoud goed omschrijft. Een goede pagina titel voor https://flow.pleio-test.nl/ is bijvoorbeeld 'Home | Flow'.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Bevinding 35: Wanneer de knop met de toegankelijke naam 'Verstop kolommen' op pagina https://flow.pleio-test.nl/ is uitgeklapt zijn verschillende selectievakjes te zien. Het is mogelijk om met het toetsenbord focus te plaatsen op de labels van deze selectievakjes. Deze labels zijn geen interactieve elementen. Het is daarom verwarrend voor toetsenbordgebruikers dat hier focus op wordt geplaatst. Zorg ervoor dat focus alleen wordt geplaatst op interactieve elementen.

2.4.4 Linkdoel (in context) (Niveau A)

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Bevinding 36: Onder de tabel op pagina https://flow.pleio-test.nl/ staat paginering. Hierbij zijn de links naar de vorige en vorige pagina gelabeld met een pijl-icoon, dit is ook de toegankelijke naam van deze links. Screenreadergebruikers weten hierdoor niet waar deze links naar verwijzen. Ook bij de links zoals '1', '2' en '3' is het voor screenreadergebruikers niet duidelijk waar deze naar verwijzen aan de hand van de toegankelijke naam. Zorg ervoor dat de toegankelijke naam van deze links het linkdoel goed omschrijft. Vul bijvoorbeeld de toegankelijke naam van de genummerde links aan met het woord 'Pagina' en geef de links naar de vorige en volgende pagina een toegankelijke naam.

2.4.5 Meerdere manieren (Niveau AA)

Informatie over succescriterium 2.4.5 Meerdere manieren

Bevinding 37: Dit criterium is niet (volledig) onderzocht in deze quickscan

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Bevinding 38: Wanneer bezoekers bij een schermbreedte van 1280 bij 1024 pixels inzoomen tot 175% op pagina https://flow.pleio-test.nl/ verdwijnt content in de header achter een knop. De toegankelijke naam van deze knop is 'Toggle navigation'. Naast dat die een Engelse toegankelijke naam is, beschrijft de naam de functie van de knop onvoldoende. 'Menu' zou hier een betere toegankelijke naam zijn.

Bevinding 39: Advies: Op pagina https://flow.pleio-test.nl/ heeft de uitklapbare knop die visueel gelabeld is met een tandwiel de toegankelijke naam 'Verstop kolommen'. Mogelijk dat deze toegankelijke naam niet voor elke bezoeker duidelijk omschrijft wat de knop doet. De knop laat inderdaad filteropties zien waarmee bezoekers kolommen kunnen verbergen, maar verbergt zelf geen kolommen. Het is daarom beter om de knop een andere toegankelijke naam te geven, bijvoorbeeld 'Filteropties verstop kolommen'.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Bevinding 40: Dit criterium is niet (volledig) onderzocht in deze quickscan

2.5 Input modaliteiten

2.5.1 Aanwijzergebaren (Niveau A)

Informatie over succescriterium 2.5.1 Aanwijzergebaren

Bevinding 41: Dit criterium is niet (volledig) onderzocht in deze quickscan

2.5.2 Aanwijzerannulering (Niveau A)

Informatie over succescriterium 2.5.2 Aanwijzerannulering

Bevinding 42: Dit criterium is niet (volledig) onderzocht in deze quickscan

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Bevinding 43: Wanneer op pagina https://flow.pleio-test.nl/ de knop met de toegankelijke naam 'Verstop kolommen' is uitgeklapt zijn verschillende selectievakjes te zien. Het selectievakjes met het visuele label 'Allen' heeft de toegankelijke naam 'Nummer'. Dit komt omdat het label-element 'Allen' het aria-label=nummer heeft. Zorg ervoor dat het visuele label van een element in de toegankelijk naam voorkomt. Los dit probleem op door aria-label van het label-element te verwijderen.

2.5.4 Bewegingsactivering (Niveau A)

Informatie over succescriterium 2.5.4 Bewegingsactivering

Bevinding 44: Dit criterium is niet (volledig) onderzocht in deze quickscan

3. Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina (Niveau A)

Informatie over succescriterium 3.1.1 Taal van de pagina

Bevinding 45: De pagina https://flow.pleio-test.nl/ bevat Nederlandse content maar heeft een Engelse taalaanduiding. Zorg ervoor dat de taalaanduiding overeenkomt met de meest gebruikte taal op de pagina.
Dit komt ook voor op pagina https://flow.pleio-test.nl/cases/view/362/.

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Bevinding 46: Wanneer op pagina https://flow.pleio-test.nl/ op een i-icoon wordt geklikt opent een venster. In dit venster staat een sluitknop met de toegankelijke naam 'Close'. Technische gezien is deze toegankelijke naam juist omdat de taal overeenkomt met de taalinstelling van de pagina, maar de taalinstelling van de pagina moet eigenlijk Nederlands zijn. Om die reden hebben elementen op de website ook een Nederlandse toegankelijke naam nodig. Vertaal de toegankelijke naam 'Close' naar het Nederlands.
Op andere pagina's komen ook knoppen voor met een Engelse toegankelijke naam, bijvoorbeeld op pagina https://flow.pleio-test.nl/cases/view/362/ in het iframe-element.

3.2 Voorspelbaar

3.2.1 Bij focus (Niveau A)

Informatie over succescriterium 3.2.1 Bij focus

Bevinding 47: Dit criterium is niet (volledig) onderzocht in deze quickscan

3.2.2 Bij input (Niveau A)

Informatie over succescriterium 3.2.2 Bij input

Bevinding 48: Dit criterium is niet (volledig) onderzocht in deze quickscan

3.2.3 Consistente navigatie (Niveau AA)

Informatie over succescriterium 3.2.3 Consistente navigatie

Bevinding 49: Dit criterium is niet (volledig) onderzocht in deze quickscan

3.2.4 Consistente identificatie (Niveau AA)

Informatie over succescriterium 3.2.4 Consistente identificatie

Bevinding 50: Dit criterium is niet (volledig) onderzocht in deze quickscan

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Bevinding 51: Wanneer bezoekers op pagina https://flow.pleio-test.nl/comments/add een reactie willen achterlaten en het iframe-element niet invullen, verschijnt na versturen de foutmelding 'Dit veld is vereist'. Deze foutmelding geeft niet aan welke fout de bezoeker heeft gemaakt. De gemaakte fout is hier namelijk dat het veld leeg is. Zorg ervoor dat foutmeldingen aangeven welke fout de bezoeker heeft gemaakt. Het is ook beter als foutmeldingen aangeven in welk veld de fout is gemaakt.

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Bevinding 52: Op pagina https://flow.pleio-test.nl/ staan bij 'Startdatum' en 'Deadline' elk twee invoervelden. Deze invoervelden hebben geen labels die aangeven wat hier moet worden ingevuld. 'Startdatum' en 'Deadline' zijn wel labels voor beide invoervelden, maar deze geven niet aan wat bij elk veld moet worden ingevuld. Geef elk veld een eigen label en koppel deze aan het juiste invoerveld. Goede labels zijn bijvoorbeeld 'Startdatum vanaf' en 'Startdatum tot'.

Bevinding 53: Op pagina https://flow.pleio-test.nl/cases/view/362/ staan een combobox die het visuele label 'Interne reacties' lijkt te hebben. Echter, dit is een van de opties van de combobox en niet het label. Zorg ervoor dat deze combobox een visueel label krijgt dat buiten de combobox staat en aangeeft wat bezoekers hier moeten invoeren.

3.3.3 Foutsuggestie (Niveau AA)

Informatie over succescriterium 3.3.3 Foutsuggestie

Bevinding 54: Dit criterium is niet (volledig) onderzocht in deze quickscan

3.3.4 Foutpreventie (wettelijk, financieel, gegevens) (Niveau AA)

Informatie over succescriterium 3.3.4 Foutpreventie (wettelijk, financieel, gegevens)

Bevinding 55: Dit criterium is niet (volledig) onderzocht in deze quickscan

4. Robuust

4.1 Compatibel

4.1.1 Parsen (Niveau A)

Informatie over succescriterium 4.1.1 Parsen

Bevinding 56: Dit criterium is niet (volledig) onderzocht in deze quickscan

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Bevinding 57: Op pagina https://flow.pleio-test.nl/ staan onder 'Startdatum' en 'Deadline' invoervelden. Deze invoervelden hebben geen toegankelijke naam. Dit komt omdat de velden ook geen visuele labels hebben. Zorg ervoor dat de velden goede visuele labels krijgen en deze gekoppeld worden aan de velden.

Bevinding 58: Op pagina https://flow.pleio-test.nl/ staan meerdere knoppen die gelabeld zijn met een i-icoon. Deze knoppen zijn niet te bedienen met het toetsenbord (zie succescriterium 2.1.1), maar hebben ook geen toegankelijke naam. Zorg ervoor dat deze knoppen een goede toegankelijke naam krijgen. Uit de toegankelijke naam moet duidelijk worden van welke blog het informatievenster wordt geopend.

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Bevinding 59: Dit criterium is niet (volledig) onderzocht in deze quickscan

Onderbouwing van de evaluatie

Het onderzoek is uitgevoerd op basis van de evaluatiemethode van het W3C, WCAG-EM. Dit gebeurt grotendeels handmatig door een steekproef te nemen. Voor een quickscan geldt dat we slechts delen uit deze methodiek gebruiken. Ondanks alle zorgvuldigheid en ervaring van de onderzoeker kan het voorkomen dat een probleem niet gesignaleerd is. Houd er rekening mee dat in een volgend onderzoek bepaalde onderdelen anders worden beoordeeld omdat technologieën en hulpsoftware worden doorontwikkeld. Bij het handmatig onderzoek wordt gebruik gemaakt van tools.

Steekproef getoetste webpagina's

• Home:
  https://flow.pleio-test.nl/
• Blog:
  https://flow.pleio-test.nl/cases/view/362/
• Notificaties:
  https://flow.pleio-test.nl/notifications

Ondersteunende technieken

• HTML5
• CSS
• WAI-ARIA
• DOM
• SVG
• ECMAScript 5

Bronnen

• Evaluatiedocument WCAG 2.0
  www.drempelvrij.nl/over-het-waarmerk
• Web Content Accessibility Guidelines (WCAG) 2.0 (Geautoriseerde Nederlandse vertaling)
  www.w3.org/Translations/WCAG20-nl
• Website Accessibility Conformance Evaluation Methodology (WCAG-EM)
  www.w3.org/WAI/eval/conformance
• Web Content Accessibility Guidelines (WCAG)
  www.w3.org/WAI/intro/wcag
• How to Meet WCAG 2.1 Quick Reference
  www.w3.org/WAI/WCAG21/quickref/

Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.