Mit Erweiterungen können Nutzer ihren Browser individuell an ihre Fähigkeiten und Vorlieben anpassen. Erweiterungen sollten Komponenten für die Barrierefreiheit enthalten, die eine inklusive Nutzergruppe fördern, indem sie Menschen mit Sehbehinderung, Hörverlust, eingeschränkter Feinmotorik und anderen Behinderungen den Zugriff auf die Erweiterung ermöglichen.
Nicht nur Nutzer mit besonderen Bedürfnissen können von Funktionen zur Barrierefreiheit profitieren. Sehbehinderte, Feinmotorik und Poweruser profitieren alle 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 einen Standardmonitor, eine Tastatur und eine Maus. Andere sind möglicherweise auf eine Lupe und möglicherweise einen Screenreader angewiesen. Es ist zwar unmöglich vorherzusagen, welche Tools Nutzer zum Zugriff auf eine Erweiterung verwenden, aber es gibt Schritte, die Entwickler unternehmen können, 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 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 in der Regel von Screenreadern erkannt.
WAI-ARIA in benutzerdefinierten Steuerelementen
Die Web Accessibility Initiative – Accessible Rich Internet Applications, WAI-ARIA, ist eine Spezifikation, die dafür sorgt, dass Screenreadern UI-Steuerelemente über einen Standardsatz von DOM-Attributen zugänglich sind. 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, Zustände und Properties unterteilt.
<div role="toolbar">
Die Eigenschaft aria-activedescendant gibt an, welches untergeordnete Element einer Symbolleiste den Fokus erhalten soll, 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 abgeschlossen ist, löst Google Chrome möglicherweise nicht für jede WAI-ARIA-Property 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 von WWW2010.
Fokus in benutzerdefinierten Steuerelementen
Der Tastaturfokus ist für Nutzende, die ohne Maus im Web navigieren, von entscheidender Bedeutung. Achten Sie darauf, dass Bedien- und Navigationselemente wie Schaltflächen, Listenfelder und Menüleisten den Tastaturfokus erhalten können.
Standardmäßig sind nur Anker, Schaltflächen und Formularsteuerelemente im HTML-DOM für den Tastaturfokus verfügbar. Wenn Sie das HTML-Attribut tabIndex jedoch auf 0 festlegen, werden DOM-Elemente in die Standardtabfolge aufgenommen und können den 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 bedient werden können, damit Nutzer, die keine Maus verwenden können, und Nutzer, die keine Maus verwenden möchten, darauf zugreifen können.
Navigation
Prüfen Sie, ob Nutzer zwischen verschiedenen Teilen einer Erweiterung wechseln können, ohne die Maus zu verwenden. Prüfen Sie, ob die Verwendung eines Pop-ups über die Tastatur möglich ist. Mit den Chrome-Tastenkombinationen können Sie feststellen, ob eine Erweiterung barrierefrei 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="button2">
<img src="buttonpaste" role="button" alt="paste" id="button3">
</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 Schriftart und die Textgröße wirken sich darauf aus, wie gut der Inhalt einer Erweiterung lesbar ist. Nutzer mit Sehbehinderungen müssen den Text einer Erweiterung möglicherweise vergrößern. Wenn Sie Tastenkombinationen verwenden, achten Sie darauf, dass sie die in Chrome integrierten Tastenkombinationen nicht beeinträchtigen.
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 zu fixieren. 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. Webschriften können auf unterschiedliche Größen skaliert werden und Nutzer mit Screenreadern können darauf zugreifen.
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 Farbdesigns anbieten oder den Nutzern die Möglichkeit geben, das Farbschema anzupassen, um einen besseren Kontrast zu erzielen.
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-Stylesheet eingefügt werden.
Wenn für die 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 zu geeigneten Alt-Texten.
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.