Goede websites voldoen altijd hieraan

Wat is een goede website? Op deze vraag bestaan natuurlijk meerdere antwoorden. Verschillende mensen hebben verschillende wensen. Goede websites houden er juist rekening mee dat iedereen verschillend is, zodat iedereen de website kan gebruiken. Waar moet een goede toegankelijke website aan voldoen?

Web Content Accessibility Guidelines

De Web Content Accessibility Guidelines (WCAG) zijn ontworpen om te zorgen dat een website digitaal toegankelijk is voor iedereen. De WCAG bestaat uit vier principes:

  1. Waarneembaar

  2. Bedienbaar

  3. Begrijpelijk

  4. Robuust

Bij deze principes is er rekening gehouden met allerlei verschillende mensen in verschillende situaties. Een goede website zorgt ervoor dat er aan alle succescriteria van de WCAG wordt voldaan. Dan is de website namelijk toegankelijk voor verschillende gebruikers.

Goede websites zijn door iedereen waar te nemen

Op een goede website kun je alle informatie waarnemen, of dit nu is door dit te zien, horen of voelen. Misschien lees jij nu deze tekst door te kijken, of je luistert naar deze tekst via voorleessoftware of leest het via een brailleleesregel. Waar een website goed kan lijken voor iemand die kan zien, is de website misschien helemaal niet goed voor iemand die niet kan zien en hulpsoftware gebruikt. Stel je voor dat er een infographic is met belangrijke informatie, maar er is geen tekstalternatief aanwezig voor deze afbeelding. Dan mis je deze informatie als je de afbeelding niet kunt zien.

Denk er ook aan dat niet iedereen de website op een zelfde soort scherm bekijkt. Een telefoon of tablet kan worden gedraaid, je wilt de website dan zowel in de landschapsmodus als de portretmodus goed kunnen bekijken. En als je niet goed kunt zien en je daarom inzoomt, wil je niet dat er opeens dingen van de pagina verdwijnen (dit gebeurt vaker dan je denkt). Zorg er ook voor dat de website responsive is, en zich aanpast aan de grootte van het scherm. Als de tekst mooi binnen de breedte van het scherm valt, hoef je niet horizontaal te scrollen.

In deze animatie wordt de homepage van Technobility in de browser ingezoomd van 100% naar 400%. De website is responsive. Het standaard menu verandert in een hamburgermenu. De tekst blijft in de breedte van het scherm passen.

Het kan ook erg lastig zijn als het contrast van de tekst op een website te laag is. Dit is niet alleen een probleem voor mensen die slecht kunnen zien, het kan ook onhandig zijn als je buiten bent en met fel zonlicht op je telefoon kijkt. Een goede website heeft voldoende contrast, niet alleen voor tekst, maar ook voor iconen, invoervelden en dergelijke.

Goede websites zijn door iedereen te bedienen

Met een muis of touchpad kun je door een website heen klikken en scrollen. Sommige gebruikers zullen geen muis gebruiken, maar het toetsenbord om door een site te navigeren. Met de Tab toets kun je langs alle interactieve onderdelen op een pagina navigeren (heb je dit wel eens geprobeerd?). Op een goede website loop je niet vast met het toetsenbord en kun je alles bedienen. Ook moet je kunnen weten waar je bent op de pagina: de toetsenbordfocus moet zichtbaar zijn. Waar een website dus goed te bedienen kan zijn met een muis, hoeft dit niet automatisch ook een goede website te zijn voor een toetsenbordgebruiker.

In deze animatie wordt er met het toetsenbord door de website van Technobility genavigeerd. De toetsenbordfocus is hierbij zichtbaar. Er wordt eerst door het hoofdmenu genavigeerd, vervolgens wordt er een link gevolgd met het toetsenbord. Op de nieuwe pagina wordt de skiplink gevolgd om het menu over te slaan met het toetsenbord. Op deze pagina wordt er langs een aantal links genavigeerd en ten slotte wordt er een link gevolgd naar een andere pagina.

Sommige mensen zullen geen muis of toetsenbord gebruiken, maar bijvoorbeeld spraakbediening. Je kunt dan tekst inspreken om bijvoorbeeld een knop of link te bedienen. Een goede website is zo gebouwd dat de knop of link dan ook echt te bedienen is. Het is natuurlijk erg vervelend om commando’s te geven en dat er dan niets gebeurt (al ben ik dit wel gewend met mijn hond). Benieuwd naar hoe spraakbediening werkt? Kijk dan deze korte video van Apple over iemand die spraakbediening gebruikt.

Verder moet ook alles op de website met een enkele aanwijzer te bedienen zijn. Dit is van belang voor mensen die een aanwijsstok gebruiken of die bijvoorbeeld door middel van oogbewegingen een website bedienen. Het is voor hen misschien niet mogelijk om gebaren zoals swipen of “pinch-to zoom” te maken.

Goede websites zijn voor iedereen begrijpelijk

“A good website is understandable for everyone!”

Als je Engels spreekt en deze tekst kunt zien, begrijp je waarschijnlijk wat hier staat. Maar wat als je voorleessoftware gebruikt en je hoort iets als “aa goood websiete is understandaablu for everiejoone”. Als de taal in de code is ingesteld als Nederlands, zal voorleessoftware Engelse tekst ook “op zijn Nederlands” voorlezen. Deze ene regel is dan misschien nog wel te begrijpen, maar een heel artikel wordt erg lastig te volgen. Dit kan worden opgelost door in de code aan te geven dat een stuk tekst Engels is. Voorleessoftware kan het dan in het Engels voorlezen, zodat het begrijpelijk is voor iedereen.

Op veel websites staan formulieren, bijvoorbeeld een contactformulier of een formulier om je in te schrijven voor een nieuwsbrief. Voor sommige mensen kan het lastig zijn om een formulier in één keer goed in te vullen en te verzenden. Zorg er dus voor dat er duidelijke labels en instructies zijn bij de invoervelden. En mocht er toch iets fout gaan bij het invullen, zorg er dan voor dat er een goede foutmelding is die aangeeft wat er fout is gegaan.

Goede websites zijn robuust

Ten slotte wil je dat een goede website op verschillende apparaten en in verschillende browsers goed werkt. Dit kan door er in de code voor te zorgen dat software onder andere de toegankelijkheidsnaam en de rol van interactieve elementen kan bepalen. Bij een knop moet bijvoorbeeld bepaald kunnen worden dat dit een knop is en hoe de knop heet. Als dit in de code goed is aangegeven, kan verschillende hulpsoftware in verschillende browsers bepalen dat dit een knop is en wat de knop doet.

Ook wil je ervoor zorgen dat hulpsoftware niet vastloopt door bepaalde fouten in de code. Dit kan door de code te controleren met een validator.

Meer dan alleen de WCAG

Goede websites voldoen dus in ieder geval aan de WCAG. In dit artikel zijn enkele voorbeelden gegeven, maar er zijn in de WCAG nog veel meer succescriteria waar andere zaken aan bod komen. Hier kun je de succescriteria van WCAG 2.1 vinden. Over enkele tijd komen er ook enkele succescriteria bij in WCAG 2.2.

Als je website volledig voldoet aan de WCAG, is het dan automatisch een goede website? Nou, er zijn naast de WCAG natuurlijk andere zaken waar je ook rekening mee moet houden. Een website die aan alle succescriteria voldoet, maar elke keer crasht, is natuurlijk geen goede website te noemen.

Ook zijn er functionaliteiten die niet verplicht zijn voor de WCAG, maar die de gebruiker wel een fijnere ervaring kunnen geven op de website. Voor de WCAG is bijvoorbeeld voldoende contrast van de tekst verplicht, maar het is niet verplicht om gebruikers een “donkere modus” aan te bieden. Sommige gebruikers kunnen dit echter wel heel fijn vinden en het hierdoor een goede website vinden. Ook een bepaald lettertype is niet verplicht voor de WCAG, maar een duidelijk leesbaar lettertype is voor veel mensen fijn.

Er is dus niet één antwoord op de vraag “Wat is een goede website?”, maar een goede website is sowieso toegankelijk voor iedereen!

Heb je hulp nodig bij het maken van een goede toegankelijke website?

Neem contact met ons op!