Issues:
Audit digitale toegankelijkheid website COSSAS

(Alleen de bevindingen)

Scope van de evaluatie

Uitgebreide toetsresultaten

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Bevinding 1: Op de homepagina staat groot het logo van COSSAS open source security automation software. De toegankelijke tekst van de afbeelding is 'COSSAS logo in full format with dark grey and orange characters'. Dit beschrijft de afbeelding niet voldoende. De alternatieve tekst van een logo moet altijd tenminste de naam van de organisatie en eventuele overige tekst in de afbeelding bevatten.

Bevinding 2: Op pagina cossas-project.org/software/ staat boven 'Partner software' een link in de vorm van een icoon van een laptop. Het icoon wordt door middel van het pseudo-element :before en de content property in de CSS op de pagina gezet. Op deze manier kan het zijn dat het icoon wegvalt, bijvoorbeeld voor mensen die een eigen CSS gebruiken, of wanneer de CSS niet geladen wordt. De content property is alleen geschikt voor het toevoegen van puur decoratieve content. In dit geval gaat het om een afbeelding die naar de pagina partnersoftware linkt. Aangezien dezelfde link direct onder de afbeelding nogmaals geplaatst is, kan de link in dit geval beter verwijderd worden. Zie succescriterium 2.4.4. Wanneer dat gebeurd is kan het icoon wel als decoratief gezien worden. Zolang de afbeelding linkt naar een andere pagina, moet er een tekstueel alternatief worden toegevoegd.
Vergelijkbare problemen met CSS afbeeldingen komen voor op pagina cossas-project.org/partner-software/ bij de Github iconen die linken naar de Github pagina's van de projecten en bij de social media iconen onderaan elke pagina.

1.2 Op tijd gebaseerde media

1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen)

Bevinding 3: Op de pagina cossas-project.org/portfolio/sacti/ wordt een video getoond. In de video komt gesproken woord voor, maar de ondertiteling ontbreekt. Hetzelfde komt vaker voor in de website, bijvoorbeeld bij de video op pagina cossas-project.org/portfolio/dgad/

1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)

Bevinding 4: Op pagina cossas-project.org/portfolio/sacti/ is er in de video op verschillende plaatsen tekst in beeld, bijvoorbeeld vanaf 3:35. Er ontbreekt uitgeschreven tekst en er is ook geen voiceover die vertelt wat er op het scherm staat. Zo kunnen mensen die de video niet kunnen zien en afhankelijk zijn van een screenreader niet weten wat er wordt getoond in de video. Zet deze en andere informatie in een transcript. Of maak gebruik van een extra audiospoor om ook te voldoen aan SC 1.2.5. Hetzelfde komt vaker voor in de website, bijvoorbeeld bij de video op pagina cossas-project.org/portfolio/dgad/

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Bevinding 5: Op pagina cossas-project.org/portfolio/sacti/ is er in de video op verschillende plaatsen tekst in beeld, bijvoorbeeld vanaf 3:35. De audiodescriptie ontbreekt in deze video. Audiodescriptie is een (extra) audiospoor waarin verteld wordt wat er in beeld te zien is. Zo kunnen mensen die de video niet kunnen zien en afhankelijk zijn van een screenreader niet weten wat er wordt getoond in de video. Maak gebruik van een extra audiospoor.
Hetzelfde komt vaker voor in de website, bijvoorbeeld bij de video op pagina cossas-project.org/portfolio/dgad/

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Bevinding 6: Op pagina cossas-project.org/portfolio/sacti/ is de tekst 'CONTEXT AND BACKGROUND' visueel een kop maar hij niet opgemaakt als kop. Zorg er voor dat informatie die visueel beschikbaar is ook voor hulpsoftware beschikbaar is. Dat kan door een goede semantische opmaak van de HTML waaronder ook een goede koppenstructuur valt.
Hetzelfde komt vaker in de website voor, bijvoorbeeld op pagina cossas-project.org/portfolio/dgad/.

Bevinding 7: Advies: Op de homepagina is de eerste kop van het niveau 5. Sla geen kopniveaus over. Bezoekers die gebruikmaken van voorleessoftware kunnen aan de hand van een sneltoets of een koppen lijst over een pagina navigeren om snel informatie te vinden. Daarom is het belangrijk om een goed lopende koppenstructuur te gebruiken. Een goede koppenstructuur begint bij een kopniveau 1 voor de titel van de pagina, kopniveau 2 voor de koppen, kopniveau 3 voor de tussenkoppen, etc.
Hetzelfde komt op meerdere plaatsen in de website voor, bijvoorbeeld op pagina cossas-project.org/?s=software waar door een verkeerde koppenstructuur het voor bijvoorbeeld blinde bezoekers lijkt of de links in de footer van de pagina horen bij de kop 'Recent Comments'.

1.3.5 Identificeer het doel van de input (Niveau AA)

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Bevinding 8: Op pagina cossas-project.org/contact/ is 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. Bijvoorbeeld voor e-mailadres autocomplete="email".

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Bevinding 9: Advies: Op pagina cossas-project.org/portfolio/sacti/ komen in de lopende tekst oranje hyperlinks voor. De links zijn alleen te onderscheiden door kleur, dat is in strijd met 1.4.1. Er is een uitzondering op deze regel als de contrastratio met omliggende tekst minimaal 3:1 is, dat is hier het geval. Maar de contrastratio met de achtergrond is te laag, zie 1.4.3. Pas er op bij het aanpassen van de kleur dat de contrastratio met omliggende tekst minimaal 3:1 blijft, of zorg ervoor dat hyperlinks in lopende tekst ook herkenbaar zijn aan minimaal één andere eigenschap, bijvoorbeeld door ze te onderstrepen.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Bevinding 10: Op pagina cossas-project.org/contact/ is een oranje tekst '// COSSAS' (HEX #FF9900) op een witte achtergrond. Deze tekst heeft een te laag contrast. De contrastverhouding is 2,1:1 waar dit minimaal 4,5:1 moet zijn. De witte tekst 'Your email address will not be published' op dezelfde oranje achtergrondkleur heeft het zelfde probleem. Zorg voor een andere kleur waarbij de contrastverhouding tussen tekst en achtergrond voldoende is. Dit probleem komt op veel pagina's in de website voor, bijvoorbeeld op pagina /cossas-project.org/software/ bij de tekst 'CI/CD pipelines'.

Bevinding 11: Op pagina cossas-project.org/contact/ heeft in het contactformulier de witte placeholder text op de licht oranje achtergrond (HEX #FFB84D) een te laag contrast. De contrastverhouding is 1,7:1 waar dit minimaal 4,5:1 moet zijn.

Bevinding 12: In de zoekresultaten pagina cossas-project.org/?s=software staat in het zoekveld met de tekst 'software'. De grijze text (HEX: #B5B5B%) op de lichtgrijze achtergrond (HEX #F6F6F6) heeft een te laag contrast. De contrastverhouding is 1,9:1 waar dit minimaal 4,5:1 moet zijn. Het zoekveld komt twee keer voor in de pagina.

Bevinding 13: Op onder andere pagina https://cossas-project.org/contact/ staan een kruimelpad. Wanneer bezoekers met de muis over de link 'Home' navigeren kleurt de linktekst wit en heeft het onvoldoende contrast met de lichtgrijze afbeelding.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Bevinding 14: Op pagina cossas-project.org/quality-assurance/ staan lijsten met oranje bullets (HEX #FF9900).
De contrastverhouding van de bullets met de achtergrond is 2,1:1 waar dit minimaal 3:1 moet zijn. De witte tekst 'Your email address will not be published' op dezelfde oranje achtergrondkleur heeft hetzelfde probleem. Zorg voor een andere kleur waarbij de contrastverhouding tussen tekst en achtergrond voldoende is.

Bevinding 15: Op pagina cossas-project.org/contact/ wordt door een oranje lijn onder het menu item 'Contact' (HEX #FF9900) aangegeven dat dit de huidige pagina is. De contrastverhouding van de lijn met de witte achtergrond is 2,1:1 waar dit minimaal 3:1 moet zijn.

Bevinding 16: Op pagina cossas-project.org/contact/ staat een contactformulier. De invulvelden zijn licht oranje (HEX #FFB84D) op een oranje achtergrond (HEX #FF9900). De contrastverhouding is hier 1,3:1, waar dit minimaal 3:1 moet zijn. Hierdoor zijn voor slechtzienden en kleurenblinden de invoervelden niet of moeilijk waar te nemen. Gebruik bijvoorbeeld een andere kleur op die plekken waar het contrast te laag is.

Bevinding 17: De website bevat een cookiemelding, met een knop om de cookiemelding te sluiten. De contrastratio tussen de grijze knop (HEX #666669) en de donkergrijze achtergrond (HEX #4C4C52) is 1,4:1 waar dat minimaal 3:1 moet zijn.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Bevinding 18: De zoek functie bovenaan elke pagina is door bezoekers die met het toetsenbord navigeren, bijvoorbeeld met de tabtoets, niet te gebruiken omdat de link geen focus krijgt. Zorg ervoor dat alle interactieve elementen bereikbaar en bedienbaar zijn met het toetsenbord.

Bevinding 19: Wanneer bezoekers met de muis over de menu items in het navigatiemenu bovenaan iedere pagina hoveren, verschijnen er aanvullende menu items. Deze menu items zijn niet bereikbaar en bedienbaar met het toetsenbord. Zorg ervoor dat alle interactieve elementen bereikbaar en bedienbaar zijn met het toetsenbord.

Bevinding 20: Bij navigatie met het toetsenbord is na de link 'GITHUB' rechts boven aan elke pagina er een link buiten beeld naar '#' die focus krijgt. Bij klikken schuift een zijpaneel in beeld. Dat is niet meer weg te halen, ook niet als het 'x' icoon focus heeft. Zorg er voor dat alle interactieve elementen met behulp van het toetsenbord zijn te bedienen.

2.1.4 Enkel teken sneltoets (Niveau A)

Informatie over succescriterium 2.1.4 Enkel teken sneltoets

Bevinding 21: Op de pagina cossas-project.org/portfolio/sacti/ wordt gebruik gemaakt van de videospeler van Vimeo. 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 Vimeo video aan te passen zodat de bediening met tekentoetsen uit staat. De eigenschap die toegevoegd moet worden aan de embed code is 'keyboard: false'. Met deze aanpassing zorg je ervoor dat je voldoet aan dit succescriterium.
Hetzelfde komt vaker voor in de website, bijvoorbeeld bij de video op pagina cossas-project.org/portfolio/dgad/

2.4 Navigeerbaar

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Bevinding 22: Op elke pagina ontbreekt een mechanisme om de herhalende content over te slaan. Dit kan opgelost worden door een link op de pagina te plaatsen (skiplink) die de focus verplaatst naar de eerste unieke inhoud van de pagina. Deze link moet de eerste link van de pagina zijn. Deze link mag standaard verborgen zijn voor bezoekers, maar moet zichtbaar worden als de focus er op komt wanneer met het toetsenbord wordt genavigeerd.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Bevinding 23: De eerste keer dat een bezoeker de website bezoekt, verschijnt er een cookiemelding over de pagina heen. De cookiemelding krijgt niet als eerste focus. Dit belemmert het gebruik van de website voor bezoekers die met het toetsenbord navigeren. Zorg dat de melding als eerste weg te klikken is of integreer de melding in de webpagina.

Bevinding 24: Bij een schermresolutie van 1024x768 is er een hamburger icoon waarmee je het hoofdmenu kan uitklappen. Als je nu met de tabtoets verder navigeert kan je het menuvenster verlaten. Daardoor kan je niet meer zien waar je bent. Zorg dat je het menuvenster pas kan verlaten als deze gesloten wordt.

Bevinding 25: Rechts onderaan elke pagina is een knop waarmee naar de top van de pagina gescrold kan worden. De focus verandert echter niet mee, dat is verwarrend. Zorg er voor dat de focus ook naar de top van de pagina verplaatst.

2.4.4 Linkdoel (in context) (Niveau A)

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Bevinding 26: De links onder het logo ‘Cossas open source security automation software’ hebben geen toegankelijke naam (bijvoorbeeld de link ‘Explore our software’). Omdat de link geen linkdoel heeft, is het voor blinden en slechtzienden die gebruikmaken van een screenreader niet duidelijk waar de link heen gaat. Voeg een duidelijke linktekst toe om dit probleem op te lossen. Hetzelfde probleem komt op meer plaatsen in de website voor, bijvoorbeeld op pagian 'cossas-project.org/?s=software' onder 'Jina Peterson' hebben de social media links geen naam, even als de pijl onderaan de pagina om naar de volgende zoekresultaten te gaan.

Bevinding 27: Op pagina cossas-project.org/software/ staan links met de linktekst 'READ MORE'. Vermijd linkteksten als ‘Lees meer’ en ‘Klik hier’, zulke teksten beschrijven het linkdoel niet. Zorg dat linkteksten duidelijk beschrijven waar de link naartoe gaat, bijvoorbeeld door de tekst aan te vullen met de titel van het bericht of pagina waarnaar gelinkt wordt. Als visueel duidelijk is waar de link bij hoort hoeft deze aanvullende tekst niet visueel zichtbaar te zijn.
Hetzelfde komt vaker voor in de website, bijvoorbeeld op pagina cossas-project.org/?s=software bij de links 'LEARN MORE'.

Bevinding 28: Op pagina cossas-project.org/?s=software is een navigatie om tussen de zoekresultaten te kunnen navigeren. De naam van de links luiden nu 1 en 2. Een screenreader leest nu deze links voor maar voor mensen die het scherm niet of niet goed kunnen zien is het onduidelijk wat er gebeurt als je op 1 van de getallen klikt. Zet voor het getal 'page ' zodat duidelijker is wat de link doet.

Bevinding 29: Op pagina https://cossas-project.org/software komt een link voor (de afbeelding van de laptop). Deze link heeft geen toegankelijk linkdoel. Bezoekers die gebruik maken van hulpsoftware weten daardoor niet waar de link naar verwijst. Aangezien de link dubbel geplaatst is, kan de link in dit geval beter verwijderd worden zodat links niet dubbel worden voorgelezen.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Bevinding 30: Het is voor bezoekers die met het toetsenbord over de website navigeren, maar het scherm wél kunnen zien, niet duidelijk waar zij zich bevinden, omdat een zichtbare focusstijl op het merendeel van alle interactieve elementen. Zorg ervoor dat bezoekers weten waar ze zich bevinden door een zichtbare focusrand toe te voegen die voldoende contrasteert met de achtergrond (dit kan dus per element verschillen).

Bevinding 31: Bij navigatie met het toetsenbord is na de link 'GITHUB' rechts boven aan elke pagina er een link buiten beeld naar '#' die focus krijgt. Bezoekers die met behulp van het toetsenbord navigeren weten hierdoor niet zien welk element focus heeft. Zorg er voor dat elementen die niet in beeld zijn geen focus kunnen krijgen.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Bevinding 32: Op pagina cossas-project.org/contact/ is er een link naar Slack. De toegankelijke naam van de link 'on our Slack workspace' komt niet overeen met de zichtbare naam van de link 'Join the discussion on our Slack workspace'. Hierdoor is onder andere de knop niet of moeilijk te bedienen met spraaksoftware. Zorg ervoor dat de visuele naam in de toegankelijke naam aanwezig is.

3. Begrijpelijk

3.3 Assistentie bij invoer

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Bevinding 33: De formuliervelden 'Your name', 'Your email' en 'Your message' op pagina cossas-project.org/contact/hebben geen zichtbaar label maar wel een placeholder-tekst. De placeholder-tekst is niet voldoende, want die verdwijnt zodra de bezoeker begint met typen. Voor sommige mensen kan het moeilijk zijn om te onthouden wat ze moeten invullen als dat er niet duidelijk bij staat. Voeg een label toe die altijd zichtbaar blijft om dit probleem op te lossen.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Bevinding 34: De links onder het logo ‘Cossas open source security automation software’ hebben geen toegankelijke naam (bijvoorbeeld de link ‘Explore our software’). Hetzelfde probleem komt op meer plaatsen in de website voor, bijvoorbeeld op pagina 'cossas-project.org/?s=software' onder 'Jina Peterson' hebben de social media links geen naam, even als de pijl onderaan de pagina om naar de volgende zoekresultaten te gaan.

Bevinding 35: De knoppen om de zoekfunctie in het navigatiemenu bovenaan iedere pagina te openen en te sluiten hebben geen toegankelijke naam en rol.

Bevinding 36: Op pagina https://cossas-project.org/software komt een link voor (de afbeelding van de laptop). Deze link heeft geen toegankelijke naam. Aangezien de link dubbel geplaatst is, kan de link in dit geval beter verwijderd worden zodat links niet dubbel worden voorgelezen.

Onderbouwing van de evaluatie

Het onderzoek is uitgevoerd op basis van de evaluatiemethode van het W3C, WCAG-EM. Dit gebeurt grotendeels handmatig door een steekproef te nemen. Voor een quickscan geldt dat we slechts delen uit deze methodiek gebruiken. Ondanks alle zorgvuldigheid en ervaring van de onderzoeker kan het voorkomen dat een probleem niet gesignaleerd is. Houd er rekening mee dat in een volgend onderzoek bepaalde onderdelen anders worden beoordeeld omdat technologieën en hulpsoftware worden doorontwikkeld. Bij het handmatig onderzoek wordt gebruik gemaakt van tools.

Steekproef getoetste webpagina's

• Home:
  https://cossas-project.org/
• Contact (Formulier):
  https://cossas-project.org/contact/
• Zoekresultaten:
  https://cossas-project.org/?s=software
• 404:
  https://cossas-project.org/404
• Software pagina:
  https://cossas-project.org/portfolio/sacti/
• Toegankelijkheid:
  https://cossas-project.org/accessibility/
• Missie:
  https://cossas-project.org/mission/
• Software Overzicht:
  https://cossas-project.org/software/
• Software lijst:
  https://cossas-project.org/partner-software/
• Info:
  https://cossas-project.org/community/how-to-contribute/
• Kwaliteit:
  https://cossas-project.org/quality-assurance/
• Software pagina:
  https://cossas-project.org/portfolio/dgad/

Ondersteunende technieken

• HTML5
• CSS
• WAI-ARIA
• ECMAScript 5
• DOM
• SVG

Bronnen

• Evaluatiedocument WCAG 2.0
  www.drempelvrij.nl/over-het-waarmerk
• Web Content Accessibility Guidelines (WCAG) 2.0 (Geautoriseerde Nederlandse vertaling)
  www.w3.org/Translations/WCAG20-nl
• Website Accessibility Conformance Evaluation Methodology (WCAG-EM)
  www.w3.org/WAI/eval/conformance
• Web Content Accessibility Guidelines (WCAG)
  www.w3.org/WAI/intro/wcag
• How to Meet WCAG 2.1 Quick Reference
  www.w3.org/WAI/WCAG21/quickref/

Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.