Issues:
Quickscan digitale toegankelijkheid website LTP Participant Portal

(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 pagina https://ltponline.com/portal/self-registration/ staat twee keer het logo van LTP. Deze afbeeldingen hebben de alternatieve tekst 'Logo'. De alternatieve tekst van een logo moet minimaal de naam van de organisatie bevatten. Dit komt op meer plaatsen in de website voor.

Bevinding 2: Op pagina https://ltponline.com/portal/questionnaire/drijfverenShort/ staat het logo van LPT. Deze afbeelding heeft geen alternatieve tekst. De alternatieve tekst van een logo moet minimaal de naam van de organisatie bevatten.

Bevinding 3: Op pagina https://ltponline.com/portal/questionnaire/drijfverenShort/ stap 1 staat een afbeelding met uitleg wat de verschillende knoppen zoals 'Mee eens' betekenen. Deze afbeelding heeft geen tekst alternatief. Zorg er voor dat de tekst in de afbeelding ook als tekst op de pagina staat. Dat kan als alt tekst in de afbeelding of in een (verborgen) laag in de pagina. In dat laatste geval heeft de afbeelding een leeg alt-attribuut (alt="") nodig, zodat hulpsoftware weet dat de afbeelding genegeerd kan worden.

Bevinding 4: Op pagina https://ltponline.com/portal/questionnaire/drijfverenShort/ stap 2 staan achter 'Introductie' en 'voorbeeldvraag' een cirkel met een vinkje om aan te geven dat deze onderdelen doorlopen zijn. Deze afbeeldingen hebben betekenis maar de naam ontbreekt. Los dit op met role=img en door een title-element met een alternatieve tekst als eerste child-element toe te voegen.

Bevinding 5: De Abstract redeneren test https://ltponline.com/portal/questionnaire/mTDBHBO03R/ bevat betekenisvolle afbeeldingen die moeilijk in woorden zijn te vatten. Een alternatieve tekst die de afbeelding beschrijft zal niet voldoende zijn om deze test toegankelijk te maken voor blinden. Vooral ook omdat de ruimtelijke verdeling van de afbeelding een belangrijke rol speelt in het oplossen van de problemen. Er moet worden overwogen om een alternatieve test voor blinden aan te bieden.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Bevinding 6: Op pagian https://ltponline.com/portal/questionnaire/drijfverenShort/ stap 3 staat een opsomming met tips. Deze is nu niet opgemaakt met de juiste code. Gebruik het ul- en li-element om opsommingen weer te geven.

Bevinding 7: Bij de verbaal redeneren test https://ltponline.com/portal/questionnaire/nTDBALL01/ stap 2 staat een voorbeeld. Visueel is duidelijk dat links en rechts een lijst met termen staan die ingevuld moeten worden. De lijst is echter niet als opsomming gecodeerd en daardoor is bijvoorbeeld voor blinden niet duidelijk wat de bedoeling is.

Bevinding 8: Bij het invullen van een test is er elke keer een groep keuzeteksten (radiobuttons). Boven deze groep staat de stelling waarop de keuzes betrekking hebben, bijvoorbeeld 'Ik reageer vaak spontaan'. Deze tekst is nu niet gekoppeld aan de groep keuzevelden. Zo weten bijvoorbeeld blinde bezoekers niet bij welke stelling de keuzes horen. Gebruik een combinatie van fieldset en legend of een andere vergelijkbare techniek om dit probleem op te lossen. Het zelfde probleem komt voor bij de vragen in de de verbaal redeneren test https://ltponline.com/portal/questionnaire/nTDBALL01/ stop 3 en verder en bij de keuzemogelijkheden in de test Willen https://ltponline.com/portal/questionnaire/willen.

Bevinding 9: Bij de Numerieke inzicht test https://ltponline.com/portal/questionnaire/nTDBALL02 stap 2 staat een tabel. De koppen in deze tabel zijn opgemaakt met het strong-element, in plaats van met het th-element. Daardoor is de relatie tussen de koppen en datacellen voor screenreadergebruikers niet duidelijk. Zorg ervoor dat tabellen goed zijn opgemaakt en gebruik voor tabelkoppen altijd het th-element. Overigens zullen bezoekers die afhankelijk zijn van voorleessoftware moeite hebben met deze opgave omdat er veel gegevens tegelijk onthouden moeten worden om het goede antwoord te vinden. Hierdoor heeft deze test voor bezoekers met een visuele beperking een hogere moeilijkheidsgraad. De tijdslimiet versterkt dit verschil in moeilijkheidsgraad.

Bevinding 10: Advies: Op pagina https://ltponline.com/portal/self-registration/ is bij alle invoervelden het bijbehorende label niet expliciet geassocieerd. Het is toegankelijker tekstlabels te koppelen aan invoervelden door gebruik te maken van het for-attribuut bij het label-element die verwijst naar een id-attribuut bij het invoerveld. Zo krijgt een bezoeker die gebruik maakt van een screenreader direct te horen om welk veld het gaat als direct naar het invoerveld wordt gesprongen. Hetzelfde komt bij alle invoervelden in de applicatie voor, bijvoorbeeld op de pagina https://ltponline.com/portal/amend_details/66311.

1.3.3 Zintuiglijke eigenschappen (Niveau A)

Informatie over succescriterium 1.3.3 Zintuiglijke eigenschappen

Bevinding 11: Bij de Abstract redeneren test https://ltponline.com/portal/questionnaire/mTDBHBO03R/ zijn er vragen die alleen door her herkenen van vorm, kleur, omvang, visuele locatie en of oriëntatie beantwoord kunnen worden. Blinden kunnen deze test niet doen.

1.3.5 Identificeer het doel van de input (Niveau AA)

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Bevinding 12: Op pagina https://ltponline.com/portal/self-registration/ is een formulier waar de bezoeker onder andere het eigen e-mailadres en de voornaam 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 13: Bij de Abstract redeneren test https://ltponline.com/portal/questionnaire/mTDBHBO03R/ zijn er vragen die alleen door onderscheid van kleur opgelost kunnen worden. Zorg dat in dit geval de contrastverhouding tussen de gebruikte kleuren groter is dan 3:1.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Bevinding 14: Op pagina https://ltponline.com/portal/self-registration/ is een roze tekst 'privacy statement' (HEX #E35E54) op een witte achtergrond. Deze tekst heeft een te laag contrast. De contrast-verhouding is 3,5:1 waar dit minstens 4,5:1 moet zijn. Dezelfde te lage contrast-verhouding geldt voor de witte tekst 'Maak een account aan' op de zelfde kleur roze achtergrond. Deze kleurencombinatie komt op meer plaatsen in de website voor, bijvoorbeeld op pagina https://ltponline.com/portal/amend_details/66174 bij de tekst 'Naar programma'

Bevinding 15: Als op pagina https://ltponline.com/portal/self-registration/ een verplicht veld niet is ingevuld verschijnt er een fout melding in rode tekst (HEX #FF0000) op witte achtergrond. Deze tekst heeft een te laag contrast. De contrast-verhouding is 4:1 waar dit minstens 4,5:1 moet zijn. Deze kleur foutmeldingen komen op meer plaatsen in de website voor, bijvoorbeeld op pagina https://ltponline.com/portal/amend_details/66174

Bevinding 16: Als een gender is gekozen op pagina https://ltponline.com/portal/self-registration/ dan heeft de witte tekst op lichtblauwe achtergrond (HEX #90C2DD) niet genoeg contrast. De contrast-verhouding is 1,9:1 waar dit minstens 4,5:1 moet zijn.

Bevinding 17: Op pagina https://ltponline.com/portal/amend_details/66311 hebben de witte teksten 'Persoonlijk profiel' en 'Log out' op lichtblauwe achtergrond (HEX #BBDBEC) niet genoeg contrast. De contrast-verhouding is 1,5:1 waar dit minstens 4,5:1 moet zijn.

Bevinding 18: Als bij het doorlopen van een test op de knop naar de volgende vraag wordt geklikt voor een vraag is beantwoord verschijnt in witte tekst op oranje achtergrond (HEX #FFA000 ) de tekst : 'LET OP: De vraag is niet beantwoord. Je kunt pas naar de volgende pagina indien je de vraag beantwoord hebt.' Deze tekst heeft een te laag contrast. De contrast-verhouding is 2:1 waar dit minstens 4,5:1 moet zijn.

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Bevinding 19: Op pagina https://ltponline.com/portal/questionnaire/drijfverenShort/ stap 1 staat een afbeelding met uitleg wat de verschillende knoppen zoals 'Mee eens' betekenen. Slechtzienden kunnen deze tekst niet aanpassen om de leesbaarheid te verhogen. De tekst op de afbeelding komt verder niet voor op de pagina. Plaats deze tekst daarom als HTML-tekst op de pagina.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Bevinding 20: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan verdwijnt op pagina https://ltponline.com/portal/self-registration/ een deel van de content onder de onderdelen die altijd in beeld blijven staan zoals de header en de footer. Daar kun je dan ook niet meer bijkomen.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Bevinding 21: Bij het doorlopen van een test wordt de voortgang in beeld gebracht door een voortgangsbalk onderin de pagina. De blauwe balk (HEX #7BBCD9) op witte achtergrond heeft een te laag contrast. De contrastverhouding is hier 2,1:1, waar dit minimaal 3:1 moet zijn.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Bevinding 22: Op pagina https://ltponline.com/portal/self-registration/ staat de link 'Direct inloggen'. Bezoekers die met het toetsenbord navigeren, bijvoorbeeld met de tabtoets, kunnen deze link niet gebruiken omdat hij geen focus krijgt. Zorg ervoor dat alle interactieve elementen bereikbaar en bedienbaar zijn met het toetsenbord. Hetzelfde komt vaker voor in de website, bijvoorbeeld op dezelfde pagina bij de radioknoppen om het geslacht te kiezen en op pagina https://ltponline.com/portal/login de link 'Forgot password?' en in de hele applicatie bijvoorbeeld op pagina https://ltponline.com/portal/amend_details/66311 zijn de knoppen onder 'Welke competenties zou je willen meten? (min. 1)' niet te bedienen.
Op pagina https://ltponline.com/portal/questionnaires/ is het enige element dat met behulp van het toetsenbord is te bedienen de taalinstelling rechts bovenin de pagina.

2.2 Genoeg tijd

2.2.1 Timing aanpasbaar (Niveau A)

Informatie over succescriterium 2.2.1 Timing aanpasbaar

Bevinding 23: Advies: Bij de Abstract redeneren test https://ltponline.com/portal/questionnaire/mTDBHBO03R/ is er een timer die naar 0 aftelt. Normaliter moet de bezoeker die kunnen uitzetten, aanpassen of verlengen. In het geval van een test geld een uitzondering, maar gebruik het alleen wanneer het echt essentieel is. Hetzelfde geldt voor de Verbaal redeneren test https://ltponline.com/portal/questionnaire/nTDBALL01/

2.4 Navigeerbaar

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Bevinding 24: 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.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Bevinding 25: Als bij de Talent Fit demo een van de componenten wordt gekozen hebben de pagina's met de betreffende test allemaal de paginatitel 'Vragenlijst'. Deze titel beschrijft de inhoud van de pagina onvoldoende, geef ten minste aan om welke component het gaat.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Bevinding 26: Opmerking: Er zijn maar weinig elementen op de pagina's die focus krijgen, (dat is afgekeurd onder 2.1.1) daarom is de volgorde niet goed te beoordelen.

Bevinding 27: Als op pagina https://ltponline.com/portal/questionnaire/drijfverenShort stap 3 op de knop 'GA VERDER' geklikt wordt staat op de volgende pagina de focus op de knop 'GA VERDER' rechts onderaan de pagina. Logisch zou zijn dat de focus op het eerste interactieve element in de pagina staat.

Bevinding 28: Als bij het invoeren van de vragen in bijvoorbeeld de pagina https://ltponline.com/portal/questionnaire/drijfverenShort/ naar een volgende pagina wordt gegaan voordat een keuze is gemaakt verschijnt er een foutmelding (wit op oranje achtergrond). Als je nu met de tabtoets verder navigeert moet de toetsenbordfocus direct in het dialoogvenster komen en moet je met de tabtoets binnen dit dialoog blijven. Dat gaat nu niet goed.

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Bevinding 29: Op de pagina https://ltponline.com/portal/questionnaire/drijfverenShort/ bijvoorbeeld bij de stelling 'Ik hecht veel waarde aan persoonlijke relaties op het werk.' heeft de lijst met mogelijkheden het aria-label 'iDV0033af01-answers'. Schermlezers lezen deze tekst voor, dit is geen goede beschrijving van de lijst items. Laat het aria-label weg.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Bevinding 30: Wanneer de links 'Privacy statement' en 'Need help?' of de talen keuzeknop op pagina https://ltponline.com/portal/self-registration/ focus hebben, is dat niet zichtbaar. Zorg ervoor dat bezoekers die met het toetsenbord navigeren weten welk element de focus heeft door een duidelijke focusrand toe te voegen. Hetzelfde komt vaker voor op de website, bijvoorbeeld op pagina https://ltponline.com/portal/login bij de knop 'Login'.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Bevinding 31: In het formulier op pagina https://ltponline.com/portal/self-registration/ hebben de velden geen toegankleijke naam.
Doordat daardoor het visuele label en de toegankelijke naam van deze knop niet overeenkomen, is de knop niet of moeilijk te bedienen door bezoekers die afhankelijk zijn van spraaksoftware. Zorg ervoor dat het visuele label van deze knop in de toegankelijke naam voorkomt, het liefst vooraan.

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 32: Als op elke pagina in de website de taal Nederlands is gekozen is de taalaanduiding van de hele pagina Engelstalig. De pagina is echter in het Nederlands. Zorg voor de juiste taalcodering in de HTML zodat hulpsoftware de tekst op correcte wijze voorleest.

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Bevinding 33: Als bijvoorbeeld op pagina https://ltponline.com/portal/self-registration/ wordt gekozen voor Duits als taal dan zijn een aantal teksten Duitstalig maar de taalaanduiding van de hele pagina is Engels. Hiervoor moet voor elke tekst in de code een taalwisseling aangegeven worden. Dit kan door de omliggende html-code een lang="nl" toe te voegen. Als wordt gekozen voor Frans dan moet uiteraard alleen voor de Franstalig teksten een taalwisseling aangegeven worden, lang="fr".

Bevinding 34: Als bijvoorbeeld op de overzichtspagina https://ltponline.com/portal/questionnaires/ gekozen is voor de Nederlandse taal, dan is de Titel en inleiding in het Engels. Hiervoor moet voor elke tekst in de code een taalwisseling aangegeven worden door aan de omliggende html-code een lang="nl" toe te voegen, of beter nog, deze tekst moet vertaald worden.

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Bevinding 35: Wanneer bezoekers op pagina https://ltponline.com/portal/self-registration/ geen of foutieve invoer invullen, verschijnen er foutmeldingen bij de invoervelden. Bijvoorbeeld 'dit veld is verplicht.' Een goede foutidentificatie vermeld waar de fout is gemaakt en welke fout is gemaakt. Bijvoorbeeld 'Dit veld is niet ingevuld’. Dat een veld verplicht is, is een foutsuggestie zoals omschreven bij succescriterium 3.3.3.

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Bevinding 36: Advies: Op pagina https://ltponline.com/portal/self-registration/ is een formulier waarin verplichte velden staan. Nergens binnen het formulier staat vermeld welke velden verplicht zijn tot dat een verplicht veld oningevuld verlaten wordt. Plaats een melding binnen het formulier, bijvoorbeeld: ‘Dit veld is verplicht'.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Bevinding 37: Op pagina https://ltponline.com/portal/self-registration/ is bij alle invoervelden het bijbehorende label niet expliciet geassocieerd waardoor de invoervelden geen naam hebben. Tekstlabels moeten gekoppeld worden aan invoervelden door gebruik te maken van het for-attribuut bij het label-element die verwijst naar een id-attribuut bij het invoerveld. Zo krijgt een bezoeker die gebruik maakt van een screenreader direct te horen om welk veld het gaat als direct naar het invoerveld wordt gesprongen.

Bevinding 38: Op pagina https://ltponline.com/portal/questionnaires/ staan knoppen om onderdelen van een assessment kiezen. De knoppen, bijvoorbeeld 'beïnvloedingsstijlen' hebben geen toegankelijke naam. Het is voor screenreadergebruikers nu niet duidelijk wat de knop doet. Het zelfde geldt voor de knoppen om naar een vorige / volgende pagina te gaan in de vragenlijst.

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Bevinding 39: Bij het doorlopen van een test is er onder in beeld een voortgangsbalk. De voortgang, bijvoorbeeld in percentages is niet beschikbaar voor bezoekers die afhankelijk zijn van hulpsoftware.

Bevinding 40: Als bijvoorbeeld op pagina https://ltponline.com/portal/questionnaire/drijfverenShort bij een stelling een keuze gemaakt wordt verspring de pagina meteen naar een volgende stelling. Blinden en slechtzienden die met een screenreader werken krijgen geen signaal dat er iets is gewijzigd en dat de volgende vraag op het scherm staat.

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

• Account aanmaken:
  https://ltponline.com/portal/self-registration/938498d0-98bc-4963-a586-e9cf51d3888d/8514
• Deelnemers:
  https://ltponline.com/portal/participations
• Introductie:
  https://ltponline.com/portal/questionnaire/drijfverenShort/2c76f7a0-3e3b-4f06-b0b0-3931efaf856c
• Overzicht Components:
  https://ltponline.com/portal/questionnaires/2c76f7a0-3e3b-4f06-b0b0-3931efaf856c

Ondersteunende technieken

• HTML5
• CSS
• WAI-ARIA
• DOM
• ECMAScript 5
• 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.