Haben Sie sich jemals gefragt, wie Hilfstechnologien wie Screenreader wissen, was sie Nutzern mitteilen 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, einen weiteren Begriff zu verstehen: Affordanzen. Eine Affordanz 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 wird dem Nutzer durch das physische Design vermittelt, wie sie 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 unter anderem CSS, um der 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.
Wenn ein Nutzer den Bildschirm jedoch nicht sehen kann, werden ihm diese visuellen Hinweise nicht vermittelt. Daher müssen Sie dafür sorgen, dass Ihre Benutzeroberfläche so aufgebaut ist, dass diese Funktionen auch für assistive Technologien verfügbar sind. Diese nicht visuelle Darstellung der Affordanzen eines UI-Elements wird als Semantik bezeichnet.
Semantisches HTML verwenden
Die einfachste Möglichkeit, die richtige Semantik zu vermitteln, ist die Verwendung semantisch aussagekräftiger HTML-Elemente.
Mit CSS ist es möglich, die Elemente <div> und <button> so zu gestalten, dass sie dieselben visuellen Hinweise geben. Die beiden Elemente sind jedoch sehr unterschiedlich, wenn ein Screenreader verwendet wird.
Ein <div> ist nur ein generisches Gruppierungselement. Ein Screenreader liest daher nur den Textinhalt des <div> vor.
Die <button> wird als „Schaltfläche“ angekündigt, was für den Nutzer ein viel stärkeres Signal dafür ist, dass er damit interagieren kann.
Die einfachste und oft beste Lösung für dieses Problem ist, 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 (erweitert) 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 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 Überschriften und Orientierungspunkten vermittelt werden kann.