Rapport:
Audit digitale toegankelijkheid website Bieb to bieb

Uitkomst: Onvoldoende

Bevindingen: Op pagina biebtobieb.nl/do/login staat een logo met zichtbare tekst “BiebtoBieb samen beter blijven”. De alt-tekst van deze afbeelding is “Logo BiebtoBieb”. Het tweede deel van de tekst ontbreekt. Geef een blinde bezoeker dezelfde informatie door het tweede deel van de tekst toe te voegen.

Als de website bekeken wordt op een klein scherm, verandert het hoofdmenu in een knop met twee zwarte bolletjes. Deze knop staat rechtsboven de pagina en opent het mobiele menu. Deze afbeelding heeft een tekstalternatief “Logo Biebtobieb”. Dit is geen correcte beschrijving van de afbeelding en de functie van deze knop. Verander deze tekst in “Open menu” / ”Sluit menu”. Zie biebtobieb.nl/do/portal.

Op pagina biebtobieb.nl/do/termsconditionsreadh staat het logo van biebtobieb.nl. Het alt-attribuut ontbreekt op deze afbeelding. Bij een afbeelding zonder alt-attribuut wordt een bestandsnaam voorgelezen. Zorg voor een alt-attribuut.

Op pagina biebtobieb.nl/do/page?id=296840-70616765 staan in de linker zijkolom menu-items met een icoontje van een document. Dit zijn decoratieve icoontjes, toch zijn ze voorzien van role=”img” en aria-label=”pagina”. Nu wordt onnodig 23 keer “pagina” voorgelezen. Om dit icoontje voor hulpsoftware te verbergen, verwijder het aria-label en vervang role=”img” door role=”presentation”. Dit komt ook op pagina biebtobieb.nl/do/search?id=24299-737461727470616765&search_and=netwerk&command=search voor. Elk item in de filters dat een icoontje heeft, wordt twee keer voorgelezen.

Op pagina www.biebtobieb.nl/do/shortcutselect staan keuzevakjes om je voorkeuren aan te geven. Elk keuzevakje heeft een label met een afbeelding van een ster en wat tekst. De decoratieve afbeelding is voorzien van role=”img”. Deze code zorgt ervoor dat de afbeelding zichtbaar wordt voor hulpsoftware. Er is een aria-label aan de afbeelding gegeven met tekst “Statusupdate”. Deze tekst wordt nu 50 keer voorgelezen. Daarnaast heeft elke afbeelding een title-attribuut die dezelfde tekst herhaalt als de zichtbare tekst van het label. Vervang role=”img” door role=”presentation”, verwijder het aria-label en het titel-attribuut. Deze iconen met “Statusupdate” komen ook in de berichten voor. Zie biebtobieb.nl/do/startpage?id=4367-737461727470616765.

In de linkerkolom op pagina biebtobieb.nl/do/startpage?id=4367-737461727470616765 staat een foto van een medewerker. De alternatieve tekst luidt: “Paul”. Onder de afbeelding staat “Levien den B”. Dit is verwarrend. Pas één van de twee aan.

In het pdf-document “Vacature beschrijving” staat een logo van Biebtobieb. Deze afbeelding heeft geen tekstalternatief. Zorg voor een tekstalternatief waar alle zichtbare tekst in voorkomt.
Zie biebtobieb.nl/do/document?id=1483928-646f63756d656e74.

In het pdf-document “Startrapportage praktijkonderwijs” staan 31 afbeeldingen die alternatieve teksten missen. Sommige afbeeldingen zijn duidelijk decoratief. Ze moeten als artefacts worden aangemerkt. Andere afbeeldingen zijn grafieken en afbeeldingen met tekst erop die een tekstalternatief nodig hebben. Zie www.biebtobieb.nl/do/document.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina biebtobieb.nl/do/page?id=296840-70616765 staat een video met een automatisch gegenereerde ondertiteling. In deze ondertiteling ontbreken leestekens en niet alle tekst overeenkomt met de gesproken tekst. Bijvoorbeeld, op 0:25 staat in de ondertiteling “om een document aan een mat toe te voegen” in plaats van “aan een map”. Zorg voor een correcte ondertiteling.

Uitkomst: Onvoldoende

Bevindingen: Op pagina biebtobieb.nl/do/page?id=296840-70616765 staat een video. De enige manier om te zien dat deze video afkomstig is van Biebtobieb is door het gebruik van het logo op de eindtitel. Dit logo staat daar om aan te geven wie verantwoordelijk is voor deze video, deze informatie blijkt niet uit enige andere informatie in deze video. Voor die informatie moet een alternatief komen. Dit kan in twee verschillende vormen. Een media-alternatief is een uitgeschreven tekst die een alternatief is voor alle informatie in de video, dus alles uit beeld (inclusief het logo) en geluid. Een audiodescriptie is een aanvulling op het normale geluid, zodat de ontbrekende visuele informatie ook als geluid beschikbaar is. Let op: om te voldoen aan succescriterium 1.2.5: Audiodescriptie (vooraf opgenomen) moet er sowieso een audiodescriptie toegevoegd worden.

De video op pagina biebtobieb.nl/do/note?id=521640-6e6f7465 was op het moment van het onderzoek niet beschikbaar.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina biebtobieb.nl/do/page?id=296840-70616765 staat een video. De enige manier om te zien dat deze video afkomstig is van Biebtobieb is door het gebruik van het logo op de eindtitel. Dit logo staat daar om aan te geven wie verantwoordelijk is voor deze video, deze informatie blijkt niet uit enige andere informatie in deze video. Voor die informatie moet een alternatief komen. Dit succescriterium is strenger dan 1.2.3 en vraagt om een audiodescriptie.

De video op pagina biebtobieb.nl/do/note?id=521640-6e6f7465 was op het moment van het onderzoek niet beschikbaar.

Uitkomst: Onvoldoende

Bevindingen: Op pagina ​​biebtobieb.nl/do/shortcutselect?id=296840-70616765 verschijnt een tabbar onderaan als de pagina bekeken wordt op een klein scherm. In deze tabbar heeft het geselecteerde item een andere kleur en is vetgedrukt. Een ziende bezoeker ziet op welke pagina hij zich bevindt. Deze informatie moet ook programmatisch worden bepaald zodat het kan worden voorgelezen aan een blinde bezoeker. Dit kan worden opgelost door aria-current=”page” aan het geselecteerde item toe te voegen. Deze bevinding geldt ook voor de actieve link in het hoofdmenu en de actieve link in de paginering. Voor de laatste zie www.biebtobieb.nl/do/membersreadonecolumn. Deze informatie moet ook worden voorgelezen.

Op pagina biebtobieb.nl/do/termsconditionsread zijn visueel veel tussenkopjes te onderscheiden van de gewone tekst. In de HTML-code is alleen de eerste kop opgemaakt als koptekst. Dit betekent dat een blinde gebruiker die een lijst met koppen genereert om de inhoud van de pagina te scannen geen informatie krijgt. Zet de vetgedrukte teksten om in kop-elementen (h1 - h6). Dit geldt ook voor de koppen pdf-document “Vacature beschrijving”. Alle kopteksten zijn opgemaakt met alinea-elementen. Zie biebtobieb.nl/do/document?id=1483928-646f63756d656e74.

Onder het kopje “Deelnemers” op pagina biebtobieb.nl/do/membersreadonecolumn staat een zoekbalk. Naast de zoekbalk staat een knop “Filteropties”. Deze knop opent een extra sectie met filters. Boven deze filters staat een kopje “Filteren”. Deze tekst is niet als koptekst opgemaakt.

Op pagina biebtobieb.nl/do/page?id=1395945-70616765 zijn de tussenkopjes opgemaakt met een strong-element in plaats van kop-elementen. Daarnaast wordt hier het em-element gebruikt voor opmaak van hele alinea’s. Het em-element is bedoeld om gesproken nadruk te geven aan een woord of korte zin. Gebruik het daarom nooit puur voor opmaak.

In het hoofdmenu onder de knop met een vraagteken staat een extra venster. De laatste twee items “Bookmarks” en “iOS/Android” worden niet door voorleessoftware voorlezen. Deze menu-items zijn verborgen voor hulpsoftware met aria-hidden=”true”. Zorg ervoor dat een blinde bezoeker dezelfde informatie krijgt voorgelezen. Zie biebtobieb.nl/do/portal.

In het hoofdmenu staat een menu-item met een dropdown (“Groepen”). De voorleessoftware leest niet voor dat hier een dropdown aanwezig is. Zorg ervoor dat alle informatie die via visuele presentatie is gegeven ook in de HTML-code terugkomt. Zie biebtobieb.nl/do/portal.

Op pagina biebtobieb.nl/do/termsconditionsread zijn opsommingen niet correct opgemaakt. Hulpsoftware kan niet aan een blinde gebruiker voorlezen dat hier een lijst staat met zoveel punten. Zet alle lijsten om in de juiste elementen (ul en ol).

Op pagina biebtobieb.nl/do/wallmessage?id=1454408-77616c6c6d657373616765 staat een opsomming die alleen visueel te onderscheiden is. Deze lijst is opgemaakt met mintekens en inspringen naar een nieuwe regel met Enter toets. Hulpsoftware kan niet aan een blinde gebruiker voorlezen dat hier een lijst staat met zoveel punten. Zorg voor een correcte opmaak van de lijsten.

Op pagina biebtobieb.nl/do/page?id=296840-70616765 staat een kopje “Trefwoorden”. Onder deze kop staat geen zichtbare tekst. Een kop moet altijd content onder zich hebben. Merkwaardig is dat er in de HTML-code tekst aanwezig is: “Er zijn geen trefwoorden”. Deze tekst is beschikbaar voor een screenreader en verborgen voor ziende bezoekers. Geef alle bezoekers dezelfde informatie.

Op pagina biebtobieb.nl/do/membersreadonecolumn staat een select-element met een label “Sorteren:”. Als een andere keuze wordt gemaakt, wordt het niet voorgelezen door de voorleessoftware.

Op pagina biebtobieb.nl/do/startpage?id=4367-737461727470616765 staan berichten. De visuele presentatie verschilt van wat er wordt voorgelezen omdat de kop van het bericht twee keer wordt voorgelezen. Een van deze teksten is verborgen van het scherm, maar zichtbaar voor de voorleessoftware.

Op pagina biebtobieb.nl/do/startpage?id=4367-737461727470616765 staan berichten. Elk bericht heeft een knop met drie puntjes. Deze knop opent een extra venster met een keuzevak met een label “Notificaties ontvangen”. Dit element ziet eruit als een keuzevak (een checkbox), maar dat is het niet. Een bezoeker verwacht bij het zien van een checkbox dat hij het met de spatiebalk van het toetsenbord kan bedienen. Dit is verwarrend omdat de visuele presentatie van het element niet overeenkomt met de codering van het element in de HTML.

Als een bezoeker notificaties heeft ontvangen, verschijnt bovenaan de pagina een cijfer naast het icoontje van notificaties. De voorleessoftware leest dit zo voor: “notificaties een”. Het is niet duidelijk wat dat betekent. Voeg daarom extra tekst toe.

Op pagina biebtobieb.nl/do/user?id=43660-75736572 staan in de rechter zijkolom werktijden. De naam van een werkdag is niet gebonden met de drie vakjes die ochtend, middag en avond betekenen. Deze elementen vormen samen een groep en moeten in de HTML-code ook als groep worden gepresenteerd. Een van de mogelijke oplossingen is het gebruik van fieldset en legend in plaats van een lijstelement.

In het pdf-document “Startrapportage praktijkonderwijs” komt visuele presentatie van de koppen niet overeen met de structuur van elementen in de code. Zo is het titel op blad een is opgemaakt met alinea-elementen, de koppen van niveau 1 staan eronder, maar zijn leeg.
Op vele pagina’s komen lijsten voor die alleen visueel te onderscheiden zijn. In de code zijn deze teksten opgemaakt met alinea-elementen. Dit komt op veel pagina’s voor.
Zie biebtobieb.nl/do/document?id=1026164-646f63756d656e74.

Het volgende is slechts een advies, maar kan de toegankelijkheid van de website vergroten. Op een klein scherm verandert de lay-out van de website. De pagina begint nu met een kop van niveau 3 “Start”. Dit is een van de menu-items uit het hoofdmenu. Het kan verwarrend zijn voor een blinde gebruiker om meteen een kop 3 te horen. Verwijder het kop-element. Zie biebtobieb.nl/do/portal.

Uitkomst: Onvoldoende

Bevindingen: In het pdf-document “Startrapportage praktijkonderwijs” is de focusvolgorde niet logisch. Wanneer de bezoeker door dit document met een tabtoets van het toetsenbord navigeert, springt de focus van pagina naar pagina. De informatie wordt niet in de logische, visuele volgorde voorgelezen. Zie biebtobieb.nl/do/document?id=1026164-646f63756d656e74.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina www.biebtobieb.nl/do/login ontbreekt de juiste waarde in het autocomplete attribuut op velden e-mail en wachtwoord. Dit attribuut zorgt ervoor dat browsers, maar ook hulpsoftware, ondersteuning kunnen geven bij het invullen van deze invoervelden. Dit kan door bijvoorbeeld de invoervelden al automatisch in te vullen. Bij het invoerveld voor e-mail moet bijvoorbeeld autocomplete=”email” gebruikt worden.
Op de volgende pagina is meer informatie te vinden over de toepassing van dit attribuut en welke waardes verplicht zijn om te gebruiken. Zie: www.w3.org/TR/WCAG21/.

Uitkomst: Onvoldoende

Bevindingen: Links in lopende tekst zijn alleen in kleur te onderscheiden. Tekstkleur van een link is HEX #0066CC; de tekstkleur van de tekst is HEX #303339. Het kleurcontrast tussen deze twee kleuren is 2,3:1. Mensen die kleurenblind of slechtziend zijn, kunnen problemen hebben met het onderscheiden van kleuren of bepaalde kleuren zelfs helemaal niet zien. Daarom is het belangrijk om bij het overdragen van informatie niet alleen kleur te gebruiken, maar bijvoorbeeld ook (naast kleur) een andere vorm of tekst. Om aan dit succescriterium te voldoen, moeten deze links aan twee voorwaarden voldoen. Ten eerste moet het contrastverschil tussen de link en de omringende tekst minimaal 3,0:1 zijn. Ten tweede moet de link veranderen als de muisaanwijzer op de link staat, zodat duidelijk is dat dit element interactief is. Dit kan bijvoorbeeld door de link te onderstrepen als de muisaanwijzer erop staat. Dat laatste gebeurt al. Nu moet het contrast worden verbeterd. Dit komt op alle pagina’s voor, bijvoorbeeld biebtobieb.nl/do/termsconditionsread, biebtobieb.nl/do/domainnewsread en biebtobieb.nl/do/wallmessage?id=1454408-77616c6c6d657373616765. Dit geldt ook voor het pdf-document “Vacature beschrijving”. Zie biebtobieb.nl/do/document?id=1483928-646f63756d656e74 .

Op pagina biebtobieb.nl/do/shortcutselect?id=296840-70616765 als de pagina op een klein scherm wordt bekeken, verandert de lay-out. Aan de linker bovenkant van de pagina komt een knop in beeld met “Helpdesk community”. De focus op deze knop is alleen te zien als een verandering van achtergrondkleur. Dit is onvoldoende.

Op pagina biebtobieb.nl/do/user?id=43660-75736572 wordt in de rechter zijkolom kleur gebruikt om informatie te geven. Het gaat om de vakjes die werktijden betekenen. Mensen die kleurenblind of slechtziend zijn, kunnen problemen hebben met het onderscheiden van kleuren of bepaalde kleuren zelfs helemaal niet zien. Daarom is het belangrijk om bij het overdragen van informatie niet alleen kleur te gebruiken, maar bijvoorbeeld ook (naast kleur) een andere vorm of tekst.

In het pdf-document “Startrapportage praktijkonderwijs” wordt kleur gebruikt om informatie te geven. Vanaf pagina zes staan in dit document grafieken. De lijnen en vlakken (in de diagrammen) in de grafieken worden grotendeels enkel onderscheiden door kleur. Dit is ook van toepassing bij de bijhorende legenda’s. Het is beter om naast kleur ook gebruik te maken van andere manieren om onderscheid te maken. Denk hierbij aan bijvoorbeeld onderbroken lijnen. Omdat er nu geen volwaardig tekstalternatief is, is het noodzakelijk dat de inhoud in de grafieken voldoende te onderscheiden zijn.
Zie biebtobieb.nl/do/document?id=1026164-646f63756d656e74.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Oranje kleur (#FF7320) is een onderdeel van de huisstijl. Wanneer deze kleur gebruikt wordt in tekst, zorgt dit voor onvoldoende kleurcontrast. In combinatie met wit is het kleurcontrast 2,7:1, met lichtgrijs 2,4:1. Deze kleur komt op alle pagina’s voor. Voor normale tekst moet het kleurcontrast minimaal 4,5:1 zijn. Voor grote en grote en dikgedrukte tekst geldt een minimum van 3:1. Dat betekent dat deze kleur niet in teksten, links, menu-items of koppen gebruikt mag worden. Ook niet in hover effecten op links en buttons of als achtergrond in knoppen met witte tekst erop. Gebruik deze kleur alleen in decoratieve elementen op de website. Zie bijvoorbeeld een kop op oranje achtergrond op biebtobieb.nl/do/page?id=296840-70616765, een oranje knop met witte tekst op pagina biebtobieb.nl/do/login of zie oranje kopjes op elke pagina.

Onderaan de pagina biebtobieb.nl/do/login staan donkerblauw en grijze teksten. De achtergrond voor deze teksten is een afbeelding waar veel donkerkleuren voorkomen. Het kleurcontrast van de blauwe tekst (HEX #0066CC) is 2,8:1 en van de grijze tekst (HEX #A7ABB2) 2,0:1.

Op de homepagina in de sectie “uitgelicht” staan witte teksten op foto’s. Op sommige plekken is het contrast gemeten van 1,9:1. Het label “Uitgelicht” heeft witte tekst op een groene achtergrond (HEX #4EBB44): 2,5:1. Zie biebtobieb.nl/do/portal.

Op de homepagina staat tekst “Geen evenementen om te laten zien “. De tekstkleur is grijs HEX (#A2AFB5) en heeft het kleurcontrast van 2,2:1. Dit moet minimaal 4,5:1 zijn. Zie biebtobieb.nl/do/portal.

In de footer staat op alle pagina’s achter inlog grijze tekst “Biebtobieb: Gebruikersvoorwaarden”. Het kleurcontrast voldoet niet aan de minimale contrast eisen. Er wordt momenteel 2,3:1 en 4,2:1 gemeten. Beide woorden moeten minimaal 4,5:1 hebben. Zie bijvoorbeeld biebtobieb.nl/do/shortcutselect?id=296840-70616765.

Op pagina biebtobieb.nl/do/termsconditionsreadh staat een grijze tekst “404 not found” (HEX #BBBCBE). Het kleurcontrast is hier 1,9:1.

Op vele links is een blauwe kleur (HEX #0288D1) gebruikt die onvoldoende kleurcontrast heeft met een witte achtergrond van de pagina, namelijk 3,9:1. Zie bijvoorbeeld biebtobieb.nl/do/termsconditionsreadh.

In de linkerkolom op pagina biebtobieb.nl/do/portal staan berichten waarop gereageerd kan worden. De knop “Regeren” heeft een witte achtergrond, met grijze tekst (HEX #829198). Het kleurcontrast is 3,1:1. Voor deze tekstgrootte geldt dat het kleurcontrast minimaal 4,5:1 moet zijn.

De placeholdertekst in de invoerelementen en tekstvakken heeft kleurcontrast van 3,1:1. Zie bijvoorbeeld een tekstvak onderaan de pagina biebtobieb.nl/do/page?id=296840-70616765. Dit moet minimaal 4,5:1 zijn.

De groene achtergrond (HEX #3C8E33) in koppen met witte tekst erop voldoet niet aan de minimale kleurcontrast waarden. Er wordt momenteel 4,1:1 gemeten. Zie bijvoorbeeld de knop “Zoeken” op biebtobieb.nl/do/shortcutselect?id=296840-70616765. Deze combinatie komt vaker op de website voor.

De knop “Annuleren” op biebtobieb.nl/do/shortcutselect?id=296840-70616765 heeft een grijze tekstkleur (HEX ​​#6B7C86) en staat op een grijze achtergrond. Het kleurcontrast is 3,8:1. Dit moet minimaal 4,5:1 zijn.

De foutmelding die verschijnt als een leeg tekstvak wordt verstuurd heeft een rode tekstkleur HEX (#FF1918). Het kleurcontrast is 3,9:1. Dit moet minimaal 4,5:1 zijn. Zie biebtobieb.nl/do/page?id=296840-70616765.

Onder het kopje “Meest gelezen” op pagina biebtobieb.nl/do/domainnewsread staan artikelen met cijfers 1 tot en met 5. De tekstkleur van de cijfers is grijs (HEX #A2AFB5), de achtergrond van de sectie is lichtgrijs (#F2F1F4). Het kleurcontrast is 2,0:1. Dit moet minimaal 3,0: zijn.

Als een bezoeker notificaties heeft ontvangen, verschijnt bovenaan de pagina een cijfer naast het icoontje van notificaties. Het rode blokje (HEX #FF1718) en de witte tekst van het cijfer hebben kleurcontrast van 3,9:1. Dit moet minimaal 4,5:1 zijn. Zie biebtobieb.nl/do/portal.

Op pagina biebtobieb.nl/do/questionwrite?parent=24283-6f6666696365 staat een label “Ask this question to”. Het woordje “optional” is grijs (HEX #C2CBD0) en heeft de contrastwaarde van 1,5:1. Dit moet minimaal 4,5:1 zijn. Zie ook grijze teksten op pagina biebtobieb.nl/do/user?id=43660-75736572.

In het pdf-document “Startrapportage praktijkonderwijs” wordt oranje kleur (HEX #FFAD1B) gebruikt als achtergrond voor grijze teksten (HEX #53747F). Het kleurcontrast is onvoldoende, namelijk 2,7:1. Zie het eerste blad van het document. Dit komt op meerdere plekken voor. Op pagina 3 staat een zijkolom met lichtgrijze tekst. Het kleurcontrast is 3,1:1. Dit moet minimaal 4,5:1 zijn. Op pagina 5, 9 en meer staan lichtblauwe links met kleurcontrast 2,6:1.
Zie biebtobieb.nl/do/document?id=1026164-646f63756d656e74.

Uitkomst: Onvoldoende

Bevindingen: Op pagina biebtobieb.nl/do/termsconditionsreadh is “user-scalable=no” gebruikt in de meta tag. De gebruikers met visuele beperkingen kunnen veel moeite hebben om de inhoud van deze pagina's te lezen op mobiele apparaten. Verwijder deze code.

Uitkomst: Onvoldoende

Bevindingen: In het pdf-document “Startrapportage praktijkonderwijs” staan vele afbeeldingen met tekst geëmbed in de afbeelding. Deze teksten zijn niet aan te passen aan de behoeftes van de bezoekers. Plaats deze teksten als gewone teksten in het document. Zie biebtobieb.nl/do/document?id=1026164-646f63756d656e74.

Uitkomst: Onvoldoende

Bevindingen: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% is de homepagina niet meer leesbaar. De header en de footer zijn vastgemaakt in een bepaalde positie en bedekken een groot deel van het scherm. Maak ze kleiner zodat er meer ruimte overblijft op het scherm om de pagina te lezen. Zie biebtobieb.nl/do/portal.

Als de pagina biebtobieb.nl/do/membersreadonecolumn wordt bekeken bij een schermbreedte van 1280 pixels en 400% ingezoomd, dan verdwijnt een gedeelte van de content: de namen van medewerkers. Dit wordt gezien als verlies van content. De informatie ontbreekt doordat tekst buiten kaders valt en daardoor niet meer leesbaar is.

Op pagina biebtobieb.nl/do/contactdetails?id=22220-636f6e7461637464657461696c73 is de eerste kop van de pagina niet meer leesbaar als 400% wordt ingezoomd.

Uitkomst: Onvoldoende

Bevindingen: Op pagina biebtobieb.nl/do/login staan invoervelden met grijze rand (HEX #D1D8DE). Het kleurcontrast is 1,4:1. Deze randkleur is op alle invoervelden van de website gebruikt. In combinatie met een witte achtergrond is het kleurcontrast 1,4:1. In combinatie met een grijze achtergrond: 1,1:1. Zie bijvoorbeeld widgets op de homepagina.

In de widgets op de homepagina verschijnen knopjes met een kruisje om een widget te verwijderen. Dit gebeurt als de bezoeker zijn muis over een widget beweegt. De kleur van deze knopjes (HEX #C0C0C3) voldoet niet met een contrastwaarde van 1,8:1. Dit moet minimaal 3,0:1 zijn.

In de linkerkolom op pagina biebtobieb.nl/do/portal staan berichten waarop gereageerd kan worden. De knop “Regeren” heeft een witte achtergrond, een grijze rand (HEX #E5E9EC) en staat op een grijze achtergrond. Het kleurcontrast is 1,2:1. Dit moet minimaal 3,0:1 zijn.

Op pagina biebtobieb.nl/do/startpage?id=4367-737461727470616765 is het mogelijk om een groep te volgen. Als op de knop “Verlaten” wordt geklikt, opent een nieuw venster met “Groep verlaten?”. Dit venster kan worden afgesloten met een knop met een grijs kruisje (HEX #ADACAF). Het kleurcontrast is 2,3:1. Dit moet minimaal 3,0:1 zijn.

Uitkomst: Onvoldoende

Bevindingen: Op pagina biebtobieb.nl/do/membersreadonecolumn wanneer de tekstafstanden uit dit succescriterium worden toegepast, is niet alle tekst meer goed leesbaar. Persoonlijke gegevens van de medewerkers zijn niet meer leesbaar in de kaartjes die verschijnen als een bezoeker zijn muis over de foto’s beweegt.
Dit kan worden opgelost door containers in de lay-out te laten meegroeien met de tekst.

Op pagina biebtobieb.nl/do/contactdetails?id=22220-636f6e7461637464657461696c73 raken teksten van menu-items buiten beeld als tekstafstanden worden aangepast. Zorg ervoor dat deze teksten leesbaar blijven.

Uitkomst: Onvoldoende

Bevindingen: Op pagina biebtobieb.nl/do/membersreadonecolumn staan kaartjes met contactgegevens van de medewerkers. Er is geen mechanisme beschikbaar waarmee de aanvullende content kan worden gesloten zonder de aanwijzer hover of de toetsenbordfocus te verplaatsen. Met aanvullende content wordt bedoeld de extra vensters die in beeld komen waarin de contactgegevens staan. Deze vensters bedekken informatie die eronder staat en moeten daarom voldoen aan dit succescriterium. Zorg ervoor dat deze vensters met een Esc toets af te sluiten zijn.

Uitkomst: Onvoldoende

Bevindingen: Op de homepagina onder het hoofdmenu staan drie blokjes met uitgelichte artikelen. Elk artikel fungeert als een link naar een webpagina. De HTML-code van deze blokjes voldoet niet aan een aantal succescriteria. Onder 2.2.1 valt toetsenbord toegankelijkheid. Op de a-elementen is tabindex -1 gebruikt om deze elementen uit de focusvolgorde te halen. Met een tabtoets zijn deze links daardoor niet meer bereikbaar. Op de niet interactieve koppen die onder de links staan is een tabindex 0 gebruikt om ze juist met het tabtoets te kunnen bereiken. Deze code kan ontoegankelijk zijn voor hulpsoftware. Het advies is om tabindex te verwijderen en de koptekst in een link op te nemen. Hiermee wordt een bevinding onder succescriterium 2.4.4 opgelost. Zie biebtobieb.nl/do/portal.

In het mobiele menu kan de status niet met het toetsenbord worden geselecteerd.

Onderaan de homepagina staat een groene knop met “Widget” erop. Deze knop is niet met een toetsenbord te bereiken. Deze “Widget” knop opent een extra venster met een collectie van elementen om de pagina te bouwen. Al deze elementen zijn knoppen die alleen met een muis te bedienen zijn. Ze reageren niet op het toetsenbord. Ook op pagina biebtobieb.nl/do/startpage?id=4367-737461727470616765 staat een groene knop met “Vraag+” erop. Deze knop is niet met het toetsenbord te bedienen.

In de footer staat een knop om de taal te selecteren. Met het toetsenbord kan een verborgen venster met opties worden opengeklapt, achter de opties zijn niet met het toetsenbord te selecteren. Zie bijvoorbeeld biebtobieb.nl/do/membersreadonecolumn.

Op pagina biebtobieb.nl/do/page?id=296840-70616765 staan in de linker zijkolom menu-items met een pijltje. Dit pijltje geeft aan dat er verborgen items onder zitten. Met een muis kan deze sectie worden in- en uitgeklapt. Met een toetsenbord kan het niet. De bezoeker wordt meteen doorgestuurd naar de pagina waar het hoofditem naar linkt.

Op pagina biebtobieb.nl/do/shortcutselect?id=296840-70616765 staan keuzevakjes om je voorkeuren te selecteren. Wanneer de bezoeker met een toetsenbord zijn voorkeuren heeft aangegeven, verwacht hij dat de focus op een van de knoppen (“Bewaren” of “Annuleren”) landt. Deze knoppen zijn niet met het toetsenbord te bedienen. Dit geldt ook voor de groene knop “Zoeken” die boven de keuzevakjes staat.
Zorg ervoor dat alle interactieve elementen ook met het toetsenbord te activeren zijn.

Op pagina biebtobieb.nl/do/questionwrite?parent=24283-6f6666696365 staat een tekstbewerker. De rij knoppen om de tekst op te maken is niet beschikbaar voor bezoekers die de website met het toetsenbord navigeren. Zorg ervoor dat alle interactieve elementen met het toetsenbord te bedienen zijn.

Advies: in het mobile menu ontbreekt een sluitknop. Minder ervaren internetgebruikers kunnen niet weten dat je dit menu met een Esc toets kan afsluiten. Voeg daarom een sluitknop aan dit venster. Zie biebtobieb.nl/do/portal.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina biebtobieb.nl/do/startpage?id=4367-737461727470616765 staan berichten. Elk bericht heeft een knop met drie puntjes. Deze knop opent een extra venster met een keuzevak met label “Notificaties ontvangen”. Als de bezoeker de notificaties activeert, verschijnt een extra balk in de rechterboven hoek van de pagina met een melding. Deze melding blijft niet staan. Zorg ervoor dat alle informatie in beeld blijft staan totdat de bezoeker de melding zelf afsluit.

Het volgende kon tijdens het onderzoek niet worden getoetst en is daarom slechts een advies. Controleer of er tijdslimiet is ingesteld op pagina biebtobieb.nl/do/login. Belangrijk hier is om te controleren of de bezoeker een waarschuwing krijgt dat het tijdslimiet verloopt en de mogelijkheid om dit tijdslimiet te verlengen. Dit zijn de belangrijke voorwaarden van dit succescriterium.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: De paginatitel van biebtobieb.nl/do/user?id=43660-75736572 luidt “Biebtobieb”. Dit is een profielpagina van de medewerker. Zijn naam ontbreekt. Voeg de naam van de persoon toe om deze titel uniek te maken.

In het pdf-document “Vacature beschrijving” ontbreekt de titel van het document. Voeg een beschrijvende titel toe onder bestandseigenschappen.
Zie biebtobieb.nl/do/document?id=1483928-646f63756d656e74 . Dit geldt ook voor het tweede pdf-document “Startrapportage praktijkonderwijs”. Zie biebtobieb.nl/do/document?id=1026164-646f63756d656e74.

Uitkomst: Onvoldoende

Bevindingen: Op elke webpagina rechtsboven staat een rij met knoppen. De knop met een vergrootglas opent de zoekbalk. De focus landt netjes op het invoerveld, loopt vervolgens door de knop om te versturen en de knop om deze sectie af te sluiten, maar landt vervolgens niet op de knop met een vergrootglas. De focus gaat verder op de homepagina (de sectie met uitgelichte artikelen). De overige knoppen bovenaan de website worden overgeslagen. Het is de bedoeling dat de focus teruggaat naar het element dat de wijziging heeft getriggert. Dit gebeurt ook bij een knop met een vraagteken erop. Zie ook biebtobieb.nl/do/startpage?id=4367-737461727470616765 waar in elk bericht een knop staat die een extra venster opent met contactinformatie van een medewerker.

Als pagina biebtobieb.nl/do/shortcutselect?id=296840-70616765 op een klein scherm wordt bekeken, verandert de lay-out van de pagina. Aan de bovenkant wordt het hoofdmenu verborgen achter twee knoppen en aan de onderkant verschijnt een tabbar. Als de bezoeker met een tabtoets van boven naar onder navigeert, komt de focus op de skiplink en gaat vervolgens over de items in de tabbar aan de onderkant van de pagina. Dit is niet logisch. De focusvolgorde verschilt momenteel te veel van de visuele volgorde van de elementen. Zie biebtobieb.nl/do/shortcutselect?id=296840-70616765.

Op pagina biebtobieb.nl/do/shortcutselect?id=296840-70616765 staan knoppen die geen deel uitmaken van de focusvolgorde. Wanneer de bezoeker met een toetsenbord zijn voorkeuren heeft aangegeven, verwacht hij dat de focus op een van de knoppen (“Bewaren” of “Annuleren”) landt. Deze knoppen ontvangen geen focus. Dit geldt ook voor de groene knop “Zoeken” die boven de keuzevakjes staat.

Op pagina biebtobieb.nl/do/shortcutselect?id=296840-70616765 klopt de focusvolgorde niet in de tabs die onderaan de pagina verschijnen als de pagina op een klein scherm wordt bekeken. De focusvolgorde begint met een skiplink. Deze skiplink stuurt de bezoeker direct naar de content van de pagina. Na het doorlopen van de pagina verwacht de bezoeker in de tabbalk te landen, maar de focus begint weer bovenaan. Dit komt doordat de tabbalk in de HTML bovenaan de pagina staat, maar visueel is het vastgemaakt aan de onderkant van de pagina. Dit is verwarrend.

Uitkomst: Onvoldoende

Bevindingen: In de rechterbovenhoek van elke pagina staat een foto van de gebruiker. Deze foto dient als een link naar de profielpagina. Deze link heeft als toegankelijkheidsnaam “Account online”. Voor een blinde bezoeker is het niet duidelijk welk account bedoeld wordt. Voeg de naam van de persoon toe. Zie biebtobieb.nl/do/portal.

Op de homepagina onder het hoofdmenu staan drie blokjes met uitgelichte artikelen. Elk artikel fungeert als een link naar een webpagina. De HTML-code van deze blokjes voldoet niet aan een aantal succescriteria. Onder 2.4.4 valt een lege link. Elk blokje heeft een a-element zonder tekst of alternatief. Voor een blinde bezoeker die een lijst met links genereert, is het niet duidelijk waar deze links naar toe gaan. Zie biebtobieb.nl/do/portal.

Op de homepagina onder “Zoeken in innovatielab” staan links met afbeeldingen zonder tekstalternatief of linktekst. Het linkdoel is niet aangegeven. Zie biebtobieb.nl/do/portal.

De “Widget” knop onderaan de homepagina opent een extra venster waarin aan de rechterkant een sluitknop staat. Deze knop is gecodeerd als een link zonder linkdoel. Zie biebtobieb.nl/do/portal.

Op pagina biebtobieb.nl/do/membersreadonecolumn staat paginering. De cijfers die de pagina’s voorstellen zijn links met een onduidelijke linktekst: 1,2,3. Voeg extra tekst toe (bijvoorbeeld: pagina) om toe te lichten wat deze cijfers betekenen.

Op pagina biebtobieb.nl/do/termsconditionsreadh is het logo een link met een afbeelding zonder tekstalternatief. Deze link heeft geen linkdoel. Voeg alt-tekst toe die het doel van de link beschrijft.

Op pagina biebtobieb.nl/do/page?id=296840-70616765 staan in de linker zijkolom menu-items met een pijltje. Alle links hebben een aria-label gekregen met “Subpagina's uitgeklapt”. Dit zorgt voor een onduidelijk linkdoel. Zorg voor duidelijke en vooral unieke teksten.

Op pagina biebtobieb.nl/do/domainnewsread staan nieuwsberichten. Elk bericht bestaat uit een afbeelding en tekst (kop + alinea). De afbeelding is gecodeerd als een link met dezelfde bestemming als een link met kop en tekst ernaast. De link met een afbeelding heeft geen linkdoel. Voeg deze twee links samen zodat de koptekst als linkdoel kan dienen. Dat scheelt ook extra slagen op een toetsenbord om door de inhoud van deze pagina te navigeren.

Op pagina biebtobieb.nl/do/user?id=43660-75736572 staan links met dezelfde tekst “Klik om toe te voegen”. Als een blinde bezoeker een lijst met links genereert die dezelfde tekst hebben, is het niet meer duidelijk waar deze links naar toe gaan. Voeg een verborgen tekst toe om deze links een beter linkdoel te geven.

Uitkomst: Onvoldoende

Bevindingen: Voor elke pagina op de website moet een tweede manier aanwezig zijn om de pagina te vinden. Dit kan via zoeken, een sitemap, links op homepagina of links in de footer. Op de homepagina staat een zoekbalk. Pagina’s “Gerelateerde items” en “Gebruikersvoorwaarden” zijn niet via de zoekbalk te vinden. Dit kan voor meer pagina’s gelden.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In het mobiele menu als een extra venster met beschikbaarheid is geopend, na het doorlopen van de items, loopt de focus onder het schermpje over elementen die niet in beeld zijn. Zie biebtobieb.nl/do/portal.

Op een desktop weergave als het item “Groepen” is geopend is de focus niet zichtbaar op “Groepen”. Omdat de focus niet zichtbaar is, weet een bezoeker niet wanneer hij op Enter moet drukken om het venster af te sluiten. Dit gebeurt ook bij een knop met een vraagteken erop. Zie biebtobieb.nl/do/portal.

Op pagina biebtobieb.nl/do/shortcutselect?id=296840-70616765 staan keuzevakjes om je voorkeuren te selecteren. Wanneer de bezoeker met een toetsenbord zijn voorkeuren heeft aangegeven, verwacht hij dat de focus op een van de knoppen (“Bewaren” of “Annuleren”) landt. De focus springt naar de footer. Op deze knoppen zit een attribuut hidefocus=”true”. Verwijder deze code en zorg ervoor dat alle interactieve elementen focus hebben.

Op pagina biebtobieb.nl/do/shortcutselect?id=296840-70616765 staat een link “Helpdesk community”. Deze link is alleen zichtbaar op kleine schermen, niet op de desktop. Toch wordt deze tekst voorgelezen voor hulpsoftware. Zorg ervoor dat alleen zichtbare tekst wordt voorgelezen.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina biebtobieb.nl/do/page?id=296840-70616765 staan in de linker zijkolom menu-iitems met een pijltje. Dit pijltje geeft aan dat er verborgen items onder zitten. Met een muis kan deze sectie worden in- en uitgeklapt. Deze links zijn niet met stem te bedienen. Dit komt doordat zichtbare tekst niet overeenkomt met de toegankelijkheidsnaam van de link. Alle links hebben een aria-label gekregen met “Subpagina's uitgeklapt”. De zichtbare tekst luidt “Agenda”, “Documenten” etc. Vervang aria-label door een title-attribuut.

Op pagina biebtobieb.nl/do/startpage?id=4367-737461727470616765 staan berichten. Elk bericht heeft een knop met drie puntjes. Deze knop opent een extra venster met een keuzevak met label “Notificaties ontvangen”. Dit element is niet met stem te bedienen. Dit komt doordat de zichtbare tekst niet overeenkomt met de toegankelijkheidsnaam van dit element (“Je volgt dit item niet meer Notificaties ontvangen”).

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina biebtobieb.nl/do/termsconditionsreadh ontbreekt het lang-attribuut op de HTML. Zonder dit attribuut wordt de website voorgelezen met de uitspraakregels van de taal die op de computer van de bezoeker staat ingesteld. Dit kan voor ontoegankelijk resultaat zorgen. Daarom is dit attribuut verplicht.

Uitkomst: Onvoldoende

Bevindingen: De website kan worden bekeken in verschillende talen. In de footer staat een knop om de taal te veranderen. Deze knop zorgt ervoor dat er een juiste codering wordt gegeven aan het lang-attribuut op de HTML. Zie bijvoorbeeld pagina biebtobieb.nl/do/portal?&l=en_US. Deze codering zorgt ervoor dat de voorleessoftware tijdens het voorlezen van de content de uitspraakregels van de gekozen taal gaat hanteren. Niet alle content wordt in een andere taal aangeboden. Dit zorgt ervoor dat op de Engelstalige pagina de Nederlandse content dusdanig wordt uitgesproken dat het niet meer te begrijpen is. Als het niet de bedoeling is om de website in verschillende talen aan te bieden, is het beter om deze taalwissel helemaal niet te tonen. Om dit probleem op te lossen moet op de onderdelen die anderstalig zijn (en dit is bijna de hele webpagina) een extra lang-attribuut komen met lang=”nl” om ervoor te zorgen dat de content correct wordt voorgelezen.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina www.biebtobieb.nl/do/login staat een loginformulier. Als het formulier leeg wordt verstuurd, verschijnt een foutmelding “Controleer je e-mailadres en wachtwoord.”. Deze foutmelding staat boven het formulier. Om duidelijker te maken waar de fout is gemaakt, voeg aria-invalid=”true” aan de velden.

Uitkomst: Onvoldoende

Bevindingen: Op de homepagina staan widgets. In een van de widgets, onder “Tijdlijn” staan twee invoervelden zonder labels. Er zijn placeholderteksten gebruikt, maar deze verdwijnen zodra de bezoeker begint te typen. Zorg voor labels die altijd blijven staan. Dit komt op meerdere pagina’s voor. Zie bijvoorbeeld biebtobieb.nl/do/startpage?id=4367-737461727470616765.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s verandert het hoofdmenu als de pagina op een klein scherm wordt bekeken. Aan de rechterbovenkant verschijnt een knop met twee zwarte rondjes die een naam heeft “Logo biebtobieb.nl”. De functie van deze knop is om het verborgen menu open te openen. Deze informatie moet in de toegankelijkheidsnaam van deze knop staan. Zie bijvoorbeeld biebtobieb.nl/do/domainnewsread.

Op de homepagina onder de sectie “Uitgelicht” staat een rij met links die begint met “Bibliotheeknetwerk, HR netwerk(..)”. Elke link bestaat uit twee links, waarvan een is verborgen met aria-hidden=”true”. Verberg geen interactieve elementen. Zie biebtobieb.nl/do/portal.

Op de homepagina staat een zoekbalk onder het kopje “Zoeken in innovatielab”. Het invoerveld heeft geen toegankelijkheidsnaam. Voeg een label toe in de HTML dat gekoppeld is aan dit invoerveld. Zie biebtobieb.nl/do/portal.

Op de homepagina onder “Zoeken in innovatielab” staan links met afbeeldingen zonder tekstalternatief of linktekst. Deze links hebben geen toegankelijkheidsnaam. Zie biebtobieb.nl/do/portal.

Onderaan de homepagina staat een groene knop met “Widget” erop. Deze knop is verborgen voor hulpsoftware omdat aria-hidden=”true” op het container element is geplaatst. Zie biebtobieb.nl/do/portal.

De “Widget” knop opent een extra venster waarin aan de rechterkant een sluitknop staat. Deze knop heeft geen toegankelijkheidsnaam. In dit venster staat een collectie van elementen om de pagina te bouwen. Deze elementen zijn interactief gemaakt met javascript (drag-en-drop). Ze missen de juiste rol en naam om aan hulpsoftware te laten weten wat deze elementen doen en betekenen. Zie biebtobieb.nl/do/portal.

Het iframe met een Youtube video op pagina biebtobieb.nl/do/page?id=296840-70616765 heeft geen toegankelijke naam. Zorg voor een title-attribuut op het iframe en geef het een unieke naam. Zo weet een blinde gebruiker wat de inhoud van dit iframe is. Dit geldt ook voor de video op pagina biebtobieb.nl/do/note?id=521640-6e6f7465.

Op pagina biebtobieb.nl/do/shortcutselect?id=296840-70616765 staat een select-element met zichtbare tekst “Statusupdate”. Dit element heeft geen toegankelijkheidsnaam. Er ontbreekt een (verborgen) tekstlabel of bijvoorbeeld een title attribuut om het een naam te geven.

Als pagina biebtobieb.nl/do/shortcutselect?id=296840-70616765 op een klein scherm wordt bekeken, verandert de lay-out van de pagina. De linker zijkolom wordt nu verborgen achter de zogenaamde hamburger knop (drie horizontale streepjes). De knop die dit menu opent, heeft een status aanduiding nodig: open of dicht. Op deze manier hoort een blinde gebruiker wat er op het scherm gebeurt.

Op pagina biebtobieb.nl/do/membersreadonecolumn staan knoppen om de lay-out van de pagina aan te passen. De lay-out kan als kaartjes of als een lijst worden getoond. De toegankelijkheidsnamen van deze knoppen beschrijven de functie van de knop niet goed: “cardViewLink”, “label_sort” en “listViewLink”. Zorg voor duidelijke toegankelijkheidsnamen.

Op pagina biebtobieb.nl/do/questionwrite?parent=24283-6f6666696365 staat een knop zonder toegankelijkheidsnaam. Deze knop met een kruisje staat onder het kopje “Ask this question to”.

Op pagina biebtobieb.nl/do/contactdetails?id=22220-636f6e7461637464657461696c73#! Is een ARIA-attribuut gebruikt (aria-expanded) op de niet interactieve elementen. Verwijder deze code.

Uitkomst: Onvoldoende

Bevindingen: Op pagina biebtobieb.nl/do/questionwrite?parent=24283-6f6666696365 staat een invoerveld onder het kopje “Ask this question to”. Als een bezoeker begint te typen, komt een extra venster in beeld met suggesties. Dit is een statusbericht, maar wordt niet als dusdanig voorgelezen.

Als een bezoeker een notificatie krijgt, verschijnt bovenaan de pagina een cijfer bij het icoontje van de notificaties. Deze melding is een statusbericht omdat het voldoet aan twee hoofdcriteria van een statusbericht: de melding geeft informatie over de resultaten van een actie en deze melding ontvangt geen focus. Deze rol van een statusbericht moet programmatisch kunnen worden bepaald zodat een screenreader deze informatie (tussendoor) kan voorlezen. Dit is nu niet het geval. Dit kan opgelost worden door role=”status” aan de melding toe te voegen.
Zie bijvoorbeeld biebtobieb.nl/do/startpage?id=24299-737461727470616765.