Info en relaties ontbreken in de code
Informatie en relaties die je visueel ziet, zoals dat een aantal velden bij elkaar horen, dat iets een kop is of dat iets een lijst is, moeten ook in de HTML staan. Anders is de samenhang alleen toegankelijk voor wie het scherm kan zien.
Op deze pagina staan teksten die koppen zijn, maar niet als koppen zijn gemarkeerd. Zie bijvoorbeeld “Toegewezen aan jou” en “Alles over het Leerplein”. Zie ook “Over Leerplein” in het dialoogvenster “Over Leerplein”.
Andere teksten zijn met kop-elementen gemarkeerd om ze een groter lettertype te geven, terwijl het geen koppen zijn. Zie de kaartjes tegenover “Alles over het Leerplein”. Dit zijn geen koppen, want er staat geen inhoud onder.
Web: Koppen zijn niet toegankelijk
Knoppen zonder toegankelijke naam
Voor wie een schermlezer of spraakbediening gebruikt, bestaat een knop pas zodra hij een naam heeft. Zonder naam kondigt de schermlezer alleen "knop" aan, en weet de gebruiker niet wat er gebeurt als hij hem activeert.
Boven de footer staan op deze pagina drie knoppen zonder toegankelijke naam. Een schermlezer kan niet vertellen wat deze knoppen doen. Dit komt op meerdere pagina’s voor, bijvoorbeeld op https://leerplein.pzh.nl/learningconcept/CclTuFIDFt2FmbDsNqfSW/episode/2WobddEkY65gKZbv5Xt69L.
Web: Button zonder toegankelijke naam
Niet bedienbaar met toetsenbord
Niet iedereen kan een muis gebruiken. Werkt een knop of dropdown alleen met klikken of slepen, dan is hij onbruikbaar voor toetsenbordgebruikers, schermlezer-gebruikers en spraakbesturing.
Op deze pagina staan twee links die niet met toetsenbord te bedienen zijn. Het gaat om “Start” en “Onze visie op leren”. Deze links zijn gemaakt van div-elementen met type=”button”. Dit attribuut maakt deze elementen niet interactief. Een bezoeker die een schermlezer gebruikt weet niet dat dit knoppen zijn. Een bezoeker die met alleen het toetsenbord de website bedient, kan deze links niet volgen.
Illustratie ter toelichting
Onvoldoende kleurcontrast
Niet iedereen heeft perfecte ogen, denk aan slechtzienden of iedereen die de site in fel zonlicht bekijkt. Met genoeg contrast (4,5:1 voor standaard tekst, 3,0:1 voor grote tekst, randen en iconen) blijven knoppen en links voor iedereen leesbaar.
In de header staat een knop met de initialen van de gebruiker. De achtergrondkleur en de tekstkleur van die knop hebben onvoldoende contrast.
Web: Kleurcontrast bij tekst kleiner dan 19px is onvoldoende
Focusproblemen in dialoog
Toetsenbordgebruikers en schermlezer-gebruikers volgen de focus om te weten waar ze zijn. Verdwijnt de focus uit beeld of springt hij onverwacht ergens heen, dan verliezen ze hun oriëntatiepunt.
In de footer staat een link “Over Leerplein”. Opent een bezoeker die geen muis gebruikt dit venster met het toetsenbord en sluit hij het weer, dan begint de focus bovenaan de website. De focus hoort terug te gaan naar de link die het dialoogvenster opende, of naar de volgende link in de navigatie in de footer. Dit geldt voor alle links in de footer die een dialoogvenster openen.
Illustratie ter toelichting