Mit Erweiterungen können Nutzer ihren Browser individuell an ihre Fähigkeiten und Vorlieben anpassen. Erweiterungen sollten Komponenten zur Barrierefreiheit enthalten, die eine inklusive Nutzerbasis fördern, indem Menschen mit Sehbehinderung, Hörverlust, eingeschränkter Fingerfertigkeit und anderen Behinderungen den Zugriff auf die Erweiterung ermöglichen.
Nicht nur Nutzer mit besonderen Bedürfnissen können von Funktionen zur Barrierefreiheit profitieren. Nutzer mit Sehbehinderung, eingeschränkter Fingerfertigkeit und Poweruser profitieren von Tastenkombinationen. Untertitel und Transkripte sind für gehörlose Nutzer unerlässlich, aber auch für Sprachlernende hilfreich.
Nutzer können auf unterschiedliche Weise mit einer Erweiterung interagieren. Einige Nutzer haben Standardmonitore, Tastatur und Maus oder eine Lupe und möglicherweise einen Screenreader. Es ist zwar unmöglich vorherzusagen, mit welchen Tools Nutzer auf eine Erweiterung zugreifen werden, aber es gibt Schritte, die Entwickler unternehmen können, um eine Erweiterung so barrierefrei wie möglich zu gestalten.
Barrierefreie Steuerelemente für die Benutzeroberfläche integrieren
Wenn Nutzer nicht auf die Steuerelemente der Benutzeroberfläche zugreifen können, können sie keine Erweiterung verwenden. Die einfachste Methode zum Erstellen einer barrierefreien Benutzeroberfläche ist die Verwendung eines standardmäßigen HTML-Steuerelements.
Standardsteuerelemente
Verwenden Sie nach Möglichkeit Standard-HTML-Steuerelemente. Standard-HTML-Steuerelemente sind über die Tastatur zugänglich, lassen sich leicht skalieren und werden von Screenreadern in der Regel verstanden.
WAI-ARIA in benutzerdefinierten Steuerelementen
Die Web Accessibility Initiative – Accessible Rich Internet Applications, WAI-ARIA, ist eine Spezifikation, mit der UI-Steuerelemente über einen Standardsatz von 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.
Wenn Sie benutzerdefinierten Steuerelementen WAI-ARIA-Unterstützung hinzufügen möchten, müssen die DOM-Elemente einer Erweiterung so geändert werden, dass sie Attribute enthalten, die Chrome verwendet, um bei Nutzerinteraktionen Ereignisse auszulösen. Screenreader reagieren auf diese Ereignisse und beschreiben die Funktion des Steuerelements. Von WAI-ARIA angegebene DOM-Attribute werden in Rollen, Bundesstaaten und Eigenschaften klassifiziert.
<div role="toolbar">
Mit dem Attribut aria-activedescendant wird festgelegt, 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 in Dokumentenreihenfolge den Fokus erhält.
Unten finden Sie 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 dem DOM eines Steuerelements WAI-ARIA-Rollen, -Zustände und -Eigenschaften hinzugefügt wurden, löst Google Chrome die entsprechenden Ereignisse für den Screenreader aus. Da die WAI-ARIA-Unterstützung noch nicht vollständig implementiert ist, wird in Google Chrome möglicherweise nicht für jede WAI-ARIA-Eigenschaft ein Ereignis ausgelöst 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 von der WWW2010.
Fokus in benutzerdefinierten Steuerelementen
Der Tastaturfokus ist für Nutzende wichtig, die ohne Maus im Web navigieren. Achten Sie darauf, dass Bedien- und Navigationselemente wie Schaltflächen, Listenfelder und Menüleisten den Tastaturfokus erhalten können.
Standardmäßig sind Anker, Schaltflächen und Formularsteuerelemente nur für Elemente im HTML-DOM, die Tastaturfokus erhalten können. Wenn Sie jedoch das HTML-Attribut tabIndex auf 0 setzen, werden DOM-Elemente in der standardmäßigen Tabsequenz platziert, sodass sie Tastaturfokus erhalten.
element.tabIndex = 0
element.focus();
Wenn Sie tabIndex = -1 festlegen, wird das Element aus der Tab-Sequenz entfernt, kann aber weiterhin programmatisch den Tastaturfokus erhalten.
Tastaturzugriff unterstützen
Erweiterungen sollten nur mit einer Tastatur verwendet werden können, sodass sowohl Nutzer, die keine Maus verwenden können, als auch Poweruser, die es einfach nicht tun, Zugriff darauf haben.
Navigation
Prüfen Sie, ob Nutzer zwischen verschiedenen Teilen einer Erweiterung wechseln können, ohne die Maus zu verwenden. Prüfen Sie, ob alle Pop-ups per Tastatur bedienbar sind. Mit Chrome-Tastenkombinationen können Sie feststellen, ob eine Erweiterung navigierbar ist.
Achten Sie darauf, dass klar erkennbar ist, auf welchen Bereichen der Benutzeroberfläche der Tastaturfokus liegt. Normalerweise bewegt sich ein Fokus-Umriss durch die Benutzeroberfläche. Wenn jedoch zu viel CSS verwendet wird, wird der Umriss möglicherweise unterdrückt oder der Kontrast reduziert.
Verknüpfungen
Die gängigste Tastaturnavigationsstrategie besteht darin, mit der Tabulatortaste den Fokus durch die Benutzeroberfläche einer Erweiterung zu verschieben. Dies ist jedoch nicht immer die einfachste oder effizienteste Option.
Ein einfacher JavaScript-Tastatur-Handler könnte so aussehen: Beachten Sie, dass die WAI-ARIA-Eigenschaft aria-activedescendant als Reaktion auf die Nutzereingabe aktualisiert wird, um die aktuell aktive Symbolleistentastatur zu repräsentieren.
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 Tastenkürzel für wichtige UI-Elemente der Erweiterung erstellen. Um diese Tastenkürzel zu implementieren, müssen Sie Tastatur-Ereignis-Listener mit Steuerelementen verknüpfen. Machen Sie Nutzer auf die verfügbaren Verknüpfungen aufmerksam, indem Sie sie auf der Optionsseite angeben.
Barrierefreie Inhalte bereitstellen
Barrierefreie Inhalte sind für alle Nutzer wichtig. Viele der folgenden Richtlinien mögen Ihnen bekannt vorkommen, da sie Best Practices für alle Webinhalte widerspiegeln.
Text
Die Auswahl der Schriftarten und die Textgröße wirken sich darauf aus, wie gut der Inhalt einer Erweiterung lesbar ist. Nutzer mit Sehbehinderungen müssen möglicherweise die Textgröße einer Erweiterung erhöhen. Achten Sie darauf, dass die Tastenkombinationen nicht mit den in Chrome integrierten Tastenkombinationen für das Zoomen kollidieren.
Als Indikator für die Flexibilität der Benutzeroberfläche einer Erweiterung können Sie den 200-%-Test durchführen. Ist die Erweiterung auch dann 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 einen Webfont mit Stil, z. B. einen der Fonts in der Google Fonts API. Webschriftarten können an verschiedene Größen angepasst werden und sind für Nutzer mit Screenreadern zugänglich.
Farben
Zwischen der Hintergrundfarbe und der Textfarbe in einer Erweiterung sollte ein ausreichender Kontrast bestehen. Mit einem Kontrastprüfungstool können Sie testen, ob die Hintergrund- und Vordergrundfarben einen angemessenen Kontrast bieten.
Achten Sie beim Bewerten des Kontrasts darauf, dass alle Teile der Erweiterung, die Informationen mithilfe von Grafiken vermitteln, gut sichtbar sind. Bei bestimmten Bildern können Sie mit Tools wie dem Coblis-Farbenblindheitssimulator sehen, wie ein Bild bei verschiedenen Formen der Farbfehlsichtigkeit aussieht.
Sie können verschiedene Farbthemen anbieten oder dem Nutzer die Möglichkeit geben, das Farbschema anzupassen, um einen besseren Kontrast zu erzeugen.
Ton
Wenn eine Erweiterung Informationen über Audio oder Video vermittelt, müssen Untertitel oder ein Transkript verfügbar sein. Weitere Informationen zu Untertiteln findest du in den Richtlinien für Programme mit Audiodeskription und Untertiteln.
Bilder
Geben Sie informativen Alt-Text für Bilder an.
<img src="img.jpg" alt="The logo for the extension">
Geben Sie im Alt-Text den Zweck des Bildes an, anstatt eine wörtliche Beschreibung des Inhalts. Spacer- oder rein dekorative Bilder sollten einen leeren ""-Alt-Text haben oder vollständig aus dem HTML-Code entfernt und in das CSS-Dokument eingefügt werden.
Wenn in der Erweiterung Text in einem Bild verwendet werden muss, fügen Sie den Bildtext in den Alt-Text ein. Eine gute Ressource ist der WebAIM-Artikel zum geeigneten Alt-Text.
Weitere Informationen
Weitere Informationen zu den Bedienungshilfen in Chrome finden Sie auf dem A11ycasts-Kanal und in der technischen Dokumentation zu den Bedienungshilfen in Chromium.