Bent u op zoek naar een aanknopingspunt in het brede vakgebied toegankelijkheid? We gaan dieper in op de praktijk en tools die u in uw ontwerpproces kunt implementeren om uw digitale producten te verbeteren door ze voor meer gebruikers toegankelijk te maken.
We gaan door een digitale transformatiewaarbij steeds meer bedrijven hun producten en diensten digitaal aanbieden.
Gebruikerservaring (UX) is veel meer mainstream geworden en bedrijven hebben zich gerealiseerd dat het loont om ervoor te zorgen dat hun website is geoptimaliseerd voor bruikbaarheid. Het bieden van een goede gebruikerservaring kan namelijk een zeer positief effect hebben op hun online conversie.
Heeft u er echter ooit bij stilgestaan hoe toegankelijk uw website is voor de miljoenen gebruikers met een beperking?
Wat is websitetoegankelijkheid?
Kortom, toegankelijk webdesign is de praktijk om uw website door zoveel mogelijk mensen bruikbaar te maken. Als ontwerpers denken we vaak niet aan mensen die de website niet op dezelfde manier kunnen gebruiken als wij, waardoor ze een slechtere ervaring hebben of zelfs helemaal geen gebruik kunnen maken van uw service.
Uit de laatste overheidsgegevens blijkt dat: 22% van de mensen in het VK – dat zijn 14,6 miljoen – leven met een handicap of beperking, maar er zijn veel meer mensen die tijdelijk een handicap hebben (gebroken arm of een ander letsel) of een situatiebeperking hebben (een baby in één arm houden, naar een scherm kijken in fel zonlicht) .
Al deze mensen willen en moeten uw diensten zo wrijvingsloos mogelijk kunnen gebruiken.
Waarom zou ik me zorgen maken over de toegankelijkheid van websites?
Het is ethisch
Toegankelijkheid van de website is het juiste om te doen. Als ontwerpers is het onze verantwoordelijkheid om ervoor te zorgen dat we ontwerpen op een manier die toegankelijk is voor alle gebruikers, ongeacht hun situatie, capaciteiten of context.
Als gevolg hiervan kan het web een ruimte zijn die voor iedereen inclusief is, of ze nu een cognitieve handicap, visuele handicap of fysieke handicap hebben.
Om te voldoen aan de wet
Het VK heeft wetten op het gebied van toegankelijkheid van websites. In 2018, de Britse regering maakte het de wet voor de websites van de centrale overheid en lokale overheidsorganisaties, sommige liefdadigheidsinstellingen en andere niet-gouvernementele organisaties te coderen en te ontwerpen om te voldoen aan de webtoegankelijkheidsnormen, Web Content Accessibility Guidelines (WCAG 2.1)
Alle Britse dienstverleners hebben een wettelijke verplichting om redelijke aanpassingen aan te brengen onder de: Gelijkheidswet 2010 of de Wet discriminatie gehandicapten 1995 (in Noord-Ierland).
Als bedrijven er niet in slagen om redelijke aanpassingen aan te brengen, kunnen ze voor de rechter worden gedaagd. In 2019 een blinde klant met succes aangeklaagd Dominos Pizza om hem geen toegankelijke ervaring te bieden.
Positieve zakelijke impact
Natuurlijk kan het verbeteren van de toegankelijkheid van uw website ook op een aantal manieren voordelen voor uw bedrijf opleveren:
- Hierdoor kunnen meer van uw gebruikers uw conversietrechter passeren.
- Schone code (die de toegankelijkheid verbetert) verbetert uw site snelheid en SEOwaardoor uw website beter vindbaar is in zoekmachines.
- Het verbeteren van de digitale toegankelijkheid treft niet alleen gebruikers met een beperking. Iedereen kan profiteren van toegankelijk webdesign. Door uw website toegankelijker te maken, verbetert u de gebruikerservaring voor al uw gebruikers.
Het kost weinig moeite
Voor het maken van een toegankelijke website zijn geen grote budgetten of grote veranderingen nodig. Er zijn geen extra functies of inhoud nodig om een website toegankelijker te maken. Veel problemen kunnen worden opgelost met een beetje nadenken, planning en bewustzijn, wat later in deze blog zal worden behandeld.
Hoe de toegankelijkheid van een website te testen
GOLF is een gratis toegankelijkheidscontrole en evaluatietool waarmee u de toegankelijkheid van uw website kunt testen.
U kunt uw URL’s in het vak op de site plakken of u kunt hun . downloaden verlenging om snel diagnostiek uit te voeren op elke pagina die u bezoekt.
Wanneer u WAVE uitvoert, produceert het een zeer gedetailleerd diagnostisch rapport dat de belangrijkste gebieden van toegankelijkheid omvat, inclusief contrastfouten, alternatieve tekst op afbeeldingen en semantische HTML-structuur.
De rapporten die door WAVE zijn gemaakt, zijn ongelooflijk gedetailleerd en kunnen een beetje overweldigend zijn, vooral als toegankelijkheid nieuw voor u is. Om u een duidelijker overzicht te geven van hoe u uw website toegankelijker kunt maken, hebben we een paar van de belangrijkste gebieden hieronder uitgelicht met tips voor verbetering.
Manieren om de toegankelijkheid van uw website te verbeteren
Kleuren en contrast
Kleuren en contrast zijn vooral belangrijk om mensen met een verminderd gezichtsvermogen en kleurenblindheid in staat te stellen gemakkelijk door de website te navigeren.
Dit treft een veel groter aantal gebruikers dan u verwacht. Volgens de NHS, 8% van alle mannen is kleurenblind en veel meer mensen lijden aan een zekere mate van verminderd gezichtsvermogen. Aangezien we een vergrijzende bevolking hebben, zal dit een nog belangrijker aandachtspunt zijn voor de toekomst.
Toegankelijk webdesign zorgt ervoor dat er voldoende contrast is tussen de gebruikte tekst en de achtergrond, zodat iedereen deze gemakkelijk kan lezen.
Het testen van het contrast van de kleuren die op uw website worden gebruikt, is hiermee een snelle klus tool voor contrastcontrole. Er moet een minimale contrastverhouding van 4,5:1 zijn om gebruikers met een verminderd gezichtsvermogen voldoende duidelijkheid te bieden.
Bovendien schrijven toegankelijkheidsrichtlijnen voor dat kleur nooit de enige manier mag zijn om informatie over te brengen. Met andere woorden, er moet een extra aanwijzing zijn (zoals onderstreepte tekst voor hyperlinks) voor gebruikers die kleuren anders waarnemen en onze op kleuren gebaseerde instructies kunnen missen.
Lettertypekeuze en -grootte
Lettertypekeuze en -grootte zijn ook niet alleen belangrijk voor gebruikers met een verminderd gezichtsvermogen, maar helpen ook gebruikers met cognitieve stoornissen zoals dyslexie.
Wat betreft keuze, blijf uit de buurt van Serif-lettertypen (Times New Roman, Georgia, Garamond). De decoratieve haken en wervelingen aan het einde van de letterstreken verdoezelen de vormen van letters en veroorzaken leesproblemen voor dyslectische gebruikers.
Het goede nieuws is dat je je website niet hoeft te veranderen in Comic Sans om hem dyslexievriendelijk te maken. De letters van Sans Serif-lettertypen (Helvetica, Arial, Open Sans, Roboto) kunnen minder druk lijken en zijn algemeen beschikbaar in de meeste besturingssystemen en ontwerpsoftware.
De standaard lettergrootte van de browserbody is meestal 16px (12pt); dit is ook de minimaal aanbevolen lettergrootte voor hoofdtekst volgens de richtlijnen voor toegankelijkheid.
Het gaat echter niet alleen om de tekstgrootte. Het vergroten van de hoeveelheid witruimte tussen zowel tekstregels als afzonderlijke woorden kan gebruikers met een visuele handicap of dyslexie echt helpen.
De volgende minimumafstand zorgt ervoor dat aan de vereisten van die gebruikers wordt voldaan:
- Letterafstand: x0,12 de lettergrootte
- Woordafstand: x0.16 de lettergrootte
- Regelafstand: x1,5 de lettergrootte
- Alinea-afstand: x2 de lettergrootte
Alternatieve tekst
Alternatieve tekst (of “alt-tag”) is een tag in uw HTML-code waarmee u een tekstbeschrijving voor afbeeldingen kunt invoeren.
Deze tekstbeschrijvingen worden gebruikt om afbeeldingen te beschrijven voor visueel gehandicapte gebruikers die afhankelijk zijn van schermlezers. Dit betekent dat het belangrijk is om de betekenis of het doel van de afbeelding nauwkeurig te beschrijven voor degenen die het niet kunnen zien.
Het is misschien niet altijd nodig om alt-tekst toe te voegen. Er kunnen bijvoorbeeld voldoende contextuele indicatoren rond het beeld zijn of het beeld heeft geen andere functie dan esthetiek. Voeg in dit geval een lege alt-tag toe (alt=””), anders wordt deze door diagnostische tools gemarkeerd als een ontbrekende alt-tag.
Formulieren
Formulieren kan voor iedereen complex zijn, maar mensen met extra toegankelijkheidsproblemen hebben vaak moeite als formulieren te minimalistisch en onduidelijk zijn. Hieronder vindt u een aantal veelvoorkomende items die moeten worden aangepakt om de toegankelijkheid aan te pakken:
- Etiketten – het gebruik van tijdelijke tekst als label in plaats van tekst buiten het veld zorgt voor verwarring omdat de tekst verdwijnt wanneer de gebruiker begint te typen. Het weglaten van cruciale aanwijzingen voor de gebruiker ten gunste van minimalisme of esthetiek is een grote fout die moet worden vermeden.
- grenzen – iets eenvoudigs als een rand rond een tekstinvoer is belangrijk voor gebruikers met cognitieve beperkingen, zodat het duidelijk is waar ze moeten klikken.
- Aanvullende instructies – vaak gebruiken vormen een minimalistische benadering in een poging het ontwerp te ontrafelen. Dit belemmert echter de bruikbaarheid en daarmee de toegankelijkheid.
- Foutmeldingen – deze moeten worden aangegeven met meerdere elementen, vaak wordt kleur gebruikt, maar daarnaast moeten fouten worden aangegeven via symbolen of tekst.
- Opnieuw bekijken – formulieren moeten een beoordelingsperiode hebben voordat ze worden ingediend, zodat de gebruiker eventuele informatie kan corrigeren.
HTML-structuur
Zelfs als de webpagina er goed uitziet na het volgen van de bovenstaande basisprincipes, kan deze nog steeds last hebben van ernstige toegankelijkheidsproblemen als de semantische structuur van je code klopt niet.
Het is belangrijk om ervoor te zorgen dat alle inhoudsstructuren correct zijn gemarkeerd en een duidelijke hiërarchie volgen, omdat mensen die schermlezers gebruiken deze structurele opmaak gebruiken voor navigatie.
Een extra bonus is dat het Google ook in staat stelt om uw inhoud beter te interpreteren, wat uw SEO ten goede kan komen.
Een eenvoudig advies zou zijn om één
-element op uw pagina te hebben en vervolgens
voor uw volgende belangrijke secties. Als je een kind van een subsectie hebt, gebruik dan een
enzovoort:
enzovoort:
Meestal uw paginatitel
Hier wat alineatekst
Het volgende belangrijke gedeelte van je pagina
Hier wat alineatekst
Iets niet zo belangrijk, maar gerelateerd aan de h2 hierboven
Hier wat alineatekst
Het volgende belangrijke gedeelte van je pagina
Kortom
Het toegankelijker maken van uw website vereist geen groot budget of veel tijd. Het gebruik van de bovenstaande tips en trucs kan de ervaring al drastisch veranderen en het meer inclusief maken voor AL uw gebruikers.
Begin nu met het opnemen van toegankelijk webdesign in uw ontwerpproces en u creëert niet alleen een meer toegankelijke en inclusieve ruimte voor uw gebruikers, maar verbetert ook uw reputatie bij Google. Het is een win-win voor iedereen.
Als u meer advies nodig heeft over de toegankelijkheid van de website, aarzel dan niet om Neem contact met ons op.
Als u hulp nodig heeft met uw gebruikerservaring, aarzel dan niet om contact met ons op te nemen.