Erweiterung barrierefrei machen

Für viele Nutzer ist Barrierefreiheit im wahrsten Sinne des Wortes die Benutzeroberfläche. Die entsprechenden Funktionen sind oft nützlich für diejenigen, die keine Barrierefreiheit als primäres Mittel zur Interaktion mit Ihrer Erweiterung benötigen. Die Techniken sind vielfältig. Zumindest sollte der Text einen hohen Kontrast haben. Videos sollten mit Untertiteln versehen werden. Bilder sollten alt-Attribute enthalten.

Aber wie gesagt ist dies nur das Minimum. Weitere Verfahren werden im Folgenden beschrieben.

Es gibt verschiedene Möglichkeiten, Bedienungshilfen zu implementieren, aber die einfachste Möglichkeit ist die Verwendung eines Standard-HTML-Steuerelements, insbesondere der Eingabeelemente. In der folgenden Abbildung sehen Sie diese Steuerelemente.

Screenshots und Code für Schaltfläche, Kästchen, Optionsfeld, Text, Auswahl/Option und Link
Screenshots und Code für Schaltfläche, Kästchen, Optionsfeld, Text, Auswahl/Option und Link.

Verwenden Sie ARIA-Attribute, um andere Elemente barrierefrei zu machen. Diese Attribute liefern dem Screenreader Informationen über die Funktion und den aktuellen Status der Steuerelemente auf einer Webseite. Hier ein Beispiel:

<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>

Standardmäßig sind die einzigen Elemente im HTML-DOM, die Tastaturfokus erhalten können, Anker, Schaltflächen und Formularsteuerelemente. Glücklicherweise kann das Attribut tabIndex für ein HTML-Element festgelegt werden, damit es Tastaturfokus erhält. Beispiel:

<div tabindex="0">I can receive focus with the tab key.</div>

Anleitungen zur Implementierung dieser und anderer Techniken finden Sie unter Barrierefreiheit im Internet.