Extensies stellen gebruikers in staat hun ideale browse-ervaring te creëren, afgestemd op hun individuele mogelijkheden en voorkeuren. Extensies moeten toegankelijkheidscomponenten bevatten die een inclusieve gebruikersgroep bevorderen door mensen met een visuele beperking, gehoorverlies, beperkte motoriek en andere handicaps toegang te geven tot de extensie.
Iedereen, niet alleen gebruikers met speciale behoeften, kan baat hebben bij toegankelijkheidsfuncties. Visueel gehandicapte gebruikers, mensen met beperkte motoriek en gevorderde gebruikers profiteren allemaal van sneltoetsen. Ondertiteling en transcripties zijn essentieel voor dove gebruikers, maar helpen ook taalcursisten.
Mensen kunnen op verschillende manieren met een extensie interageren. Sommige gebruikers hebben een standaard monitor, toetsenbord en muis, terwijl anderen afhankelijk zijn van een schermvergroter en mogelijk een schermlezer . Hoewel het onmogelijk is te voorspellen welke hulpmiddelen mensen zullen gebruiken om een extensie te gebruiken, zijn er stappen die elke ontwikkelaar kan ondernemen om een extensie zo toegankelijk mogelijk te maken.
Integreer toegankelijke UI-elementen
Als gebruikers geen toegang hebben tot de bedieningselementen van de gebruikersinterface, kunnen ze een extensie niet gebruiken. De eenvoudigste manier om een toegankelijke gebruikersinterface te creëren, is door een standaard HTML-besturingselement te gebruiken.
Standaard bedieningselementen
Gebruik waar mogelijk standaard HTML-gebruikersinterface-elementen . Standaard HTML-elementen zijn toegankelijk via het toetsenbord, schalen gemakkelijk en worden over het algemeen begrepen door schermlezers.
WAI-ARIA in aangepaste bedieningselementen
De Web Accessibility Initiative - Accessible Rich Internet Applications , ofwel WAI-ARIA, is een specificatie voor het toegankelijk maken van UI-elementen voor schermlezers door middel van een standaardset DOM-attributen. Deze attributen geven de schermlezer informatie over de functie en de huidige status van de elementen op een webpagina.
Om WAI-ARIA-ondersteuning toe te voegen aan aangepaste besturingselementen, moeten de DOM-elementen van een extensie worden aangepast met attributen die Chrome gebruikt om gebeurtenissen te genereren tijdens gebruikersinteractie. Schermlezers reageren op deze gebeurtenissen en beschrijven de functie van het besturingselement. DOM-attributen die door WAI-ARIA worden gespecificeerd, worden ingedeeld in rollen , statussen en eigenschappen .
<div role="toolbar">
De eigenschap aria-activedescendant specificeert welk kindelement van een toolbar de focus krijgt wanneer de toolbar zelf de focus krijgt. De code ` tabindex="0" geeft aan dat de toolbar de focus krijgt in de volgorde waarin deze in het document is gepositioneerd.
Bekijk hieronder de volledige specificaties voor een voorbeeldwerkbalk:
<div role="toolbar" tabindex="0" aria-activedescendant="button1">
<img src="buttoncut.png" role="button" alt="cut" id="button1">
<img src="buttoncopy.png" role="button" alt="copy" id="button2">
<img src="buttonpaste.png" role="button" alt="paste" id="button3">
</div>
Zodra WAI-ARIA-rollen, -statussen en -eigenschappen aan de DOM van een besturingselement zijn toegevoegd, stuurt Google Chrome de bijbehorende gebeurtenissen naar de schermlezer. Omdat de ondersteuning voor WAI-ARIA nog in ontwikkeling is, is het mogelijk dat Google Chrome niet voor elke WAI-ARIA-eigenschap een gebeurtenis genereert en dat schermlezers niet alle gegenereerde gebeurtenissen herkennen.
Voor een korte handleiding over het toevoegen van WAI-ARIA-besturingselementen aan aangepaste besturingselementen, zie de presentatie van Dave Raggett van WWW2010 .
Focus in aangepaste bedieningselementen
Toetsenbordfocus is essentieel voor gebruikers die zonder muis op het web navigeren. Zorg ervoor dat bedienings- en navigatie-elementen, zoals knoppen, keuzelijsten en menubalken, toetsenbordfocus kunnen krijgen.
Standaard kunnen alleen elementen in de HTML DOM, zoals ankers, knoppen en formulierbesturingselementen, de focus van het toetsenbord ontvangen. Door het HTML-attribuut ` tabIndex op 0 in te stellen, worden DOM-elementen echter in de standaard tabvolgorde geplaatst, waardoor ze ook de focus van het toetsenbord kunnen ontvangen.
element.tabIndex = 0
element.focus();
Door tabIndex = -1 in te stellen, wordt het element uit de tabvolgorde verwijderd, maar kan het element nog steeds programmatisch de focus van het toetsenbord krijgen.
Ondersteuning voor toetsenbordtoegang
Extensies moeten alleen met een toetsenbord te gebruiken zijn, zodat gebruikers die geen muis kunnen gebruiken, en gevorderde gebruikers die dat simpelweg niet kunnen, er toegang toe hebben.
Navigatie
Controleer of een gebruiker zonder muis tussen verschillende onderdelen van een extensie kan navigeren. Controleer of pop-ups met het toetsenbord te bedienen zijn. Gebruik de sneltoetsen van Chrome om te bepalen of een extensie navigeerbaar is.
Zorg ervoor dat duidelijk te zien is welke delen van de interface de toetsenbordfocus hebben. Normaal gesproken beweegt een focuskader over de interface, maar als er te veel CSS wordt gebruikt, kan het kader worden onderdrukt of het contrast worden verminderd.
Snelkoppelingen
Hoewel de meest gebruikelijke manier om met het toetsenbord door de interface van een extensie te navigeren, is door de Tab-toets te gebruiken, is dit niet altijd de gemakkelijkste of meest efficiënte optie.
Een eenvoudige JavaScript-toetsenbordhandler zou er als volgt uit kunnen zien. Let op hoe de WAI-ARIA-eigenschap aria-activedescendant wordt bijgewerkt als reactie op gebruikersinvoer om de momenteel actieve knop in de werkbalk weer te geven.
function optionKeyEvent(event) {
var tb = event.target;
var buttonid;
ENTER_KEYCODE = 13;
RIGHT_KEYCODE = 39;
LEFT_KEYCODE = 37;
// Partial sample code for processing arrow keys.
if (event.type == "keydown") {
// Implement circular keyboard navigation within the toolbar buttons
if (event.keyCode == ENTER_KEYCODE) {
ExecuteButtonAction(getCurrentButtonID());
// getCurrentButtonID defined elsewhere
} else if (event.keyCode == event.RIGHT_KEYCODE) {
// Change the active toolbar button to the one to the right (circular).
var buttonid = getNextButtonID();
// getNextButtonID defined elsewhere
tb.setAttribute("aria-activedescendant", buttonid);
} else if (event.keyCode == event.LEFT_KEYCODE) {
// Change the active toolbar button to the one to the left (circular).
var buttonid = getPrevButtonID();
// getPrevButtonID defined elsewhere
tb.setAttribute("aria-activedescendant", buttonid);
} else {
return true;
}
return false;
}
}
<div role="toolbar" tabindex="0" aria-activedescendant="button1" id="tb1"
onkeydown="return optionKeyEvent(event);"
onkeypress="return optionKeyEvent(event);">
<img src="buttoncut" role="button" alt="cut" id="button1">
<img src="buttoncopy" role="button" alt="copy" id="button1">
<img src="buttonpaste" role="button" alt="paste" id="button1">
</div>
Extensies kunnen expliciete sneltoetsen maken voor belangrijke UI-elementen van de extensie. Om deze sneltoetsen te implementeren, koppelt u gebeurtenislisteners voor toetsenborden aan de besturingselementen. Maak gebruikers bewust van de beschikbare sneltoetsen door ze op de optiepagina te vermelden.
Zorg voor toegankelijke inhoud.
Het aanbieden van toegankelijke content is belangrijk voor alle gebruikers. Veel van de volgende richtlijnen zullen u wellicht bekend voorkomen, aangezien ze goede praktijken weerspiegelen voor alle webcontent.
Tekst
De keuze van het lettertype en de tekstgrootte hebben invloed op de leesbaarheid van de inhoud van een extensie. Gebruikers met een visuele beperking moeten mogelijk de tekstgrootte van een extensie vergroten. Zorg er bij het gebruik van sneltoetsen voor dat deze de ingebouwde zoomfunctie van Chrome niet overlappen.
Als indicator voor de flexibiliteit van de gebruikersinterface van een extensie, pas dan de 200%-test toe: is de extensie nog steeds bruikbaar als de tekstgrootte of de paginazoom met 200% wordt vergroot?
Vermijd het inbakken van tekst in afbeeldingen. Gebruikers kunnen de grootte niet aanpassen en schermlezers kunnen afbeeldingen niet interpreteren. Kies in plaats daarvan voor een opgemaakt weblettertype, zoals een van de lettertypen in de Google Fonts API . Weblettertypen kunnen worden geschaald naar verschillende formaten en zijn toegankelijk voor mensen die schermlezers gebruiken.
Kleuren
Er moet voldoende contrast zijn tussen de achtergrondkleur en de tekstkleur in een extensie. Gebruik een contrastcontroletool om te testen of de achtergrond- en voorgrondkleuren een passend contrast bieden.
Bij het beoordelen van het contrast, controleer of elk onderdeel van de extensie dat gebruikmaakt van afbeeldingen om informatie over te brengen, duidelijk zichtbaar is. Voor specifieke afbeeldingen kunnen tools zoals Coblis – Color Blindness Simulator worden gebruikt om te zien hoe een afbeelding eruitziet bij verschillende vormen van kleurenblindheid.
Overweeg om verschillende kleurenthema's aan te bieden, of de gebruiker de mogelijkheid te geven het kleurenschema aan te passen, om een beter contrast te creëren.
Geluid
Als een programmaonderdeel gebruikmaakt van geluid of video om informatie over te brengen, zorg er dan voor dat er ondertiteling of een transcript beschikbaar is. Raadpleeg de richtlijnen van het Described and Captioned Media Program voor meer informatie over ondertiteling.
Afbeeldingen
Voeg informatieve alt-tekst toe aan afbeeldingen.
<img src="img.jpg" alt="The logo for the extension">
Gebruik de alt-tekst om het doel van de afbeelding aan te geven in plaats van een letterlijke beschrijving van de inhoud. Afbeeldingen die alleen als achtergrond dienen of puur decoratief zijn, moeten een lege alt-tekst ( "" hebben of volledig uit de HTML worden verwijderd en in de CSS worden opgenomen.
Als de extensie tekst in een afbeelding moet gebruiken, voeg dan de afbeeldingstekst toe aan de alt-tekst. Een goede bron om te raadplegen is het WebAIM-artikel over geschikte alt-tekst .
Leer meer
Leer meer over toegankelijkheid in Chrome door het A11ycasts -kanaal te bekijken en de technische documentatie over Chromium-toegankelijkheid door te lezen.