Mit Erweiterungen können Nutzer eine für sie optimale Browsererfahrung schaffen, die auf die Fähigkeiten und Vorlieben der Nutzer zugeschnitten ist. Erweiterungen sollten Bedienungshilfen enthalten, die eine inklusive Nutzerbasis fördern, indem Menschen mit Sehbeeinträchtigungen, Hörverlust, eingeschränkter Feinmotorik und anderen Behinderungen den Zugriff auf die Erweiterung ermöglichen.
Von den Bedienungshilfen profitieren alle, nicht nur Nutzende mit besonderen Bedürfnissen. Sehbehinderte, feinmotorische und versierte Nutzer profitieren alle von Tastenkombinationen. Untertitel und Transkripte sind wichtig für gehörlose Nutzer, aber sie helfen auch beim Sprachenlernen.
Nutzer können mit einer Erweiterung auf unterschiedliche Weise interagieren. Einige Nutzer verwenden einen Standardmonitor, eine Tastatur und eine Standardmaus oder benötigen möglicherweise eine Lupe und möglicherweise einen Screenreader. Zwar lässt sich nicht vorhersagen, welche Tools Nutzer für den Zugriff auf eine Erweiterung verwenden werden, aber jeder Entwickler kann eine Erweiterung so barrierefrei wie möglich gestalten.
Barrierefreie UI-Steuerelemente einbinden
Wenn Nutzer keinen Zugriff auf die Steuerelemente der Benutzeroberfläche haben, können sie keine Erweiterung verwenden. Am einfachsten lässt sich eine barrierefreie UI mit einem Standard-HTML-Steuerelement erstellen.
Standardsteuerelemente
Verwenden Sie nach Möglichkeit standardmäßige HTML-UI-Steuerelemente. Standardmäßige HTML-Steuerelemente sind per Tastatur zugänglich, lassen sich einfach skalieren und werden im Allgemeinen 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 einen Standardsatz von DOM-Attributen für Screenreader zugänglich gemacht werden können. Diese Attribute liefern dem Screenreader Informationen über die Funktion und den aktuellen Status der Steuerelemente auf einer Webseite.
Damit benutzerdefinierte Steuerelemente mit WAI-ARIA unterstützt werden, müssen die DOM-Elemente einer Erweiterung so geändert werden, dass sie Attribute enthalten, die Chrome verwendet, um Ereignisse während Nutzerinteraktionen 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">
Die Eigenschaft aria-activedescendant gibt an, welches untergeordnete Element einer Symbolleiste den Fokus erhält, wenn die Symbolleiste fokussiert wird. Der Code tabindex="0" gibt an, dass die Symbolleiste den Fokus in der Dokumentreihenfolge erhält.
Sehen Sie sich die vollständige Spezifikation für eine Beispielsymbolleiste unten an:
<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, gibt Google Chrome die entsprechenden Ereignisse an den Screenreader aus. Da die WAI-ARIA-Unterstützung noch in der Entwicklung 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 vom WWW2010.
Fokus auf benutzerdefinierte Steuerelemente
Der Tastaturfokus ist für Nutzer, die ohne Maus im Web surfen, unerlässlich. Achten Sie darauf, dass der Tastaturfokus für Bedien- und Navigationssteuerelemente wie Schaltflächen, Listenfelder und Menüleisten festgelegt werden kann.
Standardmäßig sind die einzigen Elemente im HTML-DOM, die den Tastaturfokus erhalten können, Anker, Schaltflächen und Steuerelemente für Formulare. Wenn Sie das HTML-Attribut tabIndex auf 0 setzen, werden DOM-Elemente jedoch in die Standardtabsequenz eingefügt, damit sie Tastaturfokus erhalten können.
element.tabIndex = 0
element.focus();
Wenn Sie tabIndex = -1 festlegen, wird das Element aus der Tabsequenz entfernt, es kann aber weiterhin programmatisch Tastaturfokus erhalten.
Tastaturzugriff unterstützen
Erweiterungen sollten nur mit einer Tastatur verwendet werden können, sodass sowohl Nutzer ohne Maus als auch Poweruser auf sie zugreifen können.
Navigation
Stellen Sie sicher, dass ein Nutzer ohne Maus zwischen den verschiedenen Teilen einer Erweiterung navigieren kann. Überprüfen Sie, ob bei jeder Verwendung eines Pop-ups über die Tastatur navigierbar ist. Mit den Chrome-Tastenkombinationen können Sie feststellen, ob eine Erweiterung navigierbar ist.
Es muss gut erkennbar sein, welche Teile der Benutzeroberfläche Tastaturfokus haben. Normalerweise bewegt sich eine Fokuskontur auf der Benutzeroberfläche. Wenn jedoch CSS zu stark verwendet wird, kann der Umriss unterdrückt oder der Kontrast reduziert werden.
Tastenkombinationen
Bei der am häufigsten verwendeten Tastaturnavigationsstrategie wird die Tabulatortaste verwendet, um den Fokus durch die Benutzeroberfläche einer Erweiterung zu drehen. Dies ist jedoch nicht immer die einfachste oder effizienteste Option.
Ein einfacher JavaScript-Tastatur-Handler könnte wie folgt aussehen. Beachten Sie, wie die WAI-ARIA-Eigenschaft aria-activedescendant als Reaktion auf Nutzereingaben aktualisiert wird, um die aktuell 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="button2">
<img src="buttonpaste" role="button" alt="paste" id="button3">
</div>
Erweiterungen können explizite Tastenkombinationen für wichtige Elemente der Erweiterungsoberfläche erstellen. Verbinden Sie Tastaturereignis-Listener mit Steuerelementen, um diese Tastenkombinationen zu implementieren. Machen Sie die Nutzer auf die verfügbaren Verknüpfungen aufmerksam, indem Sie sie auf der Seite „Optionen“ bereitstellen.
Barrierefreie Inhalte bereitstellen
Barrierefreie Inhalte sind wichtig für alle Nutzer. Viele der folgenden Richtlinien klingen vertraut, da sie Best Practices für alle Webinhalte widerspiegeln.
Text
Die Auswahl der Schriftart und der Textgröße wirken sich darauf aus, wie lesbar der Inhalt einer Erweiterung ist. Nutzer mit Sehproblemen müssen möglicherweise die Textgröße einer Erweiterung erhöhen. Achten Sie bei Verwendung von Tastenkombinationen darauf, dass diese nicht die in Chrome integrierten Tastenkombinationen zum Zoomen beeinträchtigen.
Der 200-%-Test dient als Indikator für die Flexibilität der Benutzeroberfläche einer Erweiterung. Ist die Textgröße oder der Seitenzoom um 200 % zu erhöhen, ist sie dann noch nutzbar?
Vermeiden Sie es, Text in Bildern einzubetten. Nutzer können die Größe nicht ändern und Screenreader können Bilder nicht interpretieren. Stattdessen sollten Sie sich für eine Web-Schriftart mit benutzerdefiniertem Stil entscheiden, wie sie beispielsweise in der Google Font API enthalten ist. Webschriftarten lassen sich an verschiedene Größen anpassen und sind für Nutzer mit Screenreadern zugänglich.
Farben
Der Kontrast zwischen der Hintergrundfarbe und der Textfarbe in einer Erweiterung sollte groß genug sein. Verwenden Sie ein Tool zur Kontrastprüfung, um zu testen, ob die Hintergrund- und Vordergrundfarben einen angemessenen Kontrast bieten.
Achte bei der Bewertung des Kontrasts darauf, dass jeder Teil der Erweiterung, der Informationen zur Vermittlung von Informationen durch Grafiken nutzt, deutlich sichtbar ist. Für bestimmte Bilder können Sie Tools wie den Coblis – Color Blindness Simulator verwenden, um festzustellen, wie ein Bild in verschiedenen Formen von Farbmängeln aussieht.
Erwägen Sie, verschiedene Farbthemen anzubieten oder dem Nutzer die Möglichkeit zu geben, das Farbschema anzupassen, um einen besseren Kontrast zu erzielen.
Ton
Wenn eine Erweiterung Informationen durch Ton oder Video vermittelt, müssen Untertitel oder ein Transkript verfügbar sein. Weitere Informationen zu Untertiteln findest du in den Programmrichtlinien für Signed and Captioned Media.
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, anstatt eine wörtliche Beschreibung des Bildinhalts. Bei Bildern mit Abstandhaltern oder einfach dekorativen Bildern sollte ein leerer Alt-Text für "" enthalten sein oder vollständig aus dem HTML-Code entfernt und im CSS-Code platziert 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 zum geeigneten Alt-Text.
Weitere Informationen
Weitere Informationen zu Bedienungshilfen in Chrome finden Sie im Kanal A11ycasts und in der technischen Dokumentation zu Chromium Accessibility.