Rapport:
Audit digitale toegankelijkheid website FileFlow Capelle aan den IJssel

Uitkomst: Onvoldoende

Bevindingen: Bovenaan de pagina https://capelleaandenijssel.fileflow.nl/ toont het logo de volledige tekst “gemeente Capelle aan den IJssel”, maar de alternatieve tekst is slechts “Logo”. In het tekstalternatief staat dus niet alle tekst die in het logo te zien is. Dit moet wel. Zo weten bezoekers die de afbeelding niet kunnen zien, ook precies wat er staat. Omdat het logo in een link staat zonder gewone tekst, fungeert de alt-tekst als linktekst. Daarom moet de alt-tekst beschrijven dat het om een logo gaat en dat de link leidt naar de homepagina. Verander het tekstalternatief zodat de volledige tekst van het logo erin staat: “Logo gemeente Capelle aan den IJssel, ga naar de homepagina van FileFlow” of iets dergelijks. Verwijder ook het aria-label van het a-element, omdat dit alle andere methoden voor het benoemen van elementen overschrijft. Deze bevinding wordt ook onder succescriterium 2.5.3 genoemd.
Dit probleem komt ook voor op pagina https://capelleaandenijssel.fileflow.nl/?query=PDF en op andere vergelijkbare pagina’s.

In de filterbalk staan knoppen met pijlen om aan te geven dat hier uitklapbare secties beschikbaar zijn. Deze pictogrammen hebben geen tekstalternatief. Het pijltje is een afbeelding die informatie overdraagt, namelijk dat er verborgen content is. Deze informatie moet ook beschikbaar zijn voor bezoekers die de afbeelding niet kunnen zien. Dat is op dit moment niet zo, omdat een alternatieve tekst ontbreekt. Dit kan opgelost worden door een alternatieve tekst voor het pijltje toe te voegen of door gebruik te maken van het aria-expanded-attribuut om deze informatie op een niet-visuele manier over te brengen.
Dit probleem is ook terug te vinden op de pagina https://capelleaandenijssel.fileflow.nl/?query=PDF en op andere vergelijkbare pagina’s.

Op pagina https://capelleaandenijssel.fileflow.nl/ wordt een afbeelding na tweemaal klikken geopend in een voorbeeldvenster. De tekstalternatieven van de afbeeldingen zijn niet informatief en niet uniek, bijvoorbeeld “OpeningTentoonstellingen_0303_FDR4”. Aangezien de afbeeldingen onderdeel zijn van een carrousel, moeten zij voorzien zijn van beschrijvende en unieke alt-teksten.

Wanneer pagina https://capelleaandenijssel.fileflow.nl/settings/profile op een klein scherm wordt bekeken, fungeren afbeeldingen met pictogrammen voor profiel, tag en terug als links. Deze afbeeldingen hebben echter geen tekstalternatief, waardoor zij niet beschikbaar zijn voor screenreaders. Aangezien deze afbeeldingen informatief zijn, moeten zij worden voorzien van beschrijvende tekstalternatieven.
Dit probleem komt ook voor op pagina’s https://capelleaandenijssel.fileflow.nl/settings/tags en https://capelleaandenijssel.fileflow.nl/settings/two_factor.

Op pagina https://capelleaandenijssel.fileflow.nl/settings/two_factor wordt een QR-code getoond zonder een toegankelijk tekstueel alternatief. Voeg de QR-code toe als een afbeelding met een beschrijvende alt-tekst, bijvoorbeeld “QR-code voor het instellen van tweestapsverificatie”. Zie ook succescriterium 1.3.1.

Op pagina https://capelleaandenijssel.fileflow.nl/404 is een informatieve afbeelding met de tekst “404 Not Found” aanwezig, maar deze heeft geen tekstalternatief. Wanneer een afbeelding informatie overbrengt, moet de alternatieve tekst die informatie volledig en betekenisvol beschrijven. In dit geval wordt de visueel aangeboden informatie niet overgebracht aan gebruikers van schermlezers.

Op pagina https://capelleaandenijssel.fileflow.nl/users/sign_in heeft het beeldmerk van Microsoft geen tekstalternatief. Dit is een img-element die een alt-attribuut mist. Dit attribuut is altijd verplicht. In dit geval kan deze afbeelding gezien worden als decoratief, omdat de informatie al aanwezig is in de tekst "Inloggen met Microsoft". Dan kan het alt-attribuut een lege waarde krijgen: alt="".

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://capelleaandenijssel.fileflow.nl/?contentType=video%2Fmp4 is een video aanwezig waarin gesproken tekst voorkomt, maar ondertiteling ontbreekt. Voeg ondertiteling toe aan de video. Zo krijgen bezoekers die de video niet (goed) kunnen horen ook alle informatie.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://capelleaandenijssel.fileflow.nl/, verschijnt bij het selecteren van een afbeelding het onderdeel “Eigenschappen” met de metadata van de afbeelding. De tekst bovenaan dit onderdeel, bijvoorbeeld “Ondertekening Zorg- en Veiligheidskamer Capelle”, is niet als koptekst gemarkeerd. Voor bezoekers die hulpsoftware gebruiken, is een tekst die er visueel uitziet als kop maar niet als kop is gemarkeerd niet bruikbaar. Deze bezoekers navigeren via koppen om de inhoud te scannen of snel naar een specifieke sectie te springen. Dit is alleen mogelijk wanneer de koppen ook in de code als kop zijn vastgelegd. Wanneer koppen uitsluitend visueel zijn vormgegeven (bijvoorbeeld door vetgedrukte tekst), wijkt bovendien de structuur van de informatie in de code af van de visuele structuur. Markeer koppen met het juiste HTML-element, op het correcte kopniveau (h1 t/m h6).
Dit probleem doet zich eveneens voor op de pagina https://capelleaandenijssel.fileflow.nl/?query=PDF en op andere vergelijkbare pagina’s.

Op pagina https://capelleaandenijssel.fileflow.nl/ zijn in het onderdeel “Eigenschappen”, na het selecteren van een afbeelding, verschillende teksten visueel als koppen weergegeven, maar hiervoor ontbreken de juiste kop-elementen. In plaats daarvan wordt het strong-element gebruikt om deze teksten als koppen te laten lijken, zoals bij “Categorie”, “Omschrijving”, “Fotograaf” en andere. Het element strong is niet bedoeld om koppen mee te markeren. Dit moet altijd gedaan worden met een kop-element, zoals h3. Koppen zijn bedoeld om een tekst te structureren. Alleen als deze teksten als kop worden gemarkeerd met een kop-element, begrijpt hulpsoftware die betekenis.
Dit komt ook voor op pagina https://capelleaandenijssel.fileflow.nl/settings/profile met koppen zoals “Persoonlijke details”, evenals op de pagina https://capelleaandenijssel.fileflow.nl/?query=PDF en op andere vergelijkbare pagina’s.

Op pagina https://capelleaandenijssel.fileflow.nl/privacy_statement zijn koppen niet als koppen gemarkeerd, maar als p-elementen in de code. Markeer deze teksten als koppen, bijvoorbeeld met h2-elementen. Dit geldt onder andere voor de koppen “Persoonsgegevens die wij verwerken”, “Bijzondere en/of gevoelige persoonsgegevens die wij verwerken” en andere.

Op pagina https://capelleaandenijssel.fileflow.nl/ is een knop “Sortering” aanwezig die een keuzelijst opent. De geselecteerde optie heeft een duidelijke visuele aanduiding, maar deze wordt niet in de code vastgelegd. Bezoekers die de pagina laten voorlezen, hebben daardoor geen toegang tot deze informatie. Zorg daarom voor een andere manier om deze informatie over te dragen, zodat ook mensen die schermlezers gebruiken dit kunnen begrijpen. Voeg bijvoorbeeld aria-current="true" toe aan de geselecteerde optie.

Het logo "home" linksboven op de webpagina's heeft op alle pagina's het attribuut aria-current="page". Dit geeft aan dat deze link de huidige pagina is, maar dat is alleen correct op de homepagina https://capelleaandenijssel.fileflow.nl/. Verwijder dit attribuut op andere pagina's dan de homepagina. Eventueel kan het zelfs ook verwijderd worden op de homepagina, want visueel geeft deze link ook niet aan dat dit de homepagina is.

Op pagina https://capelleaandenijssel.fileflow.nl/settings/two_factor wordt een QR-code geïmplementeerd met behulp van een tabelstructuur die bestaat uit zwarte en witte cellen. Deze tabel vertegenwoordigt geen tabelgegevens. Hierdoor kan hulpsoftware het doel en de structuur van de inhoud niet begrijpen. Voeg de QR-code toe als een img-element met een beschrijvend alt-attribuut (zie succescriterium 1.1.1).

Op pagina https://capelleaandenijssel.fileflow.nl/settings/tags is de lijst met datums en aantallen opgebouwd met generieke div-elementen in plaats van een semantische tabelstructuur. Hierdoor lezen screenreaders de inhoud als één doorlopend tekstblok, zonder de relatie tussen de datums en de bijbehorende waarden duidelijk te maken. Daarnaast zijn de datums als platte tekst weergegeven, waardoor zij worden voorgelezen als een reeks cijfers in plaats van als datums. Structureer de inhoud als een semantische tabel met table-, thead-, tbody- en th/td-elementen om de relaties tussen rijen en kolommen duidelijk over te brengen. Gebruik voor datums het time-element met een datetime-attribuut, zodat deze correct worden aangekondigd door screenreaders. Andere oplossingen zijn ook mogelijk.

Op pagina https://capelleaandenijssel.fileflow.nl/?query=PDF wordt een lijst met PDF-documenten gepresenteerd, maar deze bestanden kunnen niet worden gedownload voor een toegankelijkheidsaudit. Daarnaast worden de documenten uitsluitend weergegeven binnen een ingesloten PDF-viewer. Hierdoor zijn de visueel overgebrachte informatie en relaties in de PDF’s niet programmatisch vast te stellen. Gebruikers van hulpsoftware kunnen de informatie in deze PDF-documenten daardoor mogelijk niet betrouwbaar raadplegen of interpreteren. Stel de PDF-documenten beschikbaar als downloadbare bestanden en zorg ervoor dat zij correct zijn getagd, zodat hun semantische structuur (zoals koppen, lijsten en leesvolgorde) programmatisch vast te stellen is. Als alternatief kan dezelfde informatie worden aangeboden in een toegankelijke HTML-vorm. Let erop dat er dan ook meer eventuele toegankelijkheidsproblemen in de PDF-documenten aan het licht kunnen komen.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://capelleaandenijssel.fileflow.nl/users/sign_in bevat een formulier invoervelden voor persoonlijke gegevens (gebruikersnaam en huidig wachtwoord) waarbij de autocomplete-attributen ontbreken. Invoervelden voor persoonlijke informatie zoals gebruikersnaam en wachtwoord moeten in principe het autocomplete-attribuut met de juiste waarde hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen. Op deze pagina staat meer informatie over autocomplete en welke waardes verplicht gebruikt moeten worden: https://www.w3.org/Translations/WCAG22-nl/#input-purposes. Let op dat het hier gaat om de gebruikersnaam en niet het e-mailadres, zoals in de placeholder staat.

Advies: op pagina https://capelleaandenijssel.fileflow.nl/settings/profile bevat een formulier invoervelden voor persoonlijke gegevens (zoals naam, e-mailadres en het huidige en nieuwe wachtwoord) waarbij de autocomplete-attributen ontbreken. Invoervelden voor persoonlijke informatie zoals naam, e-mailadres of wachtwoord moeten in principe het autocomplete-attribuut met de juiste waarde hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen. Op deze pagina staat meer informatie over autocomplete en welke waardes verplicht gebruikt moeten worden: https://www.w3.org/Translations/WCAG22-nl/#input-purposes. In dit geval is dit echter niet afgekeurd, omdat de naam en het e-mailadres al zijn ingevuld en het wachtwoord alleen ingevuld moet worden als deze gewijzigd dient te worden.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://capelleaandenijssel.fileflow.nl/ hebben klikbare afbeeldingen een aangepaste toetsenbordfocus die slechts zichtbaar is als een zeer subtiele verandering van de achtergrondkleur. Het gebruik van alleen kleur om focus aan te geven is hier echter niet voldoende. Voor bezoekers met een visuele beperking of kleurenblindheid is zo’n subtiele kleurverandering vaak niet duidelijk genoeg. En ook mensen die met het toetsenbord navigeren moeten goed kunnen zien op welke plek van de pagina ze zijn. Daarvoor moet er een duidelijk zichtbare focusindicator zijn. Hiervoor kan het beste een extra visuele aanduiding toegevoegd worden. Denk aan een dikkere rand of een meer contrastrijke aanpassing van de achtergrond.
Dit probleem komt ook voor op pagina https://capelleaandenijssel.fileflow.nl/?query=PDF en op andere vergelijkbare pagina’s.

Op pagina https://capelleaandenijssel.fileflow.nl/ is een knop “Sortering” aanwezig die een keuzelijst opent. De geselecteerde optie wordt uitsluitend aangeduid door een andere achtergrondkleur. Dit kan een probleem zijn voor bezoekers met kleurenblindheid of een visuele beperking. Zij kunnen kleuren mogelijk niet onderscheiden en daardoor niet zien welke optie is geselecteerd en welke niet. Zorg ervoor dat de geselecteerde optie ook op een andere manier herkenbaar is, bijvoorbeeld door onderstreping of vetgedrukte tekst.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://capelleaandenijssel.fileflow.nl/ zijn klikbare afbeeldingen aanwezig met daaronder tekst. De tekst die de categorie aangeeft (bijvoorbeeld “Bestuur en organisatie” of “Wonen en bouwen”) heeft onvoldoende kleurcontrast. In de hover-status is de tekst grijs (HEX #64748B) op een lichtblauwe (HEX #F4F9FE) achtergrond met een contrastverhouding van 4,49:1. Wanneer een afbeelding wordt aangeklikt en geselecteerd is, wordt de categorietekst blauw (HEX #188CE5) op een lichtblauwe (HEX #DCECFC) achtergrond, met een contrastverhouding van 2,9:1. Deze tekst is niet voor iedereen goed zichtbaar. Aangezien de tekst kleiner is dan 19px, moet de contrastverhouding minimaal 4,5:1 zijn.
Ook op de pagina
https://capelleaandenijssel.fileflow.nl/?query=PDF en op andere vergelijkbare pagina’s komt dit probleem voor.

Op pagina https://capelleaandenijssel.fileflow.nl/settings/tags staat een paginanavigatie onder de trefwoorden. De huidige pagina is aangegeven met blauwe tekst (HEX #0078D5) op een lichtblauwe achtergrond (HEX #E8F4FC). De contrastratio is hier 4,0:1 waar dat minimaal 4,5:1 moet zijn.

In sommige gevallen kunnen (fout)meldingen in beeld komen, bijvoorbeeld "Je bent reeds aangemeld" als je de inlogpagina bereikt terwijl je al ingelogd bent. Deze rode tekst (HEX #DC3545) heeft op de roze achtergrond (HEX #F2DEDF) een te lage contrastratio van 3,5:1 waar dat minimaal 4,5:1 moet zijn.

Uitkomst: Onvoldoende

Bevindingen: Wanneer pagina https://capelleaandenijssel.fileflow.nl/ wordt bekeken met een schermresolutie van 1280 × 1024 pixels en is ingezoomd tot 200%, is het onderdeel “Eigenschappen” niet beschikbaar nadat een afbeelding is aangeklikt. Zorg dat alles nog werkt en leesbaar is als een bezoeker inzoomt tot 200% op een scherm van 1280 bij 1024 pixels.
Dit probleem komt ook voor op pagina’s https://capelleaandenijssel.fileflow.nl/?contentType=video%2Fmp4, https://capelleaandenijssel.fileflow.nl/?query=PDF.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Wanneer pagina https://capelleaandenijssel.fileflow.nl/ wordt bekeken met een schermresolutie van 1280 × 1024 pixels en is ingezoomd tot 400%, neemt de header het grootste deel van de pagina in beslag en is het hoofdgedeelte vrijwel buiten het zichtbare gebied geplaatst. Zorg dat alles nog werkt en leesbaar is als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels. Daarnaast verschijnt er horizontale scroll in de filterbalk. Scrollen in beide richtingen is alleen toegestaan wanneer dit echt noodzakelijk is voor de betekenis of het gebruik van de inhoud. Bijvoorbeeld bij tabellen, betekenisvolle grafieken en kaarten. Controleer of horizontaal scrollen noodzakelijk is. Zo niet, zorg er dan voor dat horizontaal scrollen niet mogelijk is bij inzoomen.
Dit probleem komt ook voor op pagina’s https://capelleaandenijssel.fileflow.nl/?contentType=video%2Fmp4, https://capelleaandenijssel.fileflow.nl/?query=PDF.

Wanneer pagina https://capelleaandenijssel.fileflow.nl/ wordt bekeken met een schermresolutie van 1280 × 1024 pixels en is ingezoomd tot 400%, is het onderdeel “Eigenschappen” niet beschikbaar nadat een afbeelding is aangeklikt. Zorg dat alles nog werkt en leesbaar is als een bezoeker inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.
Hetzelfde probleem komt ook voor op pagina’s https://capelleaandenijssel.fileflow.nl/?contentType=video%2Fmp4, https://capelleaandenijssel.fileflow.nl/?query=PDF.

Wanneer pagina https://capelleaandenijssel.fileflow.nl/settings/profile wordt bekeken met een schermresolutie van 1280 × 1024 pixels en is ingezoomd tot 400%, is het pijlpictogram bij de link “Terug naar app” niet zichtbaar. Hierdoor is het voor bezoekers niet duidelijk wat het doel van deze link is. Zorg dat de inhoud ook bij sterk inzoomen leesbaar en bruikbaar blijft.
Zie ook pagina’s https://capelleaandenijssel.fileflow.nl/settings/tags en https://capelleaandenijssel.fileflow.nl/settings/two_factor.

Wanneer pagina
https://capelleaandenijssel.fileflow.nl/settings/tags wordt bekeken met een schermresolutie van 1280 × 1024 pixels en is ingezoomd tot 400%, is de paginering onderaan de pagina gedeeltelijk niet zichtbaar. Zorg ervoor dat alle informatie zichtbaar blijft en alle functionaliteit beschikbaar is wanneer de pagina wordt ingezoomd.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://capelleaandenijssel.fileflow.nl/ hebben de informatieve pictogrammen in de header (bij de knoppen “Upload” en “Account”) onvoldoende kleurcontrast. De grijze (HEX #A8B0B5) pictogrammen op de witte achtergrond hebben een contrastverhouding van 2,2:1, wat lager is dan de vereiste 3,0:1 voor grafische elementen die informatie overbrengen. Het kleurcontrast van informatieve iconen moet minimaal 3,0:1 zijn. Zorg dat de iconen voldoende contrast hebben.
Dit probleem is ook aanwezig op de pagina https://capelleaandenijssel.fileflow.nl/?query=PDF en op andere vergelijkbare pagina’s.

Op pagina https://capelleaandenijssel.fileflow.nl/ hebben de knoppen in de filterbalk pijlpictogrammen om aan te geven dat er uitklapbare filteropties beschikbaar zijn. Het kleurcontrast tussen de grijze (HEX #999999) pictogrammen en de witte achtergrond is echter onvoldoende: 2,8:1. Informatieve afbeeldingen moeten minimaal een contrast van 3,0:1 hebben met hun achtergrond. Iconen zoals deze pijltjes vallen hier ook onder. Ze dragen namelijk informatie over: ‘hier is een verborgen content’. Zorg dat het contrast tussen de iconen en de achtergrondkleur voldoende is.
Dit probleem is ook aanwezig op de pagina https://capelleaandenijssel.fileflow.nl/?query=PDF en op andere vergelijkbare pagina’s.

Op https://capelleaandenijssel.fileflow.nl/ hebben klikbare afbeeldingen een aangepaste toetsenbordfocus die wordt weergegeven als een verandering van de achtergrondkleur. De toetsenbordfocus is lichtblauw (HEX #F4F9FE) op een witte achtergrond. De contrastverhouding tussen deze kleuren is 1,1:1, wat lager is dan het vereiste minimum van 3,0:1. Op deze website wordt niet de standaard focusindicator gebruikt, maar een aangepaste versie. Voor de standaard focusindicator zijn geen contrasteisen in WCAG; die wordt dus altijd goedgekeurd voor dit succescriterium. Bezoekers kunnen een standaard focusindicator namelijk zelf aanpassen, naar hun eigen wensen. Maar dat kan niet meer als de focusindicator met CSS is aangepast. Daarom gelden de contrasteisen in dat geval wél. Dit moet ten minste 3,0:1 zijn.
Dit probleem is ook aanwezig op de pagina https://capelleaandenijssel.fileflow.nl/?query=PDF, https://capelleaandenijssel.fileflow.nl/users/sign_in en op andere vergelijkbare pagina’s.

Op pagina https://capelleaandenijssel.fileflow.nl/ bevinden zich in het onderdeel “Eigenschappen” bij het selecteren van een afbeelding de knoppen “Toestemmings­formulieren”, “Gerelateerde bestanden” en “Bestandsinformatie”, die dialoogvensters openen. De sluitknoppen in deze dialoogvensters hebben onvoldoende kleurcontrast. Het grijze (HEX #99A1AF) X-pictogram op de witte achtergrond heeft een contrastverhouding van 2,6:1. De minimale vereiste contrastverhouding voor informatieve pictogrammen is 3,0:1.
Zie ook op pagina https://capelleaandenijssel.fileflow.nl/?query=PDF en op andere vergelijkbare pagina’s.

Op pagina https://capelleaandenijssel.fileflow.nl/settings/profile heeft de keuzelijst voor taalinstellingen (“Locale”) slechts één toetsenbordfocusindicator, namelijk een blauwe (HEX #56B5FF) rand op een witte achtergrond. De contrastverhouding bedraagt 2,2:1, wat lager is dan de vereiste 3,0:1.

Op pagina https://capelleaandenijssel.fileflow.nl/users/sign_in staan invoervelden voor gebruikersnaam en wachtwoord. De grijze randen (HEX #CED4DA) van deze velden hebben een contrastratio van 1,5:1 waar dat minimaal 3,0:1 moet zijn.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://capelleaandenijssel.fileflow.nl/ wordt bij het toepassen van tekstafstand zoals beschreven in dit succescriterium eerste twee opties in de keuzelijst “Sortering” afgekapt en gedeeltelijk onzichtbaar. Sommige bezoekers passen de weergave van de tekst aan, zodat zij deze beter kunnen lezen. Denk aan het vergroten van de afstand tussen regels, letters of woorden. Het gaat bijvoorbeeld om mensen met dyslexie. Als een bezoeker dit doet op de manier die in het succescriterium is beschreven, moet alles goed blijven werken. Bovendien moet de tekst leesbaar blijven. Dit kan opgelost worden door de hoogte en breedte van de containers van de tekst responsief te maken.
Dit komt ook voor bij de tekst onder sommige afbeeldingen, maar daarvoor is een alternatief aanwezig als een afbeelding wordt geselecteerd.
Dit probleem komt ook voor op de pagina’s https://capelleaandenijssel.fileflow.nl/?query=PDF, https://capelleaandenijssel.fileflow.nl/?contentType=video%2Fmp4 en op andere pagina’s.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://capelleaandenijssel.fileflow.nl/settings/two_factor is een QR-code aanwezig die de enige beschikbare methode is om tweestapsverificatie in te stellen. Gebruikers die afhankelijk zijn van het toetsenbord en geen QR-codes kunnen scannen, zijn hierdoor niet in staat om deze taak uit te voeren. Bied een gelijkwaardig, toetsenbordtoegankelijk alternatief aan, bijvoorbeeld een sectie “Kun je de QR-code niet scannen?” met een tekstuele link of de mogelijkheid om een instelsleutel handmatig in te voeren.

Op pagina https://capelleaandenijssel.fileflow.nl/?contentType=video%2Fmp4 zijn de knoppen in de video niet toegankelijk via het toetsenbord. Zorg ervoor dat alle interactieve elementen met het toetsenbord bedienbaar zijn.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In sommige gevallen kunnen (fout)meldingen in beeld komen, bijvoorbeeld "Je bent reeds aangemeld" als je de inlogpagina bereikt terwijl je al ingelogd bent. Deze meldingen verdwijnen na een paar seconden, waardoor sommige bezoekers niet voldoende tijd hebben om de meldingen te lezen.
Zorg ervoor dat meldingen blijven staan totdat de bezoeker deze zelf wegklikt, totdat de eventuele fout is opgelost of dat deze informatie op een andere manier beschikbaar is.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Sommige pagina’s van de website bevatten herhalende contentblokken, maar bieden geen mogelijkheid om deze over te slaan. Zo ontbreekt op de pagina https://capelleaandenijssel.fileflow.nl/ een skiplink, zijn er geen landmarks aanwezig en is er geen correcte koppenstructuur die als alternatief voor een werkende skiplink kan dienen. Er moet een manier zijn om delen van een pagina over te slaan, zoals het navigatiemenu en andere elementen die op meerdere pagina’s terugkomen. Een van de oplossingen is een skiplink. Daarmee kunnen bezoekers vaste blokken met herhalende inhoud overslaan. Een skiplink moet de eerste link op de pagina zijn. Deze link mag verborgen zijn, maar moet zichtbaar worden zodra hij focus krijgt. Voeg een skiplink toe waarmee bezoekers herhalende delen van de pagina over kunnen slaan.
Dit probleem komt ook voor op de pagina’s https://capelleaandenijssel.fileflow.nl/?query=PDF, https://capelleaandenijssel.fileflow.nl/?contentType=video%2Fmp4 en op andere pagina’s.

Uitkomst: Onvoldoende

Bevindingen: Pagina’s https://capelleaandenijssel.fileflow.nl/settings/profile, https://capelleaandenijssel.fileflow.nl/settings/two_factor en https://capelleaandenijssel.fileflow.nl/settings/tags hebben allemaal dezelfde tekst in het title-element van de pagina: “FileFlow - Gemeente Capelle aan den IJssel”. Dit is niet de bedoeling. In het title-element van elke pagina moet een unieke tekst staan die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Staat hier bij twee of meer pagina’s dezelfde tekst? Dan kan dit verwarrend zijn voor de bezoeker. De navigatie tussen pagina’s wordt dan ook lastiger. Verander de tekst in het title-element, zodat deze op elke pagina uniek is en de inhoud van de pagina nauwkeurig beschrijft.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://capelleaandenijssel.fileflow.nl/ komt de toetsenbordfocus na de knop “Sorting” terecht op een onzichtbaar interactief element. De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren. Zie ook andere vergelijkbare pagina’s.

Op pagina https://capelleaandenijssel.fileflow.nl/ is de focusvolgorde niet logisch. Wanneer een bezoeker een afbeelding selecteert, verschijnt het onderdeel “Eigenschappen” met de metadata van de afbeelding. Bij navigatie met het toetsenbord verplaatst de focus zich echter niet naar deze nieuw geopende inhoud, maar blijft op de geselecteerde afbeelding en gaat vervolgens verder naar de volgende afbeeldingen in de lijst. Wanneer er geen filters zijn toegepast, is de lijst met afbeeldingen zeer lang, waardoor de bezoeker met het toetsenbord geen mogelijkheid heeft om het onderdeel “Eigenschappen” te bereiken. Zorg ervoor dat na het selecteren van een afbeelding de focus wordt verplaatst naar de nieuw geopende inhoud en dat de bezoeker na het lezen van deze inhoud weer kan terugkeren naar de lijst met afbeeldingen. Als alternatief kan een mechanisme worden aangeboden om de volledige lijst met afbeeldingen over te slaan.

Op pagina https://capelleaandenijssel.fileflow.nl/ wordt een afbeelding na tweemaal klikken geopend in een voorbeeldvenster. In dit venster komt de toetsenbordfocus tweemaal terecht op onzichtbare interactieve elementen: na de sluitknop (X) en na de knop met een pijl (“Volgende item”). Zorg ervoor dat interactieve elementen die niet zichtbaar zijn, niet focusbaar zijn. Anders kunnen toetsenbordgebruikers deze per ongeluk activeren.

Uitkomst: Onvoldoende

Bevindingen: Wanneer pagina https://capelleaandenijssel.fileflow.nl/settings/profile op een klein scherm wordt bekeken, fungeren afbeeldingen met pictogrammen voor profiel, tag en terug als links. Deze afbeeldingen hebben echter geen tekstalternatief, waardoor zij niet beschikbaar zijn voor screenreaders. Daardoor hebben deze links geen inhoud en is het onduidelijk naar welke bestemming de links verwijzen. Dit probleem is gerelateerd aan succescriterium 4.1.2, want de links hebben hierdoor ook geen toegankelijke naam. Dit kan worden opgelost door een tekstalternatief toe te voegen aan de afbeeldingen of door een aria-label toe te voegen aan het a-element. Andere oplossingen zijn mogelijk.
Dit komt ook voor op pagina’s https://capelleaandenijssel.fileflow.nl/settings/tags en https://capelleaandenijssel.fileflow.nl/settings/two_factor.

Uitkomst: Onvoldoende

Bevindingen: De volgende pagina’s verschijnen niet in de zoekresultaten via de zoekbalk: https://capelleaandenijssel.fileflow.nl/settings/profile, https://capelleaandenijssel.fileflow.nl/privacy_statement en andere. Er is maar één manier om de genoemde pagina’s te vinden op de website, en dat is via een link op een andere pagina. Alle pagina’s die op de website staan moeten op meerdere manieren gevonden kunnen worden. Dat mag via een zoekveld, een sitemap of een inhoudsopgave.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://capelleaandenijssel.fileflow.nl/ hebben meerdere klikbare afbeeldingen van hetzelfde evenement dezelfde naam, bijvoorbeeld “JPG Ondertekening Zorg- en Veiligheidskamer Capelle Bestuur en organisatie”. Elke klikbare afbeelding moet een unieke en beschrijvende naam hebben. De afbeeldingen kunnen bijvoorbeeld van elkaar worden onderscheiden door een toevoeging zoals “JPG Ondertekening Zorg- en Veiligheidskamer Capelle Bestuur en organisatie Foto 1”.

Wanneer op pagina https://capelleaandenijssel.fileflow.nl/ meerdere filters zijn geselecteerd, worden deze bovenaan de pagina weergegeven met X-knoppen ernaast. Deze knoppen hebben allemaal dezelfde toegankelijke naam “Filter verwijderen”, terwijl zij verschillende functies uitvoeren, namelijk het verwijderen van verschillende filters. Je kunt met deze knoppen een andere actie uitvoeren. Dit kan verwarrend zijn voor bezoekers met een schermlezer. Het is niet duidelijk welke actie elke knop uitvoert. Zorg dat de tekst past bij de actie van de knop, zodat knoppen met verschillende functies ook verschillende knopteksten hebben.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://capelleaandenijssel.fileflow.nl/ is de toetsenbordfocus niet zichtbaar op de volgende elementen: de filterknop “Filters openen” naast het zoekveld en de knop voor het wisselen van weergave (“Raster-/lijstschakelaar”) naast de knop “Sortering”. De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden die met het toetsenbord focus kunnen krijgen. Bezoekers die met het toetsenbord navigeren moeten goed kunnen zien op welke plek van de pagina zij zich bevinden. Implementeer een aangepaste focusindicator die voldoet aan de toegankelijkheidsrichtlijnen (voldoende contrast en een duidelijke visuele aanduiding).
Hetzelfde probleem komt ook voor op de pagina's https://capelleaandenijssel.fileflow.nl/settings/profile en https://capelleaandenijssel.fileflow.nl/users/sign_in bij de knoppen met een oogpictogram (“Show password”).

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Bovenaan de pagina https://capelleaandenijssel.fileflow.nl/ toont het logo de tekst “gemeente Capelle aan den IJssel”. De toegankelijke naam van deze link is “home”, zoals ingesteld via het aria-label-attribuut. De toegankelijke naam van de link is dus niet hetzelfde als de zichtbare tekst in het logo. Daardoor werkt de link niet goed als deze met een stemgestuurd systeem wordt geactiveerd. Daarvoor spreekt de bezoeker de tekst uit die zichtbaar is in het logo. Als de toegankelijke naam anders is, zal het systeem de link niet herkennen. Zorg daarom dat de tekst die in het logo zichtbaar is voorkomt in de toegankelijke naam, het liefst vooraan. Voorzie het logo van een beschrijvend alt-attribuut (zie succescriterium 1.1.1) en verwijder het aria-label van het a-element.

Op https://capelleaandenijssel.fileflow.nl/settings/two_factor bevat een invoerveld de placeholdertekst “Verificatiecode”, terwijl de toegankelijke naam is ingesteld op “Tweestapsverificatie inschakelen”. De zichtbare tekst van een interactief element mag niet te veel afwijken van de toegankelijke naam van het element. Als de zichtbare tekst niet voorkomt in de toegankelijke naam, kan het element niet met spraak worden bediend. De commando’s die de bezoeker uitspreekt door de zichtbare tekst voor te lezen, zullen het element dan niet activeren. De zichtbare label “Tweestapsverificatie inschakelen” is wel aanwezig op de pagina, maar staat te ver van het invoerveld. Plaats de zichtbare label boven het invoerveld.
Let op: voor dit succescriterium mag ook de toegankelijke naam van het invoerveld aangepast worden zodat deze overeenkomt met de placeholdertekst, maar voor succescriterium 3.3.2 is een placeholder niet voldoende.

Op pagina https://capelleaandenijssel.fileflow.nl/settings/tags hebben de links in de paginering de zichtbare tekst “Vorige” en “Volgende”. Deze teksten zijn echter niet opgenomen in de toegankelijke namen van de links, die via aria-labels zijn ingesteld als “Previous page” en “Next page”. Als de zichtbare tekst van een link niet voorkomt in de toegankelijke naam, kan de link niet met spraakbediening worden bediend. De commando’s die de bezoeker uitspreekt door de tekst van de link voor te lezen, zullen de link dan niet activeren. Dit kan opgelost worden door de aria-labels te verwijderen of door de waardes van deze aria-labels overeen te laten komen met de zichtbare tekst “Vorige” en “Volgende”, of aangevuld met "pagina": “Vorige pagina” en “Volgende pagina”.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://capelleaandenijssel.fileflow.nl/settings/profile zijn twee knoppen met een oogpictogram aanwezig. Deze knoppen hebben aria-label-attributen met Engelstalige tekst: “Show password”. Deze labels worden voorgelezen door schermlezers, volgens de uitspraakregels van de primaire taal van de pagina (in dit geval Nederlands). Vertaal de teksten van de aria-labels naar het Nederlands.
Een vergelijkbaar probleem doet zich voor op de pagina https://capelleaandenijssel.fileflow.nl/settings/tags bij de pijlknop naast het zoekveld (“Show suggestions”) en bij de pagineringslinks met toegankelijke namen zoals “Page 1”, “Page 2”, “Next page” en andere.

Wanneer op pagina https://capelleaandenijssel.fileflow.nl/, in de aanvullende filters de optie “Gemaakt op – Aangepast” is geselecteerd, wordt een kalender weergegeven. Deze kalender is volledig in het Engels. Vertaal de kalender naar het Nederlands.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://capelleaandenijssel.fileflow.nl/settings/profile is een formulier aanwezig. De invoervelden daarin hebben wel placeholders, maar missen permanente labels. Invoervelden moeten een label hebben dat altijd zichtbaar is. Dat kan een tekst zijn of een afbeelding (icoon). Een placeholder-tekst kan niet als label dienen, omdat deze tekst verdwijnt als de bezoeker begint te typen. Een invoerveld zonder zichtbaar label kan mensen in de war brengen, omdat ze niet weten wat ze moeten invullen. Voeg een label toe in de vorm van een tekst of een icoon.
Dit probleem doet zich ook voor bij het invoerveld op pagina's https://capelleaandenijssel.fileflow.nl/settings/two_factor en https://capelleaandenijssel.fileflow.nl/users/sign_in.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://capelleaandenijssel.fileflow.nl/ bevinden zich in het onderdeel “Eigenschappen” na het selecteren van een afbeelding de knoppen “Toestemmings­formulieren”, “Gerelateerde bestanden” en “Bestandsinformatie”. Deze openen dialoogvensters, maar missen zowel een correcte rol als een toegankelijke naam. Schermlezers kunnen hierdoor niet doorgeven dat het om een dialoogvenster gaat, en wat de inhoud ervan is. Dit kan opgelost worden door twee attributen toe te voegen aan het dialoogvenster: een aria-label met een duidelijke beschrijving van de inhoud (aria-label="Beschrijving van de inhoud") of een aria-describedby en role="dialog".
Hetzelfde probleem met dialoogvensters doet zich voor wanneer een afbeelding tweemaal wordt aangeklikt en de voorbeeldweergave wordt geopend.

Op pagina https://capelleaandenijssel.fileflow.nl/ staat naast het zoekveld een dialoogvenster met filteropties. Wanneer een filteroptie wordt geselecteerd, verschijnt deze bovenaan het dialoogvenster met een X-knop ernaast. Deze knop heeft geen toegankelijke naam, waardoor screenreaders de functie ervan niet aan gebruikers kunnen overbrengen. Er zijn meerdere oplossingen om deze knop een naam te geven, bijvoorbeeld via een aria-label “Filter verwijderen”.

Wanneer pagina https://capelleaandenijssel.fileflow.nl/settings/profile op een klein scherm wordt bekeken, fungeren afbeeldingen met pictogrammen voor profiel, tag en terug als links, maar missen zij toegankelijke namen. Hierdoor is voor gebruikers van een schermlezer onduidelijk wat de bestemming of de functie van de links is. Dit probleem hangt ook samen met succescriterium 2.4.4, omdat de doelen van de links niet duidelijk zijn.
Dit probleem is eveneens aanwezig op pagina’s https://capelleaandenijssel.fileflow.nl/settings/tags en https://capelleaandenijssel.fileflow.nl/settings/two_factor.

Uitkomst: Onvoldoende

Bevindingen: Op https://capelleaandenijssel.fileflow.nl/ wijzigen filters de zoekresultaten. Wanneer er geen resultaten worden gevonden, verschijnt zonder de pagina te herladen de melding “Geen resultaten… Heb je al bestanden geüpload? Misschien kun je een andere categorie of filter proberen”. Deze melding is een statusmelding, maar wordt niet aangekondigd door screenreaders. Dat moet wel gebeuren. Deze melding is namelijk een statusbericht. Statusberichten moeten automatisch voorgelezen worden door schermlezers zodra ze verschijnen of veranderen, maar de code die dit mogelijk maakt is nog niet toegevoegd. Dit kan opgelost worden door aria-live-attribuut aan de melding toe te voegen.

Op pagina https://capelleaandenijssel.fileflow.nl/settings/two_factor is een formulier aanwezig. Wanneer het invoerveld met een onjuiste waarde wordt verzonden, verschijnt de foutmelding “Ongeldige verificatiecode”, maar deze melding wordt niet aangekondigd door een screenreader. Als de foutmelding geen toetsenbordfocus krijgt op het moment dat deze verschijnt, krijgen mensen die blind zijn geen melding van hun schermlezer. Voeg daarom aria-live="polite" aan de melding toe. Dan wordt de melding automatisch voorgelezen zodra deze verschijnt.
Een vergelijkbaar probleem doet zich voor op pagina’s https://capelleaandenijssel.fileflow.nl/settings/tags en https://capelleaandenijssel.fileflow.nl/settings/profile.