Rapport:
Audit digitale toegankelijkheid website DCMRnet

Uitkomst: Onvoldoende

Bevindingen: Op iedere pagina staat in de header het logo van DCMR milieudienst Rijnmond. De alternatieve tekst van de afbeelding is 'Organisatielogo'. De alternatieve tekst van een logo moet ten minste de naam van de organisatie bevatten. Wanneer het logo ook een link is, zoals in dit geval, is het een best practice om ook een linkdoel toe te voegen, bijvoorbeeld 'DCMR milieudienst Rijnmond - ga naar de homepage van DCMRnet'.

De headerafbeelding op pagina dcmrnl.sharepoint.com/sites/Organisatie heeft als alternatieve tekst 'Afbeelding: Organisatie, , '. Deze afbeelding is decoratief. Wanneer een decoratieve afbeelding een alternatieve tekst heeft, moet deze de inhoud van de afbeelding beschrijven. Dat is hier niet geval. In dit geval is de afbeelding ook een knop waarmee de afbeelding vergroot wordt geopend in een dialoogvenster en moet de alternatieve tekst deze functie beschrijven. Zie ook succescriterium 4.1.2. Dit komt op meerdere pagina's voor, waaronder op pagina dcmrnl.sharepoint.com/sites/ZelfRegelen. Een vergelijkbaar probleem komt voor op pagina dcmrnl.sharepoint.com/sites/Informatiecentrum/SitePages/Praktijkregels-voor-Drukapparatuur.aspx, met de afbeelding van de drukapparatuur. Deze afbeelding heeft geen alternatieve tekst.

Op pagina dcmrnl.sharepoint.com/sites/Organisatie/SitePages/bedrijfsvoering.aspx staan afbeeldingen van personen (de teamleden van afdeling bedrijfsvoering). Deze hebben een alternatieve tekst, maar omdat role=presentation gebruikt wordt is de afbeelding niet beschikbaar voor hulpsoftware. Verwijder role=presentation om dit probleem op te lossen. Daarnaast beginnen de alternatieve teksten met de tekst 'Afbeelding van...'. Dit is overbodig en storend voor bezoekers die gebruik maken van voorleessoftware. Pas de alternatieve teksten aan om dit probleem op te lossen.

Advies: Op onder andere pagina dcmrnl.sharepoint.com/sites/ICT/SitePages/Privacy-en%20informatiebeveiliging.aspx kunnen bezoekers gebruik maken van een insluitende lezer. Bij de instellingen kunnen bezoekers de snelheid van de stem aanpassen. Naast de cijfers 0,5 tot en met 2,5 half, is er visueel ook een icoon van een schildpad en een icoon van een haas aanwezig om aan te geven wat het verschuiven de slider doet. Deze iconen hebben geen alternatieve tekst en deze informatie is daardoor niet beschikbaar voor hulpsoftware. Omdat de getallen an sich voldoende informatie bieden is dit niet afkeurbaar, maar het is toegankelijker deze aanvullende informatie wel te bieden.

Advies: Wanneer bezoekers op de naam of profielfoto van een auteur klikken verschijnt er een dialoogvenster, bijvoorbeeld op pagina dcmrnl.sharepoint.com/sites/HR/SitePages/Vergoedingen-e.aspx. Onder 'Bestanden' staat een melding wanneer een persoon geen bestanden heeft gedeeld: '*naam persoon* heeft de laatste tijd geen bestanden met u gedeeld.'. De afbeelding boven deze melding is een svg-afbeelding, zonder alternatieve tekst. Er hoeft ook geen alternatieve tekst te zijn, want de afbeelding is decoratief. Een best practice is om decoratieve svg bestanden te verbergen voor hulpsoftware met aria-hidden, zodat de afbeelding geheel genegeerd kan worden door hulpsoftware.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: De video 'Nieuws plannen DCMRnet' op pagina dcmrnl.sharepoint.com/SitePages/Nieuws-aanmaken.aspx bevat geen ondertiteling. Voor alle gesproken tekst en andere belangrijke informatie in het geluid van een video of animatie (al dan niet interactief) moet ondertiteling geboden worden: een visuele versie van auditieve informatie. Op deze manier is de informatie ook beschikbaar voor bezoekers die doof of slechthorend zijn.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de homepage komen drie blokken voor die met een aria-attribuut de rol 'list' hebben gekregen, maar die geen list-items bevatten. Het gaat om de blokken 'Nieuws', 'Agenda' en 'Vacatures'. In plaats van list-items zijn de links directs onder het element met de rol 'list' geplaatst. Hierdoor weet hulpsoftware wel dat er een lijst aanwezig is, maar omdat er geen individuele items aanwezig zijn, niet uit hoeveel items de lijst bestaat en worden er geen individuele lijstitems voorgelezen. Dit is verwarrend voor bezoekers die gebruik maken van hulpsoftware. Maak de lijsten correct op om dit probleem op te lossen. Dit probleem komt op meerdere pagina's voor, waaronder op pagina dcmrnl.sharepoint.com/sites/Organisatie.

Op de homepage staan blokken content, onder bijvoorbeeld 'Nieuws' en 'Agenda'. De dikgedrukte teksten zien er visueel uit als een koptekst, maar zijn dat in de code niet. Bezoekers die gebruik maken van voorleessoftware kunnen aan de hand van een sneltoets of koppenlijst over een pagina navigeren. Teksten die er alleen visueel uit zien als kop maar dat onder water niet zijn, zijn niet op die manier herkenbaar en bereikbaar. Maak deze teksten op met een kop-element om dit probleem op te lossen. Dit probleem komt op meerdere plekken voor, waaronder op pagina dcmrnl.sharepoint.com/_layouts/15/news.aspx.
Een vergelijkbaar probleem komt voor op pagina dcmrnl.sharepoint.com/sites/Organisatie, waar de tekst 'Organisatie' niet is opgemaakt als koptekst. Op de rest van de pagina komt ook het eerder benoemde probleem voor.

Op pagina dcmrnl.sharepoint.com/sites/Informatiecentrum/SitePages/Praktijkregels-voor-Drukapparatuur.aspx is de tekst 'Ga naar PRDA' opgemaakt als kopniveau 3. Wanneer een tekst opgemaakt is als kop, moet er onder die tekst ofwel content, ofwel een kop van een kleiner niveau staan. Dit is omdat bezoekers die met een sneltoets of koppenlijst over de pagina te navigeren, verwachten informatie te vinden onder een koptekst. Verwijder het kop-element op deze tekst om dit probleem op te lossen.

Op onder andere pagina dcmrnl.sharepoint.com/sites/Organisatie wordt er door voorleessoftware méér tekst voorgelezen dan zichtbaar is, bijvoorbeeld bij de contentblokken 'Nieuws'. Dit komt omdat de tekst wel aanwezig is in de accessibility tree, maar visueel wordt afgebroken door beperkte ruimte. Dit is verwarrend voor bezoekers die voorleessoftware gebruiken om hen te helpen lezen, zij zien de tekst niet die wordt voorgelezen. Zorg ervoor dat informatie niet alléén beschikbaar is voor hulpsoftware, waar de informatie visueel niet aanwezig is.

De tabellen op pagina dcmrnl.sharepoint.com/sites/Organisatie/SitePages/Jong-DCMR.aspx zijn niet (geheel) goed opgemaakt. De tabelkoppen zijn opgemaakt als tabelcellen (td) in plaats van als tabelkoppen (th). Hierdoor is er geen relatie tussen de kopteksten en de onderliggende cellen. Er is met het aria-attribuut rol=columnheader aangegeven dat het om kopcellen gaat, maar dit aria-attribuut wordt alleen ondersteund wanneer het genest is in een role=row element, waar hier verder wel het tr-element (table row) gebruikt wordt. Gebruik ofwel alléén aria, ofwel (en bij voorkeur) alléén native HTML. Lees hier meer over op: developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/columnheader_role.

Op onder andere pagina dcmrnl.sharepoint.com/sites/Informatiecentrum/Gedeelde%20documenten/Forms/AllItems.aspx kunnen bezoekers resultaten filteren (met het trechter icoon), en een specifieke datum van wijzigen selecteren. De selectievakjes zijn niet gegroepeerd en gekoppeld aan de tekst 'Filteren op gewijzigd'. Gebruik een fieldset en legend combinatie om de selectievakjes te groeperen.

Op pagina dcmrnl.sharepoint.com/sites/HR/SitePages/Persoonlijk-Ontwikke.aspx is de tekst vanaf 'NB' opgemaakt met het em-element. Het em-element is bedoeld voor gesproken nadruk op een woord of korte zin, niet puur voor opmaak en in het bijzonder niet op hele paragrafen. Verwijder het em-element en gebruik bijvoorbeeld het i-element om deze tekst op te maken, indien gewenst.

Kopteksten zoals 'Een aanvraag via de opleidingscatalogus' op pagina dcmrnl.sharepoint.com/sites/HR/SitePages/Opleiding-aanvragen.aspx zijn opgemaakt met het em-element. Het em-element is bedoeld voor gesproken nadruk op een woord of korte zin. Kopteksten moeten herkenbaar zijn als kop voor hulpsoftware. Maak deze teksten daarom op met kop-element, zoals het h3-element.

De PDF die bezoekers kunnen downloaden op pagina dcmrnl.sharepoint.com/sites/HR/SitePages/Persoonlijk-Ontwikke.aspx is niet (goed) gecodeerd:

• De codelaag mist een document tag. Net zoals websites een html-element nodig heeft, heeft de codering van een PDF een basis-element nodig, dit is de document-tag, waarin alle andere tags zijn genest.
• Alle tekst op het voorblad is gecodeerd als figuur. Hierdoor wordt de tekst mogelijk gezien als een afbeelding door hulpsoftware.
• Informatieve afbeeldingen moeten een alternatieve tekst hebben en decoratieve afbeeldingen moeten worden opgemaakt als artefact, zodat hulpsoftware ze kan negeren.
• Koppen, zoals op pagina 2, zijn opgemaakt met de paragraaf-tag in plaats met een kop-tag.
• De tekst '€ 5.000, PER 5 JAAR VANAF IN DIENST' is opgemaakt met een kop-tag, terwijl dit geen koptekst is. Dit geldt ook voor alle woorden op pagina 3.
• De tekst 'Voor alle medewerkers in vaste of tijdelijke dienst 2 (minimaal 6 maanden).' is niet gecodeerd.
• De afbeeldingen missen een boundig-box, dit kan problemen veroorzaken met de leesvolgorde.

Advies: Op pagina dcmrnl.sharepoint.com/sites/ICT/SitePages/Privacy-en%20informatiebeveiliging.aspx wordt het em-element gebruikt om tekst schuingedrukt op te maken. Het em-element is bedoeld voor gesproken nadruk op een woord of korte zin, niet puur voor opmaak. Overweeg het em-element hier te verwijderen en eventueel het i-element te gebruiken.

Uitkomst: Onvoldoende

Bevindingen: Op de homepage staan blokken content, onder bijvoorbeeld 'Nieuws' en 'Agenda'. De afdelingsnaam waar het betreffende item bij hoort, staat hier bóven de kop van het item (zie succescriterium 1.3.1). Omdat het om meerdere blokken content gaat, is het voor bezoekers die gebruik maken van hulpsoftware daarom niet duidelijk bij welk item de afdelingslink hoort. Zorg ervoor dat alle metadata van een item ónder de kop van het item worden geplaatst in de code. Visueel mag het er wél boven staan. Dit probleem komt op meerdere pagina's voor, waaronder op pagina dcmrnl.sharepoint.com/_layouts/15/news.aspx.

Uitkomst: Onvoldoende

Bevindingen: Op pagina dcmrnl.sharepoint.com/sites/HR/SitePages/Opleiding-aanvragen.aspx staat de tekst ' zie het bestand rechts bovenaan de pagina.'. Alle instructies om content te kunnen begrijpen of te bedienen, moeten ook tekstueel en/of semantisch aanwezig zijn zodat de instructies ook te begrijpen zijn voor mensen die het beeld niet zien. Denk hierbij aan vorm, omvang, locatie, geluid en oriëntatie van de content, die ook tekstueel beschreven moet zijn op dezelfde pagina.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Wanneer een bezoeker over een naam of profielfoto hovert, bijvoorbeeld op pagina dcmrnl.sharepoint.com/sites/HR/SitePages/Persoonlijk-Ontwikke.aspx, opent aanvullende content. De linkjes onder 'Contactgegevens' in dit dialoogvenster zijn alleen herkenbaar als link doordat de linktekst donkerblauw is. Omdat de contrastratio tussen de blauwe en zwarte tekst slechts 2,2:1 is, is dit niet voldoende. Zorg ervoor dat deze links op nog minimaal één andere manier herkenbaar zijn als link, bijvoorbeeld door de linktekst te onderstrepen. Dit geldt ook voor de linkteksten 'Nu aanmelden' en 'Profielen zoeken op LinkedIn' onder het tabblad 'LinkedIn'.

Wanneer bezoekers een bericht achterlaten, bijvoorbeeld op dcmrnl.sharepoint.com/sites/Organisatie/SitePages/bedrijfsvoering.aspx, kunnen bezoekers door op weergaven te klikken een dialoogvenster openen met paginastatistieken. De informatie bij 'Paginaverkeer op tijd' is kleurafhankelijk. Zorg ervoor dat informatie op nog minimaal één andere manier te onderscheiden valt, bijvoorbeeld door verschillende achtergrond patronen te gebruiken.

Op pagina dcmrnl.sharepoint.com/sites/HR/SitePages/Persoonlijk-Ontwikke.aspx is tekst opgemaakt in het rood om aan te geven dat die tekst extra belangrijk is. Deze informatie is nu niet beschikbaar voor hulpsoftware. Voeg bijvoorbeeld informatie toe aan de kop, zoals 'Belangrijk: Storing onjuiste weergave van het POB in Youforce' om dit probleem op te lossen.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Bovenaan iedere pagina is een skiplink met de tekst 'Overslaan en naar hoofdinhoud gaan' aanwezig. De contrastratio tussen de groene tekst (HEX #72BF44) en de grijze achtergrond (HEX #F3F2F1) is 2:1 waar dat minimaal 4,5:1 moet zijn.

Op de homepage komt groene tekst (HEX #72BF44) op een grijze achtergrond (HEX #F3F5FB) voor, zoals de teksten 'Alles weergeven'. De contrastratio is hier 2:1 waar dat minimaal 4,5:1 moet zijn. Dezelfde kleur tekst komt ook voor op een witte achtergrond, zoals de groene teksten onder 'Agenda'. De contrastratio is hier 2,2:1 waar dat minimaal 4,5:1 moet zijn. Dit probleem komt op meerdere plaatsen op de website voor, waaronder in de dialoogvensters voor de profielen (zoals onder 'In dienst' op de homepage.

• Op onder andere pagina dcmrnl.sharepoint.com/sites/Organisatie kleurt onder andere de tekst 'Toevoegen' in dezelfde kleur wanneer bezoekers er overheen hoveren met de muis of er focus op plaatsen met het toetsenbord. Dit geldt ook voor de blauwe tegels op de pagina.
• Op onder andere pagina dcmrnl.sharepoint.com/sites/Organisatie/SitePages/bedrijfsvoering.aspx is de naam van degene die een opmerking geplaatst heeft opgemaakt met dezelfde groene kleur.
• Op pagina dcmrnl.sharepoint.com/sites/Organisatie/_layouts/15/search.aspx/siteall.
• Op meerdere pagina's en in meerdere dialoogvensters komen linkteksten en teksten in dezelfde kleur voor, onder andere op pagina dcmrnl.sharepoint.com/_layouts/15/search.aspx/people.
• Op onder andere pagina dcmrnl.sharepoint.com/sites/Informatiecentrum/Gedeelde%20documenten/Forms/AllItems.aspx kunnen bezoekers resultaten filteren (met het trechter icoon), en een specifieke datum van wijzigen selecteren. De datums naast de selectievakjes hebben hetzelfde contrastprobleem bij muis hover.

Op de homepage komt grijze tekst (HEX #A19F9D) op een grijze achtergrond (HEX #F3F2F1) voor, zoals de tekst 'Gebeurtenis toevoegen' onder 'Agenda'. De contrastratio is hier 2,3:1 waar dat minimaal 4,5:1 moet zijn. Dit probleem doet zich op meerdere pagina's voor, waaronder op pagina dcmrnl.sharepoint.com/sites/HR.

In de Twitter-widget op de homepage komt blauwe tekst (HEX #1D9CF0) op een witte achtergrond voor. De contrastratio is hier 2,9:1 waar dat minimaal 4,5:1 moet zijn.

Op pagina dcmrnl.sharepoint.com/sites/Organisatie komt witte tekst op een groene achtergrond (HEX 72BF44) voor, in het navigatiemenu bovenaan de pagina. De contrastratio is hier 1,9:1 waar dat minimaal 4,5:1 moet zijn. Dit probleem komt op meerdere pagina's voor, waaronder op pagina dcmrnl.sharepoint.com/sites/HR/SitePages/Vergoedingen-e.aspx en op pagina dcmrnl.sharepoint.com/sites/Informatiecentrum.

Op pagina dcmrnl.sharepoint.com/sites/HR staat een blok content met een blauwe achtergrond (HEX #25408F). Bij focus verschijnen er tooltips, maar de tekst daarin is niet leesbaar doordat de tekst zwart is. De contrastratio is hier 1,3:1 waar dat minimaal 4,5:1 moet zijn.

De PDF die te downloaden is op pagina dcmrnl.sharepoint.com/sites/HR/SitePages/Persoonlijk-Ontwikke.aspx bevat meerdere contrastfouten:

• De groene tekst (HEX #70B741) heeft een contrastratio van 2,4:1 op de witte achtergrond, waar dat minimaal 3:1 moet zijn voor grote tekst en 4,5:1 voor normale tekst.
• De oranje tekst (HEX #EF7D00) heeft een contrastratio van 2,7:1 op de witte achtergrond, waar dat minimaal 3:1 moet zijn voor grote tekst en 4,5:1 voor normale tekst.
• De blauwe tekst (HEX #00B2B8) heeft een contrastratio van 2,6:1 op de witte achtergrond, waar dat minimaal 3:1 moet zijn voor grote tekst en 4,5:1 voor normale tekst.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Wanneer bezoekers met schermgrootte 1280 bij 1024 inzoomen naar 400% op de homepage, zijn niet alle teksten meer goed leesbaar. De witte teksten in de blauwe tegels vallen bijvoorbeeld (deels) buiten beeld. Zorg ervoor dat zoomen niet zorgt voor verlies van functionaliteit of informatie.

Uitkomst: Onvoldoende

Bevindingen: Bovenaan iedere pagina is een skiplink met de tekst 'Overslaan en naar hoofdinhoud gaan' aanwezig. De contrastratio tussen de groene focusrand (HEX #72BF44) en de grijze achtergrond (HEX #F3F2F1) is 2:1 waar dat minimaal 3:1 moet zijn.

Wanneer een bezoeker over een naam of profielfoto hovert, opent aanvullende content. In dit venster kunnen bezoekers contactgegevens kopiëren door op het icoon van twee overlappende rechthoeken te klikken, dat verschijnt wanneer bezoekers over contactgegevens hoveren. De contrastratio tussen het groene icoon (HEX #7EC259) en de beige achtergrond (HEX #EDEBE9) is 1,8:1 waar dat minimaal 3:1 moet zijn.

• De knop om navigatie te verbergen (bijvoorbeeld op pagina dcmrnl.sharepoint.com/sites/Informatiecentrum/SitePages/Praktijkregels-voor-Drukapparatuur.aspx) heeft het zelfde probleem bij muis hover. In verborgen staat is het icoon ook zonder muishover groen.
• Op onder andere pagina dcmrnl.sharepoint.com/sites/ICT/SitePages/Privacy-en%20informatiebeveiliging.aspx staan permalink iconen (bij focus en muishover), waar hetzelfde kleurprobleem zich voordoet.

Wanneer bezoekers een bericht achterlaten, bijvoorbeeld op dcmrnl.sharepoint.com/sites/Organisatie/SitePages/bedrijfsvoering.aspx, kunnen bezoekers door op weergaven te klikken een dialoogvenster openen met paginastatistieken. De grafieken bevatten meerdere contrastproblemen:

• De contrastratio tussen de kleur gebruikt voor 0 bezoekers onder 'Paginaverkeer op tijd' (HEX #C2E7E7) en de witte achtergrond is 1,3:1 waar dat minimaal 3:1 moet zijn.
• De blauwe lijn (HEX #7BB5EC) in de lijngrafieken heeft op de witte achtergrond een contrastratio van 2,1:1 waar dat minimaal 3:1 moet zijn.
• De blauwe lijn (HEX #7BB5EC) in de lijngrafieken heeft met de lichtblauwe achtergrond (HEX #E7F1FB) een contrastratio van 1,9:1 waar dat minimaal 3:1 moet zijn.

Wanneer de contentitems in het blauwe blok op pagina dcmrnl.sharepoint.com/sites/HR focus hebben, is dat onvoldoende zichtbaar omdat het verschil tussen de witte focusrand en de normale groene rand om de afbeeldingen te weinig verschilt in contrast. Zorg ervoor dat het altijd goed zichtbaar is wanneer interactieve items toetsenbord focus hebben.

Advies: Op onder andere pagina dcmrnl.sharepoint.com/sites/Organisatie/SitePages/bedrijfsvoering.aspx de iconen (beantwoorden, leuk vinden) bij een opmerking opgemaakt met dezelfde kleur als de groene tekst (HEX #72BF44). De contrastratio op de witte achtergrond is 2,2:1 waar dat liever minimaal 3:1 moet zijn voor de iconen. Er is een alternatieve tekst voor de iconen, maar idealiter zijn de iconen zelf ook voldoende zichtbaar.

Uitkomst: Onvoldoende

Bevindingen: Wanneer bezoekers op de homepage de tekst- en regelafstand wijzigen naar de waarden in dit succescriterium, is de tekst 'Naar het volledige vacatureoverzicht' (onder 'Vacatures') niet meer helemaal leesbaar. Zorg ervoor dat er geen informatie of functionaliteit verloren gaat wanneer bezoekers de tekstafstand wijzigen om de tekst beter te lezen.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Wanneer bezoekers met de muis over de blauwe tegels naast de carrousel op de homepage hoveren, zoals 'Prikbord' en 'Zelf regelen', verschijnt er aanvullende content. Deze content is niet beschikbaar wanneer bezoekers met het toetsenbord focus hebben op de tegels. Zorg ervoor dat informatie en functionaliteit die wel beschikbaar is met de muis, ook beschikbaar is met het toetsenbord.

Veel elementen op de website zijn wel bedienbaar met het toetsenbord, maar niet volgens normaal toetsenbord gedrag (zie ook succescriterium 2.4.3). Zo zijn veel delen van de website enkel te bedienen met de pijltoetsen, terwijl interactieve elementen bereikbaar en bedienbaar horen te zijn met de tab-toets. Dit is verwarrend voor bezoekers die gebruik maken van het toetsenbord om over de pagina te navigeren, omdat dit onverwacht gedrag is. Daarnaast werkt deze bediening niet voor bezoekers die gebruik maken van voorleessoftware, omdat de pijltoetsen voor hen toetsen zijn die de schermlezer besturen, behalve in specifieke gebieden die semantisch altijd met de pijltoetsen werken, zoals radiobuttons en tablists. Zorg ervoor dat interactieve elementen op de normale manier bedienbaar en bereikbaar zijn en de werking van hulpsoftware niet hindert.

Wanneer bezoekers een bericht achterlaten, bijvoorbeeld op dcmrnl.sharepoint.com/sites/Organisatie/SitePages/bedrijfsvoering.aspx, kunnen bezoekers door op weergaven te klikken een dialoogvenster openen met paginastatistieken. Door over een grafiek te hoveren met de muis, is extra informatie beschikbaar. Deze functionaliteit of informatie is niet beschikbaar voor bezoekers die met het toetsenbord navigeren.

De PDF-viewer op pagina dcmrnl.sharepoint.com/sites/Organisatie/SitePages/Organogram.aspx is niet met het toetsenbord bedienbaar, omdat het iframe genest is in een verborgen div-element. Zorg er daarom voor dat de informatie in de PDF ook op een andere manier beschikbaar is, bijvoorbeeld door de informatie als HTML op de pagina te plaatsen. Dit probleem komt alle pagina's met een ingesloten PDF/document-viewer voor, waaronder op pagina dcmrnl.sharepoint.com/sites/HR/SitePages/Persoonlijk-Ontwikke.aspx en op pagina dcmrnl.sharepoint.com/sites/HR/SitePages/Opleiding-aanvragen.aspx.

De videospelers op onder andere pagina dcmrnl.sharepoint.com/SitePages/Nieuws-aanmaken.aspx zijn niet bedienbaar met het toetsenbord. De focus wordt enkel op de gehele speler geplaatst, omdat de role 'document' gebruikt is op het iframe-element. Zorg ervoor dat de videospeler zowel met de muis als met het toetsenbord bediend kan worden.

Advies: Op pagina dcmrnl.sharepoint.com/sites/Organisatie/_layouts/15/search.aspx/sitenews kunnen bezoekers de resultaten filteren. De kalenderoptie is niet bereikbaar en bedienbaar met het toetsenbord. Bezoekers kunnen zelf een datum invullen, maar idealiter is de kalenderfunctie ook volledig toegankelijk.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Bevindingen: Advies: De paginatitel bestaat nu enkel uit de naam van de pagina, bijvoorbeeld 'Nieuws'. De paginatitel is een belangrijk navigatiemiddel voor vele bezoekers. Het is duidelijker ook de naam van de website te benoemen, bijvoorbeeld 'Nieuws - DCMRnet'.

Uitkomst: Onvoldoende

Bevindingen: Op de homepage staat een carrousel met daaronder keuzerondjes. De keuzerondjes zijn technisch gezien wel bedienbaar en bereikbaar met het toetsenbord, maar enkel met de pijltoetsen en niet met de tabtoets omdat tabindex -1 gebruikt is. Deze elementen krijgen geen toetsenbordfocus en geen zichtbare focusstijl. Wanneer bezoekers met de tabtoets over de pagina navigeren komen zij niet langs deze elementen. Zorg ervoor dat bedienbare elementen voorkomen in de focusvolgorde en geef ze een zichtbare focusstijl die voldoet aan de contrasteisen. De informatie dat bepaalde elementen bedienbaar zijn met de pijltoetsen, is daarnaast nu ook alleen beschikbaar voor bezoekers die een vorm van hulpsoftware gebruiken waarbij onzichtbare tekst wordt gecommuniceerd, zoals voorleessoftware.

Vergelijkbare problemen komen vaker voor op de website, onder andere bij:

• Het navigatiemenu aan de linkerkant van iedere pagina.
• Agenda.
• De nieuwsartikelen onder 'Nieuws'. De links krijgen geen focus, alleen de naam van de auteur.
• De items onder 'Agenda'. Alleen het gehele blok krijgt focus, niet de onderlinge agendaitems.
• De profielen onder 'In dienst'.
• De berichten onder 'Actuele storingen'.
• De vacatures onder 'Vactures'.
• Pagina dcmrnl.sharepoint.com/_layouts/15/news.aspx.

Wanneer bezoekers inzoomen op de pagina verandert het navigatiemenu bovenaan de pagina in een hamburgermenu. Wanneer bezoekers met het toetsenbord over de pagina navigeren, krijgt eerst het navigatiemenu, dat normaliter aan de linkerkant van de pagina staat, focus en dan pas het hamburgermenu. Wanneer de bezoeker niet inzoomt is dat visueel een logische volgorde, maar bij inzoomen verplaatst het hamburgermenu zich waardoor de visuele focusvolgorde nu niet meer logisch is. Zorg ervoor dat de focusvolgorde ook een logische visuele volgorde volgt bij zoomen.

In de header van iedere pagina staat een tandwiel icoon waarmee bezoekers het instellingen uitklapmenu kunnen openen. Wanneer bezoekers het menu openen met het toetsenbord, verspringt de toetsenbordfocus direct naar 'Inhoud van de site'. Dit is verwarrend voor bezoekers die het scherm niet kunnen zien en er wordt zo content overgeslagen bij voorlezen. Zorg ervoor dat de focus op de knop van het menu blijft en dat bezoekers zelf de focus verplaatsen in het menu. Dit probleem komt op meerdere plekken voor, onder andere bij de knop om het help-menu te openen.

In de header van iedere pagina staat een tandwiel icoon waarmee bezoekers het instellingen uitklapmenu kunnen openen. Wanneer bezoekers met het toetsenbord door het menu navigeren, gaat de toetsenbordfocus daarna verder op de achterliggende pagina en blijft het menu over andere content heen staan. Zorg ervoor dat het menu automatisch sluit, of dat bezoekers het menu zelf moeten sluiten met de sluitknop om verder te kunnen navigeren. Dit probleem komt op meerdere plekken voor, onder andere bij de knop om het help-menu te openen.

Wanneer bezoekers op onder andere pagina dcmrnl.sharepoint.com/sites/Organisatie/SitePages/bedrijfsvoering.aspx op 'Details voor de pagina' klikken, opent een dialoogvenster aan zijkant van de pagina. De focus verplaatst zich direct naar de link 'Meer informatie', waardoor alle informatie daarboven overgeslagen wordt. Verplaats de focus bijvoorbeeld naar de sluitknop om dit probleem op te lossen.

Op onder andere pagina dcmrnl.sharepoint.com/sites/HR/SitePages/Vergoedingen-e.aspx kunnen bezoekers een opmerking achterlaten. Wanneer bezoekers op de afbeelding van een persoon (waaronder hun eigen profielfoto) klikken, opent een dialoogvenster. Met 'Meer weergeven' opent een groter dialoogvenster. Wanneer bezoekers dat venster sluiten met de X knop, gaat de focusvolgorde niet verder waar de bezoeker gebleven was, maar start weer bovenaan de pagina. Zorg ervoor dat de focus weer staat op de profielfoto zodra bezoekers het venster afsluiten.

Wanneer bezoekers op pagina dcmrnl.sharepoint.com/sites/Informatiecentrum/Gedeelde%20documenten/Forms/AllItems.aspx resultaten hersorteren, bijvoorbeeld op naam van A tot Z, verschuift de focusvolgorde daarna direct naar het eerste item, in plaats van op de knop te blijven. Dit is verwarrend, zorg er voor dat de focus op de knop blijft. Dit probleem komt op meerdere pagina's voor, waaronder op pagina dcmrnl.sharepoint.com/sites/Informatiecentrum/Gedeelde%20documenten/Forms/AllItems.aspx.

Op pagina dcmrnl.sharepoint.com/sites/Organisatie/SitePages/Organogram.aspx komt een div-element voor met de rol 'row', waar het aria-hidden attribuut op geplaatst is, én het tabindex=0 attribuut. Een verborgen element mag niet alsnog voor komen in de tabindex van de pagina.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina dcmrnl.sharepoint.com/sites/HR/SitePages/Persoonlijk-Ontwikke.aspx komt een iframe voor met daarin een PDF. De toegankelijke naam van het iframe is 'Ingesloten document' maar dit beschrijft de inhoudt niet voldoende. Zorg ervoor dat bezoekers weten welke content zich in het iframe bevindt. Een vergelijkbaar probleem doet zich voor met de iframes op pagina dcmrnl.sharepoint.com/SitePages/Nieuws-aanmaken.aspx.

Uitkomst: Onvoldoende

Bevindingen: Wanneer bezoekers op de naam of profielfoto van een auteur klikken verschijnt er een dialoogvenster. De focus wordt direct verplaatst naar de sluitknop van het dialoogvenster, maar dat is niet zichtbaar. Zorg ervoor dat bezoekers die gebruik maken van het toetsenbord om over de pagina te navigeren, altijd zien waar zij zich bevinden door een zichbare focusstijl toe te voegen. Zie ook succescriterium 2.4.3 voor de gecombineerde bevinding over focusvolgorde en focus zichbaarheid.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: De zoekfunctie bovenaan iedere pagina heeft visueel de naam 'Zoeken in Sharepoint' of 'Zoeken in alle sites', maar de toegankelijke naam is "Zoekvak. Suggesties worden weergegeven terwijl u typt." Omdat de toegankelijke naam en de visuele naam niet overeen komen is de zoekfunctie niet of moeilijker bedienbaar voor bezoekers die gebruik maken van spraakgestuurde navigatie. Zorg ervoor dat de visuele naam tenminste voorkomt in de toegankelijke naam, het liefst vooraan.

Bovenaan de pagina op de homepage staat een icoon van een ster met daarbij de tekst 'Niet volgend'. De toegankelijke naam van deze knop is "Momenteel wordt de site niet gevolgd, klik om deze te volgen". Omdat de toegankelijke naam en de visuele naam niet overeen komen is de knop niet of moeilijker bedienbaar voor bezoekers die gebruik maken van spraakgestuurde navigatie. Zorg ervoor dat de visuele naam tenminste voorkomt in de toegankelijke naam, het liefst vooraan.

Op onder andere pagina dcmrnl.sharepoint.com/sites/ZelfRegelen heeft het logo van DCMRnet als alternatieve tekst de afdeling van het intranet, in dit geval 'Start zelf regelen'. Omdat de visuele naam niet voorkomt in de toegankelijke naam, is de link waarmee het logo is opgemaakt niet of moeilijker te bedienen door bezoekers die gebruik maken van spraakgestuurde navigatie.

Op onder andere pagina dcmrnl.sharepoint.com/sites/ICT/SitePages/Privacy-en%20informatiebeveiliging.aspx kunnen bezoekers met de knop 'Verzenden naar' de pagina doorsturen naar andere mensen. Het invoerveld 'Verzenden naar' heeft als toegankelijke naam 'Voer naam, alias of e-mailadres in voor elke persoon naar wie u deze pagina wilt verzenden.' Omdat de visuele naam niet voorkomt in de toegankelijke naam, is het invoerveld niet of moeilijker te bedienen door bezoekers die gebruik maken van spraakgestuurde navigatie.

Advies: Op meerdere plekken op de website worden aan bezoekers die hulpsoftware gebruiken instructies gegeven die het navigeren op de website moeilijker maken. Op pagina dcmrnl.sharepoint.com/sites/Organisatie/SitePages/bedrijfsvoering.aspx staan bijvoorbeeld een knop met de visuele naam 'Laura de Vries'. De toegankelijke naam is 'Naamregel voor de auteur van de pagina. Laura de Vries afdelingsadviseur. Druk op Enter om de details voor deze persoon te openen.' De visuele naam komt technisch gezien wel voor in de toegankelijke naam, maar omdat de toegankelijke naam zoveel overbodige tekst bevat (bezoekers die met het toetsenbord navigeren weten hoe ze knoppen en links moeten activeren), is de knop moeilijker bedienbaar én wordt er overbodige tekst voorgelezen.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op onder andere pagina dcmrnl.sharepoint.com/sites/Organisatie/SitePages/bedrijfsvoering.aspx kunnen bezoekers een reactie achterlaten. Met de knop 'Meer opties' (visueel: 3 horizontale puntjes) kunnen bezoekers die optie 'Reactie verwijderen' laten verschijnen, waarna een dialoogvenster opent. De knop om dit venster te sluiten heeft als toegankelijke naam 'Close'. Biedt interactieve elementen aan in de hoofdtaal van de pagina, of geef een taalwissel aan.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op onder andere pagina dcmrnl.sharepoint.com/sites/Organisatie/_layouts/15/search.aspx/sitenews kunnen bezoekers via de knop 'Feedback' feedback geven. Wanneer de bezoeker het tekstveld niet invult, verschijnt de melding 'Voer de aanvullende opmerkingen of suggesties in.' Een goede foutmelding geeft aan waar de fout is gemaakt, en welke fout is gemaakt. De melding die nu verschijnt is enkel een foutsuggestie die de bezoeker helpt de fout op te lossen.

Uitkomst: Onvoldoende

Bevindingen: Op onder andere pagina dcmrnl.sharepoint.com/sites/Organisatie/_layouts/15/search.aspx/sitenews kunnen bezoekers via de knop 'Feedback' feedback geven. In het tekstveld staat een placeholder tekst met extra instructies. Zorg ervoor dat instructies permanent zichtbaar zijn, bijvoorbeeld direct onder het tekstveld of als onderdeel van het tekstuele label. Dit probleem doet zich op meerdere pagina's voor, waaronder op pagina dcmrnl.sharepoint.com/sites/Organisatie/SitePages/Organogram.aspx bij het achterlaten van een comment en op pagina dcmrnl.sharepoint.com/_layouts/15/search.aspx/people,

Op onder andere pagina dcmrnl.sharepoint.com/sites/ICT/SitePages/Privacy-en%20informatiebeveiliging.aspx kunnen bezoekers met de knop 'Verzenden naar' de pagina doorsturen naar andere bezoekers. Het invoerveld 'Verzenden naar' bevat aanvullende instructies in de placeholder (Voer een e-mailadres in), die verdwijnen zodra de bezoeker begint met typen. Zorg ervoor dat instructies permanent zichtbaar zijn, bijvoorbeeld direct onder het tekstveld of als onderdeel van het tekstuele label. Het veld 'Bericht toevoegen' bevat behalve de placeholder helemaal geen visueel label. Zorg ervoor dat er minimaal één permanent zichtbaar visueel label aanwezig is bij invoer-elementen.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In het linker navigatemenu, op iedere pagina, komt een li-element voor waarop het attribuut role=none is geplaatst. Dit is niet toegestaan.

Op de homepage komen elementen voor die de rol 'presentation' hebben, maar ook een aria-label hebben. Het gaat om de afbeeldingen bij de profielen onder 'In dienst'. Elementen met de rol 'presentation' worden verborgen voor hulpsoftware. De instructies die hier worden geleverd in het aria-label zijn hierdoor niet beschikbaar voor hulpsoftware, omdat deze niet voorkomen in de accessibility tree. Een aria-label mag daarom niet worden gebruikt op een element met een niet bestaande rol, zoals 'presentation'. Dit probleem komt op meerdere pagina's voor, waaronder op pagina dcmrnl.sharepoint.com/sites/Informatiecentrum.

Op de homepage komen carrousels voor waarbij bezoekers met keuzerondjes naar een volgende slide kunnen navigeren. Deze keuzerondjes hebben geen toegankelijke naam. Hierdoor weten bezoekers niet waar de keuzerondjes voor dienen. Er zijn label-elementen aanwezig, maar deze bevatten geen tekst. Zorg ervoor dat bezoekers weten waar de elementen voor dienen door een toegankelijke naam toe te voegen.

In de Twitter widget op de homepage komen links voor zonder toegankelijke naam. Bezoekers die het scherm niet kunnen zien zullen daardoor niet weten waar de links naar verwijzen. Zorg ervoor dat iedere link een toegankelijke naam heeft.

De contentblokken onder 'Agenda' op de homepage zijn genest binnen een element waarop role=presentation geplaatst is. Hierdoor zijn de interactieve elementen daarbinnen niet meer op een normale manier bereikbaar voor hulpsoftware. Zorg ervoor dat interactieve elementen niet genest zijn binnen elementen die onzichtbaar zijn voor hulpsoftware. Dit probleem doet zich op meerdere plekken op de website voor, waaronder onder 'Actuele storingen'.

De afbeelding in de header op pagina dcmrnl.sharepoint.com/sites/Organisatie is een interactief element waarmee bezoekers de afbeelding vergroot kunnen openen in een dialoogvenster. De rol van het element is echter 'img' (met het aria-attribuut role aangegeven). 'Img' is semantisch geen klikbaar element, dus de rol komt niet overeen met het getoonde gedrag van het element. Maak hier een knop van om dit probleem op te lossen. Dit probleem komt op meerdere pagina's voor, waaronder op pagina dcmrnl.sharepoint.com/sites/ZelfRegelen en op pagina dcmrnl.sharepoint.com/sites/Informatiecentrum.

Het groene navigatiemenu op pagina dcmrnl.sharepoint.com/sites/Organisatie heeft de rol 'menubar'. Een element met de rol 'menubar' moet ten minste één 'menuitem', 'menuitemradio' of 'menuitemcheckbox' bevaten als child-element. Dat is nu niet het geval. Dit probleem komt op meerdere pagina's voor, waaronder op pagina dcmrnl.sharepoint.com/sites/Informatiecentrum. Een vergelijkbaar probleem komt voor op pagina dcmrnl.sharepoint.com/sites/Informatiecentrum/Gedeelde%20documenten/Forms/AllItems.aspx, in het navigatiemenu boven de documenten en op pagina dcmrnl.sharepoint.com/sites/Informatiecentrum/Gedeelde%20documenten/Forms/AllItems.aspx.

Wanneer een bezoeker over een naam of profielfoto hovert, opent aanvullende content. De knoppen (LinkedIn profielen) onder het tabblad LinkedIn hebben geen toegankelijke naam. Bezoekers die het scherm niet kunnen zien horen alleen dat er een knop aanwezig is, maar niet waar die voor dient. Zorg ervoor dat alle interactieve elementen een toegankelijke naam en rol hebben.

Op onder andere pagina dcmrnl.sharepoint.com/sites/Organisatie/SitePages/bedrijfsvoering.aspx kunnen bezoekers een reactie achterlaten. De knop waarmee bezoekers het bericht verzenden heeft als type 'button', maar dit moet type 'submit' zijn.

Op onder andere pagina dcmrnl.sharepoint.com/sites/HR komt een subnavigatie voor, met als rol 'list'. De geneste items daarbinnen hebben de rol 'presentation', dit is niet toegestaan.

Op onder andere pagina dcmrnl.sharepoint.com/sites/ICT/SitePages/Privacy-en%20informatiebeveiliging.aspx kunnen bezoekers met de knop 'Verzenden naar' de pagina doorsturen naar andere bezoekers. De knop 'Verzenden' verstuurt gegevens, maar heeft als type 'button'. Dit moet type 'submit' zijn.

Advies: De agendaitems onder 'Agenda' op de homepage zijn opgemaakt met het button-element. Er is een semantisch verschil tussen een button en een link. Een link verwijst een bezoeker naar een andere plek of pagina en een button voert een actie uit, zoals het verzenden van een formulier, het in- of uitklappen van informatie of het openen van een dialoogvenster. In dit geval wordt de bezoeker naar een andere pagina verwezen. Maak de agendaitems dan ook op met link-elementen in plaats van button-elementen.

Uitkomst: Onvoldoende

Bevindingen: Wanneer bezoekers op de naam of profielfoto van een auteur klikken verschijnt er een dialoogvenster. Onder het tabblad 'Contactpersoon' kunnen bezoekers de persoon toevoegen aan hun contactpersonen. Na klikken op de knop krijgt de bezoeker geen statusupdate, terwijl dat wel zichtbaar is op het scherm. Zorg ervoor dat deze melding (in het geval van tijdens de audit: 'Er is iets misgegaan. Het ligt niet aan u maar aan ons, probeer het opnieuw') wordt gecommuniceerd door hulpsoftware.