Door uw website toegankelijk te maken voor mensen met een handicap, is het maken ervan voor iedereen toegankelijk. Als u uw website toegankelijker maakt, kan het zelfs helpen dat mensen uw website in zoekmachines vinden. Waarom? Omdat zoekmachines sommige van dezelfde signalen gebruiken die schermlezers doen om de inhoud van uw website te vinden en te begrijpen.
Maar hoe maak je een toegankelijke website zonder een codeerexpert te worden?
Hier zijn enkele tips en trucs die bijna iedereen met standaard HTML-kennis kan gebruiken om de toegankelijkheid van hun website te verbeteren.
Webtoegankelijkheidstools
W3C heeft een fantastische lijst met webtoegankelijkheidstools die u kunt gebruiken als een checker om potentiële problemen met uw website op te sporen. Dat gezegd hebbende, raad ik nog steeds aan om wat te verkennen met een schermlezer en het zelf te ervaren.
Schermlezers begrijpen
Een van de belangrijkste manieren om de toegankelijkheid van uw website te verbeteren, is ervoor te zorgen dat deze door schermlezers kan worden begrepen. Schermlezers gebruiken een gesynthetiseerde stem om de tekst op het scherm te lezen. Dat klinkt vrij eenvoudig; Schermlezers of andere ondersteunende technologie kunnen uw website echter niet begrijpen zoals u deze op dat moment hebt ingesteld.
Het eerste wat u misschien wilt doen is een schermlezer uitproberen en zien hoe het gaat. Als je een Mac gebruikt, probeer dan VoiceOver te gebruiken.
- Ga naar Systeem voorkeuren.
- kiezen Toegankelijkheid.
- kiezen Voice over.
- Vink het vakje aan voor inschakelen van VoiceOver.
Je kunt het in- en uitschakelen met command-F5.
Als u op een Windows-computer werkt, wilt u misschien NVDA downloaden. U kunt het instellen om in en uit te schakelen met de sneltoets + alt + n.
Beide schermlezers werken door de gebruiker te laten navigeren op het toetsenbord (dit is logisch - als u niet kunt zien, zou het gebruik van een muis een uitdaging zijn) en door een focusgebied voor navigatie te creëren. De focus is in wezen waar het toetsenbord "puntig" is, maar het wordt meestal weergegeven als een gemarkeerd vak rond het focusobject in plaats van een cursor.
U kunt zowel de stemhoogte als de snelheid wijzigen waarmee de stem luidt als de standaardinstellingen vervelen (en na ongeveer vijf minuten luisteren naar een standaard langzame stemmeting, zijn ze dat meestal). Blinden lezen meestal websites met hun schermlezers ingesteld op hoge snelheden.
Het kan helpen om je ogen te sluiten als je dit doet, maar het kan ook helpen om ze open te houden en te vergelijken. Sommige dingen die je misschien meteen opmerkt als je naar je website luistert, is dat een deel van de tekst mogelijk niet werkt. Koppen en tabellen kunnen door elkaar worden gegooid. Afbeeldingen kunnen worden overgeslagen of ze kunnen "afbeelding" of iets dat even nutteloos is, zeggen. Tabellen worden meestal gelezen als een reeks items zonder context.
U kunt dit hopelijk oplossen.
Alt-tags of alternatief kenmerk
Het alt-tag of alternatieve (alt) attribuut wordt in HTML gebruikt om een afbeelding te beschrijven. In HTML ziet het er ongeveer zo uit:
Zelfs als u uw website maakt met een visuele tool die uw HTML-code verbergt, krijgt u bijna altijd de kans om een afbeeldingsbeschrijving in te voeren. U kunt niets invoeren (alt = "") maar het zou echt beter zijn om elke afbeelding een nuttige beschrijving te geven. Als je blind was, wat zou je dan moeten weten over de afbeelding? "Vrouw" is niet veel hulp, maar misschien een stroomschema voor tekeningen van vrouwen, inclusief toegankelijkheid, bruikbaarheid, branding en ontwerp.
Titel Tekst
Websites geven niet altijd de HTML-title-tag weer, maar het is handig voor schermlezers. Zorg ervoor dat alle pagina's van uw website een beschrijvende (maar niet overdreven uitgebreide) titel hebben die bezoekers vertelt waar de pagina over gaat.
Geef uw website goede informatiehiërarchie
Splits grote stukken tekst op met headers en gebruik zo mogelijk kopteksten met de H1-, H2-, H3-hiërarchie. Het maakt uw website niet alleen eenvoudiger voor schermlezers, het maakt het ook voor iedereen eenvoudiger. Het is ook een geweldig signaal voor Google en andere zoekmachines om ze te helpen uw website beter te indexeren.
Evenzo moet u ervoor zorgen dat uw website in logische volgorde staat en dat er geen dozen met niet-gerelateerde informatie verschijnen. Als u advertenties gebruikt, moet u ervoor zorgen dat uw advertenties niet te opdringerig zijn en de tekst op uw website te vaak opsplitsen.
Betere tabellen maken
Als u HTML-tabellen gebruikt, kunt u bijschriften toevoegen aan uw tabellen met behulp van de tag, zodat ze gemakkelijker te begrijpen zijn door schermlezers dan dat de titel van een tabel vetgedrukt wordt weergegeven. U kunt ook het "scope" -element toevoegen en nieuwe rijen en kolommen in uw tabel duidelijk labelen zodat schermlezers niet zomaar een reeks tabelcellen afreageren zonder context te geven.
Toetsenbord navigatie
Over het algemeen moet alles wat u op uw website plaatst iets zijn dat iemand zou kunnen doen met alleen een toetsenbord. Dat betekent dat uw navigatieknoppen geen vervolgkeuzeknoppen met animatie hoeven te zijn als u ze niet kunt gebruiken met een schermlezer (probeer het en kijk of u het niet zeker weet - sommige knoppen zijn geprogrammeerd voor toetsenbordgebruik.)
Gesloten bijschriften
Als u video's of audio-elementen aan uw website toevoegt, moeten deze bijschriften bevatten. HTML5 en veel videostreamingservices (zoals YouTube) bieden ondertitelingsondersteuning. Gesloten bijschriften zijn niet alleen handig voor toegankelijkheid, maar ook voor gebruikers die mogelijk uw website bezoeken waar ze geen audio kunnen afspelen, zoals op kantoor of op een drukke locatie.
Voor podcasts of andere audio-elementen, overweeg dan om een teksttranscriptie aan te bieden. Niet alleen is het handig voor mensen die niet naar de audio kunnen luisteren, maar met de tekst zal het Google en andere zoekmachines gemakkelijker maken om die inhoud te indexeren en je Google-ranking te helpen.
ARIA
Als u naar het geavanceerde niveau van toegankelijkheid wilt gaan, willen HTML5 ARIA of WAI-ARIA-specificaties de nieuwe standaard zijn. Dit is echter een complexe (en evoluerende) technische handleiding, dus wat u zou kunnen doen is een ARIA-validator gebruiken om te scannen om te zien of er problemen zijn met uw website. Mozilla heeft ook een meer toegankelijke handleiding om met ARIA aan de slag te gaan.
