Erweiterungen ermöglichen es Nutzern, ihre ideale Browsernutzung zu schaffen, die auf die Fähigkeiten und Vorlieben des Einzelnen zugeschnitten ist. Erweiterungen sollten Barrierefreiheitskomponenten enthalten, die eine inklusive Nutzerbasis fördern, indem sie Menschen mit Sehbehinderung, Hörverlust, eingeschränkter Fingerfertigkeit und anderen Behinderungen den Zugriff auf die Erweiterung ermöglichen.
Bedienungshilfen sind nicht nur für Nutzer mit besonderen Bedürfnissen hilfreich. Tastenkombinationen sind für Menschen mit Sehbehinderung, Menschen mit eingeschränkter Fingerfertigkeit und Poweruser gleichermaßen nützlich. Untertitel und Transkripte sind für gehörlose Nutzer unerlässlich, helfen aber auch Lernenden.
Nutzer können auf unterschiedliche Weise mit einer Erweiterung interagieren. Einige Nutzer haben einen Standardmonitor, eine Standardtastatur und eine Standardmaus. Andere sind möglicherweise auf eine Lupe und einen Screenreader angewiesen. Es ist zwar unmöglich vorherzusagen, mit welchen Tools Nutzer auf eine Erweiterung zugreifen, 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 Methode zum Erstellen einer barrierefreien Benutzeroberfläche ist die Verwendung eines standardmäßigen HTML-Steuerelements.
Standardsteuerelemente
Verwenden Sie nach Möglichkeit Standard-HTML-UI-Steuerelemente. Standard-HTML-Steuerelemente sind über die Tastatur zugänglich, lassen sich einfach 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, 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 von Steuerelementen 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 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 Properties klassifiziert.
<div role="toolbar">
Mit dem Attribut aria-activedescendant wird angegeben, 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.
Unten sehen 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 WAI-ARIA-Rollen, ‑Status und ‑Attribute dem DOM eines Steuerelements hinzugefügt werden, löst Google Chrome die entsprechenden Ereignisse für die Sprachausgabe 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 Dave Raggetts Präsentation von WWW2010.
Fokus in benutzerdefinierten Steuerelementen
Der Tastaturfokus ist für Nutzer, die das Web ohne Maus bedienen, unerlässlich. Achten Sie darauf, dass Bedien- und Navigationssteuerelemente wie Schaltflächen, Listenfelder und Menüleisten 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 in die Standardtabfolge eingefügt, sodass sie den Tastaturfokus erhalten können.
element.tabIndex = 0
element.focus();
Durch die Einstellung tabIndex = -1 wird das Element aus der Tab-Reihenfolge entfernt, es kann aber weiterhin programmatisch den Tastaturfokus erhalten.
Tastaturzugriff unterstützen
Erweiterungen sollten nur mit einer Tastatur bedient werden können, damit auch Nutzer, die keine Maus verwenden können, und Poweruser, die einfach keine Maus 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 mit der Tastatur bedient werden können. Chrome-Tastenkombinationen verwenden, um festzustellen, ob eine Erweiterung navigierbar ist.
Achten Sie darauf, dass gut zu erkennen ist, welche Teile der Benutzeroberfläche den Tastaturfokus haben. Normalerweise bewegt sich eine Fokusumrisslinie durch die Benutzeroberfläche. Wenn jedoch zu viel CSS verwendet wird, kann die Umrisslinie unterdrückt oder der Kontrast reduziert werden.
Verknüpfungen
Die gängigste Methode zur Tastaturnavigation besteht darin, mit der Tabulatortaste den Fokus durch die Benutzeroberfläche einer Erweiterung zu bewegen. Dies 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 Schaltfläche in der Symbolleiste 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 UI-Elemente erstellen. Um diese Tastenkombinationen zu implementieren, müssen Sie Tastatur-Event-Listener mit Steuerelementen verbinden. Machen Sie Nutzer auf die verfügbaren Tastenkürzel aufmerksam, indem Sie sie auf der Optionsseite angeben.
Barrierefreie Inhalte bereitstellen
Barrierefreie Inhalte sind für alle Nutzer wichtig. Viele der folgenden Richtlinien kommen Ihnen vielleicht bekannt vor, da sie Best Practices für alle Webinhalte widerspiegeln.
Text
Die Auswahl der Schriftart und die Textgröße wirken sich auf die Lesbarkeit der Inhalte einer Erweiterung aus. Nutzer mit Sehbeeinträchtigungen 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 Zoom-Tastenkombinationen in Konflikt geraten.
Als Indikator für die Flexibilität der Benutzeroberfläche einer Erweiterung können Sie den 200‑%‑Test anwenden. Ist die Erweiterung immer 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 Font API. Webfonts können auf verschiedene Größen skaliert werden und sind für Nutzer von Screenreadern zugänglich.
Farben
Zwischen der Hintergrundfarbe und der Textfarbe in einer Erweiterung sollte ein ausreichender Kontrast bestehen. Verwenden Sie ein Tool zur Kontrastprüfung, um zu testen, ob die Hintergrund- und Vordergrundfarben einen angemessenen Kontrast bieten.
Prüfen Sie beim Bewerten des Kontrasts, ob jeder Teil der Erweiterung, der auf Grafiken zur Vermittlung von Informationen angewiesen ist, deutlich sichtbar ist. Für bestimmte Bilder können Sie Tools wie Coblis – Color Blindness Simulator verwenden, um zu sehen, wie ein Bild bei verschiedenen Formen von Farbsehschwäche 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 auf Ton oder Video angewiesen ist, um Informationen zu vermitteln, müssen Untertitel oder ein Transkript verfügbar sein. Weitere Informationen zu Untertiteln finden Sie in den Richtlinien für beschriebene und untertitelte Medienprogramme.
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 den Inhalt des Bildes wörtlich zu beschreiben. Abstandshalterbilder 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 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 richtigen Alt-Text.
Weitere Informationen
Weitere Informationen zu den Bedienungshilfen in Chrome finden Sie auf dem A11ycasts und in der technischen Dokumentation zu den Chromium-Bedienungshilfen.