Rapport:
Audit digitale toegankelijkheid website s-bb.nl

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.s-bb.nl/onderwijs/pro-en-vso-leerlingen/ staat een afbeelding met een stappenplan. De afbeelding is niet van een alternatieve tekst voorzien, maar visueel is er wel een beschrijving (“De stappen om tot een praktijkverklaring te komen:”). Zorg dat de afbeelding van toegankelijke tekst is voorzien dat het omschrijft. Men kan er ook voor kiezen om de bestaande tekst te koppelen aan de afbeelding middels figure en figcaption elementen.

De SVG in de contrastknop op iedere pagina op https://www.s-bb.nl/ is niet als decoratief aangeduid. Omdat de knop een label heeft, mag de SVG namelijk als decoratief aangeduid worden. Gebruik de attributen focusable="no" en aria-hidden="true" om dit op te lossen.

De SVG in de knop om de infographic op https://www.s-bb.nl/onderwijs/pro-en-vso-leerlingen/ te vergroten heeft geen alternatieve tekst. Aangezien de knop geen label heeft (zie SC 4.1.2), is de SVG niet decoratief en is alternatieve tekst nodig. Voeg deze toe. Hierdoor heeft de knop meteen een label. Als men echter de knop een label geeft met bijv. aria-label, dan is de SVG decoratief en dient de SVG als zodanig aangeduid te worden (met de attributen focusable="no" en aria-hidden="true").

Op https://www.s-bb.nl/onderwijs/pro-en-vso-leerlingen/ wordt de infographic geopend in een overlay of modal als je deze vergroot. In dat venster heeft de infographic een leeg alt-attribuut, maar de infographic is niet decoratief. Voeg alt-tekst toe. Dit speelt ook op https://www.s-bb.nl/organisatie/organogram/, https://www.s-bb.nl/omscholen-en-bijscholen/diplomawaardering/.

De links om te delen op social media op https://www.s-bb.nl/nieuws/drone-operations-specialist-nieuwe-mbo-opleiding-in-de-maak/ hebben geen linktekst. Dat wordt wel geprobeerd, door op de i-elementen het alt-attribuut te zetten, maar dat attribuut kan niet op dat element gebruikt worden en zal dus niet herkend worden door hulpsoftware. Verwijder het alt-attribuut en verzorg linktekst op een andere manier.

Op https://www.s-bb.nl/organisatie/directie-en-bestuur/ ontbreekt er alt-tekst voor de foto’s, bijvoorbeeld die van Hayo van den Brugge. Onder de tekst staat de informatieve beschrijving, echter is dit niet gekoppeld aan de foto. Schermleessoftware ziet hier het verband niet. Dit is voornamelijk een probleem indien men meerdere afbeeldingen en platte teksten plaatst op een dergelijke wijze op een pagina plaatst, omdat men dan niet meer weet bij welke afbeelding de beschrijving hoort. Los dit op door bijvoorbeeld een afbeelding en corresponderende beschrijving te plaatsen in aan elkaar gekoppelde figure en figcaption elementen.

In https://www.s-bb.nl/media/eg2jvthq/inspiratiekaart-maart-2022.pdf zijn de logo's op het titelblad en op de laatste pagina niet aangeduid als afbeelding. Deze logo's zijn niet decoratief en voegen informatie toe aan het document. Hierdoor is het aanduiden als afbeelding en het voorzien van alt-tekst belangrijk. Indien dezelfde logo’s meermalig voorkomen in PDF’s, bijvoorbeeld voor header- of footeropmaak, dient schermleessoftware ze eenmalig voor te lezen en kunnen ze elders als artifact getagd worden zodat de software ze elders negeert.

In https://www.s-bb.nl/media/whxb0sg1/tg_2402109_regioschetsen-basiscijfers-jeugd-2023_v4.pdf zijn de grafieken in de regioschetsen niet getagd. Maak de grafieken op als afbeelding en verzorg alt-tekst om dit op te lossen. Dit geldt ook voor de grafieken in https://www.s-bb.nl/media/oviekzuu/jaarverslag-sbb-2023.pdf.

Advies: Op pagina https://www.s-bb.nl/onderwijs/pro-en-vso-leerlingen/ is er een uitgeschreven tekst onder de afbeelding van het stappenplan aanwezig. Blinde gebruikers van schermleessoftware komen hier echter pas achter nadat ze langs de afbeelding en de vergrootfunctie genavigeerd zijn. Men kan bij dergelijke afbeeldingen aangeven dat er een toegankelijk alternatief aanwezig is, bijvoorbeeld middels “zie uitklapmenu voor toegankelijke tekst” als visueel verborgen content bij de zin “De stappen om tot een praktijkverklaring te komen” via een “sr-only" CSS class. Men kan ook de afbeelding zelf van een dergelijke verklarende instructie voorzien. Dergelijke afbeelding + uitklaptekst combinaties doen zich op meerdere pagina’s op de website voor. Met name wanneer er meerdere afbeeldingen op de pagina staan kan dit een probleem zijn, gezien men het overzicht verliest bij welke afbeelding welke tekst hoort.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Voldoende

Bevindingen: Advies: op de pagina https://www.s-bb.nl/bedrijven/leerbedrijf-worden/ is er een transcript onder de video. Maar bij de video zelf, wordt er niet vermeld dat er een transcript aanwezig is. Dit kan men oplossen door in het title-attribuut van het iframe toe te voegen dat een transcriptie beschikbaar is onder de video. Dit speelt ook op andere getoetste pagina's, bijvoorbeeld https://www.s-bb.nl/onderwijs/pro-en-vso-leerlingen/, https://www.s-bb.nl/onderwijs/internationale-beroepspraktijkvorming/, https://www.s-bb.nl/omscholen-en-bijscholen/diploma-certificaat-praktijkverklaring/, https://www.s-bb.nl/bedrijven/.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://www.s-bb.nl/onderwijs/pro-en-vso-leerlingen/ staat een video waar tekst in beeld komt, waar geen audiodescriptie voor bestaat. Bijvoorbeeld de naam en functie van Francis Gremmen rond 0:12, de tekst “praktijkverklaring als schakel naar duurzaam werk” rond 2:05 en “Meer informatie? Neem contact op met onze servicedesk 088 388 00 00 of info@s-bb.nl” rond 2:13. Tevens komt aan het einde het organisatielogo in beeld wat ziende bezoekers kenbaar maakt van welke organisatie de video afkomstig is. (Dit is relevant indien men ook video van andere organisaties op de website plaatst of naartoe linkt). Er is een uitgeschreven tekst aanwezig om aan SC 1.2.3 te voldoen, maar dit is voor dit criterium ontoereikend. Zorg dat alle inhoudelijke tekst in video met audiodescriptie wordt aangeboden, bijvoorbeeld middels een extra audiospoor. Dit probleem doet zich op meerdere pagina's met video voor.

Uitkomst: Onvoldoende

Bevindingen: Op https://www.s-bb.nl/pagina-niet-gevonden/?redirect=www.s-bb.nl/oepsie wordt in de zijbalk visueel aangegeven wat de huidige categorie voor vragen is. De items zijn button-elementen. Dit is semantisch niet correct. Knoppen dien je te gebruiken om een actie te bevestigen (formulier versturen) en links gebruik je om naar iets toe te gaan. Aangezien het selecteren van een categorie onder het laatste valt, dienen er links gebruikt te worden.

Op https://www.s-bb.nl/contact/ kan men in de eerste stap selecteren of het een vraag, klacht of signaal betreft. Omdat dit een optie betreft met meerdere antwoorden, moet dat ook duidelijk naar hulpsoftware gecommuniceerd worden. De juiste structuur ontbreekt hier echter voor, wat voor verwarring bij het invullen kan zorgen: er is wel een fieldset, maar geen legend aanwezig. Zorg voor beiden zodat het verband tussen de vraag en de antwoordopties duidelijk is. Let op: dit probleem komt voor bij elke groep van meerdere keuzerondjes in formulieren, bijvoorbeeld ook op pagina https://www.s-bb.nl/organisatie/directie-en-bestuur/overlegtafels/studentenkamer/. Het is ook een probleem bij ook bij de filteropties op https://www.s-bb.nl/studenten/diplomawaardering/download-jouw-certificaatsupplement/?Weergave=Lijst in de zoekweergave, waar dergelijke keuzerondjes gehanteerd worden.

Op https://www.s-bb.nl/bedrijven/praktijkopleider/ik-als-praktijkopleider/ wordt de verandering van de inhoud door het kiezen van een andere optie onder "Taken" niet gecommuniceerd naar screenreaders. Zet een live region op de koppen van die inhoud, zoals <h4 class="learning-block__list-title learning-block__list-title--small">Verbeter vaardigheden als praktijkopleider</h4>.

Op https://www.s-bb.nl/onderwijs/erkende-opleidingscode/ heeft het zoekveld voor de opleidingscode een label, maar het label en het veld zijn niet met elkaar geassocieerd. Dit komt doordat het for-attribuut bij het label-element ontbreekt en er dus geen verwijzing is naar het veld. Voeg het attribuut toe en zorg dat je naar het veld verwijst om dit op te lossen. Dit geldt ook voor het zoekveld op dezelfde pagina dat boven de tabel met zoekresultaten verschijnt.

Op https://www.s-bb.nl/onderwijs/erkende-opleidingscode/ worden de zoekresultaten als je zoekt op een opleidingscode niet gecommuniceerd naar screenreaders. Zet een live-region op de kop Resultaten om dit op te lossen.

Op pagina https://www.s-bb.nl/studenten/diplomawaardering/download-jouw-certificaatsupplement/?Weergave=Lijst in de alfabetische weergave is een tabel met daarin tabelkoppen. Deze worden echter genest in gewone cellen, wat mogelijke impact heeft op het correct voorlezen van de structuur van de tabel door hulpsoftware. Zorg dat elke letter een aparte tabel is en op een correcte manier tabelkoppen gebruikt en dat er geen lege tabelkoppen zijn.

Op https://www.s-bb.nl/bedrijven/financiele-mogelijkheden/ wordt op de deelknoppen het attribuut tabindex=0 gezet. De deelknoppen zijn namelijk links, maar omdat er geen href-attribuut is, is de link anders niet bedienbaar. Echter wordt er het verkeerde element gebruikt: links zijn om naar een nieuwe pagina te gaan, knoppen zijn om een actie te bevestigen (formulier versturen, openen van een modal, etc.). In dit geval past het gebruik van het button-element voor de deelknop beter. Vervang het element, dan hoeft het tabindex-attribuut ook niet meer gebruikt te worden. Dit speelt ook op https://www.s-bb.nl/activiteiten/publicaties/, https://www.s-bb.nl/omscholen-en-bijscholen/financiele-mogelijkheden/

Op https://www.s-bb.nl/organisatie/werken-bij/vacatures/functioneel-beheerder/ worden lijsten niet correct gebruikt. Zo is er onder "Provincies" en "Branches" wel een lijst item aanwezig, maar geen <ul> of <ol>. Onder "Plaats" is er een ongeordende lijst aanwezig (<ul>), maar de inhoud is niet in een lijstitem gezet. Dit is niet toegestaan volgens de HTML-standaard. De inhoud hoeft ook niet in een lijst te staan: lijsten van 1 item zorgen voor onnodige extra informatie die door screenreaders uitgesproken wordt. In dit geval volstaat het om de elementen die met lijsten te maken hebben te verwijderen.

Op https://www.s-bb.nl/omscholen-en-bijscholen/diplomawaardering/ zijn er lijsten onder "Welke diploma's wel" en "Welke diploma's niet", maar deze zijn niet in de code als lijsten opgemaakt. Structuur en semantiek overbrengen is vooral voor screenreaders heel belangrijk. Maak deze lijsten in HTML op als ongeordende lijsten (ul) met individuele lijstitems (li). Schermleessoftware leest overigens het ‘-‘ teken als min voor, wat extra ruis veroorzaakt bij opsommingen, en mogelijk verwarring indien het cijfermatige lijsten betreffen.

In https://www.s-bb.nl/media/whxb0sg1/tg_2402109_regioschetsen-basiscijfers-jeugd-2023_v4.pdf is normale tekst als kop opgemaakt in het voorwoord en de introtekst bij de regioschetsen. Dit heeft impact op hoe de structuur van de PDF gezien wordt door hulpsoftware. Maak deze teksten op als normale tekst.

In https://www.s-bb.nl/media/whxb0sg1/tg_2402109_regioschetsen-basiscijfers-jeugd-2023_v4.pdf is het colofon niet getagd. Hierdoor is deze informatie niet beschikbaar voor hulpsoftware. Voeg tags toe om dit op te lossen.

Op https://www.s-bb.nl/zoeken/?q=wet&t=Pagina%2CNieuwsartikel wordt het laden van de resultaten als je de filteropties gebruikt, niet gecommuniceerd naar hulpsoftware. Bezoekers met screenreaders weten niet dat ze eigenlijk terug moeten tabben om terug bij de lijst met resultaten uit te komen (en dat deze bijgewerkt is). Dit is op te lossen door zowel visueel als in de code de zijbalk met filteropties en de container met content om te draaien. Hierdoor gaat een bezoeker wel weten dat hij bijgewerkte zoekresultaten kan verwachten na het gebruik van de filteropties.

In https://www.s-bb.nl/media/oviekzuu/jaarverslag-sbb-2023.pdf is het titelblad niet getagd. Hierdoor is deze informatie niet beschikbaar voor hulpsoftware. Voeg tags toe om dit op te lossen.

In https://www.s-bb.nl/media/oviekzuu/jaarverslag-sbb-2023.pdf is de kop Inleiding niet als kop opgemaakt. Dit heeft impact op hoe de structuur van de PDF gezien wordt door hulpsoftware. Maak dit op als een kop.

Advies: in https://www.s-bb.nl/media/whxb0sg1/tg_2402109_regioschetsen-basiscijfers-jeugd-2023_v4.pdf is op het titelblad de kop "Deze productie is in samemwerking met het UWV tot stand gekomen" dezelfde grootte als de titel van het document zelf. Aangezien visueel het een kleinere kop is, dient deze ook in een kleiner kopniveau opgemaakt te worden.

Uitkomst: Onvoldoende

Bevindingen: In https://www.s-bb.nl/media/oviekzuu/jaarverslag-sbb-2023.pdf is na de pagina voor ondertekeningen de informatie in het hoofdstuk 13 niet in de correcte volgorde getagd. De pagina's voor hoofdstuk 13 zijn omgedraaid in de codelaag. Dit heeft impact op de structuur van het document maar ook de betekenis van de informatie. Pas de volgorde aan in de codelaag.

Uitkomst: Onvoldoende

Bevindingen: In https://www.s-bb.nl/media/whxb0sg1/tg_2402109_regioschetsen-basiscijfers-jeugd-2023_v4.pdf wordt er in de tekst verwezen naar grafieken, maar omdat deze grafieken niet getagd zijn (zie succescriterium 1.1.1) verwijzen de grafieken nu naar niets. Gebruik daarnaast ook geen verwijzingen als "bovenstaande".

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op https://www.s-bb.nl/organisatie/directie-en-bestuur/overlegtafels/studentenkamer/ s een formulier waar de bezoeker onder andere het eigen e-mailadres en naam kan invullen. Het doel van deze en een aantal andere velden moet programmatisch kunnen worden bepaald, zodat velden automatisch kunnen worden ingevuld of extra hulp kan worden geboden bij het invullen. Dit kan door het autocomplete-attribuut aan de input-elementen toe te voegen zoals hier het geval is. Het attribuut bevat echter de tekst “'Vul hier een geldig e-mailadres in” waardoor het niet meer functioneert. Correct gebruik van dit attribuut is autocomplete="email". Pas dit aan. Een overzicht van de velden waarvoor het autocomplete-attribuut van toepassing is en de waarde die nodig is in dit attribuut, staat op de pagina: https://www.w3.org/tr/wcag21/#input-purposes. Dit speelt ook op https://www.s-bb.nl/contact/.

Uitkomst: Onvoldoende

Bevindingen: Op https://www.s-bb.nl/studenten/diplomawaardering/download-jouw-certificaatsupplement/?Weergave=Lijst in de alfabetische weergave valt enkel op dat de inhoud in de tabel links zijn door te hoveren. Er is geen verschil met normale tekst. Geef de links een andere kleur en onderstreep ze.

Op https://www.s-bb.nl/pagina-niet-gevonden/?redirect=www.s-bb.nl/oepsie wordt in de zijbalk visueel aangegeven wat de huidige categorie voor vragen is met enkel een kleurverschil. Dit heeft impact op blinden en slechtzienden. Gebruik nog een andere methode (bijvoorbeeld onderstrepen) om dit duidelijker te maken. Zie ook 4.1.2 voor een gerelateerd probleem.

In https://www.s-bb.nl/media/oviekzuu/jaarverslag-sbb-2023.pdf is de informatie in de grafieken en taartdiagrammen enkel via kleur te onderscheiden. Dit heeft impact op kleurenblinden. Gebruik naast kleur ook patronen om de verschillende informatie in een grafiek over te brengen.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.s-bb.nl/ doet zich bij eerste bezoek van de website een cookiemelding voor. De knop "cookie instellingen" bevat witte tekst op een grijze achtergrond (HEX #B1B3B1). Hier is sprake van 2,1:1 contrast waar dit minimaal 4,5:1 behoort te zijn. Pas de kleurencombinatie aan.

Op https://www.s-bb.nl/ heeft de combinatie van groen (HEX #00AD89) met wit doorheen (gebruikt voor knoppen en links) een contrastverhouding van 2,8:1, waar deze minimaal 4,5:1 moet zijn. Gebruik een donkerdere kleur groen. Dit komt op de hele website voor.

In de footer op https://www.s-bb.nl/ hebben de grijze (HEX #8F8F8F) links onvoldoende contrast met de witte achtergrond. De contrastverhouding is 3,2:1 waar het minstens 4,5:1 moet zijn. Gebruik een donkerdere kleur voor de links.

Op pagina https://www.s-bb.nl/contact/ staat een formulier. Indien men met hover over de visuele knop "Bestanden kiezen" staat, kleurt de achtergrond opaalgroen (HEX #C1E7E1). Het contrast met de groene tekst (HEX #00AD89) is hier 2,1:1 waar dit minimaal 4,5:1 behoort te zijn. Pas de kleurencombinatie aan. Gezien HEX #00AD89 een standaardopmaak voor verschillende soortgelijke visuele knoppen schijnt te zijn, kan dit probleem zich op meerdere pagina's voordoen.

Op pagina https://www.s-bb.nl/contact/ staat een formulier. De keuzerondjes bij onder andere het visuele label "Betreft*" zijn met een lichtgrijze arcering (HEX #DBDBDB) nauwelijks van de grijze achtergrond (HEX #F1F5F8) te differentiëren. Het betreft hier een contrast van 1,2:1 waar dit minimaal 3:1 behoort te zijn. Pas de kleurencombinatie aan.

Op https://www.s-bb.nl/pagina-niet-gevonden/?redirect=www.s-bb.nl/oepsie wordt in de zijbalk visueel aangegeven wat de huidige categorie voor vragen is. De huidige categorie is in zwart, de andere worden in grijs weergegeven. Deze grijze (HEX #9B9B9B) kleur heeft onvoldoende contrast en biedt een verhouding van 2,77 waar het minstens 4,5:1 moet zijn. Dit komt ook voor op Op https://www.s-bb.nl/bedrijven/praktijkopleider/ik-als-praktijkopleider/.

Op https://www.s-bb.nl/bedrijven/leerbedrijf-worden/ hebben diverse kleurencombinaties te weinig contrast. Zo is er de combinatie van oranje (HEX #F27200) op wit een met een contrastverhouding van 2,9:1. Op donkeroranje (HEX #FEF1E6) een contrastverhouding van 2,6:1. Op lichtoranje (HEX #FCE3CC) een contrastverhouding van 2,3:1. Op oranjeroze (HEX #FBD5B3) een contrastverhouding van 2,1:1. Er is ook de combinatie grijs (HEX #666666) en oranjeroze (HEX #FBD5B3) met een contrastverhouding van 4,1:1. Tevens doen zich contrastproblemen voor tussen grijze tekst (HEX #666666) en de verschillende voorgenoemde oranje kleurvariaties. Voor gewone tekst dient de contrastverhouding minimaal 4,5:1 te zijn en voor grote tekst minimaal 3:1. Grote tekst wordt gedefinieerd als 18pt (24 CSS-pixels) met een normaal lettertypegewicht of 14pt (18,67 CSS-pixels) vette tekst (font-weight minstens 700). Dergelijke contrastproblemen doen zicht op meerdere pagina’s op de website voor. Het is raadzaam om integraal de verschillende kleurcombinaties te inventariseren en goede alternatieven met voldoende contrast te implementeren.

Op https://www.s-bb.nl/bedrijven/praktijkopleider/ik-als-praktijkopleider/ heeft de grijze tekst (HEX #8F8F8F) in het blok "Uitgelicht" onvoldoende contrast met de grijze achtergrond (HEX #F1F5F8). De contrastverhouding is 2,9:1 waar het minstens 4,5:1 moet zijn.

Op https://www.s-bb.nl/onderwijs/erkende-opleidingscode/ heeft de kleurencombinatie van geel (HEX #F9B233) en wit onvoldoende contrast. De contrastverhouding is 1,8:1. De combinatie van donkergeel (HEX #D89001) met wit levert een contrastverhouding op van 2,6:1. Voor gewone tekst dient de contrastverhouding minimaal 4,5:1 te zijn en voor grote tekst minimaal 3:1. Grote tekst wordt gedefinieerd als 18pt (24 CSS-pixels) met een normaal lettertypegewicht of 14pt (18,67 CSS-pixels) vette tekst (font-weight minstens 700). Dergelijke contrastproblemen doen zicht op meerdere pagina’s op de website voor.

Op https://www.s-bb.nl/onderwijs/internationale-beroepspraktijkvorming/ levert de combinatie van donkergeel (HEX #D89001) met wit een contrastverhouding op van 2,6:1. Voor gewone tekst dient de contrastverhouding minimaal 4,5:1 te zijn en voor grote tekst minimaal 3:1. Grote tekst wordt gedefinieerd als 18pt (24 CSS-pixels) met een normaal lettertypegewicht of 14pt (18,67 CSS-pixels) vette tekst (font-weight minstens 700). Dit komt ook voor op https://www.s-bb.nl/onderwijs/pro-en-vso-leerlingen/.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan verdwijnt een deel van de tekst buiten beeld of wordt deze afgekapt. Dit komt voor op de pagina's https://www.s-bb.nl/bedrijven/praktijkopleider/ik-als-praktijkopleider/ (blokje SSB workshops), https://www.s-bb.nl/bedrijven/financiele-mogelijkheden/, https://www.s-bb.nl/activiteiten/publicaties/ https://www.s-bb.nl/organisatie/directie-en-bestuur/, https://www.s-bb.nl/omscholen-en-bijscholen/financiele-mogelijkheden/, https://www.s-bb.nl/onderwijs/erkende-opleidingscode/ (content overlapt bij zoekresultaten), https://www.s-bb.nl/studenten/diplomawaardering/download-jouw-certificaatsupplement/?Weergave=Lijst en https://www.s-bb.nl/organisatie/directie-en-bestuur/overlegtafels/leden-overlegtafels/ (geen scrollbalk bij tabel). Zorg ervoor dat content zich aanpast en meeschaalt als zowel de grootte van de viewport als de grootte van de tekst wordt aangepast.

Uitkomst: Onvoldoende

Bevindingen: Op elke pagina op https://www.s-bb.nl/ in het blok "Nieuwsbrief" valt de focusindicator niet op. De focusindicator is een zwarte rand (HEX #000000), en heeft een contrastverhouding van 1,5:1 met de bijna-zwarte achtergrond (HEX #0E3129), waar het minstens 3:1 moet zijn.

De focusindicator op https://www.s-bb.nl/ valt niet voldoende op door de achtergrondafbeelding bij de links "Activiteiten", "Organisatie", "Contact", het zoekveld en de knoppen "Mijn SBB", "English" en de contrastknop in de hoofdnavigatie. Bij de link "Contact" is de contrastverhouding 1,7:1, waar het minimaal 3:1 moet zijn. Zorg dat de focusindicator altijd duidelijk opvalt vergeleken met de kleuren in de afbeelding. Een oplossing is om bijvoorbeeld de links een witte achtergrond te geven (en te onderstrepen) als focusstijl of om de achtergrondafbeelding niet door te trekken naar de navigatie. Dit speelt ook op https://www.s-bb.nl/nieuws/drone-operations-specialist-nieuwe-mbo-opleiding-in-de-maak/.

Op https://www.s-bb.nl/studenten/diplomawaardering/download-jouw-certificaatsupplement/?Weergave=Lijst heeft de zwarte focusindicator (HEX #000000) onvoldoende contrast met de paarse (HEX #791B4A) achtergrond in het blok "Niet gevonden?". De contrastverhouding is 2,1:1, waar het minstens 3:1 moet zijn.

Op https://www.s-bb.nl/omscholen-en-bijscholen/diploma-certificaat-praktijkverklaring/ heeft de zwarte focusindicator (HEX #000000) onvoldoende contrast met de donkergroene (HEX #025355) achtergrond. De contrastverhouding is 2,4:1 waar het minstens 3:1 moet zijn. Dit komt ook voor op https://www.s-bb.nl/omscholen-en-bijscholen/diplomawaardering/.

Op https://www.s-bb.nl/activiteiten/publicaties/heeft de zwarte focusindicator (HEX #000000) onvoldoende contrast met de donkerrode (HEX #880B14) achtergrond. De contrastverhouding is 2,1:1 waar het minstens 3:1 moet zijn. Dit komt ook voor op https://www.s-bb.nl/organisatie/directie-en-bestuur/, https://www.s-bb.nl/organisatie/directie-en-bestuur/overlegtafels/leden-overlegtafels/, https://www.s-bb.nl/organisatie/directie-en-bestuur/overlegtafels/studentenkamer/.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op https://www.s-bb.nl/contact/ kan men in de eerste stap selecteren of het een vraag, klacht of signaal betreft. Deze keuzerondjes zijn echter geen keuzerondjes: het zijn label-elementen waarop tabindex=0 is gebruikt om geforceerd toetsenbordfocus te geven. Maar aangezien het een label is, en geen knop, gaan bezoekers niet weten dat het interactief is. Dit kan verwarrend zijn. De echte keuzerondjes zijn met CSS verwijderd door middel van display:none. Om zaken visueel te verbergen, mag display none niet gebruikt worden, omdat de informatie dan verwijderd wordt in plaats van verborgen. Om zaken visueel te verbergen, is de CSS clip techniek veel beter. Zie hiervoor bijvoorbeeld https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path. Maar in dit geval volstaat het om de echte keuzerondjes weer terug zichtbaar te maken en het overbodige label-element te verwijderen.

Op https://www.s-bb.nl/contact/ is er geen knop die bezoekers met hulptechnologie kunnen gebruiken om bijlagen toe te voegen aan het formulier. De visuele knop is een label-element waar tabindex=0 is gebruikt om geforceerd toetsenbordfocus te geven. Maar aangezien het een label is, en geen knop, gaan bezoekers niet weten dat het interactief is. Dit kan verwarrend zijn. Gebruik het button-element of een input type=button om een knop te verzorgen om bestanden te uploaden. In dat geval wordt de knopfunctie wel door schermleessoftware aangekondigd. Dit speelt ook op https://www.s-bb.nl/organisatie/directie-en-bestuur/overlegtafels/studentenkamer/.

Op https://www.s-bb.nl/onderwijs/pro-en-vso-leerlingen/ wordt de infographic geopend in een overlay of modal als je deze vergroot. De sluitknop in dat venster is niet bedienbaar met het toetsenbord. Dit komt doordat er een div-element wordt gebruikt in plaats van een button-element. Vervang het element om dit op te lossen. Dit komt ook voor op https://www.s-bb.nl/organisatie/organogram/. Zie tevens SC 2.4.7 voor de focuszichtbaarheid.

Advies: Op https://www.s-bb.nl/nieuws/ kunnen de datumvelden enkel ingevuld worden met de datumkiezer die opent bij gebruik van het veld. Niet iedere toetsenbordgebruiker weet hoe je in datumkiezer moet navigeren, mede omdat verschillende widgets anders werken. Zorg ervoor dat gebruikers ook gewoon zelf een datum kunnen invullen in het invoerveld als alternatieve methode en dat er instructies bij de velden staan over het verwachte datumformaat.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://www.s-bb.nl/bedrijven/leerbedrijf-worden/ wordt gebruikgemaakt van de videospeler van YouTube. Deze videospeler maakt gebruik van bediening door enkele tekentoetsen, bijvoorbeeld f voor fullscreen. Deze functionaliteit is iets wat mensen die afhankelijk zijn van spraaksoftware in de weg kan staan. Deze mensen zijn juist afhankelijk van die korte commando's om met spraaksoftware hun computer te bedienen. Los dit op door de embedcode van de YouTube video aan te passen zodat de bediening met tekentoetsen uit staat. Voeg de volgende eigenschap aan de embedcode toe: 'disablekb=1'. Met deze aanpassing zorg je ervoor dat je voldoet aan dit succescriterium.Dit komt ook voor op https://www.s-bb.nl/onderwijs/internationale-beroepspraktijkvorming/, https://www.s-bb.nl/onderwijs/pro-en-vso-leerlingen/, https://www.s-bb.nl/omscholen-en-bijscholen/diploma-certificaat-praktijkverklaring/ en https://www.s-bb.nl/bedrijven/

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op https://www.s-bb.nl/nieuws/ is er geen titel ingevuld. Zorg dat er door middel van het title-element een beknopte titel aanwezig is die de inhoud van de pagina beschrijft.

Uitkomst: Onvoldoende

Bevindingen: Op https://www.s-bb.nl/pagina-niet-gevonden/?redirect=www.s-bb.nl/oepsie bevat de header een lege iframe: <iframe id="_pericles_content_iframe">. In de DOM structuuur onder de tekst "Het spijt ons, we hebben de pagina die u zoekt niet gevonden.". Dit lege iframe ontvangt wel focus, en veroorzaakt daardoor een lege tabstop. Enkel interactieve elementen zoals links en knoppen dienen toetsenbordfocus te ontvangen, omdat het anders verwarrend kan zijn voor bezoekers met hulpsoftware. Verwijder het lege iframe om dit op te lossen. Dit komt ook voor op https://www.s-bb.nl/zoeken/?q=wet&t=Pagina%2CNieuwsartikel, https://www.s-bb.nl/bedrijven/leerbedrijf-worden/, https://www.s-bb.nl/bedrijven/financiele-mogelijkheden/, https://www.s-bb.nl/nieuws/, https://www.s-bb.nl/organisatie/werken-bij/vacatures/.

Op https://www.s-bb.nl/pagina-niet-gevonden/?redirect=www.s-bb.nl/oepsie ontvangt de landmark "main" (waar de unieke content van de pagina in is verwerkt) geheel de focus (div class="page__content" tabindex="0"). Enkel interactieve elementen zoals links en knoppen dienen toetsenbordfocus te ontvangen, omdat het anders verwarrend kan zijn voor bezoekers met hulpsoftware. Verwijder het tabindex attribuut om dit op te lossen. Dit probleem doet zicht structureel op iedere pagina's in het sample voor met deze landmark.

Op https://www.s-bb.nl/onderwijs/pro-en-vso-leerlingen/ wordt de infographic geopend in een overlay of modal als je deze vergroot. De focus blijft echter niet in deze overlay of modal: de website erachter blijft bedienbaar met het toetsenbord en links e.d. krijgen focus. Zorg dat de focus enkel in de overlay/modal blijft, en dat de website erachter geen focus krijgt en niet te bedienen is tot het venster is gesloten. Zie tevens SC 2.1.1.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.s-bb.nl/ komt meerdere keren de linktekst "Lees meer" voor. De links verwijzen echter naar verschillende pagina's en artikelen. Dit is verwarrend voor onder andere bezoekers met screenreaders, maar ook voor mensen die baat hebben bij een duidelijke navigatiestructuur. Zorg ervoor de linkteksten voorzien zijn van toegankelijke tekst dat informeert wat het specifieke betreft, in dit geval bijvoorbeeld de titel van het specifieke artikel/pagina.

Op https://www.s-bb.nl/bedrijven/praktijkopleider/ik-als-praktijkopleider/ kunnen de stappen gedeeld worden op social media. Bijvoorbeeld de stap "Wat was je van plan als praktijkopleider?". De social media-links hebben echter onduidelijke linktekst zoals "shareFacebook" als aria-label. Er zijn ook goede linkteksten binnen alt attributen toegevoegd ("Deel op Facebook"), maar het aria attribuut overschrijft dit alt attribuut. Pas het aria-label aan met duidelijke linktekst, bijvoorbeeld middels de tekst in het alt attribuut, of laat het aria-label algeheel weg.

Op https://www.s-bb.nl/studenten/diplomawaardering/download-jouw-certificaatsupplement/?Weergave=Lijst staan zoekresultaten in de zoekweergave. Indien men er een uitkiest, biedt het de mogelijkheid om het supplement meteen te downloaden in het Nederlands, Engels en Duits. De linktekst voor deze knoppen is echter gewoon "NL" of "EN". Dit biedt weinig context voor een bezoeker met een screenreader. Voeg in elk zoekresultaat een alternatieve tekst dat het linkdoel uitlegt toe, bijvoorbeeld "Download supplement".

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op https://www.s-bb.nl/zoeken/?q=wet&t=Pagina%2CNieuwsartikel is er geen focusindicator indien men door de zoekresultaten en de filteropties tabt. Interactieve elementen dienen een focusindicator te hebben, zodat bezoekers kunnen zien waar op de pagina ze zijn en op welk interactief element. Voeg een focusindicator toe.

Op https://www.s-bb.nl/omscholen-en-bijscholen/diplomawaardering/ is er geen focusindicator op de infographics en de knoppen voor de uitgeschreven tekst ervan. Voeg een focusindicator toe.

Op https://www.s-bb.nl/ hebben de items in de slider onder de kop "Laatste Nieuws" die niet in beeld zijn, het attribuut aria-hidden. Maar deze elementen staan nog wel in de focusvolgorde, wat verwarrend kan zijn voor bezoekers met hulpsoftware. Laat na het eerste artikel de focus naar de "vorige/volgende item" knopen gaan, en vervolgens direct naar "Meer nieuws". Zo hoeft een toetsenbordgebruiker niet eerst meermaals (35 keer) de tabtoets te gebruiken om langs de slider heen te navigeren.

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://www.s-bb.nl/bedrijven/leerbedrijf-worden/ is er een transcript aanwezig bij de video. Deze kan geopend worden met de knop "Uitgeschreven tekst". In de code heeft deze knop door het gebruik van het aria-label attribuut echter het label "Toon inhoud". Hierdoor komt het visuele label niet meer overeen met het label in de code. Dit heeft impact voor bezoekers die spraakbesturing gebruiken. Wijzig de inhoud van het aria-label attribuut. Dit speelt ook op https://www.s-bb.nl/onderwijs/internationale-beroepspraktijkvorming/, https://www.s-bb.nl/onderwijs/pro-en-vso-leerlingen/, https://www.s-bb.nl/omscholen-en-bijscholen/diploma-certificaat-praktijkverklaring/, https://www.s-bb.nl/organisatie/organogram/, https://www.s-bb.nl/omscholen-en-bijscholen/diplomawaardering/, https://www.s-bb.nl/bedrijven/.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Bij het invoeren van een ongeldig e-mailadres (met een komma in plaats van een punt) op https://www.s-bb.nl/contact/ wordt er geen fout gedetecteerd. Dit heeft impact op bezoekers die hulpsoftware gebruiken. Zorg dat de validatie detecteert dat er een ongeldig e-mailadres ingevuld is en dat er een suggestie gegeven wordt om het op te lossen. Dit speelt ook op https://www.s-bb.nl/organisatie/directie-en-bestuur/overlegtafels/studentenkamer/.

Uitkomst: Onvoldoende

Bevindingen: Op https://www.s-bb.nl/nieuws/ zijn twee datumvelden aanwezig. Deze hebben geen label, enkel een placeholder. Een placeholder wordt namelijk niet door alle schermlezers voorgelezen en verdwijnt als de gebruiker het veld gebruikt. Zorg dat de tekst zichtbaar blijft door een label te gebruiken, zodat bezoekers op elk moment kunnen zien wat de bedoeling is van deze velden.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op https://www.s-bb.nl/ hebben de knoppen om de slider te besturen onder "Laatste Nieuws" het woord "knop" in hun toegankelijke label. Dit is overbodig, aangezien de screenreader al zal aankondigen dat het een knop is (door het button-element). Verwijder het woord uit het label.

Op pagina https://www.s-bb.nl/onderwijs/pro-en-vso-leerlingen/ is een YouTube video via een iframe geplaatst. Daar is het title-attribuut leeg. Vul het title-attribuut in met een goede omschrijving van de inhoud van het iframe, bijvoorbeeld met de titel van de video.

Op https://www.s-bb.nl/ zijn links aanwezig met een icoon dat aan ziende bezoekers aangeeft dat de link een nieuw tabblad opent. Met deze links zijn er meerdere problemen aan de hand.
Ten eerste is tekst voor screenreaders aanwezig om aan te geven dat deze opent in een nieuw venster, maar is dit niet leesbaar: <span class="sr-only">s@Umbraco.GetDictionaryValue("external-link-screen-reader")</span>. Ten tweede wordt de eigenlijke linktekst, die ook de tekst voor screenreaders meeneemt, overschreven door het aria-label attribuut. Hierdoor gaat de aanvullende tekst voor screenreaders verloren. Pas om dit op te lossen de tekst voor screenreaders aan en verwijder het aria-label attribuut. Dit komt op de hele website voor waar dergelijke iconen gebruikt worden.

Op https://www.s-bb.nl/pagina-niet-gevonden/?redirect=www.s-bb.nl/oepsie wordt in de zijbalk visueel aangegeven wat de huidige categorie voor vragen is, maar programmatisch wordt dit niet aangeduid. Dit heeft impact op blinden en slechtzienden. Verander de button-elementen naar links en voeg het attribuut aria-current toe om de huidige actieve categorie aan te duiden.

Op https://www.s-bb.nl/pagina-niet-gevonden/?redirect=www.s-bb.nl/oepsie staan uitklapbare elementen met vragen en antwoorden onder de kop "Waar kunnen we u mee helpen?". Er wordt bij de elementen gebruik gemaakt van het aria-expanded attribuut om gebruikers van schermleessoftware de status van het element te weerleggen (ingeklapt of uitgeklapt), echter is dit niet correct opgemaakt. Het aria-expanded attribuut is op het li-element geplaatst, wat niet volgens de HTML standaard is toegestaan omdat dit door schermleessoftware incorrect voorgelezen kan worden. Verplaats het attribuut naar het button-element. Dit probleem komt voor op alle pagina's met dezelfde uitklapbare elementen.

Op https://www.s-bb.nl/bedrijven/financiele-mogelijkheden/ hebben de keuzelijsten voor regio en sector geen label. Hierdoor weten bezoekers met een screenreader niet wat de functie is van deze lijsten. Voeg een label toe om het op te lossen. Dit komt ook voor op https://www.s-bb.nl/omscholen-en-bijscholen/financiele-mogelijkheden/.

Op https://www.s-bb.nl/bedrijven/financiele-mogelijkheden/ als je de deeloptie gebruikt bij een van de resultaten, opent een modal met links naar social media. Er is een knop aanwezig om de modal te sluiten, maar deze heeft geen label. Hierdoor weten bezoekers niet wat de functie is van de knop en kan deze niet bediend worden met spraakbesturing. Verzorg een label om dit op te lossen. Dit speelt ook op https://www.s-bb.nl/activiteiten/publicaties/, https://www.s-bb.nl/omscholen-en-bijscholen/financiele-mogelijkheden/.

Op https://www.s-bb.nl/onderwijs/pro-en-vso-leerlingen/ heeft de knop om de infographic te vergroten geen label. Hierdoor weten bezoekers met screenreaders niet wat exact de functie is van deze knop en kunnen bezoekers die spraakbesturing gebruiken deze knop niet activeren. Voeg een label toe om dit op te lossen. Dit komt ook voor op https://www.s-bb.nl/organisatie/organogram/. https://www.s-bb.nl/omscholen-en-bijscholen/diplomawaardering/.

Op https://www.s-bb.nl/studenten/diplomawaardering/download-jouw-certificaatsupplement/?Weergave=Lijst in de zoekweergave, heeft de keuzelijst "Relevantie" geen label. Hierdoor weten bezoekers met een screenreader niet wat de functie is van deze lijst. Voeg een label toe om het op te lossen. Dit speelt ook op de pagina https://www.s-bb.nl/activiteiten/publicaties/ (voor de keuzelijst "Onderwerp"), https://www.s-bb.nl/organisatie/directie-en-bestuur/overlegtafels/leden-overlegtafels/ (de keuzelijsten "Namens", "Sectorkamer". "Marktsegment", "Vertegenwoordiger"),

Advies: Er wordt overbodig gebruik gemaakt van het aria-label attribuut. bijvoorbeeld bij de links in de footer en de links "Lees meer" en "Meer nieuws" op https://www.s-bb.nl/. Omdat de tekst tussen <a> en </a> al een toegankelijke naam of label geeft (die ook visueel te zien is), is het gebruik van aria-label niet nodig. De inhoud van aria-label overschrijft alle andere manieren om een element een toegankelijke naam of label te geven, wat mogelijk kan leiden tussen verschillen met het label in de code en het visuele label (wat een afkeuring is). Gebruik aria-label enkel als het echt noodzakelijk is.

Uitkomst: Onvoldoende

Bevindingen: Op https://www.s-bb.nl/contact/ wordt het bericht dat het contactformulier succesvol is verzonden, niet gecommuniceerd naar hulpsoftware. Hierdoor zullen bezoekers zich afvragen of het formulier wel verzonden is. Dit heeft te maken met dat de URL niet verandert, maar de content op de pagina dynamisch wordt bijgewerkt. Het is op te lossen door een live-region te gebruiken op het bericht of door elke stap en het succesbericht op een aparte URL te zetten. Dit speelt ook op https://www.s-bb.nl/organisatie/directie-en-bestuur/overlegtafels/studentenkamer/.