Erweiterungen ermöglichen es Nutzern, eine optimale Browserumgebung zu schaffen, die auf die Fähigkeiten und Vorlieben der einzelnen Nutzer zugeschnitten ist. Erweiterungen sollten Bedienungshilfen enthalten, die eine inklusive Nutzerbasis fördern, indem Menschen mit Seh- oder Hörverlust, eingeschränkter Feinmotorik und anderen Behinderungen den Zugriff auf die Erweiterung ermöglichen.
Alle, nicht nur Nutzer mit besonderen Bedürfnissen, können von den Bedienungshilfen profitieren. Sehbehinderte, eingeschränkte Fingerfertigkeit und Poweruser profitieren alle von Tastenkombinationen. Untertitel und Transkripte sind für gehörlose Nutzer unerlässlich, helfen aber auch beim Sprachenlernen.
Nutzer können mit einer Erweiterung auf unterschiedliche Weise interagieren. Einige Nutzer haben Standardmonitore, -tastatur und -maus. Für sie sind möglicherweise eine Lupe und möglicherweise ein Screenreader erforderlich. Zwar lässt sich nicht vorhersagen, mit welchen Tools Nutzer auf eine Erweiterung zugreifen werden, es gibt jedoch Schritte, mit denen Entwickler eine Erweiterung so barrierefrei wie möglich gestalten können.
Barrierefreie UI-Steuerelemente einbinden
Wenn Nutzer keinen Zugriff auf die Steuerelemente der Benutzeroberfläche haben, können sie keine Erweiterungen 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. Standard-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 Attribute enthalten sind, die Chrome verwendet, um Ereignisse während der Nutzerinteraktion 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 den Fokus erhält. 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 die Rollen, Status und Eigenschaften der WAI-ARIA zum DOM eines Steuerelements hinzugefügt wurden, gibt Google Chrome die entsprechenden Ereignisse an 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 vom WWW2010.
Fokus auf benutzerdefinierte Steuerelemente legen
Der Tastaturfokus ist unerlässlich für Nutzende, die ohne Maus im Web surfen. Kontrollieren Sie, dass der Tastaturfokus für Bedien- und Navigationssteuerungen 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 Formularsteuerelemente. Wenn Sie jedoch das HTML-Attribut tabIndex auf 0 setzen, werden DOM-Elemente in die Standardabfolge von Tabs 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 den Tastaturfokus erhalten.
Tastaturzugriff unterstützen
Erweiterungen sollten nur mit einer Tastatur verwendet werden können. So können Nutzer, die keine Maus verwenden können, und Poweruser, die dies nicht tun, auf sie zugreifen.
Navigation
Prüfen Sie, ob ein Nutzer ohne Maus zwischen den verschiedenen Teilen einer Erweiterung navigieren kann. Pop-ups müssen über die Tastatur navigierbar sein. Mit den Chrome-Tastenkombinationen können Sie feststellen, ob eine Erweiterung navigierbar ist.
Sie sollten leicht erkennen können, auf welche Bereiche der Benutzeroberfläche der Tastaturfokus festgelegt ist. Normalerweise bewegt sich ein Fokus um die Benutzeroberfläche. Wenn CSS jedoch 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. Die WAI-ARIA-Eigenschaft aria-activedescendant wird als Reaktion auf Nutzereingaben aktualisiert, 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="button1">
<img src="buttonpaste" role="button" alt="paste" id="button1">
</div>
Erweiterungen können explizite Tastenkombinationen für wichtige UI-Elemente der Erweiterung erstellen. Zur Implementierung dieser Tastenkombinationen müssen Sie Tastaturereignis-Listener mit Steuerelementen verbinden. Weisen Sie Nutzer auf die verfügbaren Verknüpfungen hin, indem Sie sie auf der Seite „Optionen“ angeben.
Barrierefreie Inhalte bereitstellen
Barrierefreie Inhalte sind für alle Nutzenden wichtig. Viele der folgenden Richtlinien klingen bekannt, da sie die Best Practices für alle Webinhalte widerspiegeln.
Text
Die Auswahl der Schriftart und der Textgröße wirken sich darauf aus, wie gut der Inhalt einer Erweiterung lesbar ist. Nutzer mit Sehproblemen müssen möglicherweise die Textgröße der Erweiterung erhöhen. Achten Sie bei der Verwendung von Tastenkombinationen darauf, dass diese nicht die in Chrome integrierten Tastenkombinationen zum Zoomen beeinträchtigen.
Um die Flexibilität der Benutzeroberfläche einer Erweiterung zu bestimmen, sollten Sie den 200-%-Test anwenden. Wenn die Textgröße oder der Seitenzoom um 200 % erhöht wird, ist sie dann noch nutzbar?
Vermeide es, Text in Bildern zu verankern. Nutzer können die Größe nicht ändern und Screenreader können Bilder nicht interpretieren. Wählen Sie stattdessen eine angepasste Webschriftart aus, z. B. eine der Schriftarten in der Google Font API. Webschriftarten können an verschiedene Größen angepasst werden und sind für Personen 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 auf Grafiken basiert, um Informationen zu vermitteln, deutlich sichtbar ist. Für bestimmte Bilder können Tools wie der Coblis – Color Blindness Simulator verwendet werden, um festzustellen, wie ein Bild in verschiedenen Formen von Farbmangel aussieht.
Sie können verschiedene Farbthemen anbieten oder Nutzern die Möglichkeit geben, das Farbschema anzupassen, um einen besseren Kontrast zu erzielen.
Ton
Wenn Informationen in einer Erweiterung durch Ton oder Video vermittelt werden, müssen Untertitel oder ein Transkript verfügbar sein. Weitere Informationen zu Untertiteln findest du in den Programmrichtlinien für beschriebene und untertitelte Medien.
Bilder
Stellen Sie informativen Alt-Text für Bilder bereit.
<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. Abstandhalter oder rein dekorative Bilder sollten einen leeren Alt-Text für "" haben oder vollständig aus dem HTML-Code entfernt und im CSS-Code platziert werden.
Wenn die Erweiterung Text in einem Bild enthalten muss, fügen Sie den Bildtext in den Alt-Text ein. Der WebAIM-Artikel zum geeigneten Alt-Text ist eine gute Ressource.
Mehr dazu
Weitere Informationen zu Bedienungshilfen in Chrome finden Sie im Kanal A11ycasts und in der technischen Dokumentation zu Chromium.