Haben Sie sich schon einmal gefragt, wie Hilfstechnologien wie Screenreader wissen, was sie Nutzern ansagen sollen? Die Antwort ist, dass diese Technologien darauf beruhen, dass Entwickler ihre Seiten mit semantischem HTML auszeichnen. Aber was ist Semantik und wie wird sie von Screenreadern verwendet?
Affordanzen und Semantik
Bevor wir uns mit der Semantik befassen, ist es hilfreich, die Affordanzen zu verstehen. Eine Affordance ist ein beliebiges Objekt, das dem Nutzer die Möglichkeit bietet, eine Aktion auszuführen. Ein klassisches Beispiel ist die Teekanne:
Für diese Teekanne ist keine Bedienungsanleitung erforderlich. Stattdessen vermittelt das physische Design dem Nutzer, wie das Gerät bedient werden soll. Es hat einen Griff und da Sie andere Objekte in der Welt mit ähnlichen Griffen gesehen haben, können Sie ableiten, wie Sie es aufheben und bedienen sollten.
Wenn wir grafische Benutzeroberflächen erstellen, verwenden wir CSS, um unserer Benutzeroberfläche visuelle Affordanzen hinzuzufügen. Sie können einer Schaltfläche beispielsweise einen Schlagschatten und einen Rahmen geben, damit sie wie eine echte Schaltfläche aussieht.
Für Nutzer, die den Bildschirm nicht sehen können, sind diese visuellen Hinweise jedoch nicht verfügbar. Sie müssen daher dafür sorgen, dass Ihre Benutzeroberfläche so aufgebaut ist, dass diese Affordanzen auch für unterstützende Technologien erkennbar sind. Diese nicht visuelle Darstellung der Affordanzen eines UI-Elements wird als Semantik bezeichnet.
Semantisches HTML schreiben
Die einfachste Möglichkeit, die richtige Semantik zu vermitteln, ist die Verwendung von semantisch reichhaltigen HTML-Elementen.
Mit CSS ist es möglich, die Elemente <div> und <button> so zu gestalten, dass sie dieselben visuellen Affordanzen vermitteln. Die beiden Elemente sind jedoch sehr unterschiedlich, wenn ein Screenreader verwendet wird. Ein <div> ist nur ein generisches Gruppierungselement. Ein Screenreader gibt daher nur den Textinhalt des <div> aus.
Die <button> wird als „Schaltfläche“ angekündigt, was für den Nutzer ein viel stärkeres Signal ist, dass er damit interagieren kann.
Oft ist es am besten, benutzerdefinierte interaktive Steuerelemente ganz zu vermeiden. Ersetzen Sie beispielsweise ein <div>, das wie eine Schaltfläche funktioniert, durch ein tatsächliches <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
- Ein Wert (optional)
- Bundesstaat (optional)
Die Rolle eines Elements beschreibt seinen Typ, z. B. „Schaltfläche“, „Eingabe“ oder auch nur „Gruppe“ für Elemente wie div und span.
Der Name eines Elements ist sein berechnetes Label. Screenreader lesen in der Regel den Namen eines Elements gefolgt von seiner Rolle vor, z. B. „Registrieren, Schaltfläche“. Der Algorithmus, der den Namen eines Elements bestimmt, berücksichtigt unter anderem, ob das Element Textinhalte enthält, ob es Attribute wie title oder placeholder hat, ob das Element mit einem tatsächlichen <label>-Element verknüpft ist und ob das Element 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 angibt.
Ein <select>-Element kann sich beispielsweise im Status expanded (maximiert) oder collapsed (minimiert) befinden, je nachdem, ob es geöffnet oder geschlossen ist.
Baumansicht für Barrierefreiheit
Für jeden Knoten im DOM ermittelt der Browser, ob der Knoten semantisch „interessant“ ist, und fügt ihn dem Barrierefreiheitsbaum hinzu. Wenn eine Hilfstechnologie wie ein Screenreader dem Nutzer eine alternative Benutzeroberfläche zur Verfügung stellt, geschieht dies häufig durch das Durchlaufen dieses Barrierefreiheitsbaums.
Mit den Chrome-Entwicklertools können Sie die semantischen Eigenschaften eines Elements untersuchen und seine Position im Barrierefreiheitsbaum ansehen.
Nächste Schritte
Wenn Sie sich mit Semantik und der Unterstützung der Screenreader-Navigation durch Semantik vertraut gemacht haben, werden Sie die von Ihnen erstellten Seiten mit anderen Augen sehen. Im nächsten Abschnitt sehen wir uns an, wie die gesamte Struktur einer Seite mithilfe von effektiven Überschriften und Orientierungspunkten vermittelt werden kann.