Je hebt dus veel gehoord over iets dat toegankelijkheid heet. Misschien heb je zelfs wel eens gehoord van mensen die grote bedrijven aanklagen voor het leveren van ontoegankelijke diensten. Maar weet u precies wat bereikbaarheid betekent?
Gelukkig is toegankelijkheid niet al te moeilijk te begrijpen of te implementeren, als je je er eenmaal voor inzet. Als je eenmaal hebt geleerd wat toegankelijkheid is, kun je die theorie in praktijk brengen door toegankelijke Vue.js-apps te schrijven.
Wat is toegankelijkheid?
Toegankelijkheid is een populair modewoord op internet, maar wat houdt het precies in? Het blijkt dat de naam behoorlijk beschrijvend is. Toegankelijkheid is gewoon een maatstaf voor hoe bruikbaar een webapplicatie is voor alle soorten mensen.
Niet iedereen ervaart het internet op dezelfde manier. Sommige mensen hebben beperkingen die hun gehoor of gezichtsvermogen kunnen aantasten. Sommige hebben geen toegang tot moderne hardware of snel internet, en mensen moeten internet vaak in minder dan ideale omstandigheden gebruiken. Toegankelijkheid gaat erom ervoor te zorgen dat al die mensen een webapplicatie toch zo soepel mogelijk kunnen gebruiken.
Waarom is toegankelijkheid belangrijk?
Toegankelijkheid is belangrijk omdat wanneer een applicatie zeer toegankelijk is, deze voor zoveel mogelijk mensen kan worden gebruikt. Wanneer iemand een dienst of informatie op een website aanbiedt, is het hun doel dat andere mensen die dienst gebruiken of die informatie lezen.
Optimaliseren voor toegankelijkheid zorgt ervoor dat zo min mogelijk mensen de webapplicatie niet kunnen gebruiken. Bovendien worden web-apps die toegankelijker zijn over het algemeen hoger gerangschikt in de zoekresultaten. Hierdoor kunnen nog meer mensen toegankelijker webapplicaties vinden en gebruiken.
Veelvoorkomende fouten van ontwikkelaars die de toegankelijkheid schaden
Veel webapplicaties zijn minder toegankelijk dan ze zouden kunnen zijn. Dit is meestal het gevolg van fouten van degenen die ze hebben gebouwd. Enkele veelvoorkomende toegankelijkheidsfouten die ontwikkelaars maken bij het bouwen van apps zijn:
Ontoegankelijke bibliotheken gebruiken
U kunt vertrouwen op bibliotheken van derden om tijd en moeite te besparen bij het ontwikkelen van uw apps. Helaas nemen niet alle bibliotheken toegankelijkheid serieus en kan het moeilijk zijn om de goede te identificeren. Het is gemakkelijk om op deze manier per ongeluk de toegankelijkheid van uw applicaties te verlagen.
Semantische HTML negeren bij het bouwen van componenten
Semantische HTML is HTML waarvan zowel de betekenis als de structuur correct is. Elke HTML-tag heeft een inherent doel, dat door ondersteunende technologie wordt gebruikt om de betekenis van de inhoud af te leiden. De header-tag markeert bijvoorbeeld de header van een website. Een schermlezer moet kunnen aankondigen dat alles in een header-tag een website-header is.
Helaas weerhoudt niets u ervan een tag voor het verkeerde doel te gebruiken. Een ander veelvoorkomend voorbeeld is het gebruik van een button-tag om als een link te fungeren, of omgekeerd.
Het schrijven van HTML op deze manier schaadt de toegankelijkheid, omdat ondersteunende technologie niet langer zeker kan zijn van het doel van enig HTML-element. Het kan leiden tot verwarrende of frustrerende resultaten voor de gebruikers van de technologie. Voor maximale toegankelijkheid moet u altijd: schrijf semantische HTML, ook al betekent het wat meer werk.
Niet testen op toegankelijkheid
Het bouwen van een web-app kan vaak een zware taak zijn met veeleisende deadlines. Tussen de haast om functies af te werken en de last van het testen van andere aspecten van de software, neemt toegankelijkheidstests een achterbank in. U kunt in de verleiding komen om een toepassing in productie te nemen voordat u deze hebt getest op toegankelijkheidsproblemen.
Waarom? Het testen kost tijd en kan uitgebreide wijzigingen in de code van de applicatie vereisen. Maar een webapplicatie testen is een onmisbaar onderdeel van het ontwikkelproces. U moet de toegankelijkheid van uw toepassing net zo rigoureus testen als elk ander aspect.
Gelukkig bestaan er tools om deze problemen op te lossen. De volgende vijf tools kunnen u helpen toegankelijkere Vue.js-apps te schrijven:
WAVE is een verzameling tools waarmee ontwikkelaars hun apps automatisch kunnen testen op toegankelijkheidsproblemen. Hoewel WAVE geen vervanging is voor testen door eindgebruikers, kan het u toch helpen om veel toegankelijkheidsproblemen op te lossen.
WAVE biedt een online testtool op haar website. Het biedt ook browserextensies en verschillende andere tools om te helpen bij het testen van toegankelijkheid voor veel soorten web-apps.
Veel van de signalen die web-apps gebruiken om activiteiten te communiceren, zoals voortgangsbalken en laadindicatoren, zijn puur visueel. Mensen met een visuele handicap of mensen die schermlezers gebruiken, kunnen ze niet waarnemen.
Vue-announcer is een bibliotheek waarmee u wijzigingen in uw Vue.js-apps kunt aankondigen op een manier die voor iedereen toegankelijk is.
Vue-skip-to is een bibliotheek die is gemaakt om mensen die een schermlezer gebruiken in staat te stellen rechtstreeks naar de hoofdinhoud van een Vue.js-toepassing te gaan. Dit is handig omdat veel web-apps navigatielinks en andere elementen vóór de hoofdinhoud hebben. Deze zijn voor sommige gebruikers gemakkelijk over te slaan, maar kunnen lastig en frustrerend zijn om te gebruiken met een schermlezer.
ESLint is een tool die je helpt om beter JavaScript te schrijven door je code te analyseren en te controleren op fouten.
Deze tool is een ESLint-plug-in waarmee u ervoor kunt zorgen dat de structuur van uw Vue.js-componenten voldoet aan de toegankelijkheidsregels.
Na installatie analyseert deze plug-in alle Vue.js-bestanden en wijst op problematische code. U kunt dan de toegankelijkheid maximaliseren tijdens het schrijven van uw apps, in plaats van code te wijzigen na de testfase.
Een grote bron van toegankelijkheidsproblemen in apps is het gebruik van ontoegankelijke componentbibliotheken. Vuetensils is een bibliotheek met Vue.js-componenten.
Deze componenten zijn geoptimaliseerd voor minimale afmetingen, maximale toegankelijkheid, gebruiksgemak en stylinggemak. U kunt tijd besparen en deze kant-en-klare componenten gebruiken zonder de toegankelijkheid van uw applicaties te schaden.
Toegankelijkheid in Vue.js is eenvoudig
Toegankelijkheid gaat erom ervoor te zorgen dat iedereen uw toepassing in elke context kan gebruiken. Het maximaliseren van de toegankelijkheid is belangrijk om ervoor te zorgen dat een applicatie door zoveel mogelijk mensen kan worden gebruikt.
Ontwikkelaars maken vaak veelvoorkomende maar vermijdbare toegankelijkheidsfouten bij het bouwen van hun apps. Veelvoorkomende problemen zijn het niet testen en schrijven van niet-semantische HTML. Maar met behulp van een paar tools is het gemakkelijker om zeer toegankelijke Vue.js-apps te schrijven.