Toegankelijkheid: de belangrijkste zaken om te controleren

Waar te beginnen?

Met de toegankelijkheids-controlefunctie in Snoobi kun je de webpagina's controleren op fouten qua toegankelijkheid Maar de technische controle van je webpagina's kan niet alle problemen opsporen.
En de rapportage ervan in Snoobi kan overweldigend zijn wanneer er veel fouten of waarschuwingen worden gemeld.

Gelukkig zijn er een paar eenvoudige richtlijnen die een direct effect hebben op de toegankelijkheid. Om onze klanten te helpen, hebben we de belangrijkste richtlijnen in de onderstaande lijst verzameld.

Navigatie

• Kun je de tab-toets gebruiken om met een toetsenbord door de site te navigeren?
• Is er een zichtbare indicator voor de focus (omtrek of onderstreping, kleur)?
• Waar mogelijk moeten alle koppen in tekstblokken een logische volgorde hebben (H1 → H2 → H3).

Afbeelding en grafische elementen

• Hebben alle afbeeldingen relevant voor de content beschrijvende alt-tekst?
• Decoratieve afbeeldingen (dit zijn plaatjes die niet voor de inhoud worden gebruikt en als decoratief zijn gemarkeerd).  Dat betekent een lege alt: alt="").
• Promotionele of andere banners moeten alt-tekst hebben die de boodschap beschrijft, niet alleen ‘banner’. Vooral wanneer de banner een afbeelding is.

Kleur en contrast

• Controleer kleur en tekstcontrast: gebruik minimaal 4,5:1 voor normale tekst en 3:1 voor grote tekst.
• Gebruik niet alleen kleur wanneer je een actie verwacht, maar geef bijvoorbeeld een foutmelding weer met rode tekst en een pictogram/label, en een relevante alt-tekst.
• Knoppen moeten duidelijk afsteken tegen de achtergrond.

Formulieren en checkout, artikelen in het winkelmandje

• Zorg ervoor dat elk veld in het formulier een label heeft, dat moet worden gekoppeld aan de gevraagde input.
• Fouten worden in de tekst uitgelegd en hebben de juiste grootte. Dus niet alleen kleine tekst of rode markering.
• Zorg ervoor dat de volgorde van de tabs logisch door de velden loopt en dat verplichte velden duidelijk zijn gemarkeerd, niet alleen met een kleur.
• Zorg ervoor dat knoppen (bijv. Verzenden, Afrekenen, Bestelling plaatsen) duidelijke tekstlabels hebben.

Knoppen en links

• Zorg ervoor dat elk veld in het formulier een label heeft, dat moet worden gekoppeld aan de gevraagde input.
• Fouten worden in de tekst uitgelegd en hebben de juiste grootte. Dus niet alleen kleine tekst of rode markering.
• Zorg ervoor dat de volgorde van de tabs logisch door de velden loopt en dat verplichte velden duidelijk zijn gemarkeerd, niet alleen met een kleur.
• Zorg ervoor dat knoppen (bijv. Verzenden, Afrekenen, Bestelling plaatsen) duidelijke tekstlabels hebben.

Media

• Waar mogelijk moeten video's ondertitels hebben. Deze moeten op zijn minst automatisch worden gegenereerd, maar liever zijn bewerkt.
• Er moet een transcriptie van audio/video beschikbaar zijn, hetzij op dezelfde pagina, hetzij via een link naar de tekst.
• Het moet mogelijk zijn om een video te vertragen en/of geen automatisch afgespeelde audio te gebruiken die niet kan worden gestopt.

Mobiel gebruik en 'responsive design'

• Zorg ervoor dat de inhoud op het scherm wordt aangepast zonder dat er horizontaal hoeft te worden gescrolld.
• Het moet mogelijk zijn om een pop-up of modules met het toetsenbord te sluiten (bij voorkeur met Esc).
• Knoppen en links zijn groot genoeg om gemakkelijk op touchscreens te kunnen worden aangeraakt.

Tenslotte: prestaties / bruikbaarheid

• Webpagina's moeten snel laden (traag laden betekent dat trage ondersteunende technologie zoals schermlezers niet snel genoeg resultaten leveren, wat tot frustratie leidt).
• Er zijn skip-links beschikbaar (denk aan ‘Ga naar inhoud’ of ‘Samenvatting’).
• Zorg ervoor dat er geen knipperende of flitsende elementen zijn die epileptische aanvallen kunnen veroorzaken.