Onderzoek toegankelijkheid werkenbijhetcjib.nl versie 1.1

Hele sample

Uitkomst: Onvoldoende

homepage

Uitkomst: Onvoldoende

vacature management ondersteuner (vervangende pagina)

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Bovenaan de site staat een logo met de tekst ‘Centraal Justitieel Incassobureau Ministerie van Justitie en Veiligheid’. Deze afbeelding heeft geen alternatieve tekst. Voor een svg afbeelding kan dit worden gedaan door middel van het toevoegen van een ‘role=”img” en een title element (alleen een title element wordt niet goed ondersteund in alle screenreaders, in combinatie met een expliciete rol gaat dit wel goed). Hertoetsing: er is een role=”img” toegevoegd en een title attribuut, maar de tekst van de title is enkel ‘Logo’. Dit moet zijn ‘Logo Centraal Justitieel Incassobureau Ministerie van Justitie en Veiligheid’.

homepage

Onder ‘Maak kennis met ons’ staat een slider met daarin foto’s van personeelsleden. Deze foto’s hebben een lege alt-tekst. Portretfoto’s zijn echter niet decoratief en moeten daarom altijd een beschrijving hebben van de persoon op de foto.

vacature management ondersteuner (vervangende pagina)

Op de vervolgpagina’s na ‘direct solliciteren’ staan in de header en de footer afbeeldingen van een logo (‘Werken bij de Rijksoverheid is werken voor Nederland’). Deze afbeeldingen hebben geen goede alternatieve tekst. De afbeelding heeft een een aria-label met enkel te tekst ‘Logo Rijksoverheid’. De afbeelding in de footer is een img-element zonder alt-attribuut. Voeg een alt-tekst toe met de tekst op de afbeelding.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Onvoldoende

homepage

Uitkomst: Onvoldoende

vacatures

Uitkomst: Onvoldoende

vacature management ondersteuner (vervangende pagina)

Uitkomst: Onvoldoende

verhaal informatiecentrum

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Opmerking: De knop naar het mobiele menu is in Windows High Contrast mode niet zichtbaar. Dit komt doordat de knop geen tekst heeft en ook geen afbeelding, alleen CSS streepjes. Windows herkent dit niet als content. Dit kan worden opgelost door de afbeelding in svg te plaatsen en er een (transparante) outline omheen te zetten.

homepage

Onder ‘Maak kennis met ons’ staan statistieken visueel in paren. In de code zijn dit enkel teksten in div-elementen. Maak hier bijvoorbeeld een definition list van om deze teksten ook semantisch als paren op te maken. Hertoetsing: er is definition list gemaakt, maar deze is niet geldig opgemaakt. Een dl-element mag alleen direct dt- en dd-elementen bevatten.

vacatures

De checkboxes van de filters zijn niet gegroepeerd en hebben geen groepslabel. Dit kan worden gedaan via een fieldset en legend (waarbij de h3-koppen de legend-elementen worden) of via role="group" en een “aria-labelledby”-attribuut dat verwijst naar de beschrijvende h3-kop. Hertoetsing: de eerste 3 groepen hebben nu een groepslabel via de legend, maar de laatste groep (‘Dienstverband’) nog niet. Hierdoor is de koppen hiërarchie nu ook niet logisch: er is een h3-kop ‘type’, gevolgd door een h3-kop ‘Dienstverband’ (wat daar dan als enige onder zou moeten vallen op h4-niveau). Maak van de h3-kop dienstverband ook een legend element binnen een fieldset om dit op te lossen.

vacature management ondersteuner (vervangende pagina)

De intro-paragraaf is opgemaakt met het strong-element. Dat is hier niet voor bedoeld, maar voor het uitlichten van enkele woorden die extra aandacht behoeven. Screenreaders kunnen deze teksten op een andere manier voorlezen. Gebruik CSS om deze paragraaf anders te stylen.

Binnen de accordion staan kopjes die in de code zijn opgemaakt met het strong-element in plaats van met kopelementen. Screenreader gebruikers die navigeren via koppen missen deze nu. Maak hier (h4) kopelementen van. Dit komt op meerdere pagina’s voor.

Op de vervolgpagina na ‘direct solliciteren’ op https://career2.successfactors.eu/careers?company=WenS staan informatie-icoontjes. Deze zijn niet beschikbaar voor gebruikers van hulpsoftware. Het zijn links zonder href-attribuut en zonder tekst.

verhaal informatiecentrum

De intro-paragraaf is opgemaakt met het strong-element. Dat is hier niet voor bedoeld, maar voor het uitlichten van enkele woorden die extra aandacht behoeven. Screenreaders kunnen deze teksten op een andere manier voorlezen. Gebruik CSS om deze paragraaf anders te stylen.

Hele sample

Uitkomst: Onvoldoende

homepage

Uitkomst: Onvoldoende

homepage

Onder ‘Mooie verhalen’ staan h3-koppen met citaten van de verhalen. Hierboven staan kernwoorden, welke bij het verhaal horen. Deze horen in de code dan onder de h3-kop te staan. Nu is de volgorde niet logisch, en horen ze onder de h3 van het vorige item. Dit geldt ook voor de detailpagina van het verhaal, waar de kernwoorden boven de h1 staan. Hertoetsing: op de homepage is het aangepast, maar op de detailpagina nog niet.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

vacature management ondersteuner (vervangende pagina)

Uitkomst: Onvoldoende

vacature management ondersteuner (vervangende pagina)

Op de vervolgpagina na ‘direct solliciteren’ worden de autocomplete attributen (die bedoeld zijn om de velden automatisch in te vullen wanneer de gebruiker dat zo heeft ingesteld) niet correct gebruikt. Ze staan ingevuld als autocomplete="chrome-off". Dit moet bijvoorbeeld zijn autocomplete=”email”. Zie voor de volledige lijst https://www.w3.org/TR/WCAG21/#input-purposes.

Hele sample

Uitkomst: Onvoldoende

vacature management ondersteuner (vervangende pagina)

Uitkomst: Onvoldoende

vacature management ondersteuner (vervangende pagina)

Op de vervolgpagina na ‘direct solliciteren’ worden links in de tekst worden alleen met een verschil in kleur aangegeven (donkerblauw i.p.v. zwart). Slechtzienden en kleurenblinden kunnen missen dat hier een link staat. Voeg bijvoorbeeld onderstreping toe om dit duidelijker te maken.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

vacature management ondersteuner (vervangende pagina)

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Maak de layout zodanig responsive dat alle content bij inzoomen tot minimaal 200% beschikbaar blijft. Op een aantal plekken op de site is dit niet het geval.

vacature management ondersteuner (vervangende pagina)

Op de vervolgpagina’s bij het solliciteren valt de tekst van het logo bovenaan deels weg bij inzoomen vanaf 125%.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

homepage

Uitkomst: Onvoldoende

verhaal informatiecentrum

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Grafische elementen moeten een contrast hebben van minimaal 3:1. Dit geldt ook voor de randen of achtergrondkleur van invoervelden. Een aantal elementen op de website zitten qua contrast onder deze waarden.

homepage

Hertoetsing: het verschil tussen de niet-actieve en actieve (focus, hover) status van de ‘Vacatures’ links (geel/geel,1.2:1) en de ‘Meer info’ link (lila/wit, 2.7:1).

verhaal informatiecentrum

Het WhatsApp icoon om te delen (2.4:1).

Hele sample

Uitkomst: Voldoende

vacature management ondersteuner (vervangende pagina)

Uitkomst: Voldoende

vacature management ondersteuner (vervangende pagina)

Opmerking: er zijn al teksten van binnen de accordion zichtbaar wanneer de betreffende items nog niet uitgeklapt zijn.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

vacature management ondersteuner (vervangende pagina)

Uitkomst: Onvoldoende

vacature management ondersteuner (vervangende pagina)

Onderaan de content staat de vraag ‘Vindt u deze informatie duidelijk?’ Het beantwoorden van deze vraag met het toetsenbord is niet mogelijk. De invoervelden staan op visibility:”hidden”. Hertoetsing: met het toetsenbord kom je bij ‘Ja’ en daarna ga je door naar ‘Afdrukken’. De ‘Nee’ optie wordt overgeslagen. Terugnavigerend kun je er wel bij met toetsenbord, maar je krijgt dan geen veld om meer informatie te geven, wat je wel krijgt als de opties met de muis selecteert. Zorg dat dit ook werkt met het toetsenbord.

Op de vervolgpagina na ‘direct solliciteren’ op https://career2.successfactors.eu/careers?company=WenS staan bij velden informatie-icoontjes. Deze zijn niet allemaal te openen met het toetsenbord, doordat dit links zijn zonder href attribuut. Maak hier bijvoorbeeld buttons van met een popover.

Hertoetsing: de ‘to top’ link werkt niet meer met het toetsenbord. Het is een link zonder href attribuut, maar wel met een aria-label voor hulpsoftware. De screenreader herkent het wel en maakt het activeerbaar, maar zonder screenreader kun je het niet activeren (Chrome op Mac).

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

vacature management ondersteuner (vervangende pagina)

Uitkomst: Onvoldoende

vacature management ondersteuner (vervangende pagina)

Wanneer je met de ‘to top’ link naar het begin van de pagina gaat, scroll je visueel naar boven. De focus staat echter nog onderaan de pagina en gaat verder naar de Linkedin-link. Zorg dat de focus ook weer naar het begin van de pagina gaat. Hertoetsing: de link werkt nu niet meer met het toetsenbord wanneer je geen screenreader gebruikt. Zie ook 2.1.1.

Hele sample

Uitkomst: Onvoldoende

vacature management ondersteuner (vervangende pagina)

Uitkomst: Onvoldoende

vacature management ondersteuner (vervangende pagina)

Op de vervolgpagina na ‘direct solliciteren’ staat onder ‘Afdeling URL’ een link zonder tekst. Dit is een lege link, en kan daarom beter worden weggehaald.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

zoekresultaten

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Er zijn knoppen met Engelse labels op de site. Dit is mogelijk niet voor iedereen duidelijk. Maar hier bij voorkeur Nederlandse teksten van. Enkele voorbeelden:

• Algemeen: het mobiele menu heeft als label “Open of sluit mainmenu”.
• Vacature: Onderaan de pagina staat een knop om te delen. Deze links hebben een Engelstalig label, zoals ‘Share on Twitter’.

zoekresultaten

Het label voor het zoekveld is ‘Foo bar 123’.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

De link achter het logo bovenaan de site heeft een andere toegankelijke naam (namelijk ‘home’) dan wat er zichtbaar is. Hierdoor kan de link niet met stem bediend worden. Zorg ervoor dat de toegankelijke naam (zoals alt-tekst) altijd minimaal de zichtbare tekst bevat. Het is hier ook goed om ‘logo’ aan de toegankelijke naam toe te voegen, zodat een gebruiker dat in het commando kan gebruiken (‘klik logo …’). Zie ook 1.1.1. Hertoetsing: de toegankelijke naam is aangepast, maar nog niet correct. Het aria-label is nu namelijk ‘Logo of , to the homepage’.

De button om te zoeken in de header heeft visueel het label ‘zoeken’, maar de toegankelijke naam (aria-label) is ‘Open of sluit de zoekbalk’. Hierdoor kan de link mogelijk lastiger met stem bediend worden. Zorg dat deze namen overeenkomen.

Hertoetsing: de toegankelijke naam van het zoekveld in de header is niet gelijk aan de zichtbare naam. Zichtbaar is ‘Waar ben je naar op zoek?’. De toegankelijke naam via het aria-label is ‘Trefwoord’. Het aria-label overschrijft de placeholder tekst. Zorg dat de toegankelijke naam minstens de zichtbare tekst bevat zoals ‘zoek’.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

vacature management ondersteuner (vervangende pagina)

Uitkomst: Onvoldoende

vacature management ondersteuner (vervangende pagina)

Bij het selecteren van een filter wordt meteen de set ververst. Op 100% weergave blijf je nog hetzelfde scherm zien en blijft de focus nog in het formulier (wel gaat het steeds weer naar de bovenste checkbox ‘vacatures’, het zou beter zijn wanneer de focus op de laatste checkbox blijft staan of naar het eerstvolgende veld gaat). Wanneer je bent ingezoomd, kom je voor het selecteren van de filters in een popup-scherm terecht. Na het selecteren van een checkbox (bij input), verdwijnt dit scherm. Dit wordt niet duidelijk gemaakt aan hulpsoftware. Wanneer de context verandert zonder dat er een duidelijke submit is gedaan, moet dit worden aangegeven aan de gebruiker. Wanneer een gebruiker niet kan zien dat het formulier weg is, kan dat erg verwarrend zijn. Voeg een submit-knop toe nadat alle gewenste filters geslecteerd zijn (met bijvoorbeeld een ‘pas filters toe’ label), of geef vooraf een waarschuwing dat bij het selecteren van één checkbox meteen de resultaten worden getoond.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

vacature management ondersteuner (vervangende pagina)

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

De knop om te zoeken bovenaan de site opent een extra blok met een zoekvenster. De status van deze button blijft op gesloten staan (aria-expanded=”false” ) wanneer deze geopend is. Pas de status aan. Hertoetsing: de status wordt nog niet herkend door screenreaders, doordat het attribuut verkeerd gespeld is: ‘aria-expandend’. Deze spelfout zit ook in de status van de submenu’s en het mobiele menu. De knop om te zoeken verwijst in het aria-controls attribuut naar een niet bestaand id:”cjib-search”.

vacature management ondersteuner (vervangende pagina)

Op de vervolgpagina na ‘direct solliciteren’ op https://career2.successfactors.eu/careers?company=WenS staat een aria-required=”true” attribuut op een element met role=”group”. Dit is niet toegestaan. Zie voor de specificatie van rollen waarop dit attribuut gebruikt kan worden https://www.w3.org/TR/wai-aria-1.1/#aria-required. In dit geval zou de rol ‘radiogroup’ passend zijn.

Het invoerveld voor het land heeft geen correcte rol. De opties voor de landen staan nu ingesteld als ‘menuitem’, maar ze zitten in een select-element. Hiervoor zijn de option-elementen voldoende, en hoeft er geen extra rol te worden toegevoegd. Het is dus het beste om hier de role="menuitem” attributen weg te halen.

Hele sample

Uitkomst: Voldoende