Haben Sie sich schon einmal gefragt, wie Hilfstechnologien wie Screenreader wissen, was sie Nutzern ansagen sollen? Die Antwort ist, dass diese Technologien darauf angewiesen sind, dass Entwickler ihre Seiten mit semantischer HTML-Markup versehen. Aber was sind Semantik und wie werden sie von Screenreadern verwendet?
Angebote und Semantik
Bevor wir uns mit der Semantik befassen, ist es hilfreich, einen weiteren Begriff zu verstehen: Affordances. Eine Aufforderung ist ein Objekt, das Nutzern die Möglichkeit bietet, eine Aktion auszuführen. Ein klassisches Beispiel ist die Teekanne:
Für diese Teekanne ist keine Bedienungsanleitung erforderlich. Stattdessen vermittelt ihr physisches Design dem Nutzer, wie sie funktioniert. Es hat einen Griff und da Sie schon andere Objekte mit ähnlichen Griffen gesehen haben, können Sie daraus schließen, wie Sie es in die Hand nehmen und bedienen sollten.
Wenn wir grafische Benutzeroberflächen erstellen, verwenden wir beispielsweise CSS, um unserer Benutzeroberfläche visuelle Designelemente hinzuzufügen. Sie können einer Schaltfläche beispielsweise einen Schatten und einen Rahmen hinzufügen, damit sie wie eine echte Schaltfläche aussieht.
Wenn ein Nutzer den Bildschirm jedoch nicht sehen kann, werden ihm diese visuellen Angebote nicht vermittelt. Daher müssen Sie dafür sorgen, dass Ihre Benutzeroberfläche so gestaltet ist, dass dieseselben Angebote auch für Hilfstechnologien gelten. Diese nicht visuelle Präsentation der Angebotselemente eines UI-Elements wird als Semantik bezeichnet.
Semantische HTML-Elemente verwenden
Die einfachste Möglichkeit, die richtige Semantik zu vermitteln, besteht darin, semantisch reiche HTML-Elemente zu verwenden.
Mit CSS können Sie die <div>- und <button>-Elemente so stylen, dass sie dieselben visuellen Angebote bieten. Bei der Verwendung eines Screenreaders unterscheiden sich die beiden Elemente jedoch stark.
Ein <div> ist nur ein allgemeines Gruppierungselement. Daher liest ein Screenreader nur den Textinhalt des <div> vor.
Die <button> wird als „Schaltfläche“ angekündigt, was dem Nutzer deutlicher signalisiert, dass er damit interagieren kann.
Die einfachste und oft beste Lösung für dieses Problem besteht darin, benutzerdefinierte interaktive Steuerelemente vollständig zu vermeiden.
Ersetzen Sie beispielsweise ein <div>, das wie eine Schaltfläche funktioniert, durch eine echte <button>.
Semantische Eigenschaften und der Baum für Barrierefreiheit
Im Allgemeinen hat jedes HTML-Element einige der folgenden semantischen Eigenschaften:
- Eine Rolle oder ein Typ
- einen Namen
- Einen Wert (optional)
- Status (optional)
Die Rolle eines Elements beschreibt seinen Typ, z. B. „Schaltfläche“, „Eingabe“ oder einfach nur „Gruppe“ für Elemente wie div- und span-Elemente.
Der Name eines Elements ist sein berechnetes Label. Screenreader geben in der Regel den Namen eines Elements gefolgt von seiner Rolle an, z.B. „Registrieren, Schaltfläche“. Der Algorithmus, der den Namen eines Elements bestimmt, berücksichtigt unter anderem, ob sich im Element Textinhalte befinden, ob es Attribute wie title oder placeholder hat, ob es mit einem tatsächlichen <label>-Element verknüpft ist und ob es ARIA-Attribute wie aria-label und aria-labelledby hat.
Einige Elemente können einen Wert haben. <input type="text"> kann beispielsweise einen Wert haben, der dem entspricht, was der Nutzer in das Textfeld eingegeben hat.
Einige Elemente können auch einen Status haben, der ihren aktuellen Status vermittelt.
Ein <select>-Element kann beispielsweise den Status ausgeblendet oder ausgeklappt haben, je nachdem, ob es geöffnet oder geschlossen ist.
Die Baumansicht für Barrierefreiheit
Für jeden Knoten im DOM bestimmt der Browser, ob der Knoten semantisch „interessant“ ist, und fügt ihn dem Zugänglichkeitsbaum hinzu. Wenn Hilfstechnologien wie Screenreader Nutzern eine alternative Benutzeroberfläche bieten, geschieht dies häufig durch das Durchlaufen dieses Bedienungshilfen-Baums.
Mit den Chrome-Entwicklertools können Sie die semantischen Eigenschaften eines Elements prüfen und seine Position im Bedienungshilfen-Baum untersuchen.
Nächste Schritte
Sobald Sie etwas über die Semantik und ihre Bedeutung für die Navigation mit Screenreadern wissen, werden Sie die von Ihnen erstellten Seiten mit anderen Augen sehen. Im nächsten Abschnitt gehen wir einen Schritt zurück und sehen uns an, wie der gesamte Überblick einer Seite mithilfe effektiver Überschriften und Markierungen vermittelt werden kann.