Onderzoek toegankelijkheid almere.academie.nl

Hele sample

Uitkomst: Onvoldoende

Startpagina

Uitkomst: Onvoldoende

Coaching intern aanbod

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

In de header en de footer staat het logo van de gemeente Almere. De alternatieve tekst is echter ‘Logoafbeelding die linkt naar startpagina’. Hierdoor krijgen screenreadergebruikers niet dezelfde informatie als ziende gebruikers. Zorg er bij logo’s voor dat de alt-tekst altijd minstens de zichtbare tekst bevat. Opmerking: bij inzoomen vanaf 150% mist de logo- afbeelding.

Startpagina

Er staat een foto achter de agenda zonder alt-attribuut. Screenreader gebruikers weten niet wat voor afbeelding dit is, en krijgen mogelijk de bestandsnaam voorgelezen. Zet bij decoratieve afbeeldingen een lege alt-tekst, zodat hulpsoftware de afbeelding negeert.

Coaching intern aanbod

Er staan foto’s van de coaches op deze pagina. Deze foto’s zijn echter geplaatst als achtergrondafbeelding, niet als content. Voor gebruikers van hulpsoftware is het daardoor niet duidelijk dat deze portretfoto’s er zijn. (Ook niet op de detailpagina waarnaar gelinkt wordt.) Plaats afbeeldingen die informatie overdragen als afbeelding (img-element) in de HTML met een alternatieve tekst of onderschrift. CSS-afbeeldingen zijn bedoeld voor layout.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Onvoldoende

Startpagina

Uitkomst: Onvoldoende

Contact

Uitkomst: Onvoldoende

Veelgestelde vragen

Uitkomst: Onvoldoende

Cursus De waarde van professionele communicatie binnen de gemeente

Uitkomst: Onvoldoende

Leerlijn Ontdek de gemeente

Uitkomst: Onvoldoende

Profiel overzicht (met tabs)

Uitkomst: Onvoldoende

Mijn instellingen

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

In de header staat visueel bij het icoon van de notificaties een cijfer. Dit cijfer wordt niet doorgegeven aan hulpsoftware (als statische tekst).

Startpagina

De pagina heeft geen logische koppenstructuur. Zo begint de pagina met een h5 en staan er lager op de pagina meerdere h1’s. Ook zijn er veel koppen niet als heading-element opgemaakt, zoals ‘In de kijker’. Screenreader gebruikers die navigeren via koppen kunnen hierdoor in verwarring raken. De structuur is niet duidelijk. Zorg voor een goede koppenhiërarchie waarbij geen niveaus worden overgeslagen en qua betekenis de juiste koppen onder elkaar staan. Gebruik voor alle koppen heading elementen (h1,h2,h3). Nu zijn de meeste koppen enkel div-elementen. Screenreaders herkennen dit niet als kop. Zie screenshot 4. Dit komt op meerdere pagina’s voor. Bijvoorbeeld op de pagina Leeraanbod begint de pagina met een h5 en daarna enkel h1’s. De kopjes van de cursussen zijn niet met een heading-element opgemaakt. Op de pagina Coaching intern aanbod hebben de coaches een h3-kop, die nu direct valt onder de h1-kop Categorie. Zorg dat de h3-koppen van de coaches onder een eigen kop vallen. Zie screenshot 5. Op de pagina Profiel overzicht staan de tussenkopjes Actueel en Historie opgemaakt met een b-element.

Het tekst-invoerveld om te zoeken heeft geen gekoppeld label voor hulpsoftware. Er staat een placeholdertekst, maar een placeholder is niet altijd beschikbaar en wordt niet altijd voorgelezen door screenreaders. Voeg een gekoppeld label-element (via for=”id”) of aria-label toe met bijvoorbeeld ‘zoeken’. Dit komt op meerdere pagina’s voor bij het algemene zoekveld, maar bijvoorbeeld ook bij het invoerveld om te filteren op zoekwoord op de pagina Leeraanbod.

Via de styling kun je zien welke items je geliked hebt. Voor gebruikers van hulpsoftware is dit niet duidelijk. Geef dit bijvoorbeeld aan via het ‘aria-pressed’-attribuut op de like-knop.

Contact

Bij de vraag ‘Heeft jouw vraag betrekking op’ zijn de invoervelden niet gegroepeerd en hebben geen groepslabel. Dit kan worden gedaan via een fieldset en legend of via role="group" en een “aria-labelledby”-attribuut dat hier verwijst naar het beschrijvende label element. Met een groepslabel worden bij losse invoervelden ook het groepslabel voorgelezen, zodat de relatie ook duidelijk is wanneer je deze niet kunt zien. Dit issue komt op meerdere pagina’s voor, bijvoorbeeld bij de invoervelden van de filters op de pagina Leeraanbod. Hier kan verwezen worden naar de kop die boven elke groep velden staat.

Veelgestelde vragen

Alle koppen op de deze pagina (van de vragen zelf en de subkopjes binnen de vragen) staan opgemaakt met het strong-element in plaats van met kopelementen. Screenreader gebruikers die navigeren via koppen missen deze nu. Maak hier kopelementen van zoals h2 en h3. Dit komt ook voor op de pagina ‘De Almere Academie‘.

Cursus De waarde van professionele communicatie binnen de gemeente

De pagina heeft geen logische koppenstructuur. Zo begint de pagina met meerdere h4’s en staan er lager op de pagina meerdere h1’s. De kopjes binnen de cursusblokken zijn niet als kop opgemaakt, maar als div-element. Dit komt op meerdere cursuspagina’s voor. Onder ‘Doel’ en ‘Programma’ staan visueel lijsten, maar deze zijn niet als lijst opgemaakt, maar met meerdere paragrafen met een punt ervoor. Dit is verwarrend voor screenreadergebruikers. Maak hier een ul-element van met list-items.

Leerlijn Ontdek de gemeente

De koppen van de activiteiten zijn niet als kop opgemaakt. Ook de subkopjes binnen activiteiten zijn niet als kop opgemaakt.

Profiel overzicht (met tabs)

Onder de tab Leerlijnen staan visueel blokken met een duidelijke structuur: met kopjes en lijstjes met kenmerken. In de code zijn dit echter enkel div-elementen waardoor de tekst allemaal achter elkaar wordt voorgelezen door screenreaders. Geef de blokken een heading-element en maak van de lijstjes een ul-of dl-element. Let er op dat de tag ‘niet-voltooid’ in de HTML onder de kop komt te staan, anders klopt de volgorde niet meer wanneer gebruikers navigeren via koppen. (En dan wordt het een issue onder 1.3.2.)

Mijn instellingen

Het submenu is niet correct opgemaakt. Er staan list-items in een navigation-element. Wanneer lijsten niet correct zijn opgemaakt kan dit problemen geven voor screenreadergebruikers.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Contact

Uitkomst: Onvoldoende

Contact

Het invoerveld voor naam heeft geen mechanisme waarmee de invoer automatisch kan worden aangevuld. Dit maakt het invullen van formulieren voor veel gebruikers gemakkelijker, bijvoorbeeld voor mensen voor wie het invoeren van tekst veel tijd kost omdat dit via speciale hulpmiddelen gaat, of voor mensen met cognitieve beperkingen. Dit kan worden verbeterd door ‘autocomplete’ attributen te plaatsen bij de invoervelden. Zie voor meer informatie https://www.w3.org/WAI/WCAG21/Techniques/html/H98 en voor een lijst van alle attributen https://www.w3.org/TR/WCAG21/#input-purposes.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Onvoldoende

Inloggen

Uitkomst: Onvoldoende

Startpagina

Uitkomst: Onvoldoende

Veelgestelde vragen

Uitkomst: Onvoldoende

Cursus De waarde van professionele communicatie binnen de gemeente

Uitkomst: Onvoldoende

Leerlijn Ontdek de gemeente

Uitkomst: Onvoldoende

Leeraanbod

Uitkomst: Onvoldoende

Aanvraag voor een groep (proces 2 pagina’s)

Uitkomst: Onvoldoende

Profiel overzicht (met tabs)

Uitkomst: Onvoldoende

Bewerk profiel

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Tekst moet een contrast hebben van minimaal 4,5:1 voor slechtzienden en kleurenblinden. Dat geldt ook voor actieve elementen zoals op hover en focus. Onderstaande elementen op de website zitten qua contrast onder deze waarden. (NB: Dit zijn gevonden voorbeelden en is geen volledige lijst. Alle elementen moeten door de bouwer hierop worden gecontroleerd in alle variaties van weergaven, zoals op 100% en ingezoomd.)

Actieve menu-items (lichtgroen/wit, 1.8:1).

Inloggen

• De Inloggen knop onder het formulier (wit/turkoois, 3.11:1) en de inloggen link in de header.
• De skiplink (turkoois op lichtgroen).

Startpagina

• De cijfers van de star rating (groen op groen, 1.6:1).
• De teksten van de intro en het persoonlijk overzicht op 150% zoom. Zie screenshot 10.
• De donkere trainingsblokken op 150% zoom. Zie screenshot 11.

Veelgestelde vragen

De lichtbruine links op lichtblauwe en witte achtergrond (1.84:1 en 2:1). Zie screenshot 1. Deze kleurcombinatie komt op veel pagina’s voor.

Cursus De waarde van professionele communicatie binnen de gemeente

• De witte tekst op groene achtergrond ‘Almere Academie Aanbod’ (3:1). Deze kleurcombinatie komt op veel plekken voor.
• Turkooise tekst op bruine achtergrond ‘ Kies een begin-en einddatum…’ (2.57:1).
• De huidige datum in de kalender (lichtblauw/wit, 2.16:1).

Leerlijn Ontdek de gemeente

• De tekst ‘Meer details weergeven’ (wit/turkoois, 3.11:1). Deze kleurcombinatie komt op veel plekken op de site voor.
• De tekst ‘Leerlijnen’ in het kruimelpad (1:1).
• De kop ‘Leerlijn Ontdek de gemeente‘ (turkoois op lichtblauw, 2.7:1). Grote teksten moeten minimaal een contrast hebben van 3:1.

Leeraanbod

• De placeholder-teksten met ‘Filter’ (2.7:1).
• De teksten van de prijsinvoer (3:1).

Aanvraag voor een groep (proces 2 pagina’s)

• De groene links binnen de tekst (3.27:1).
• De wit/groene knoppen met ‘Selecteer’ (1.83:1).

Profiel overzicht (met tabs)

• De teksten ‘Niet voltooid’ boven sommige lichte achtergrondfoto’s.
• De teksten ‘nog geen certificering behaald’ onder de tab Leerlijnen (wit op wit).

Bewerk profiel

De tekst ‘Voorbeeldweergave’ (2.24:1).

Hele sample

Uitkomst: Onvoldoende

Startpagina

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

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

Het inzoomen op mobiele apparaten wordt belemmerd via het meta element (via ‘maximum-scale=1, user-scalable=no’).

Startpagina

Vanaf 125% zoom worden de bewaarde items onleesbaar. Zie screenshot 12.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Leeraanbod

Uitkomst: Onbekend

Profiel overzicht (met tabs)

Uitkomst: Onvoldoende

Mijn instellingen

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Maak de layout zodanig responsive dat alle content en functionaliteit bij inzoomen tot 400% (vergelijkbaar met 320 px breed) goed bruikbaar blijft, en er niet in twee richtingen gescrold hoeft te worden. Op onderstaande plekken op de site is dit niet het geval. (Getest op 1280px breed.)

Op 400% zoom is niet het gehele gebruikersmenu bereikbaar. De uitloggen link valt buiten beeld en je kunt er niet naartoe scrollen.

Leeraanbod

Onderaan elk cursusitem staan kernwoorden. Bij het inzoomen vanaf 100% moet er horizontaal gescrolld worden om deze te lezen. Zet deze onder elkaar bij inzoomen.

Profiel overzicht (met tabs)

Bij de inschrijvingen tab staat een link ‘Toon details’. Deze wordt bij het inzoomen en op mobiel onbereikbaar.

Mijn instellingen

Op 400% zoom lopen de (zo vormgegeven) kolomheaders door elkaar heen. Zie screenshot 13.

Hele sample

Uitkomst: Onvoldoende

Inloggen

Uitkomst: Onvoldoende

Startpagina

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

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

De focusstijl van de knoppen, zoals in de header. Deze is op focus iets donkerder dan in niet-actieve stijl. Het verschil is slechts 1.3:1. Zie screenshot 6. Beter is het om hier ook de standaard outline te tonen. Dit komt op meerdere knoppen voor met iconen, zoals de ‘wis’ knop binnen het zoekveld. Bij de veelgestelde vragen is het verschil slechts 1.2:1 (lichtgrijs t.o.v. wit). In de kalender is het verschil bij de dagen 1.6:1 (lichtgrijs t.o.v. wit).

Het icoon op de zoekknop (lichtgroen op bruin, 1.1:1). Zie screenshot 7.

Inloggen

De randen van de invoervelden (grijs/grijs, 1.2:1) en de focusrand van de invoervelden (lichtblauw t.o.v. grijs, 1.8:1). Dit komt bij meerdere formulieren voor.

Startpagina

De sterren bij de cursussen en de hart-iconen om te bewaren (1.6:1)

Hele sample

Uitkomst: Onvoldoende

Startpagina

Uitkomst: Onvoldoende

Leerlijn Ontdek de gemeente

Uitkomst: Onvoldoende

Aanvraag voor een groep (proces 2 pagina’s)

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Wanneer tekstafstand-instellingen worden aangepast voor de leesbaarheid (zoals line-height, letter of word spacing) is in onderstaande gevallen niet alle content meer beschikbaar. Dit kan worden opgelost door containers in de layout te laten meegroeien met de tekst. Dit criterium kun je gemakkelijk testen met deze bookmarklet: https://dylanb.github.io/bookmarklets.html.

Startpagina

Op 400% zoom valt een deel van de teksten weg, zoals in de introductie en in het zoekveld. Zie screenshot 14 en screenshot 15.

Leerlijn Ontdek de gemeente

Vanaf 175% zoom vallen er teksten weg binnen de cursusgegevens onder de tab Programma, met name in de titels van de cursussen.

Aanvraag voor een groep (proces 2 pagina’s)

Op 400% zoom zijn de teksten in de kolommen niet meer leesbaar. Zie screenshot 16.

Hele sample

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Het submenu onder Leeraanbod kan alleen worden gesloten door de muis of de toetsenbordfocus te verplaatsen. Mensen die vergrotingssoftware gebruiken moeten de muis bewegen om delen van de pagina te bekijken. Wanneer dan (onbedoeld) content uitklapt, moeten ze deze met het toetsenbord weg kunnen halen. Zorg dat deze ook op een andere manier gesloten kan worden, bijvoorbeeld met de escape toets.

Op veel plekken worden tooltips getoond op hover, zoals bij de waardering met de sterren en bij de kenmerken onderaan de blokken met cursussen. Deze kunnen alleen worden gesloten door de muis te verplaatsen. Zorg dat deze ook op een andere manier gesloten kan worden, bijvoorbeeld met de escape toets.

Hele sample

Uitkomst: Onvoldoende

Inloggen

Uitkomst: Onvoldoende

Leeraanbod

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Op veel plekken worden tooltips getoond op hover, zoals bij de waardering met de sterren en bij de kenmerken onderaan de blokken met cursussen. Deze worden niet getoond wanneer je met het toetsenbord navigeert. Dit kan worden opgelost door hier button elementen van te maken. Zie ook 4.1.2.

Inloggen

Het hoofdmenu-item Leeraanbod is niet bereikbaar met het toetsenbord. Dit is een span-element in plaats van een button of link. (Op sommige andere pagina’s is dit wel een link, zoals op de startpagina.)

Leeraanbod

Binnen de aanbodblokken verschijnt bij een smaller scherm een horizontale scrollbalk. Met het toetsenbord is het niet mogelijk bij alle elementen te komen in Safari, doordat er geen focusbare elementen (zoals knoppen) in dit gedeelte zitten. Zie ook 4.1.2 en voor meer informatie https://dequeuniversity.com/rules/axe/4.11/scrollable-region-focusable. Zie screenshot 3. Opmerking: de scrollbalk is heel dun, waardoor het met de muis ook lastig kan zijn om te scrollen.

Binnen het zoekveld van de filters verschijnt wanneer je een woord typt, een knop om de invoer te wissen. Deze is niet bereikbaar met het toetsenbord. (De tabindex staat op ‘-1’).

Bij inzoomen vanaf 150% komen de filters achter een knop te staan onderaan de pagina. Deze knop is niet te bedienen met het toetsenbord.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Inloggen

Uitkomst: Onvoldoende

Inloggen

De paginatitel is enkel ‘Gemeente Almere’. Voor gebruikers van hulpsoftware is het voor de navigatie tussen webpagina’s belangrijk dat de titel duidelijk maakt waar ze zijn. Geef daarom altijd een beschrijving van de pagina in het title-element, bij voorkeur in de vorm ‘onderwerp – organisatie’. Dit komt ook voor op de pagina’s Contact en Leverancier aanmelden.

Hele sample

Uitkomst: Onvoldoende

Inloggen

Uitkomst: Onvoldoende

Startpagina

Uitkomst: Onvoldoende

Leerlijn Ontdek de gemeente

Uitkomst: Onvoldoende

Profiel overzicht (met tabs)

Uitkomst: Onvoldoende

Inloggen

Wanneer het mobiele menu geopend is (hoofdmenu vanaf 150% zoom), gaat de focus ook nog naar elementen op de onderliggende pagina, maar deze zijn nu niet zichtbaar. Zorg dat de focus hier pas weer bij kan komen wanneer het menu weer gesloten is. Het menu heeft geen sluitknop en kan ook niet worden gesloten met de escape-knop. Zorg voor minstens een manier om het menu weer te sluiten met het toetsenbord zonder een menu-item te kiezen.

Startpagina

Na het activeren van een tab, zoals onder ‘Nieuw’, gaat de focus niet meteen in het tabpanel, maar eerst naar de andere tabs. Tabs werken bij voorkeur met pijlknoppen. Daarom is het handiger voor de gebruiker als de tab toets meteen doorgaat naar het gekozen panel. Zie ook https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel.

Leerlijn Ontdek de gemeente

Wanneer je met het toetsenbord de knop ‘Selecteer plaats en datum’ activeert, scroll je visueel naar onderen bij de agenda. De focus gaat echter verder bovenaan de pagina. Zorg dat de focus nu verder gaat bij de agenda.

Profiel overzicht (met tabs)

Onder de tab Certificeren kun je via de zoekknop een pop up openen. Wanneer je deze afsluit, komt de focus weer helemaal bovenaan de pagina te staan. Dit is verwarrend en lastig voor toetsenbordgebruikers. Zorg dat na het sluiten van de popup de focus terug gaat naar de zoekknop of het eerstvolgende element daarna.

Hele sample

Uitkomst: Onvoldoende

Startpagina

Uitkomst: Onvoldoende

Contact

Uitkomst: Onvoldoende

Startpagina

Er zijn meerdere links op de pagina met de tekst ‘Bekijk de training’. Gebruikers van hulpsoftware vragen vaak lijsten op van links op de pagina. Wanneer deze teksten geen duidelijke informatie geven kunnen ze niks met deze links. Voeg teksten toe aan de link die duidelijk maken waar het precies om gaat, zodat de diverse links van elkaar te onderscheiden zijn. Dit kan met een extra tekst in de link, eventueel met CSS verborgen, of via een aria-labelledby verwijzing naar een tekst elders op de pagina, zoals de titel van de cursus. Zie voor meer info https://www.w3.org/TR/WCAG20-TECHS/ARIA7.html.

Contact

Boven het formulier staan twee links met een e-mailadres, waarvan er één link geen tekst heeft. Dit is verwarrend voor screenreadergebruikers. Het beste is om de lege link te verwijderen.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Startpagina

Uitkomst: Onvoldoende

Startpagina

De waarderingsknoppen hebben een Engels label: ‘Rating 2 of 5’. Dit is mogelijk niet voor alle gebruikers duidelijk. Zorg dat op Nederlandse pagina’s ook alle labels in het Nederlands beschreven staan. Dit komt op meerdere plekken voor, bijvoorbeeld om een zoekwoord te wissen (‘clear’).

Hele sample

Uitkomst: Onvoldoende

Inloggen

Uitkomst: Onvoldoende

Startpagina

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

De focus op de bruine knoppen, zoals de zoekknop en de ‘volgende’ knop in sliders, is niet zichtbaar. De outline is in de CSS op ‘0’ gezet waardoor de standaard rand op focus verborgen wordt. Zorg dat deze outline zichtbaar is, of een eigen stijl markering (met voldoende contrast).

De focus op de knop van het gebruikersmenu wanneer je bent ingezoomd vanaf 150% is niet zichtbaar.

Vanaf 150% zoom komt de focus ook op de link met het logo, maar deze is niet zichtbaar doordat de afbeelding ontbreekt.

Inloggen

De focus op de links in de tekst, zoals ‘wachtwoord vergeten’ is niet zichtbaar.

Startpagina

De focus op de knoppen voor de rating is niet zichtbaar. (NB: met het toetsenbord kom je langs alle 5 knoppen, maar als je er een activeert ga je naar de pagina van de cursus). De focus op de links onder ‘Door jou bewaard’ is niet zichtbaar.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Cursus De waarde van professionele communicatie binnen de gemeente

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

De link achter het logo van de gemeente Almere heeft een andere toegankelijke naam dan wat er zichtbaar is, namelijk ‘Logoafbeelding die linkt naar startpagina’. Hierdoor kan de link niet met stem bediend worden. Zorg ervoor dat de toegankelijke naam (zoals alt-tekst) altijd minstens de zichtbare tekst bevat. Aangeraden wordt om de zichtbare naam aan het begin van de toegankelijke naam te zetten, dus bijvoorbeeld: ‘Gemeente Almere - link naar startpagina’.

Cursus De waarde van professionele communicatie binnen de gemeente

In het informatieblok over de cursus staat een knop met de zichtbare tekst ‘Bewaar’. De toegankelijke naam is echter (via het ‘aria-label’) ‘like dit’. Hierdoor kan de knop niet met stem bediend worden. Zorg ervoor dat de toegankelijke naam altijd minstens de zichtbare tekst bevat. Hier kan dat worden opgelost door het aria-label-attribuut te verwijderen.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Startpagina

Uitkomst: Voldoende

Startpagina

Opmerking: De knoppen met de sterren staan te dicht bij elkaar waardoor het ‘aanwijsgebied’ (grootte van het doel) te klein is. Maak het doel minimaal 24px, gerekend vanaf het middenpunt van de knop (knop inclusief tussenruimte). Bezoekers met een motorische beperking kunnen moeite hebben om links en buttons te selecteren die te klein zijn of te dicht op elkaar staan. Dit is geen bevinding, omdat de knoppen niet individueel lijken te werken, maar genest zijn in een link.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Contact

Uitkomst: Onvoldoende

Contact

Wanneer er foutmeldingen zijn gevonden bij het verzenden van het formulier wordt er niet duidelijk aangegeven wat er fout is gegaan. ‘Dit is een verplicht veld’ is een algemene instructie (die er ook al kon staan voor het verzenden). Een goede foutmelding is wanneer er bijvoorbeeld wordt aangegeven dat een specifiek veld niet is ingevuld, of niet correct is ingevuld. Een alternatief kan zijn: het plaatsen van een algemene melding bovenaan het formulier dat er fouten zijn gevonden. Dan mag daarna wel worden volstaan met de melding ‘Veld naam is verplicht’. Dit komt ook voor op de pagina’s Inloggen en Leverancier aanmelden.

Hele sample

Uitkomst: Onvoldoende

Leverancier aanmelden

Uitkomst: Onvoldoende

Leverancier aanmelden

De betekenis van de asterisk (*) voor verplichte velden wordt niet uitgelegd. Dit is mogelijk niet voor iedereen duidelijk, wat onnodige foutmeldingen oplevert. Zet een uitleg hiervan in het begin van het formulier, of geef het aan in tekst. Ook kan een ‘required’ of ‘aria-required’ attribuut behulpzaam zijn voor gebruikers van hulpsoftware, aangezien de asterisk niet door alle screenreaders goed wordt voorgelezen.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Startpagina

Uitkomst: Onvoldoende

Veelgestelde vragen

Uitkomst: Onvoldoende

Leeraanbod

Uitkomst: Onvoldoende

Coaching

Uitkomst: Onvoldoende

Aanvraag voor een groep (proces 2 pagina’s)

Uitkomst: Onvoldoende

Profiel overzicht (met tabs)

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Bij inzoomen vanaf 150% komen er in de header 2 knoppen te staan om menu’s te openen. Deze knoppen hebben geen beschrijvend label. Zie screenshot 9.

Het gebruikersmenu dat uitklapt vanaf 150% zoom is niet correct opgemaakt en daardoor ook lastig te bedienen met toetsenbord en hulpsoftware. Wanneer je nu met de tab-toets het menu in probeert te gaan (zoals normaal is bij websitenavigatie), sluit het menu weer automatisch. Er is markup gebruikt voor de ‘menu’-rol. Deze rol (die geschikt is voor desktopapplicaties maar niet voor websitenavigatie) vereist hele specifieke markup en focusmanagement. Zie voor meer informatie https://www.w3.org/TR/wai-aria-1.1/#menu.

Startpagina

Wanneer je in het zoekveld een woord typt, opent er een lijst met suggesties. Dit wordt niet doorgegeven aan hulpsoftware. Zie screenshot 8. Dit kan worden opgelost door het gebruik van een combobox en het ‘aria-expanded’-attribuut om aan te geven dat er een lijst is geopend. Zie voor een voorbeeld https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both/.

Onder ‘Last minute’ staan blokken met cursussen. De plaats en datum hebben ‘aria-haspopup’- en ‘aria-expanded’-attributen. Dit zijn echter div-elementen zonder interactieve rol. Hierop zijn deze attributen niet toepasbaar. Maak hier bij voorkeur button-elementen van. Dit komt op veel plekken voor. bijvoorbeeld op de pagina ‘Cursus De waarde van professionele communicatie binnen de gemeente‘ onder ‘Selecteer een plaats en datum’ binnen het cursusblok. Hierbinnen staan deze attributen op 5 elementen waarvoor deze niet geschikt zijn. En op de pagina ‘Cursus Onderhandelen met vertrouwen’ bij 'Bekijk details’. Het komt voor bij onderdelen die extra blokken content uitklappen, en bij tooltips waar één of enkele woorden verschijnen. Hiervoor zijn meerdere oplossingen mogelijk, bijvoorbeeld het ‘details’-element en de ‘tooltip’-role. Dit geeft screenreadergebruikers informatie over de functie. Enkel een div-element of een span-element geeft die informatie niet. Zie voor voorbeelden https://www.w3.org/WAI/ARIA/apg/patterns/.

Er zijn meerdere elementen op de pagina met de rol ‘progressbar’, zoals bij de cirkels onder Persoonlijk overzicht en onder de carrousels. Deze elementen missen een beschrijvend label. Dit kan worden opgelost met een ‘aria-label’- of een ‘aria-labelledby’-attribuut. Dit komt op veel plekken voor, ook waar er visueel geen progressbar te zien is, zoals op de pagina ‘Cursus De waarde van professionele communicatie binnen de gemeente‘ onder ‘Selecteer een plaats en datum’ binnen het cursusblok. Zie screenshot 2.

Onder ‘Speciaal voor jou geselecteerd’ staan blokken met links. Binnen deze links staan knoppen voor de waardering en om te liken. Voor gebruikers van hulpsoftware en toetsenbord kan het nesten van interactieve elementen problemen geven. Zet de links en buttons daarom los van elkaar. Zet de link bijvoorbeeld alleen op de titel en niet op het gehele blok. Dat maakt de linkteksten ook korter en overzichtelijker.

Veelgestelde vragen

De vragen staan in een div-element met daarop een ‘aria-expanded’-attribuut. Dit attribuut is correct, maar werkt niet op een element zonder goede rol. Maak hier bij voorkeur een button element van.

Leeraanbod

De tekstinvoervelden bij de filters hebben geen label. Het gaat om de velden waar je woord kunt typen en de velden waar je een prijs kunt invoeren. De submit-knop bij de prijs heeft geen beschrijvend label.

De knoppen die de filteropties uitklappen geven niet aan of dit uitgeklapt is. Dit kan worden opgelost door het toevoegen van het ‘aria-expanded’-attribuut op de button.

Onder het zoekveld staat een invoerveld om te sorteren. Dit is een interactief element binnen een knop (div role=”button”.) Voor gebruikers van hulpsoftware en toetsenbord kan het nesten van interactieve elementen problemen geven. Aangezien dit invoerveld wordt overschreven door een knop die een listbox opent, kan dit invoerveld beter ook verborgen worden voor hulpsoftware en toetsenbordgebruikers. Dit kan worden gedaan via het ‘aria-hidden’-attribuut en het weghalen van de focus op het invoerveld. Ditzelfde geldt ook voor het invoerveld voor het aantal resultaten per pagina.

Coaching

De blokken met cursussen hebben een ‘aria-haspopup’- en ‘aria-expanded’-attribuut, maar er wordt geen extra content getoond of uitgeklapt. Deze attributen moeten hier dus worden weggehaald. Daarnaast functioneren deze blokken als link, maar hebben geen rol van link. Dit komt ook voor op de pagina ‘Coaching intern aanbod.‘

Aanvraag voor een groep (proces 2 pagina’s)

Op de tweede pagina staan de radiobuttons onder Deelnemers niet goed opgemaakt. Er is gebruik gemaakt van geneste invoervelden binnen de labels, maar de labels hebben vervolgens de rol van radiobutton gekregen. Hierdoor lijkt de status (checked) te missen. Haal de aria-role van het label.

Profiel overzicht (met tabs)

Onder de tab Certificeren staat een knop met een zoek-icoon. Deze knop heeft geen beschrijvend label. Bij activatie van deze knop opent een formulier in een popup. Deze popup heeft echter de rol van ‘menu’. Geef deze popup een geschikte rol. Binnen de popup zijn nog meer issues: De knop om de popup te sluiten heeft geen beschrijvend label. Het invoerveld onder ‘status’ heeft geen label. Onder ‘bewijsstuk’ staat een invoerveld binnen een knop. Vermijd het nesten van interactieve elementen.

Onder de tab Leerlijnen staan iconen van slotjes bij de blokken. Dit zijn i-elementen die verborgen zijn voor hulpsoftware via ‘aria-hidden’, maar wel een tooltip tonen en de attributen ‘aria-haspopup’ en ‘aria-expanded’ bevatten. Dit is tegenstrijdig. Voor deze attributen moet het element een correcte rol hebben, zoals button, en geen ‘aria-hidden=”true”’. Ook staat de ‘aria-expanded’ nog op false wanneer de popup open staat. (Opmerking: De betekenis van het slotje is niet erg duidelijk, want de tekst van de tooltip luidt ‘Je kunt dit leerlijn niet verwijderen omdat het leerlijn automatisch is toegewezen’.)

Opmerking: bij het toevoegen van een certificaat kreeg ik de melding dat de pdf kleiner moet zijn dan 0 mb. Dit kon ik dus niet testen.

Hele sample

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Wanneer je een inschrijving toevoegt, komt er onderaan een knop te staan met het aantal inschrijvingen. Deze status wordt niet programmatisch doorgegeven aan hulpsoftware. Dit kan worden gedaan via het gebruik van live regions. Zie voor meer info https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html#techniques