Share
De uitdaging aan om een toegankelijke website te maken of een bestaande website toegankelijk te maken, kan soms een moeilijke taak zijn. Het kan lastig zijn om het precies te begrijpen hoe een gebruiker met een beperkt gezichtsvermogen kan bijvoorbeeld een website gebruiken. Uiteraard kan het voor ons moeilijk zijn om blij te zijn dat onze sites toegankelijk zijn.
In deze post laat ik je zien dat het testen van de toegankelijkheid geen moeilijke taak hoeft te zijn. Ik zal u de gereedschappen en processen laten zien die we bij Envato gebruiken om onze platforms bruikbaar te houden voor mensen met alle niveaus en om ervoor te zorgen dat de toegankelijkheid voorop blijft bij het leveren van nieuwe functies.
Dit artikel maakt deel uit van Web Accessibility: de complete leergids, waar we een reeks tutorials, artikelen, cursussen en e-boeken hebben verzameld, om u vanaf het begin inzicht te geven in webtoegankelijkheid.
Een van de belangrijkste hulpmiddelen die we gebruiken om onze toegankelijkheid te beoordelen, is Google Lighthouse. Lighthouse is een hulpmiddel om te beoordelen in hoeverre een website voldoet aan best practices uit de branche, of dat nu is voor prestaties, SEO of in ons geval, toegankelijkheid.
Lighthouse kan worden uitgevoerd via de online interface of via de Chrome-ontwikkelaarstools. Een belangrijk voordeel van het gebruik van Lighthouse is dat het ons in staat stelt precies te weten waarop Google vertrouwt bij het bepalen van hoe toegankelijk ze geloof onze site te zijn.
Toegang tot Lighthouse via de Chrome-ontwikkelaarstools:
Vuurtoren runnen via Chrome-ontwikkelaarstools.Als het eenmaal is uitgevoerd, krijgen we een onderverdeling van waar onze site kan worden verbeterd om toegankelijker te worden. Resultaten van de zoekpagina van ThemeForest zien er bijvoorbeeld als volgt uit:
Vuurtoren resultaten voor ThemeForest zoekpagina.Lighthouse geeft ons een lijst met gebieden waar onze pagina is niet toegankelijk worden geacht, evenals een lijst met handmatige controles die we kunnen uitvoeren om ervoor te zorgen dat de toegankelijkheid de beste is die ze kan zijn. Als een bepaalde cheque niet klopt, biedt Lighthouse inline links om meer te lezen over wat er moet gebeuren.
Uit het bovenstaande rapport kan ik opmaken dat we ons kleurencontrast moeten verbeteren om beter in te spelen op mensen met een verminderd gezichtsvermogen. Ik kan ook zien dat ik door de pagina heen moet kunnen bladeren op een manier die logisch is in de context, evenals verschillende andere controles.
Een ander fantastisch hulpmiddel dat we bij Envato gebruiken, is pa11y (genoemd naar de afkorting die gewoonlijk wordt gebruikt voor toegankelijkheid, "a11y". Pa11y stelt ons in staat een vooraf gedefinieerd toegankelijkheidsspecificatiesiveau in te stellen-Section 508, WCAG 2.0 A, AA of AAA-en een webpagina te testen tegen die specificaties.
Als het wordt uitgevoerd, geeft pa11y ons een lijst met de toegankelijkheidsspecificaties die we ontmoeten en die we nog niet hebben ontmoet, evenals een aanbeveling over hoe we naleving van elke norm kunnen bereiken. Het voordeel van het gebruik van pa11y is dat het ons in staat stelt om absoluut zeker te zijn van de naleving van de WCAG-specificaties en ons ook concrete stappen te geven om compliant te worden.
pa11y resultatenpagina.Bij Envato voeren we pa11y automatisch uit voordat elk nieuw stuk code naar onze platformen wordt gedeployeerd met pa11y-ci. Pa11y kan echter ook worden uitgevoerd met de bureaubladtoepassing Koa11y.
Koa11y-interface.Een van de gebieden waarop Firefox-ontwikkeltools uitblinken, is door te controleren hoe toegankelijk onze site-inhoud is. Dit stelt ons in staat om het giswerk uit te voeren door te begrijpen hoe een schermlezer onze inhoud leest voor een gebruiker.
Om de toegankelijkheidsinspecteur in Firefox in te schakelen:
Het toegankelijkheidspaneel inschakelen in Firefox-ontwikkelaarstools.Eenmaal ingeschakeld, is er een tabblad toegankelijkheid beschikbaar voor ons. Hierdoor kunnen we onze site zien als een schermlezer deze mogelijk hardop leest.
Firefox-toegankelijkheidsinspecteurDe aria-rol staat links, in dit geval ook sectie, link of grafisch. Niet elk element zou een naam moeten hebben, maar het attribuut is een goede manier om iets aan een gebruiker aan te geven - we kunnen een naam opnemen door ervoor te zorgen dat tekstuele inhoud, een afbeelding alt tag of een aria-label attribuut is aanwezig. We kunnen ook de muisaanwijzer over de rol houden en Firefox het overeenkomende element in de opmaak laten markeren.
Het bladeren door deze boom is alleen nuttig om een idee te krijgen van hoe onze website eruit ziet zonder dat dit ons afleidt van de inhoud. Het is ook een uitstekende manier om inzicht te krijgen in hoe een nieuwe functie voor onze gebruikers kan verschijnen.
Een ander nuttig niveau van controles dat we gebruiken bij het schrijven van code, gebeurt via pluisplukken. Linting stelt ons in staat om automatisch gewaarschuwd te worden voor stukjes code die gegarandeerd ontoegankelijk zijn. We gebruiken een subset van Microsoft's TypeScript-lintingregels om ons TypeScript te pluis te maken. We gebruiken ook het pakket eslint-plugin-jsx-a11y om ons JavaScript te pluisden.
Een linter waarschuwt me bijvoorbeeld dat ik vergeten ben om er een op te nemen alt tag op de volgende afbeelding:
Een ander voorbeeld is een waarschuwing voor het opnemen van een element dat de aandacht zou kunnen afleiden van degenen die schermlezers gebruiken:
Linting biedt directe feedback zodat we snel wijzigingen kunnen aanbrengen als we ervoor zorgen dat het eindproduct zo toegankelijk mogelijk is.
We gebruiken een aantal browserextensies om een beter beeld te krijgen van hoe een gebruiker onze site kan ervaren tijdens het maken ervan, zodat we aanpassingen kunnen aanbrengen als we gaan. Dit zijn een paar opvallende extensies die we hebben gemarkeerd als bijzonder nuttig.
Met Spectrum kunt u uw site op dezelfde manier bekijken als mensen met verschillende vormen van kleurenblindheid. Hiermee kunnen we delen van onze site zien die een slecht contrast hebben met de achtergrond, of links waarvan de actieve staten te veel lijken op hun passieve toestanden.
ThemeForest-startpagina zoals gezien door iemand met Achromatopsia.Met donkere achtergrond en lichte tekst kunt u uw site bekijken in de modus met hoog contrast, een modus die vaak wordt gebruikt door mensen die een hoge mate van toegankelijkheid vereisen. Hiermee kunnen we zien of delen van onze site te rommelig of te klein zijn om effectief in deze modus te worden gezien.
ThemeForest-startpagina in omgekeerde kleuren weergegeven.Deze is alleen beschikbaar voor mensen met een Mac, maar het gaat samen in het ervaren van een site als een gebruiker met een slecht zicht. VoiceOver leest de geselecteerde tekst op commando voor. Het is even wennen, maar eenmaal geleerd is het eenvoudig te gebruiken. Op het web biedt VoiceOver de beste ondersteuning voor Safari, maar het kan worden gebruikt met het volledige Mac OSX-besturingssysteem.
Schakel VoiceOver in met CMD + F5. Eenmaal ingeschakeld, zijn enkele handige functies die u kunt inschakelen te vinden via:
Zorgen dat uw website toegankelijk is, is absoluut de moeite waard. Het wordt vaak gezien als een taak die te moeilijk is, of die te laat is om te bereiken. Geen van beide is waar en zeker niet wat we bij Envato hebben gevonden. Het gebruik van technieken en hulpmiddelen zoals degene die ik hierboven heb beschreven, neemt veel van de moeite en giswerk om een toegankelijke website te bouwen, geeft ons het vertrouwen dat het eindproduct vriendelijk zal zijn voor allemaal onze gebruikers.
Accentsconagua