Erweiterungen ermöglichen Nutzern, ihr ideales Browsing-Erlebnis zu schaffen, das auf ihre individuellen Fähigkeiten und Vorlieben zugeschnitten ist. Erweiterungen sollten Komponenten für die Barrierefreiheit enthalten, die eine inklusive Nutzerbasis fördern, indem sie Menschen mit Sehbehinderungen, Hörverlust, eingeschränkter Geschicklichkeit und anderen Behinderungen den Zugriff auf die Erweiterung ermöglichen.
Von Bedienungshilfen profitieren nicht nur Nutzer mit besonderen Bedürfnissen. Tastenkombinationen sind für sehbehinderte Nutzer, Nutzer mit eingeschränkter Geschicklichkeit und Power-User gleichermaßen nützlich. Untertitel und Transkripte sind für gehörlose Nutzer unerlässlich, helfen aber auch Personen, die die Sprache lernen.
Nutzer können auf verschiedene Weise mit einer Erweiterung interagieren. Einige Nutzer haben einen Standardmonitor, eine Standardtastatur und eine Standardmaus. Andere sind möglicherweise auf eine Bildschirmlupe und einen Screenreader angewiesen. Es ist zwar unmöglich vorherzusagen, welche Tools Nutzer verwenden, um auf eine Erweiterung zuzugreifen, aber es gibt Schritte, die jeder Entwickler unternehmen kann, um eine Erweiterung so barrierefrei wie möglich zu gestalten.
Barrierefreie UI-Steuerelemente einbinden
Wenn Nutzer nicht auf die Steuerelemente der Benutzeroberfläche zugreifen können, können sie eine Erweiterung nicht verwenden. Die einfachste Möglichkeit, eine barrierefreie Benutzeroberfläche zu erstellen, ist die Verwendung eines Standard-HTML-Steuerelements.
Standardsteuerelemente
Verwenden Sie nach Möglichkeit immer Standard-HTML-UI-Steuerelemente. Standard-HTML-Steuerelemente sind über die Tastatur zugänglich, lassen sich problemlos skalieren und werden in der Regel von Screenreadern verstanden.
WAI-ARIA in benutzerdefinierten Steuerelementen
Die Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) ist eine Spezifikation, mit der UI-Steuerelemente über eine Reihe von Standard-DOM Attributen für Screenreader zugänglich gemacht werden. Diese Attribute liefern dem Screenreader Informationen zur Funktion und zum aktuellen Status der Steuerelemente auf einer Webseite.
Um benutzerdefinierten Steuerelementen WAI-ARIA-Unterstützung hinzuzufügen, müssen die DOM-Elemente einer Erweiterung so geändert werden, dass sie Attribute enthalten, die Chrome verwendet, um Ereignisse während der Nutzerinteraktion auszulösen. Screenreader reagieren auf diese Ereignisse und beschreiben die Funktion des Steuerelements. Die von WAI-ARIA angegebenen DOM-Attribute werden in Rollen, Status und Eigenschaften klassifiziert.
<div role="toolbar">
Die aria-activedescendant Eigenschaft gibt an, welches untergeordnete Element einer Symbolleiste den Fokus erhält, wenn die
Symbolleiste den Fokus erhält. Der Code tabindex="0" gibt an, dass die Symbolleiste den Fokus in
der Dokumentreihenfolge erhält.
Hier ist die vollständige Spezifikation für eine Beispielsymbolleiste:
<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>
Sobald WAI-ARIA-Rollen, ‑Status und ‑Eigenschaften dem DOM eines Steuerelements hinzugefügt wurden, löst Google Chrome die entsprechenden Ereignisse für den Screenreader aus. Da die WAI-ARIA-Unterstützung noch in Arbeit ist, löst Google Chrome möglicherweise nicht für jede WAI-ARIA-Eigenschaft ein Ereignis aus und Screenreader erkennen möglicherweise nicht alle ausgelösten Ereignisse.
Eine kurze Anleitung zum Hinzufügen von WAI-ARIA-Steuerelementen zu benutzerdefinierten Steuerelementen finden Sie in der Präsentation von Dave Raggett auf der WWW2010.
Fokus in benutzerdefinierten Steuerelementen
Der Tastaturfokus ist für Nutzer unerlässlich, die im Web ohne Maus navigieren. Bedienungs- und Navigationssteuerelemente wie Schaltflächen, Listenfelder und Menüleisten müssen den Tastaturfokus erhalten können.
Standardmäßig können nur Anker, Schaltflächen und Formularsteuerelemente im HTML-DOM den Tastaturfokus erhalten. Wenn Sie das HTML-Attribut tabIndex auf 0 setzen, werden DOM-Elemente jedoch in die Standard-Tab-Reihenfolge eingefügt, sodass sie den Tastaturfokus erhalten können.
element.tabIndex = 0
element.focus();
Wenn Sie tabIndex = -1 festlegen, wird das Element aus der Tab-Reihenfolge entfernt, kann aber weiterhin programmatisch den Tastaturfokus erhalten.
Tastaturzugriff unterstützen
Erweiterungen sollten nur mit einer Tastatur verwendet werden können, damit Nutzer, die keine Maus verwenden können, und Power-User, die sie einfach nicht verwenden, darauf zugreifen können.
Navigation
Prüfen Sie, ob ein Nutzer ohne Maus zwischen verschiedenen Teilen einer Erweiterung navigieren kann. Prüfen Sie, ob Pop-ups über die Tastatur bedient werden können. Mit Chrome-Tastenkombinationen können Sie feststellen, ob eine Erweiterung navigierbar ist.
Achten Sie darauf, dass leicht zu erkennen ist, welche Teile der Benutzeroberfläche den Tastaturfokus haben. Normalerweise bewegt sich eine Fokusumrandung um die Benutzeroberfläche. Wenn CSS jedoch zu stark verwendet wird, kann die Umrandung unterdrückt oder der Kontrast reduziert werden.
Verknüpfungen
Die gängigste Strategie für die Tastaturnavigation besteht darin, mit der Tabulatortaste den Fokus durch die Benutzeroberfläche einer Erweiterung zu bewegen. Das ist jedoch nicht immer die einfachste oder effizienteste Option.
Ein einfacher JavaScript-Tastaturhandler könnte so aussehen: Beachten Sie, wie die WAI-ARIA-Eigenschaft aria-activedescendant als Reaktion auf die Nutzereingabe aktualisiert wird, um die aktuelle aktive Symbolleistenschaltfläche widerzuspiegeln.
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>
Erweiterungen können explizite Tastenkombinationen für wichtige UI-Elemente der Erweiterung erstellen. Um diese Tastenkombinationen zu implementieren, verbinden Sie Tastaturereignis-Listener mit Steuerelementen. Machen Sie Nutzer auf die verfügbaren Tastenkombinationen aufmerksam, indem Sie sie auf der Seite mit den Optionen angeben.
Barrierefreie Inhalte bereitstellen
Barrierefreie Inhalte sind für alle Nutzer wichtig. Viele der folgenden Richtlinien kommen Ihnen möglicherweise bekannt vor, da sie gute Praktiken für alle Webinhalte widerspiegeln.
Text
Die Schriftart und die Textgröße wirken sich auf die Lesbarkeit der Inhalte einer Erweiterung aus. Nutzer mit Sehproblemen müssen möglicherweise die Textgröße einer Erweiterung erhöhen. Wenn Sie Tastenkombinationen verwenden, achten Sie darauf, dass sie nicht mit den in Chrome integrierten Tastenkombinationen für das Zoomen in Konflikt geraten.
Um die Flexibilität der Benutzeroberfläche einer Erweiterung zu testen, führen Sie den 200-%-Test durch. Ist die Erweiterung noch nutzbar, wenn die Textgröße oder der Seitenzoom um 200 % erhöht wird?
Vermeiden Sie es, Text in Bilder einzubetten. Nutzer können die Größe nicht ändern und Screenreader können Bilder nicht interpretieren. Verwenden Sie stattdessen eine formatierte Web-Schriftart, z. B. eine der Schriftarten in der Google Fonts API. Web-Schriftarten können auf verschiedene Größen skaliert werden und sind für Nutzer mit Screenreadern zugänglich.
Farben
Zwischen der Hintergrundfarbe und der Textfarbe in einer Erweiterung muss ein ausreichender Kontrast bestehen. Verwenden Sie ein Tool zur Kontrastprüfung, um zu testen, ob die Hintergrund- und Vordergrundfarben einen angemessenen Kontrast bieten.
Achten Sie beim Bewerten des Kontrasts darauf, dass alle Teile der Erweiterung, die Informationen über Grafiken vermitteln, gut sichtbar sind. Für bestimmte Bilder können Sie mit Tools wie Coblis – Color Blindness Simulator sehen, wie ein Bild bei verschiedenen Formen von Farbenblindheit aussieht.
Bieten Sie verschiedene Farbdesigns an oder geben Sie Nutzern die Möglichkeit, das Farbschema anzupassen, um einen besseren Kontrast zu erzielen.
Ton
Wenn eine Erweiterung Ton oder Video verwendet, um Informationen zu vermitteln, müssen Untertitel oder ein Transkript verfügbar sein. Weitere Informationen zu Untertiteln finden Sie in den Richtlinien des Described and Captioned Media Program.
Google Bilder
Geben Sie informativen Alt-Text für Bilder an.
<img src="img.jpg" alt="The logo for the extension">
Verwenden Sie den Alt-Text, um den Zweck des Bildes anzugeben, und nicht eine wörtliche Beschreibung des Inhalts. Abstandsbilder oder rein dekorative Bilder sollten einen leeren "" Alt-Text haben oder vollständig aus dem HTML entfernt
und in das CSS eingefügt werden.
Wenn die Erweiterung Text in einem Bild verwenden muss, fügen Sie den Bildtext in den Alt-Text ein. Eine gute Ressource ist der WebAIM-Artikel zu geeignetem Alt-Text.
Weitere Informationen
Weitere Informationen zur Barrierefreiheit in Chrome finden Sie im A11ycasts-Kanal und in der technischen Dokumentation zur Barrierefreiheit von Chromium .