Start je binnenkort met het ontwikkelen van een eigen nieuwe website? Of gaan jullie aan de slag met een nieuw project voor een klant zoals een applicatie, klantportaal, website of zelfs drukwerk? Houdt bij het ontwerpen dan niet alleen rekening met de wensen van je klant, maar ook met al hun klanten! Je hebt als leverancier de kans om je klanten hierin te helpen, ze komen immers voor jullie expertise! Producten ontwikkelen op basis van inclusiviteit geeft je daarin een toegevoegde waarde. Dat betekent dat je toegankelijkheid als fundament en must-have opneemt in je MVP.

Een mooi bonuseffect is dat, wanneer je Inclusive Design en Digitale Toegankelijkheid meteen inbouwt, je ook gelijk werkt aan een belangrijk stukje zoekmachine optimalisatie (SEO)! Door duidelijke, begrijpelijke elementen te integreren en te zorgen dat de bijbehorende code daarmee overeenkomt, wordt de website namelijk beter te begrijpen voor bezoekers en zoekmachines.

Tips voor een goede MVP

Een heleboel winst is gemakkelijk te behalen als je er al vanaf het begin rekening mee houdt. Hieronder volgt daarom een serie elementen om bij de start van je MVP al goed te implementeren. Soms lijken ze voor zichzelf te spreken, maar het zijn valkuilen die ik vaak voorbij zie komen en ze later in het traject oplossen is vaak veel ingewikkelder.

Responsive Design

Hoewel het al jaren eigenlijk niet meer weg te denken is uit het digitale landschap, is responsive design het benoemen waard. Zeker als het gaat om het opzetten van een MVP in combinatie met toegankelijkheid. Het gebruik van verschillende platformen, zowel gewone computers als tablets en mobiele telefoons, hebben hun eigen mogelijkheden en uitdagingen die je vanaf de eerste ontwerpen mee moet nemen. Tablets en telefoons worden steeds prominenter in de gebruikersstatistieken, en ook mensen met een visuele beperking maken veel gebruik van deze technieken. Ze zijn draagbaar, makkelijk in gebruik en voorleessoftware als VoiceOver en TalkBack zijn standaard inbegrepen. Zoals gezegd, ook op gewone computers is responsive design belangrijk. Browsers hebben de mogelijkheid om makkelijk in te zoomen als een bezoeker moeite heeft met lezen. Het is ook dan belangrijk dat je website goed blijft werken en overschakelt naar een andere layout als dat nodig is.

Toetsenbord bediening

Een belangrijk element van toegankelijkheid om rekening mee te houden is, om ervoor te zorgen dat je gehele website goed met alleen een toetsenbord te bedienen is. Hier zijn een paar redenen voor. Allereerst kunnen mensen met een visuele beperking niet of nauwelijks gebruik maken van een cursor. Hun belangrijkste manier van bediening is daarom het toetsenbord. Maak ook steeds meer mensen kampen met problemen als het gaat om aandoeningen in de categorie RSI en gebruiken liever het toetsenbord. Er zijn daarnaast nog veel andere invoermethoden beschikbaar als spraaksoftware of aangepaste bedieningspanelen om een computer te bedienen. Nagenoeg al deze ondersteunende technologieën zijn onder water afhankelijk van toetsenbord emulatie. Het is daarom belangrijk dat bijvoorbeeld via de tab-toets over de website kunt navigeren. Je springt dan van interactief element naar element.

Focus indicatie

In het verlengde van toetsenbord bediening ligt een vaak vergeten onderdeel, namelijk focus indicatie. Als je met het toetsenbord een pagina probeert te bedienen is het belangrijk dat je kunt zien waar de focus naartoe verplaatst. Zonder deze indicatie kun je jezelf niet oriënteren op de pagina. In de meest simpele vorm hoef je aan dit onderdeel eigenlijk helemaal niets extra te doen. Het staat namelijk standaard al aan! Volgens de richtlijnen is het minimale namelijk dat je de standaard browser instellingen hiervoor toestaat. Het gebeurt echter vaak dat deze, veelal blauwe, omlijning wordt uitgezet zonder dat daarvoor een aangepaste variant voor in de plaats komt. Voor dit onderdeel is het ook belangrijk om met de vormgeving al rekening te houden met bijvoorbeeld kleurwijzigingen als een element een focus of hover status krijgt.

Paginatitels

<html>
    <head>
        <title>Paginatitel</title>
    </head>
</html>

De paginatitel, in het <title> element, is tekst die wordt weergegeven als je zoekresultaten getoond worden. Zorg er dus voor dat de titel goed overeenkomst met de daadwerkelijke inhoud van je pagina. Het helpt bezoekers en indexers te bepalen of je pagina relevant is. Een voorleesprogramma of screenreader gebruikt de paginatitel om de gebruiker bij navigatie te helpen tussen pagina’s. Verder helpen ze alle gebruikers overzicht te houden tussen verschillende open vensters of tabbladen.

Koppen structuur

Het goed gebruik van kopteksten op je pagina’s geeft structuur aan de bezoeker, zowel visueel als bij het gebruik van ondersteunende technologie. Zoals veel lezers van kranten en tijdschriften de kopteksten langs gaan om de interessante elementen eruit te halen, worden ze door gebruikers van voorleessoftware ook als navigatiemethode gebruikt om snellere informatie te vinden. Kopteksten geven deze structuur ook door aan zoekmachines. Het is dus belangrijk dat je zowel visueel als programmatisch met kopteksten rekening houdt. Zorg dat ze visueel herkenbaar zijn, de tekst betekenisvol is om de onderliggende content te omvatten en gebruik de juiste HTML-elementen.

Een andere belangrijke navigatiemethode zijn de verschillende links op je pagina. Zorg er daarom vanaf het ontwerp al voor dat je hiervoor begrijpelijke teksten gebruikt. Je helpt mensen daarmee op een makkelijke manier informatie te vinden. Zeker voor voorleessoftware is dit belangrijk, omdat hierbij links veel als snelle vorm van navigatie gebruikt worden. Als een gebruiker dan 10 keer “lees meer..” te horen krijgt, is er geen besef van context. Het is dan dus niet mogelijk om goed te bepalen naar welke pagina een link verwijst.

Alternatieve teksten en bijschriften

Vaak maken we op het web gebruik van mooie foto’s of grafieken om informatie over te brengen of meer betekenis te geven. Het kan voor bezoekers helpend zijn om in sommige gevallen een bijschrift bij een afbeelding te kunnen zien, omdat niet iedere bezoeker meteen herkent wat er op de afbeelding staat. Daarnaast is het belangrijk om afbeeldingen te voorzien van een tekst alternatief. Dit kan op verschillende manieren, maar belangrijk is dat deze informatie technisch gekoppeld is aan de afbeelding en dat het de intentie die de auteur ermee heeft over brengt. Soms is dat puur de beschrijving van wat er zichtbaar is, maar in andere gevallen kan het om uitgebreidere informatie gaan. Deze informatie wordt namelijk doorgegeven aan voorleessoftware.

Een toegankelijke MVP

Als je bovenstaande richtlijnen toepast bij de start van je project en ze inbouwt bij je minimale versie om live te gaan, leg je een solide basis om mee verder te gaan. Toegankelijkheid van je website gebeurt niet vanzelf, maar hierop kun je doorbouwen! Succes met toegankelijk bouwen!