Issues:
Audit digitale toegankelijkheid website help.blaise

(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: Bovenaan iedere pagina op https://help.blaise.com/, heeft het logo van CBS Blaise de alternatieve tekst 'cbslogo'. Dit is niet beschrijvend genoeg. Pas de tekst van het alt-attribuut aan, zodat het woord 'Logo' en alle tekst die in het logo te zien is hierin terugkomt.

Bevinding 2: Op pagina https://help.blaise.com/ kunnen bezoekers met de pijl-afbeeldingen naar de volgende of vorige pagina navigeren. Op de 'homepage' is de pijl naar de vorige uitgeschakeld. Er is echter nog wel een img-element aanwezig, zonder alt-attribuut. Hierdoor is voor hulpsoftware wel te herkennen dat hier een afbeelding staat, maar is niet duidelijk wat hierop staat. Geef de afbeelding een beschrijving of verberg deze voor hulpsoftware door een alt-attribuut toe te voegen en deze leeg te laten. Met dit onderdeel van de website zijn meerdere toegankelijkheidsproblemen aan de hand. Zie bijvoorbeeld succescriterium 2.1.1.

Bevinding 3: Op de website https://help.blaise.com/, onder 'Introduction' komen iconen voor die worden uitgelegd. Deze iconen hebben wel een alternatieve text, maar die beschrijft de afbeelding niet. Bijvoorbeeld 'exclam' en 'tog_plus'. Zorg ervoor dat deze afbeeldingen een goede beschrijving hebben.

Bevinding 4: Op de website https://help.blaise.com/ komen screenshots van de software voor die geen voldoende beschrijvende alt-tekst hebben. Zoals bijvoorbeeld de screenshots op de pagina "Install Blaise 5" (onder "Introduction"). Zorg dat de screenshots beschrijven wat er te zien en wat het doel is van het scherm. Eventueel kan dit ook gewoon in de tekst uitgelegd of uitgeschreven worden, maar dan moeten de screenshots wel aangeduid worden als decoratief (leeg alt-attribuut). Dit komt op de hele website voor.

Bevinding 5: Op de website https://help.blaise.com/ op de pagina "Blaise Security architecture" (onder Advanced Procedures > Survey Deployment > Run Survey) komen diagrammen voor. De diagrammen worden in de tekst uitgelegd, waardoor een toegankelijk alternatief aanwezig is. Maak het alt-attribuut leeg, waardoor de diagrammen door hulpsoftware kunnen worden genegeerd.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Bevinding 6: Op pagina https://help.blaise.com/, wanneer bezoekers in het zijmenu op 'Search' klikken, komt een zoekfunctie voor. De tekst 'Enter one or more keywords to search ('*' and '?' wildcards are supported):' is niet gekoppeld aan het invoerveld, waardoor het invoerveld geen toegankelijke naam heeft. Gebruik een label en de attributen for en id om dit op te lossen. Dit geldt ook voor het select-element waarmee het aantal resultaten per pagina ingesteld kan worden. Ook de keuzerondjes missen een label, en zijn daarnaast niet aan de vraag gekoppeld door middel van een fieldset en legend combinatie.

Bevinding 7: Op pagina https://help.blaise.com/ komen visueel opsommingen voor die niet met het ul-element en li-elementen zijn opgemaakt, maar als tabel. Zorg ervoor dat de opsommingen ook herkenbaar zijn voor hulpsoftware door gebruik te maken van de juiste HTML-opmaak (het ul-element en li-elementen). Dit doet zich op de gehele website voor.

Bevinding 8: Op pagina https://help.blaise.com/ zijn teksten die visueel een kop zijn (bijvoorbeeld Getting started – new users) niet opgemaakt met een kop-element. Zo zijn de koppen niet herkenbaar voor bezoekers die gebruik maken van voorleessoftware. Maak gebruik van de juiste h-elementen om dit probleem op te lossen. Dit doet zich op de gehele website voor.

Bevinding 9: Op pagina https://help.blaise.com/ is het zichtbaar in het zijmenu op welke pagina de bezoeker is, omdat dat menu-item een donkerblauwe achtergrond heeft en witte tekst heeft. Deze informatie is niet beschikbaar voor hulpsoftware. Maak bijvoorbeeld gebruik van aria-current om dit probleem op te lossen.

Bevinding 10: Op de pagina "Security Updates" op https://help.blaise.com/ (in het mapje "What's new?") is een datatabel aanwezig. De kolomkoppen zijn echter niet als zodanig opgemaakt. Om de structuur van een datatabel en de relaties tussen de kolommen en de cellen correct over te brengen is het belangrijk om de kolomkoppen correct op te maken. Dit doet zich op de hele website voor.

Bevinding 11: Op https://help.blaise.com/ op de pagina "Roles Section" (onder Advanced Procedures > Languages in Blaise > Blaise Programming Language > Data model syntax > Settings) in het blok "Start designing", wordt er een boomstructuur weergegeven. Deze structuur is enkel visueel, programmatisch is er geen boomstructuur. Gebruik een lijst om de structuur van geneste items programmatisch weer te geven.

Bevinding 12: Op https://help.blaise.com/ op de pagina "BufferSize (setting)" (onder Reference Manual > B) is een datatabel aanwezig waarbij sommige cellen ook een tabel bevatten. Geneste tabellen kunnen complex zijn voor hulptechnologie. Gebruik een lijst om de data in die cellen op te sommen en weer te geven in plaats van een geneste datatabel.

Bevinding 13: Advies: op pagina https://help.blaise.com/ wordt op meerdere plekken een tabelopmaak gebruikt, waar er helemaal geen sprake is van een tabel, bijvoorbeeld bij de individuele items in de opsommingen op de homepage en de afzonderlijke items in het navigatiemenu op iedere pagina. Verwijder de tabel opmaak. Dit doet zich op de gehele website voor. Het gebruik van lay-out tabellen is geen WCAG-inbreuk. Maar omdat in dit geval er veel geneste lay-out tabellen aanwezig zijn en in de inhoud van sommige pagina's ook gebruik wordt gemaakt van datatabellen, wordt de structuur heel complex. Hierdoor kan de structuur onduidelijk zijn voor bezoekers met hulpsoftware en wordt de kans dat screenreaders de informatie correct kunnen lezen of switchen tussen lay-out tabel en datatabel steeds kleiner. We adviseren daarom om voor de lay-out en opmaak CSS te gebruiken en geen tabellen.

1.3.3 Zintuiglijke eigenschappen (Niveau A)

Informatie over succescriterium 1.3.3 Zintuiglijke eigenschappen

Bevinding 14: Op de website https://help.blaise.com/ op de pagina "Getting Help" (onder "Introduction") is het bijschrift van de screenshot: "The Help button is circled". Dit bijschrift gaat ervan uit dat mensen het screenshot kunnen zien. Verzorg een bijschrift dat neutraler is en er niet vanuit gaat dat iemand kan zien of horen.

Bevinding 15: Op de website https://help.blaise.com/ op de pagina "Create a Solution" (onder "Quick start tutorials" en "Create a questionaire") komt er in de tekst de zinnen "Use the circled button to locate a more likely production location" en "Immediately you will see the solution appear in the Solution Explorer to the right" voor. Herschrijf de zinnen zodat deze neutraler zijn en er niet van uitgaan dat iemand al zijn zintuigen kan gebruiken. Soortgelijke problemen komen op meerdere plekken voor, zoals bijvoorbeeld op de pagina "Modifying page breaks (onder Quick Start Tutorials > Adjusting Layout >).

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Bevinding 16: De linkteksten op pagina https://help.blaise.com/ zijn alleen herkenbaar doordat ze een andere kleur hebben dan de tekst eromheen. Kleur mag niet als het enige visuele middel gebruikt worden om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden. Maak gebruik van minimaal één andere manier, bijvoorbeeld door het onderstrepen van de linkteksten. Dit doet zich op de gehele website voor.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Bevinding 17: Op de website https://help.blaise.com/ worden de linkteksten bij muishover oranje, (HEX #E4641C), met een contrastratio van 3,4:1 waar dat minimaal 4,5:1 moet zijn. Dit doet zich op de gehele website voor.

1.4.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Bevinding 18: Bij het vergroten van de tekst naar 200% op https://help.blaise.com/ , bijvoorbeeld op de "Getting Help" (onder "Introduction") verdwijnt er tekst buiten beeld waardoor deze onleesbaar wordt. Zorg ervoor dat bij het vergroten van tekst de website zich hieraan aanpast en de tekst leesbaar blijft. Gebruik hiervoor responsive design.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Bevinding 19: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan verschijnt er een scrollbalk in de leesrichting (horizontaal). Zorg dat de tekst binnen het beeld blijft. Uitgezonderd zijn bijvoorbeeld tabellen, betekenisvolle afbeeldingen en kaarten, hierbij mag wel een scrollbalk worden gebruikt maar deze mag dan alleen op dit element staan en niet op de hele pagina. Gebruik om dit op te lossen responsive design.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Bevinding 20: De groene knop om naar de startpagina te gaan op elke pagina op https://help.blaise.com/ , biedt onvoldoende contrast. De combinatie groen (HEX #08CC13) en wit heeft een contrastverhouding van 2,2:1 waar het minstens 3:1 moet zijn. Pas de kleuren aan.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Bevinding 21: Op pagina https://help.blaise.com/ kunnen bezoekers met de pijl-afbeeldingen naar de volgende of vorige pagina navigeren. Deze functionaliteit is niet bedienbaar met het toetsenbord. Zorg ervoor dat interactieve elementen zowel met het toetsenbord als met de muis bedienbaar zijn.

2.4 Navigeerbaar

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Bevinding 22: De website https://help.blaise.com/ bevat geen manier om blokken herhalende content zoals het navigatiemenu over te slaan. Een bezoeker moet herhalende content (zoals menu's, zoekfunctie en herhalende blokken bovenaan de website) over kunnen slaan en via een skiplink direct naar de hoofdcontent kunnen gaan.

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Bevinding 23: Welke pagina men ook selecteert, de paginatitel op https://help.blaise.com/ blijft "Blaise 5 help". Zorg ervoor dat voor iedere pagina de paginatitel uniek is en duidelijk beschrijft wat het onderwerp of doel is van de pagina.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Bevinding 24: De focusvolgorde op https://help.blaise.com/ is onlogisch. Op de 'homepage' start de focus bij de link 'Upgrade FAQ', gaat na 'Quick start tutorials' naar de adresbalk van de bezoeker, dan door het navigatiemenu en daarna pas naar de pijl-afbeeldingen. Zorg ervoor dat de focusvolgorde voor bezoekers die gebruik maken van het toetsenbord logisch is.

2.4.4 Linkdoel (in context) (Niveau A)

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Bevinding 25: In het navigatiemenu op pagina https://help.blaise.com/ komen links voor die een uitklapmenu openen. Deze links hebben geen toegankelijke naam en daardoor dus ook geen linkdoel. Zie voor verder advies succescriterium 4.1.2.

3. Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina (Niveau A)

Informatie over succescriterium 3.1.1 Taal van de pagina

Bevinding 26: Op https://help.blaise.com/ is geen taal ingesteld. Hierdoor weet voorleessoftware niet naar welke taal het moet overschakelen om de tekst verstaanbaar voor te lezen. Zorg ervoor dat het html-element een lang-attribuut bevat met daarin de juiste taalcode.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Bevinding 27: In het navigatiemenu op pagina https://help.blaise.com/ komen links voor die een uitklapmenu openen. Deze links hebben geen toegankelijke naam en daardoor dus ook geen linkdoel. Daarnaast gaat het hier niet om een linkfunctionaliteit maar om een knop, deze elementen zouden daarom buttons moeten zijn. Ook is het niet duidelijk voor hulpsoftware wanneer de elementen in- of uitgeklapt zijn. Zorg er voor dat deze staat/verandering ook beschikbaar is, door bijvoorbeeld aria-expanded te gebruiken (op het button-element).

Bevinding 28: Op https://help.blaise.com/ zijn er op diverse pagina's blokken aanwezig met content die in- en uit te klappen is, zoals bijvoorbeeld op de pagina "Install Blaise 5" (onder "Introduction"). Deze blokken zijn niet correct opgemaakt. Zo wordt de staat of een blok is in- of uitgeklapt niet gecommuniceerd naar hulpsoftware, wat wel belangrijk is. Zie het voorbeeld van het W3C voor inspiratie voor toegankelijke accordeons: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/

Bevinding 29: Op pagina https://help.blaise.com/, wanneer bezoekers in het zij-menu op 'Search' klikken, komt een zoekfunctie voor. Het invoerveld heeft geen toegankelijke naam. Dit geldt ook voor het select-element waarmee het aantal resultaten per pagina ingesteld kan worden. Ook de keuzerondjes missen een label, en zijn daarnaast niet aan de vraag gekoppeld door middel van een fieldset en legend combinatie.

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://help.blaise.com/

Ondersteunende technieken

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

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.