Erweiterung barrierefrei machen

Für viele Nutzer ist Barrierefreiheit buchstäblich die Benutzeroberfläche und ihre Funktionen können oft für diejenigen nützlich sein, die sie nicht als primäres Mittel zur Interaktion mit der 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.

Wie bereits erwähnt, ist dies jedoch nur das Minimum. Weitere Techniken werden im Folgenden beschrieben.

Es gibt verschiedene Möglichkeiten, die Barrierefreiheit zu implementieren. Am einfachsten ist es jedoch, ein Standard-HTML-Steuerelement zu verwenden, insbesondere die Eingabeelemente. In der folgenden Abbildung sehen Sie diese Steuerelemente.

<ph type="x-smartling-placeholder">
</ph> 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, Auswählen/Option und Link

Um andere Elemente zugänglich zu machen, verwenden Sie ARIA. 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 wird durch Festlegen des tabIndex-Attributs für ein HTML-Element der Tastaturfokus aktiviert. Beispiel:

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

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