Rapport:
Audit digitale toegankelijkheid van MijnSBB

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's staat bovenaan een logo. De alternatieve tekst "logo" beschrijft het logo niet voldoende. Afbeeldingen die informatie overdragen moeten een betekenisvolle alt-tekst hebben, waarin zowel het woord 'logo' als de belangrijke informatie uit de afbeelding wordt beschreven. Zie pagina https://mijn-acc.s-bb.nl/Account?

Op alle pagina's staat de link "Stel een vraag" die een sectie met een verborgen inhoud "Ik vul het contactformulier in met mijn vraag" opent. In deze sectie staat een formulier met een CAPTCHA. Alleen een visuele test wordt gebruikt om te controleren of iemand mens is en geen robot. Dit is niet toegankelijk voor mensen die afhankelijk zijn van hulpmiddelen. Bovendien lost het bieden van een tekstalternatief voor de afbeeldingen het probleem niet op, omdat robots dit ook kunnen lezen. Er zijn betere oplossingen. Zo kan een CAPTCHA gebruikt worden die meerdere zintuigen aanspreekt, zoals tekst én audio. Ook kan een tekstalternatief worden toegevoegd dat beschrijft wat het doel is van de CAPTCHA en hoe een alternatieve CAPTCHA gevonden kan worden. Maar het beste is om helemaal geen CAPTCHA te gebruiken en in plaats daarvan oplossingen te gebruiken die op de server draaien. Lees meer over toegankelijke CAPTCHA op de pagina’s https://www.w3.org/WAI/WCAG22/Techniques/general/G143 en https://www.w3.org/WAI/WCAG22/Techniques/general/G144. Zie pagina https://mijn.s-bb.nl/Home/Index.

Op alle pagina's staat in de rechterbenedenhoek een knop "Feedback" die een modaal venster met selectievakjes opent. Deze selectievakjes hebben svg-icoontjes en hun title-element bevat de tekst "check icon". Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers. Dit kan op verschillende manieren. Laat voor SVG-afbeeldingen het title-element leeg of weg, of voeg het aria-hidden attribuut toe. Zie pagina https://mijn.s-bb.nl/Home/Index.

Op alle pagina's staan in het hoofdmenu knoppen met pijliconen voor het bereiken van de verborgen menulinks. Deze icoontjes missen een tekstalternatief. Wanneer een knop alleen uit een afbeelding bestaat, wordt de alternatieve tekst van de afbeelding de toegankelijke naam van de knop. Hetzelfde probleem doet zich voor in de melding "Nieuw, fris uiterlijk" met de knop "x" en de link met het huisicoontje. Hetzelfde probleem treedt op op kleine schermen met de chat-, "?"- en menu-icoontjes. De alternatieve tekst van de afbeelding dient in dit geval als de naam van de knop en moet de functie van de knop beschrijven.
Zie pagina https://mijn.s-bb.nl/Home/Index.

Op pagina https://mijn-acc.s-bb.nl/Account? staat in de invoervelden "E-mailadres" en "Wachtwoord" een knop met een pictogram "?" en een knop met een oogpictogram om het wachtwoord weer te geven. Deze pictogrammen zijn verborgen voor de schermlezer. Hetzelfde probleem komt voor op het kleine scherm, met het mobiele menupictogram. Schermlezers negeren inhoud met het attribuut aria-hidden="true". Deze inhoud is dus verborgen voor blinde bezoekers. Verwijder deze attributen zodat een blinde bezoeker dezelfde informatie krijgt als een ziende bezoeker.

Op pagina https://mijn.s-bb.nl/Home/Index, onder het hoofdmenu, staan decoratieve afbeeldingen. De alt-tekst is "icoon". Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers. Dit kan op verschillende manieren. Gebruik voor afbeeldingen in een img-element een leeg alt-attribuut (alt=""). Hetzelfde probleem doet zich voor op de pagina https://mijn.s-bb.nl/Kennisbank?groep=4, met decoratieve afbeeldingen met alt-tekst "Groep Icoon" en "Icoon"; op de pagina https://bedrijf-mijn.s-bb.nl/ onder de kop "Personen" en met icoontjes binnen knoppen met 3 puntjes; op de pagina https://erkenning-mijn.s-bb.nl/?groep=5 onder de kop "Erkend voor onderstaande opleiding(en)" en andere.

Op pagina https://kwalificatiestructuur-mijn.s-bb.nl/, onder de kop "Welkom op de portal kwalificatiestructuur", staan links met pijliconen. Deze icoontjes zijn decoratief, maar zijn niet verborgen voor schermlezers. De alt-tekst is "arrow_forward".

Op pagina https://kwalificatie-mijn.s-bb.nl/, boven de kop "Welkom op het register kwalificatiestructuur van SBB", staat een knop met een icoontje van vierkantjes. Dit icoontje mist een tekstalternatief. Wanneer een link alleen uit een afbeelding bestaat, wordt de alternatieve tekst van de afbeelding de toegankelijke naam van de link. Hetzelfde probleem doet zich voor op de pagina https://zoeken-mijn.s-bb.nl/, onder de kop "Zoeken naar erkende leerbedrijven", met een knop met een zoek- en vernieuwingsicoontje.

Op pagina https://leerplaats-mijn.s-bb.nl/, onder de kop "Leerplaatsen overzicht", staan icoontjes van een driehoek met een uitroepteken. Deze icoontjes worden voor de schermlezer verborgen met aria-hidden="true". Schermlezers negeren inhoud met het attribuut aria-hidden="true". Deze inhoud is dus verborgen voor blinde bezoekers. Verwijder deze attributen zodat een blinde bezoeker dezelfde informatie krijgt als een ziende bezoeker.

Op de pagina https://webshop-mijn.s-bb.nl/ staan decoratieve productafbeeldingen met de alt-tekst "productafbeelding". Een decoratieve afbeelding mag worden verborgen voor hulpsoftware, bijvoorbeeld door het alt-attribuut leeg te laten.

Het PDF-document op https://mijn.s-bb.nl/Kennisbank/DownloadKennisbankItem/14 bevat bovenaan het logo als een artefact. Afbeeldingen die als artefact zijn toegevoegd, zijn niet zichtbaar voor de schermlezer. De informatie in deze afbeeldingen is ontoegankelijk voor blinde bezoekers en gebruikers van screenreaders. Informatieve afbeeldingen moeten via een figuur-tag worden geplaatst en worden voorzien van een beschrijving (alt-tekst). Hetzelfde probleem in PDF-document https://mijn.s-bb.nl/Kennisbank/DownloadKennisbankItem/18.

Het PDF-document op https://mijn.s-bb.nl/Kennisbank/DownloadKennisbankItem/14 bevat onderaan een logo en een QR-code afbeelding zonder tekstalternatieven (alt-tekst). Wanneer afbeeldingen aan een PDF-document worden toegevoegd met "figuur"-tags, moeten ze altijd een beschrijving (alt-tekst) hebben. Deze tag is voorbehouden aan informatieve afbeeldingen. Zonder alternatieve tekst kan de schermlezer de bezoeker niet duidelijk maken wat er in de afbeelding staat. Momenteel wordt alleen "afbeelding" voorgelezen. Blinde bezoekers kunnen de indruk krijgen dat ze inhoud missen. De decoratieve foto van mensen is toegevoegd via een figure-tag. De alt-tekst ontbreekt.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://leerplaats-mijn.s-bb.nl/, onder de kop "Leerplaatsen overzicht", staan elementen met een "i"-icoontje, bijvoorbeeld "Allround interieurvakman woningstofferen (25661) (3)". Wanneer de bezoeker op dit element klikt, wordt een video geopend. De video bevat tekst en logo's op verschillende punten, bijvoorbeeld rond 0:01, 0:03 en andere momenten. Bezoekers die blind of slechtziend zijn, missen hierdoor informatie. Je kunt het beste een audiobeschrijving toevoegen die de visuele elementen in de video beschrijft, zoals namen, functies, logo’s en teksten. Een andere oplossing is het toevoegen van een geschreven tekst (een media-alternatief). Maar om ook te voldoen aan succescriterium 1.2.5 moet je sowieso een audiobeschrijving toevoegen.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: De video op de pagina https://leerplaats-mijn.s-bb.nl/ voldoet niet aan succescriterium 1.2.5, dat vereist dat er een audiobeschrijving of een media-alternatief voor video's is. In het bijzonder heeft deze video een audiobeschrijving nodig (niveau AA), aangezien er voldoende ruimte is binnen de bestaande audiobaan.vEen media-alternatief is hier niet meer toegestaan als oplossing. Dit is van belang voor mensen die de video’s niet (goed) kunnen zien.

Uitkomst: Onvoldoende

Bevindingen: In de cookiebanner opent de knop "Cookie instellingen" extra inhoud met cookie-instellingen. Er is een groep selectievakjes aanwezig, voorafgegaan door de tekst "Uw cookie instellingen". Hoewel deze elementen visueel gegroepeerd zijn, is deze relatie niet programmatisch gedefinieerd in de HTML. Dit kan worden opgelost door de elementen in een fieldset-element te plaatsen. Een fieldset met interactieve inhoud moet een naam hebben. Hiervoor kan het legend-element worden gebruikt. Plaats hierin de tekst “Uw cookie instellingen”. Zie pagina https://mijn-acc.s-bb.nl/Account?

Op pagina https://mijn-acc.s-bb.nl/Account?, zijn de volgende teksten niet gemarkeerd als kopteksten: "Login to MijnSBB" en "About this website". Blinde bezoekers hebben niets aan een (tussen)kop die er wel uitziet als kop, maar die niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie navigeren. Maar dat kan alleen als de kop ook echt in de code staat. Als koppen alleen visueel als kop zijn vormgegeven (bijvoorbeeld vetgedrukt), ontstaat bovendien nog een ander probleem: de structuur van de informatie in de code wijkt dan af van de visuele structuur. Dit kan voorkomen worden door koppen altijd te markeren met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6. Meestal is dit niveau instelbaar via de content-editor in het CMS. De HTML-code voor de kop wordt dan automatisch toegepast.

In de header staat de link "Stel een vraag" die verborgen inhoud opent met de tekst "Stel een vraag". Deze kop is echter niet gemarkeerd als een koptekst. Hetzelfde probleem doet zich voor onder het hoofdmenu, in de melding met de tekst "Nieuw, fris uiterlijk"; in de voettekst met de teksten "UW OPTIES", "PERSOONLIJK", "Over deze website". Zorg ervoor dat kopteksten als kop op het juiste kopniveau worden opgemaakt. Zie pagina https://mijn.s-bb.nl/Home/Index.

Op pagina https://kwalificatiestructuur-mijn.s-bb.nl/ zijn de volgende teksten niet gemarkeerd als kopteksten: "Welkom op de portal kwalificatiestructuur", "Hoe helpen wij u verder?", "Bezoek het register Kwalificatiestructuur" en andere teksten. Hetzelfde probleem doet zich voor op de pagina https://zoeken-mijn.s-bb.nl/ met de teksten "Draag een organisatie voor (login)", "Uitleg", "Stel een vraag", "Direct naar"; op pagina https://mijn.s-bb.nl/Kennisbank?groep=4 met de tekst "Onderwerpen", op pagina https://erkenning-mijn.s-bb.nl/?groep=5 met de teksten "Erkend voor onderstaande opleiding(en)", "Meer informatie over Erkenningen", "Vraag niet beantwoord?" en andere teksten.

Op pagina https://kwalificatie-mijn.s-bb.nl/, onder de kop "Zoeken binnen het kwalificatieregister", staat een select-element. Wanneer een bezoeker een optie selecteert in een select-element, verschijnen groepen selectievakjes eronder. Boven elke groep selectievakjes staat tekst, bijvoorbeeld "Sector". Hoewel deze elementen visueel gegroepeerd zijn, is deze relatie niet programmatisch gedefinieerd in de HTML. Dit kan worden opgelost door de elementen in een fieldset-element te plaatsen. Een fieldset met interactieve inhoud moet een naam hebben. Hiervoor kan het legend-element worden gebruikt. Plaats hierin de tekst “Uw cookie instellingen”. Hetzelfde probleem op de pagina https://webshop-mijn.s-bb.nl/, onder de kop "Product per categorie".

Op pagina https://zoeken-mijn.s-bb.nl/, onder de kop "Zoeken naar erkende leerbedrijven", staat de knop "Bedrijf". Wanneer de bezoeker "Opleiding" selecteert in deze knop, verschijnt ernaast een link met een menupictogram. Deze link opent een nieuw venster. Dit venster heeft een interactieve lijst met pictogrammen. Het huidige item in deze lijst wordt visueel weergegeven, maar in de HTML is er geen informatie over het huidige item in de lijst.

Op pagina https://mijn.s-bb.nl/Kennisbank?groep=4 staat onder de kop "Kennisbank SBB" een tekstblok met meerdere paragrafen incorrect opgenomen in een enkel div-element. Visueel lijkt de tekst uit meerdere alinea’s te bestaan: blokjes tekst met witruimtes ertussen. Deze structuur moet ook in de code staan. Zorg dat elke alinea in een eigen p-element is geplaatst. Het aantal alinea’s dat visueel te zien is, moet dus gelijk zijn aan het aantal p-elementen in de code.

Op pagina https://mijn.s-bb.nl/Kennisbank?groep=4 staat een zijkolom met links die verborgen secties openen (de zogenaamde accordions). Er zijn secties die genest zijn in weer andere secties. De elementen die verborgen inhoud openen en sluiten missen rol van de kop. De teksten waarmee je delen van een accordion kunt inklappen en uitklappen, doen dienst als koppen voor die delen. Daarom moeten deze teksten ook de rol van kop hebben. Het gaat verkeerd als deze teksten niet in de code als kop zijn gemarkeerd met een h-element zoals h2 of h3.

Op pagina https://mijn.s-bb.nl/Kennisbank?groep=4 staat een zijkolom met links die verborgen secties openen (de zogenaamde accordions). In deze secties staan kopteksten die niet als kopteksten zijn gemarkeerd, bijvoorbeeld "Erkenningen". Ook bevinden zich in deze secties lijsten. Bijvoorbeeld, in de sectie "Handige overzichten van uw vestigingen" staat een lijst met 4 items die niet correct is gemarkeerd. Tekst die eruitziet als een opsomming, moet ook zo in de code worden gemarkeerd. Meestal is hier een knop voor in de content-editor in het CMS. Voor lijsten en opsommingen worden de HTML-elementen ol (lijst met cijfers) of ul (lijst met bullets) gebruikt. Hulpsoftware weet dan hoe de tekst is gestructureerd. Bovendien kondigen schermlezers dan het aantal items in de lijst aan, voordat ze die gaan voorlezen. Zo weet een blinde bezoeker hoeveel informatie er nog komt. Hetzelfde probleem is te zien op de pagina https://erkenning-mijn.s-bb.nl/ en op pagina https://praktijkloket-mijn.s-bb.nl/.

Op pagina https://bedrijf-mijn.s-bb.nl/, onder de kop "Personen", staan gegevens die bij elkaar te horen. Echter, deze relatie ontbreekt in de HTML-structuur. Als het voor een ziende bezoeker duidelijk is dat een groep links of teksten bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn. Neem de elementen bijvoorbeeld op in een ul-element of in een tabel.
Hetzelfde probleem op de pagina https://erkenning-mijn.s-bb.nl/?groep=5 onder de tekst “Erkend voor onderstaande opleiding(en)” en op pagina https://praktijkloket-mijn.s-bb.nl/.

De pagina https://profiel-mijn.s-bb.nl/ bevat tekstvakken waarbij de label-elementen niet expliciet zijn gekoppeld aan de overeenkomstige invoervelden, bijvoorbeeld "Beknopte omschrijving van de organisatie:". Een label-element moeten gekoppeld worden aan het bijbehorende invoerveld door het for-attribuut op het label-element te gebruiken. In dit attribuut komt het id van het invoerveld waar het label bij hoort. Hierdoor krijgt het invoerveld een toegankelijke naam, en heeft het label een groter klikgebied. Dit maakt het formulier toegankelijker. Omdat het invoerveld op dit moment geen toegankelijke naam heeft, wordt deze bevinding ook bij succescriterium 4.1.2 vermeld.

Op pagina https://erkenning-mijn.s-bb.nl/?groep=5, onder de tekst "Erkend voor onderstaande opleiding(en)", staat een sectie met verborgen inhoud "Allround interieurvakman woningstofferen". In deze sectie staat doorgehaalde tekst, maar er is geen informatie in de HTML die aangeeft dat deze tekst doorgehaald is. Bijvoorbeeld "B1-K1 Bereidt het leggen van de vloer voor". Als tekst eruitziet alsof deze is verwijderd of nieuw toegevoegd, moet dit ook in de code zijn verwerkt. Dit kan opgelost worden door een aria-label of verborgen tekst toe te voegen aan de tekst om het verschil aan te geven.

In het PDF-document op https://mijn.s-bb.nl/Kennisbank/DownloadKennisbankItem/14 staat een kop die niet als zodanig is gemarkeerd: "Meer trainingen en hulpmiddelen:".
Op deze manier verschilt de visuele informatiestructuur van de structuur van het document in de tags. Vervang de p-tag door de h-tag om de structuur van het document in de tags te laten overeenkomen met wat te zien is in het document. Hetzelfde probleem in PDF-document https://mijn.s-bb.nl/Kennisbank/DownloadKennisbankItem/18.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://mijn-acc.s-bb.nl/Account?, bevat het formulier invoervelden voor het invoervelden van persoonlijke gegevens, zoals "Emailadres". Het autocomplete-attribuut ontbreekt. Kan een bezoeker in een formulier persoonlijke gegevens invullen zoals achternaam, e-mailadres of telefoonnummer? Dan moeten deze invoervelden het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen. Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Voor het e-mailadres moet bijvoorbeeld autocomplete="email" worden gebruikt. Op deze pagina staat meer informatie over autocomplete en welke waardes verplicht gebruikt moeten worden: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.

Uitkomst: Voldoende

Bevindingen: Advies: Op alle pagina's staat in de cookiebanner een alinea tekst met een link "privacy beleid", die zich alleen in kleur onderscheidt van de normale tekst. Het contrastverhouding tussen de linktekst en de omliggende gewone tekst is 3,3:1. Hiermee voldoet dit aan de vereisten voor dit succescriterium en wordt dit niet op toegankelijkheid afgekeurd. Echter is een link makkelijker te onderscheiden als deze onderstreept is. Het advies is om de informatie dat zich hier een link bevindt niet alleen door kleur over te brengen, maar deze te onderstrepen. Zie pagina https://mijn-acc.s-bb.nl/Account?. Hetzelfde probleem doet zich voor bij onder de link "Stel een vraag", in de sectie met verborgen inhoud "Ik wil telefonisch contact met team Service & Informatie van SBB" en "Ik wil mijn scherm delen met een SBB medewerker". Ook hier ontbreekt extra visuele informatie, zoals een onderstreping, wanneer je met de muis over de link gaat. Zie pagina https://mijn.s-bb.nl/Home/Index Hetzelfde probleem is ook te zien op pagina https://mijn.s-bb.nl/Kennisbank?groep=4 onder tekst “Kennisbank SBB”, op pagina https://erkenning-mijn.s-bb.nl/?groep=5 onder tekst “Vraag niet beantwoord?” en anderen.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's staat een cookiebanner. Alle knoppen in deze cookiebanner veranderen wanneer de muis over deze knoppen wordt bewogen: de achtergrond- of tekstkleur wordt oranje (HEX#FF9500). Hierdoor heeft de tekstkleur een lage contrastverhouding van 2,2:1. Dit is bijvoorbeeld het geval bij de tekst van de knop "Alles accepteren". Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn. Tekst van informatieve elementen zoals links en knoppen moet altijd voldoende contrast hebben, ook als het element toetsenbord focus krijgt of als de bezoeker met de muiscursor over het element beweegt (hover). Zie pagina https://mijn-acc.s-bb.nl/Account?

Op pagina https://mijn-acc.s-bb.nl/Account? staat een formulier. De foutmeldingen zijn rood (HEX#e8400f) op een witte achtergrond, met een laag contrastverhouding van 4,1:1, bijvoorbeeld "Gebruikersnaam is verplicht", "E-mailadres" en andere. Het contrast moet minimaal 4,5:1 zijn. Hetzelfde probleem doet zich voor bij de link "Stel een vraag", in de sectie met verborgen inhoud "Ik vul het contactformulier in met mijn vraag", bijvoorbeeld "Onderwerp is verplicht".

Op pagina https://kwalificatiestructuur-mijn.s-bb.nl/, in het mobiele menu op kleine schermen, staan witte links op een lichtgrijze achtergrond (HEX#F6F6F6). De kleurcontrastverhouding is te laag: 1,1:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.

Op pagina https://kwalificatie-mijn.s-bb.nl/, onder de kop "Zoeken binnen het kwalificatieregister", staat een select-element. In dit select-element is er een lichtgrijze (HEX#9A9A9A) placeholder-tekst op een witte achtergrond. De kleurcontrastverhouding is te laag: 2,8:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.

Op pagina https://zoeken-mijn.s-bb.nl/ staat witte tekst "Draag een organisatie voor (login)" en "Stel een vraag" op een blauwe (HEX#1280B7) achtergrond. De kleurcontrastverhouding is te laag: 4,4:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.

Op pagina https://zoeken-mijn.s-bb.nl/, onder de kop "Zoeken naar erkende leerbedrijven", staat de knop "Bedrijf". Wanneer de bezoeker "Opleiding" selecteert in deze knop, verschijnt er een link met een menupictogram naast. Deze link opent een nieuw venster. In dit venster staat lichtgrijze tekst (HEX#999999) op een witte achtergrond "Niveau: 3". De kleurcontrastverhouding is te laag: 2,8:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.

Op pagina https://bedrijf-mijn.s-bb.nl/, onder de kop "Organisatiegegevens", staat lichtgrijze tekst (HEX#C0C0C0) "Niet ingevuld" op een witte achtergrond. De kleurcontrastverhouding is te laag: 1,8:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.

Op pagina https://erkenning-mijn.s-bb.nl/?groep=5, onder de tekst "Erkend voor onderstaande opleiding(en)", staat een sectie met verborgen inhoud "Allround interieurvakman woningstofferen". In deze sectie staat doorgehaalde tekst, bijvoorbeeld "B1-K1 Bereidt het leggen van de vloer voor". Deze grijze tekst (HEX#9A9A9A) op een lichtgrijze (HEX#FAFAFA) achtergrond heeft een te laag contrastverhouding: 2,8:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.

Op pagina https://praktijkloket-mijn.s-bb.nl/, onder de tekst "Actuele deelnemers", staat grijze tekst (HEX#888888) "Deelnemers 1 - 8 van 8" op een witte achtergrond. De kleurcontrastverhouding is te laag: 3,5:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.

In het PDF-document op https://mijn.s-bb.nl/Kennisbank/DownloadKennisbankItem/14 staat witte tekst op een turquoise achtergrond (HEX#00887B), bijvoorbeeld "Meer trainingen en hulpmiddelen:". De kleurcontrastverhouding is te laag: 4,4:1. Het contrast moet minstens 4,5:1 zijn. Hetzelfde probleem in PDF-document https://mijn.s-bb.nl/Kennisbank/DownloadKennisbankItem/18.

Uitkomst: Onvoldoende

Bevindingen: Op elke pagina staan in de HTML-code bij meta name="viewport" de instellingen 'maximum-scale' en 'user-scalable=no'. Op mobiel of tablet kunnen bezoekers daarom in sommige gevallen niet inzoomen. Laat deze instelling weg. Zie pagina https://mijn-acc.s-bb.nl/Account?.

Wanneer de pagina https://upload-mijn.s-bb.nl/ wordt bekeken bij een schermresolutie van 1280x1024 en ingezoomd naar 200%, wordt de volgende kop gedeeltelijk onleesbaar: "Studentgegevens uploaden ten behoeve van BPV monitor". Zorg dat alle tekst op de pagina zichtbaar blijft bij het inzoomen.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's, wanneer bekeken bij een schermresolutie van 1280x1024 en ingezoomd naar 400%, gaat een deel van de inhoud van de cookiebanner verloren, bijvoorbeeld "Wij respecteren uw privacy". Hetzelfde probleem doet zich voor bij de cookie-instellingen. Er is een knop "Wat zijn cookies?" die extra inhoud met een tabel opent. De helft van de tabelinhoud gaat verloren. De tekst "Ingelogd blijven" overlapt de knop "Inloggen". Als een bezoeker inzoomt, moet alles nog gewoon leesbaar zijn. Zie pagina https://mijn-acc.s-bb.nl/Account?.

In de header staat de link "Stel een vraag" die een sectie met verborgen inhoud "Ik vul het contactformulier in met mijn vraag" opent. In deze sectie staat een formulier met een captcha. Wanneer de pagina wordt bekeken bij een schermresolutie van 1280 bij 1024 en ingezoomd naar 400%, gaan het captcha-logo en de tekst "reCAPTCHA" gedeeltelijk verloren. Als een bezoeker inzoomt, moet alles nog gewoon leesbaar zijn. Zie de pagina https://mijn.s-bb.nl/Home/Index. Hetzelfde probleem doet zich voor op de homepage, met de koppen: “Organisatiestructuur”, “Organisatiegegevens”, “Beeldmerk Erkend leerbedrijf”.

Op pagina https://profiel-mijn.s-bb.nl/, wanneer bekeken bij een schermresolutie van 1280 bij 1024 en ingezoomd naar 400%, overlapt de tekst "Beknopte omschrijving van de organisatie:" de link "Wijzigen voor meerdere organisaties" en gaat deze tekst gedeeltelijk verloren.

Wanneer de pagina https://upload-mijn.s-bb.nl/ wordt bekeken bij een schermresolutie van 1280 bij 1024 en ingezoomd naar 400%, gaat de volgende kop gedeeltelijk verloren: "Studentgegevens uploaden ten behoeve van BPV monitor". Als een bezoeker inzoomt, moet alles nog gewoon leesbaar zijn.

Wanneer de pagina https://upload-mijn.s-bb.nl/ wordt bekeken bij een schermresolutie van 1280 bij 1024 en ingezoomd naar 400%, verschijnt een schuifbalk. Horizontaal scrollen is niet toegestaan, ook niet als de viewport is ingesteld of ingezoomd op 320 CSS-pixels breed (voor verticale inhoud) of 256 CSS-pixels hoog (voor horizontale inhoud). Zorg ervoor dat de tekst binnen het scherm past. Alleen als scrollen in beide richtingen echt nodig is voor de betekenis of het gebruik van de inhoud mag het wel. Uitzonderingen zijn tabellen, betekenisvolle afbeeldingen en kaarten. Deze moeten leesbaar blijven, dus binnen deze elementen mag je wel scrollen. Hetzelfde probleem op de pagina https://stagetekorten-mijn.s-bb.nl/registratie.

Wanneer de pagina https://stagetekorten-mijn.s-bb.nl/registratie wordt bekeken bij een schermresolutie van 1280 bij 1024 en ingezoomd naar 400%, gaat de inhoud in de select-elementen gedeeltelijk verloren. Zorg dat deze beschikbaar blijft bij het inzoomen.

Op pagina https://praktijkloket-mijn.s-bb.nl/, onder de tekst "Actuele deelnemers", staan accordions met inhoud. Wanneer de pagina wordt bekeken bij een schermresolutie van 1280 bij 1024 en ingezoomd naar 400%, gaat bijna alle inhoud in de accordions verloren en is deze onleesbaar. Als een bezoeker inzoomt, moet alles nog gewoon leesbaar zijn.

Uitkomst: Onvoldoende

Bevindingen: In de cookiebanner opent de knop "Cookie instellingen" extra inhoud met cookie-instellingen. Onder de kop "Uw cookie instellingen" staan grijze (HEX#BCBCBC) selectievakjes op een witte achtergrond. De kleurcontrastverhouding is 1,9:1. Hetzelfde probleem doet zich voor in de geselecteerde staat, waarbij de kleur van de selectievakjes oranje (HEX#FF9500) is op een witte achtergrond. De kleurcontrastverhouding is 2,2:1. Het kleurcontrast tussen de randkleur en de achtergrondkleur van interactieve elementen zoals deze selectievakjes moet minimaal 3,0:1 zijn. Zie pagina https://mijn-acc.s-bb.nl/Account?.

In de cookiebanner opent de knop "Cookie instellingen" extra inhoud met cookie-instellingen. Onder de kop "Uw cookie instellingen" staan selectievakjes. Wanneer deze selectievakjes toetsenbordfocus krijgen, is dit zichtbaar door een lichtblauwe (HEX#C0DAEF) focusrand. De contrastverhouding tussen de focusrand en de witte achtergrond is 1,4:1. Dit moet minimaal 3:1 zijn. Hierdoor is het voor mensen met een visuele beperking of kleurenblindheid lastig of zelfs onmogelijk om de focus te zien. Gebruik een kleurcombinatie met voldoende contrast om dit op te lossen. Zie pagina https://mijn-acc.s-bb.nl/Account?.

Op alle pagina's, in de rechterbenedenhoek, staat een knop "Feedback", die een dialoog venster opent. Wanneer alle elementen in dit modale venster toetsenbordfocus krijgen, is dit zichtbaar door een lichtgrijze (HEX#DDDDDD) stippellijnrand om een element. De contrastverhouding tussen de toetsenbordfocusrand en de witte achtergrond is 1,4:1. Dit moet minimaal 3:1 zijn. Hierdoor is het voor mensen met een visuele beperking of kleurenblindheid lastig of zelfs onmogelijk om de focus te zien. Gebruik een kleurcombinatie met voldoende contrast om dit op te lossen. Zie pagina https://mijn.s-bb.nl/Home/Index.

Op alle pagina's opent de link "Stel een vraag" een sectie met verborgen inhoud. In de sectie "Ik vul het contactformulier in met mijn vraag" staat een formulier. De contrastverhouding tussen de lichtgrijze rand van de invoervelden en de witte achtergrond van de pagina is 1,4:1. De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond. Zie pagina https://mijn.s-bb.nl/Home/Index Hetzelfde probleem is te zien op pagina https://kwalificatie-mijn.s-bb.nl/, onder de kop “Zoeken binnen het kwalificatieregister”, met een select element.

Op pagina https://kwalificatie-mijn.s-bb.nl/, onder de kop "Zoeken binnen het kwalificatieregister", staat een select-element. Wanneer een bezoeker een optie selecteert in een select-element, verschijnt extra inhoud. In deze inhoud staan iconen ment een "i". Dit icoon is lichtblauw (HEX#46ace3) op een witte achtergrond. De kleurcontrastverhouding is te laag: 2,5:1. Dit moet minimaal 3:1 zijn. Hetzelfde probleem staat op de pagina https://bedrijf-mijn.s-bb.nl/.

Op pagina https://mijn.s-bb.nl/Kennisbank?groep=4 staat een zoekveld. De contrastverhouding tussen de grijze (HEX#B4B4B4) rand en de witte achtergrond van de pagina is 2,1:1. De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.

Op pagina https://leerplaats-mijn.s-bb.nl/, onder de kop "Leerplaatsen overzicht", staan oranje (HEX#FF9500) driehoekige iconen met een uitroepteken op een witte achtergrond. De kleurcontrastverhouding is te laag: 2,2:1. Dit moet minimaal 3:1 zijn.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://kwalificatiestructuur-mijn.s-bb.nl/, wanneer bezoekers tekstspatiëring toepassen zoals beschreven in dit succescriterium, wordt de tekst "naar downloads en overige informatie" onder de kop "Raadpleeg onze servicedocumenten" gedeeltelijk onzichtbaar en onleesbaar. 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.

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://mijn-acc.s-bb.nl/Account?, in het invoerveld "E-mailadres", staat een icoon "?" dat een tooltip activeert. Wanneer een bezoeker met de muis over dit icoon beweegt, verschijnt er nieuwe inhoud. Deze nieuwe inhoud kan niet worden aangewezen met de muis. De inhoud kan niet worden afgesloten zonder de muis te bewegen. Zorg dat de inhoud bijvoorbeeld via de escape-toets gesloten kan worden. Hetzelfde probleem doet zich voor op de pagina https://kwalificatie-mijn.s-bb.nl/, onder de kop "Zoeken binnen het kwalificatieregister", waar een select-element staat. Wanneer een bezoeker een optie selecteert in een select-element, verschijnt er extra inhoud onder. In deze extra inhoud staan iconen "i"; en op de pagina https://bedrijf-mijn.s-bb.nl/ en op de pagina https://leerplaats-mijn.s-bb.nl/.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://mijn-acc.s-bb.nl/Account?, in het invoerveld "E-mailadres", staat een icoon "?" dat een tooltip activeert. Wanneer een bezoeker met de muis over dit icoon beweegt, verschijnt er nieuwe inhoud. Deze functionaliteit is niet beschikbaar voor gebruikers die de website alleen met het toetsenbord navigeren. Als de tooltip informatie of instructies bevat, dan moet die inhoud ook toegankelijk zijn voor bezoekers die alleen met het toetsenbord navigeren. Hetzelfde probleem doet zich voor op de pagina https://kwalificatie-mijn.s-bb.nl/, onder de kop "Zoeken binnen het kwalificatieregister", waar een select-element staat. Wanneer een bezoeker een optie selecteert in een select-element, verschijnt er extra inhoud onder. In deze extra inhoud staan iconen "i"; en op de pagina https://bedrijf-mijn.s-bb.nl/ en op de pagina https://leerplaats-mijn.s-bb.nl/.

Op de pagina https://mijn-acc.s-bb.nl/Account?, staat een formulier. In het invoerveld "Wachtwoord" staat een knop met een oogicoon om het wachtwoord weer te geven. Deze knop is niet goed toegankelijk via het toetsenbord. Zorg dat de knop zowel met de spatiebalk als de Enter-toets bediend kan worden. Dit is van belang voor bezoekers die wel kunnen zien en gebruik maken van toetsenbordnavigatie.

De link "Stel een vraag" in de header opent een sectie met verborgen inhoud. De ingeklapte secties in dit deel zijn niet toegankelijk via het toetsenbord. Sommige bezoekers gebruiken alleen een toetsenbord om te navigeren en geen muis. Zij moeten alle klikbare onderdelen van de website gewoon kunnen gebruiken. Daaronder vallen bijvoorbeeld links, knoppen, formulieren, keuzelijsten, tabbladen, sliders en accordeons. Zorg dat alles wat aanklikbaar is, ook werkt met het toetsenbord. Zie pagina https://mijn.s-bb.nl/Home/Index.

Op kleine schermen verschijnt de knop voor het mobiele menu. Deze knop is niet toegankelijk via het toetsenbord. Zorg dat de knop zowel met de spatiebalk als de Enter-toets bediend kan worden. Zie pagina https://mijn.s-bb.nl/Home/Index.

Op pagina https://zoeken-mijn.s-bb.nl/, onder de tekst "Stel een vraag", staat een link met een pijlpictogram. Deze link is niet toegankelijk via het toetsenbord.

Op pagina https://zoeken-mijn.s-bb.nl/, onder de kop "Zoeken naar erkende leerbedrijven", staat de knop "Bedrijf". Wanneer de bezoeker "Opleiding" selecteert in de dropdown, verschijnt er een link met een menupictogram ernaast. Deze link opent een nieuw venster. In dit venster staat een interactieve lijst met iconen. Deze lijst kan niet met het toetsenbord worden bediend. Hetzelfde probleem doet zich voor op de pagina https://mijn.s-bb.nl/Kennisbank?groep=4, onder de tekst "Onderwerpen".

Op pagina https://zoeken-mijn.s-bb.nl/, onder de kop "Zoeken naar erkende leerbedrijven", staat de knop "Bedrijf". Wanneer de bezoeker "Opleiding" selecteert in deze dropdown, verschijnt er een link met een menupictogram ernaast. Deze link opent een nieuw venster. In dit venster staan selectievakjes. Wanneer een bezoeker een selectievakje selecteert, verschijnt de geselecteerde optie onderaan het venster met een "x"-knop. Deze knop kan niet vanaf het toetsenbord worden bediend.

Op pagina https://mijn.s-bb.nl/Kennisbank?groep=4, in de zijkolom, staan secties met verborgen inhoud. Al deze secties met verborgen inhoud kunnen niet met het toetsenbord worden bediend. Hetzelfde probleem doet zich voor op de pagina https://erkenning-mijn.s-bb.nl/, en op de pagina https://praktijkloket-mijn.s-bb.nl/.

Op pagina https://erkenning-mijn.s-bb.nl/?groep=5 zijn de links "Genereer erkenningsbewijs" en "Genereer erkenningsoverzicht" niet toegankelijk via het toetsenbord.

Op pagina https://webshop-mijn.s-bb.nl/ staan producten die geopend kunnen worden, zoals "Stickervel SBB Erkend leerbedrijf". Deze producten zijn niet toegankelijk via het toetsenbord.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://leerplaats-mijn.s-bb.nl/, onder de kop "Leerplaatsen overzicht", staan elementen met een "i"-icoon, zoals "Allround interieurvakman woningstofferen (25661) (3)". Wanneer de bezoeker op dit element klikt, wordt extra inhoud met een video geopend. De Youtube-speler gebruikt sneltoetsen, zoals de 'k' om de video te starten of stoppen en de 'm' om het geluid uit te zetten. Deze sneltoetsen botsen met schermlezers. Ze zijn namelijk ook actief als de toetsenbordfocus op een ander element in de videospeler staat. Dit kan problemen geven voor mensen die met spraakbediening werken, omdat deze letters soms in de uitgesproken woorden zitten. Ook voor mensen die per ongeluk een toets op het toetsenbord indrukken is het onhandig. Dit kan opgelost worden door de parameter disablekb=1 toe te voegen aan de URI van de video in de HTML-code. Hiermee worden de sneltoetsen uitgeschakeld, terwijl toetsenbordbediening mogelijk blijft. Bekijk voor meer informatie https://developers.google.com/youtube/player_parameters#disablekb (Engels).

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://zoeken-mijn.s-bb.nl/, onder de kop "Zoeken naar erkende leerbedrijven", staat een carrousel die na een paar seconden een nieuwe afbeelding toont. Deze carrousel kan niet worden gestopt, gepauzeerd of verborgen. Bewegende content kan storend zijn voor mensen met een cognitieve beperking. De bewegende inhoud zorgt voortdurend voor afleiding terwijl ze de tekst op de pagina proberen te lezen. Daarom moet er een manier zijn waarmee bezoekers beweging kunnen stoppen, pauzeren of verbergen. Dit geldt voor alle bewegende, knipperende, scrollende of automatisch actualiserende content die tegelijk met andere informatie wordt getoond, automatisch start en langer dan 5 seconden speelt.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: De pagina https://mijn.s-bb.nl/Home/Index mist een skiplink. Er is geen duidelijke koppenstructuur aanwezig. 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. Hiervoor wordt een skiplink gebruikt. 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. Hetzelfde probleem op pagina https://kwalificatiestructuur-mijn.s-bb.nl/ en op pagina https://contract-mijn.s-bb.nl/.

Uitkomst: Onvoldoende

Bevindingen: Meerdere pagina’s in de steekproef hebben dezelfde titel in het title-element: https://mijn-acc.s-bb.nl/Account?, https://mijn.s-bb.nl/Home/Index, https://mijn.s-bb.nl/Error/NotFound?aspxerrorpath=/404 en andere pagina's. 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.

Uitkomst: Onvoldoende

Bevindingen: De eerste keer dat een bezoeker de website bezoekt, verschijnt een cookiebanner. Deze cookiebanner bedekt een deel van de pagina, waardoor de inhoud en functionaliteit onzichtbaar worden. Om deze banner te sluiten, moet de bezoeker helemaal naar de onderkant van de pagina tabben. Om de toegankelijkheid te verbeteren, moet worden gezorgd dat deze banner het eerste element is dat focus krijgt, zodat het kan worden weggeklikt, of de melding moet naadloos in de webpagina worden geïntegreerd. Zie pagina https://mijn-acc.s-bb.nl/Account?.

In de cookie-instellingen staat een knop "Wat zijn cookies?", die extra inhoud opent. In deze inhoud staat de knop "Cookie instellingen" om terug te gaan naar de instellingen. Wanneer de bezoeker op deze knop klikt, gaat de toetsenbordfocus naar het begin van de pagina, in plaats van verder te gaan in de cookiebanner. Dit is geen logische focusvolgorde.
Zie pagina https://mijn-acc.s-bb.nl/Account?

Als de website op een klein scherm wordt bekeken, verschijnt er een menu knop. Deze knop opent het mobiele navigatiemenu. De focusvolgorde is niet logisch. Het mobiele menu valt over de pagina heen als het is uitgeklapt. Het is belangrijk om bij dit soort menu’s extra goed op de toetsenbordfocus te letten. Terwijl het menu open is, moet de focus binnen het menu blijven en mag deze niet naar andere elementen op de pagina verschuiven. Dit helpt bezoekers om makkelijk door het menu te navigeren, zonder dat ze per ongeluk op iets anders activeren. Zorg ervoor dat de focus in het menu blijft totdat de bezoeker het menu sluit door op de sluitknop te klikken of de ESC-toets in te drukken. Een andere optie is om het menu automatisch te sluiten wanneer de focus het menu verlaat. Zie pagina https://mijn.s-bb.nl/Home/Index.

Op pagina https://mijn.s-bb.nl/Home/Index, in de header, staan links die dropdowns openen en sluiten, bijvoorbeeld de link "Jan van Swink-Leerbedrijf". De toetsenbordfocus landt binnen de extra inhoud wanneer de inhoud is gesloten. Dit is geen logische focusvolgorde.

Op pagina https://bedrijf-mijn.s-bb.nl/, onder de kop "Personen", staat een lijst met personen. Sommige personen hebben onzichtbare links. Bijvoorbeeld "Dhr. Joffrey Kater". De toetsenbordfocus landt op deze onzichtbare links. Zorg dat de focus niet naar elementen gebracht kan worden die niet zichtbaar zijn op de pagina.

Op pagina https://webshop-mijn.s-bb.nl/, op kleine schermen, verschijnt de knop "Categorie filter". Deze knop opent extra inhoud met filters. Echter, de toetsenbordfocus wordt niet automatisch in de extra inhoud geplaatst wanneer deze wordt geopend. Dit is geen logische focusvolgorde. Zorg dat de focusvolgorde logisch blijft, door deze naar de nieuwe inhoud te verplaatsen.

Uitkomst: Onvoldoende

Bevindingen: In de header staat een link met het logo. De toegankelijke naam van de link is "logo". Het doel van de link is niet duidelijk. Hierdoor is het voor bezoekers die hulpsoftware gebruiken lastig om te bepalen naar welke pagina of inhoud de link leidt. Zie pagina https://mijn.s-bb.nl/Home/Index.

Op alle pagina's, in het hoofdmenu, staat een link met een huisje. Deze link heeft geen inhoud en dus geen duidelijk doel. Om dit op te lossen moet de link content krijgen. Dit kan bijvoorbeeld door een tekst toe te voegen in het a-element of door een aria-label toe te voegen. Zorg dat alle links een duidelijk linkdoel hebben. Zie pagina https://mijn.s-bb.nl/Home/Index. Hetzelfde probleem doet zich voor op pagina https://kwalificatie-mijn.s-bb.nl/, boven de kop “Welkom op het register kwalificatiestructuur van SBB” met een link met een vierkantje pictogram.

Op pagina https://zoeken-mijn.s-bb.nl/, onder de tekst "Draag een organisatie voor (login)", "Stel een vraag", staan links met pijlpictogrammen. De toegankelijke naam van deze links is "arrow_forward". Het doel van de link is niet duidelijk.

Op pagina https://mijn.s-bb.nl/Kennisbank?groep=4, in de zijkolom, staan secties met verborgen inhoud. In deze secties staan verschillende links met dezelfde toegankelijke naam "Download document". Het doel van deze links is verschillend. Dit kan verwarrend zijn voor bezoekers. Zorg dat links met dezelfde tekst ook naar dezelfde bestemming leiden. Als het om een andere bestemming gaat, moet de linktekst ook anders zijn. Hetzelfde probleem doet zich voor op de pagina https://stagetekorten-mijn.s-bb.nl/registratie, waar een select-element "Onderwijsinstelling" staat. Wanneer een optie wordt geselecteerd, verschijnen links met potloodicoontjes. De toegankelijke naam van alle links is hetzelfde: "edit".

Op pagina https://bedrijf-mijn.s-bb.nl/, onder de kop "Personen", staat een lijst met personen. Sommige personen hebben onzichtbare links, bijvoorbeeld "Dhr. Joffrey Kater". Bij deze link ontbreekt inhoud en heeft de link daarom geen duidelijk doel.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://bedrijf-mijn.s-bb.nl/, staat een iframe met een kaart. De toegankelijke naam "adres" beschrijft het type inhoud niet. Iframes moeten een goede beschrijving hebben. Die komt meestal in het title-attribuut van het iframe. Er moet in staan welk type inhoud het is (bijvoorbeeld een podcast of video), en waar het inhoudelijk over gaat. Deze beschrijving van de inhoud moet uniek en betekenisvol zijn. Door de beschrijving kunnen blinde bezoekers beslissen of het de moeite waard is om de inhoud van het iframe te verkennen.

Op pagina https://leerplaats-mijn.s-bb.nl/, onder de kop "Leerplaatsen overzicht", staan elementen met een "i"-icoon, zoals "Allround interieurvakman woningstofferen (25661) (3)". Wanneer een bezoeker op dit element klikt, wordt extra inhoud geopend met een iframe dat een video bevat. Het iframe bevat een niet-unieke titel "video".

Op pagina https://stagetekorten-mijn.s-bb.nl/registratie, staat een select-element "Onderwijsinstelling". Wanneer een optie wordt geselecteerd, verschijnen "OK"-knoppen. De toegankelijke naam van alle knoppen is hetzelfde: "OK". Echter, deze knoppen voeren verschillende functies uit. 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.

Op pagina https://praktijkloket-mijn.s-bb.nl/, onder de tekst "Actuele deelnemers", staat een tabel met accordions. In deze accordions staat een verwijderknop met de toegankelijke naam "Bewerk praktijkverklaring". Deze toegankelijke naam beschrijft de functie niet nauwkeurig. Een blinde bezoeker weet daardoor niet wat deze knop precies doet. Voeg tekst toe die deze knop goed beschrijft.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://mijn-acc.s-bb.nl/Account?, is de toetsenbordfocus niet zichtbaar op de volgende elementen: de knop "English", het selectievakje "Ingelogd blijven", de knop "Inloggen" en de links "Bekijk de kennisbank" en "Demo starten". 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 waar op de pagina ze zijn. Anders weten ze niet op welk moment ze op Enter moeten drukken om een knop of link te bedienen.

Op alle pagina's in de header is de toetsenbordfocus niet zichtbaar op de volgende elementen: link met logo, links "Stel een vraag", "Nederlands", "Jan van Swink-Leerbedrijf". Zie bijvoorbeeld pagina https://mijn.s-bb.nl/Home/Index.

In de header staat in de link "Stel een vraag" die een sectie met verborgen inhoud opent. In deze sectie staat een formulier met een CAPTCHA. De toetsenbordfocus is niet zichtbaar op elementen binnen de CAPTCHA. Zie pagina https://mijn.s-bb.nl/Home/Index.

Op pagina https://kwalificatiestructuur-mijn.s-bb.nl/ is de toetsenbordfocus niet zichtbaar op alle links op de pagina, behalve op de links in het hoofdmenu.

Op pagina https://zoeken-mijn.s-bb.nl/, onder de kop "Zoeken naar erkende leerbedrijven", staan de knoppen "Bedrijf", "0km" en "Nederland". De toetsenbordfocus is niet zichtbaar op deze knoppen. Hetzelfde probleem is te zien bij de knoppen met een zoek- en update-icoon en met de link onder de tekst "Draag een organisatie voor (login)". Zie ook pagina https://mijn.s-bb.nl/Kennisbank?groep=4 met de zoekknop.

Op pagina https://bedrijf-mijn.s-bb.nl/ staan links "Logo wijzigen voor meerdere organisaties", "Wijzigen" en "Nieuw". De toetsenbordfocus is niet zichtbaar op deze links. Hetzelfde probleem doet zich voor op pagina https://profiel-mijn.s-bb.nl/ met links "Wijzigen voor meerdere organisaties" en "Wijzigen".

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://zoeken-mijn.s-bb.nl/, onder de kop "Zoeken naar erkende leerbedrijven", staan knoppen met de zichtbare tekst "Bedrijf", "0km" en "Nederland". De toegankelijke namen zijn "kies een zoek optie", "kies een straal" en "kies een land". Dit kan problemen geven voor bezoekers die stembediening gebruiken. Zij spreken een commando uit door de zichtbare tekst voor te lezen. Als deze niet voorkomt in de toegankelijke naam die in de code staat, werkt het commando niet. Zorg dat de toegankelijke naam de zichtbare tekst bevat, en zet deze tekst het liefst vooraan in de naam. De toegankelijke naam mag ook precies hetzelfde zijn als de zichtbare tekst.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://mijn-acc.s-bb.nl/Account? staat een knop om de taal te wijzigen. Echter, de waarde van het lang-attribuut in het html-element verandert niet. Wanneer de paginataal is ingesteld op Engels, blijft de waarde van het lang-attribuut "nl". Zorg dat de primaire taal van de pagina aangegeven is met de juiste taalcode. Schermlezers gebruiken deze code om de juiste uitspraakregels toe te passen. Staat hier een verkeerde code, dan wordt de inhoud van de pagina dus met onjuiste uitspraakregels voorgelezen. De voorgelezen tekst is dan erg lastig te begrijpen.

De pagina https://zoeken-mijn.s-bb.nl/ mist het lang-attribuut op het <html>-element. Als dit attribuut niet aanwezig is, kan voorleessoftware de pagina niet in de correcte taal voorlezen. De software weet dan niet wat de primaire taal van de pagina is. Zorg dat het lang-attribuut aanwezig is, en dat dit attribuut de taalcode bevat van de taal van de pagina. Hetzelfde probleem op de pagina https://bedrijf-mijn.s-bb.nl/, op de pagina https://profiel-mijn.s-bb.nl/, op de pagina https://erkenning-mijn.s-bb.nl/?groep=5 en andere.

In de meta data van het PDF-document https://mijn.s-bb.nl/Kennisbank/DownloadKennisbankItem/14 is de taal niet ingesteld. De taal hoort ingesteld te worden, zodat hulpsoftware de informatie uit het bestand met de juiste uitspraakregels kan worden voorgelezen. Dit kan worden ingesteld via de bestandseigenschappen.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://webshop-mijn.s-bb.nl/, onder de kop "Product per categorie", staan selectievakjes. Wanneer een bezoeker een selectievakje aanvinkt, leidt deze actie tot een belangrijke verandering van context. Dit kan voor veel bezoekers verwarrend zijn. De context mag niet automatisch veranderen als een bezoeker iets aanpast in een formulier (zoals het aanvinken van een keuzevakje) of in een ander element van de gebruikersinterface. Het mag wel als de bezoeker van tevoren duidelijk is gewaarschuwd. Contextveranderingen zijn bijvoorbeeld het openen van een nieuw venster, het verschuiven van de toetsenbordfocus naar een ander element en het insturen van een formulier. Zorg dat de context niet automatisch verandert, of waarschuw bezoekers van tevoren duidelijk dat dit gaat gebeuren.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://mijn-acc.s-bb.nl/Account?, wordt na het verzenden van het formulier met lege of onjuiste gegevens de foutmelding "Gebruikersnaam is verplicht" en "Wachtwoord is verplicht" weergegeven. Deze boodschap fungeert als instructie, in plaats van een echte foutmelding. Een goede foutmelding maakt duidelijk dat er een fout is gemaakt, en geeft aan waar de fout zit. Vaak staat er een ontkenning in. Een voorbeeld van een goede foutmelding is: "Het veld is niet (goed) ingevuld.". Hetzelfde probleem doet zich voor op alle pagina's, in de link "Stel een vraag", in de sectie met verborgen inhoud "Ik vul het contactformulier in met mijn vraag", bijvoorbeeld "Onderwerp is verplicht" en op de knop "Feedback", bijvoorbeeld "Dit veld is verplicht". Zie pagina https://mijn.s-bb.nl/Home/Index.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://kwalificatie-mijn.s-bb.nl/, onder de kop "Zoeken binnen het kwalificatieregister", is een selectieveld aanwezig zonder label. De eerste optie in het selectieveld kan niet dienen als label, omdat deze verdwijnt wanneer een andere optie wordt geselecteerd. Hierdoor weten de bezoekers niet waar de keuzelijst over gaat. De teksten van de opties zijn in dit geval niet zelfverklarend. Geef dit element een label dat altijd zichtbaar is. Hetzelfde probleem staat op de pagina https://zoeken-mijn.s-bb.nl/, onder het kopje “Zoeken naar erkende leerbedrijven” en op pagina https://praktijkloket-mijn.s-bb.nl/ onder het kopje “Actuele deelnemers” met selectievakjes.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: De cookiebanner is geprogrammeerd als een dialoog window zonder 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") en role="dialog". Zie pagina https://mijn-acc.s-bb.nl/Account?.

Op pagina https://mijn-acc.s-bb.nl/Account?, in de invoervelden "E-mailadres" en "Wachtwoord", staat een "?"-knop en een knop met een oog-icoon om het wachtwoord weer te geven. Deze knoppen hebben geen juiste rol en geen toegankelijke naam.

In de header staat een link "Stel een vraag" die extra inhoud opent waarin secties met verborgen inhoud staan. Deze secties hebben niet de juiste rol van een knop. Zie pagina https://mijn.s-bb.nl/Home/Index.

Op alle pagina's staat onder het hoofdmenu de melding "Nieuw, fris uiterlijk" met de "x"-knop. Deze knop heeft geen toegankelijke naam.
Hetzelfde probleem doet zich voor met de link met het huis-icoon en de knoppen met pijl-icoontjes voor het scrollen van menu-links. Zie pagina https://mijn.s-bb.nl/Home/Index.

Op alle pagina's verschijnt op een klein scherm de knop voor het mobiele menu. Deze knop heeft geen juiste rol, naam en geeft niet aan of het menu gesloten is of geopend. De juiste rol voor de menuknop zou “button” (knop) moeten zijn, omdat er een actie mee wordt uitgevoerd: het openen of sluiten van het menu. Als de knop niet de juiste rol heeft, kan een schermlezer of ander hulpmiddel de knop niet goed herkennen, waardoor deze moeilijker te gebruiken is voor mensen die deze hulptechnologie gebruiken. Zorg er daarom voor dat de knop “Menu” de juiste rol krijgt, door het button-element ervoor te gebruiken, of role="button" toe te voegen. Zorg dat de knop een toegankelijke naam krijgt, en dat deze naam van de knop de functie van de knop beschrijft. Zorg ook dat de naam mee verandert als de functie van de knop verandert (“menu openen” of “menu sluiten”). Zie pagina https://mijn.s-bb.nl/Home/Index.

In de header verschijnen op een klein scherm links met chat- en "? "-iconen. Deze links hebben geen toegankelijke naam. Zie pagina https://mijn.s-bb.nl/Home/Index.

Op pagina https://kwalificatiestructuur-mijn.s-bb.nl/ verschijnt op een klein scherm onder de tekst "Demo Leerbedrijf" een select-element. Dit select-element heeft geen toegankelijke naam. Hetzelfde probleem doet zich voor op pagina https://kwalificatie-mijn.s-bb.nl/, op pagina https://zoeken-mijn.s-bb.nl/, op pagina https://mijn.s-bb.nl/Kennisbank en andere.

Op pagina https://kwalificatiestructuur-mijn.s-bb.nl/, onder de tekst "Hoe helpen wij u verder?", staat een interactief element met de tekst "Ik zoek meer informatie over producten uit de kwalificatiestructuur". Dit element heeft niet de juiste rol (knop).

Op pagina https://kwalificatie-mijn.s-bb.nl/, boven de kop "Welkom op het register kwalificatiestructuur van SBB", staat een knop met een icoon van vierkantjes. Deze link heeft geen toegankelijke naam.

Op pagina https://kwalificatie-mijn.s-bb.nl/, onder de kop "Zoeken binnen het kwalificatieregister", staat een select-element. Dit select-element heeft geen toegankelijke naam.

Op pagina https://kwalificatie-mijn.s-bb.nl/, onder de kop "Zoeken binnen het kwalificatieregister", staat een zoekvak. Wanneer een bezoeker een tekst in het zoekvak invoert, verschijnt er een lijst met suggesties. De lijst met zoeksuggesties is niet programmatisch verbonden met het zoekveld. Voeg role="combobox" toe aan het invoerveld. Het attribuut aria-expanded is ook nodig om de status van verborgen inhoud (zichtbaar of niet) aan te geven.

Op pagina https://zoeken-mijn.s-bb.nl/, onder de kop "Zoeken naar erkende leerbedrijven", staat een carousel. Onder die carousel staat een dot-navigatie. Deze interactieve elementen hebben geen juiste rol (knop) en naam.

Op pagina https://zoeken-mijn.s-bb.nl/, onder de kop "Zoeken naar erkende leerbedrijven", staan knoppen met een zoek- en update-icoon. Deze knoppen hebben geen toegankelijke naam. Hetzelfde probleem doet zich voor op de pagina https://mijn.s-bb.nl/Kennisbank?groep=4, met de zoekknop en de "x"-link.

Op pagina https://zoeken-mijn.s-bb.nl/, onder de kop "Zoeken naar erkende leerbedrijven", staat de knop "Bedrijf". Wanneer de bezoeker "Opleiding" selecteert in deze dropdown, verschijnt ernaast een link met een menu-icoon. Deze link opent een nieuw venster. In de rechterbovenhoek van dit venster staat een sluit-"x"-knop. Deze knop heeft geen toegankelijke naam. Hetzelfde probleem doet zich voor bij het selecteren van de waarde "Sector". Zie ook pagina https://praktijkloket-mijn.s-bb.nl/ onder de kop "Praktijkloket" met een pijlknop.

Op pagina https://zoeken-mijn.s-bb.nl/, onder de kop "Zoeken naar erkende leerbedrijven", staat de knop "Bedrijf". Wanneer de bezoeker "Opleiding" selecteert in deze dropdown, verschijnt ernaast een link met een menu-icoon. Deze link opent een nieuw venster. In dit venster staat een interactieve lijst met iconen. Deze lijst heeft geen juiste rol (knoppen) en naam. Hetzelfde probleem doet zich voor bij het selecteren van de waarde "Sector". Hetzelfde probleem is op de pagina https://mijn.s-bb.nl/Kennisbank?groep=4, onder de tekst "Onderwerpen".

Op pagina https://zoeken-mijn.s-bb.nl/, onder de kop "Zoeken naar erkende leerbedrijven", staat de knop "Bedrijf". Wanneer de bezoeker "Opleiding" selecteert in deze knop, verschijnt ernaast een link met een menu-icoon. Deze link opent een nieuw venster. In dit venster bevinden zich selectievakjes. Wanneer een bezoeker een selectievakje selecteert, verschijnt de geselecteerde optie onderaan het venster met een "x"-element. Dit element heeft geen toegankelijke naam en de juiste rol (knop).

Op pagina https://mijn.s-bb.nl/Kennisbank?groep=4 in de zijkolom staan links die secties met verborgen inhoud openen. Al deze secties met verborgen inhoud hebben geen juiste rol (knoppen). Hetzelfde probleem op de pagina https://erkenning-mijn.s-bb.nl/, op pagina https://praktijkloket-mijn.s-bb.nl/ en op pagina https://praktijkloket-mijn.s-bb.nl/.

Op pagina https://bedrijf-mijn.s-bb.nl/, onder de kop "Personen", staat een lijst met personen. Sommige personen hebben onzichtbare links in de cel met het telefoonnummer. Bijvoorbeeld "Dhr. Joffrey Kater". Deze links hebben geen toegankelijke naam.

Op pagina https://bedrijf-mijn.s-bb.nl/, onder de kop "Personen", staat een lijst met personen. Elke persoon heeft een element met drie puntjes. Deze elementen hebben geen toegankelijke naam en de juiste rol (knop).

Op pagina https://profiel-mijn.s-bb.nl/ ontbreken toegankelijke namen bij de tekstvakken. Hierdoor is het voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet duidelijk wat zij in moeten vullen. Invoervelden moeten altijd een toegankelijke naam hebben die het doel van het veld beschrijft. Geef het invoerveld dus een toegankelijke naam, bijvoorbeeld door een label-element aan het veld te koppelen.

Op pagina https://leerplaats-mijn.s-bb.nl/, onder de kop "Leerplaatsen overzicht", bevinden zich elementen met driehoeks-iconen met een uitroepteken en elementen met een "i"-icoon. Deze elementen hebben geen toegankelijke naam en de juiste rol (knop).

Op pagina https://leerplaats-mijn.s-bb.nl/, onder de kop "Leerplaatsen overzicht", bevinden zich secties met verborgen inhoud. In deze secties bevinden zich in de cel "ACTIES" links met de iconen pen, kopieer en verwijder. Deze links hebben geen toegankelijke naam.

Op pagina https://webshop-mijn.s-bb.nl/ staan interactieve elementen, bijvoorbeeld "Stickervel SBB Erkend leerbedrijf". Deze elementen hebben geen juiste rol (links).

Op pagina https://webshop-mijn.s-bb.nl/, bekeken op een klein scherm, verschijnt de knop "Categorie filter". Deze knop opent extra inhoud met filters. In deze extra inhoud staat in de rechterbovenhoek een element met een pijl-icoon. Dit element heeft geen toegankelijke naam en de juiste rol (knop).

Op pagina https://upload-mijn.s-bb.nl/, onder de kop "Studentgegevens uploaden ten behoeve van BPV monitor", staan keuzerondjes. Wanneer een bezoeker "Uploaden studentgegegevens" selecteert, verschijnt het element "Selecteer bestand". Dit element heeft geen juiste rol (knop).

Op pagina https://stagetekorten-mijn.s-bb.nl/registratie staan select-elementen. In de HTML naast deze select-elementen bevinden zich comboboxen zonder toegankelijke naam.

Op pagina https://praktijkloket-mijn.s-bb.nl/, onder de tekst "Actuele deelnemers", staan selectievakjes. Deze selectievakjes hebben geen toegankelijke naam.

Uitkomst: Voldoende