Haben Sie sich schon einmal gefragt, wie Hilfstechnologien wie ein Screenreader wissen, was sie den Nutzern mitteilen sollen? Die Antwort ist, dass diese Technologien darauf angewiesen sind, dass Entwickler ihre Seiten mit semantischem HTML-Code auszeichnen. Aber was ist Semantik und wie wird sie von Screenreadern genutzt?
Erschwinglichkeit und Semantik
Bevor wir uns mit der Semantik befassen, ist es hilfreich, einen anderen Begriff zu verstehen: Angebote. Ein Angebot 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. Ihr physisches Design vermittelt dem Nutzer lediglich, wie die Teekanne zu bedienen ist. Es hat einen Handle, und da Sie andere Objekte auf der Welt mit ähnlichen Ziehpunkten gesehen haben, können Sie daraus ableiten, wie Sie ihn erfassen und bedienen sollten.
Wenn wir grafische Benutzeroberflächen erstellen, nutzen wir z. B. CSS, um unserer UI visuelle Angebote hinzuzufügen. Sie können einer Schaltfläche beispielsweise einen Schlagschatten und einen Rahmen zuweisen, sodass sie einer Schaltfläche in der realen Welt ähnelt.
Wenn ein Nutzer den Bildschirm jedoch nicht sehen kann, werden ihm diese visuellen Angebote nicht vermittelt. Daher muss Ihre Benutzeroberfläche so aufgebaut sein, dass diese Vorteile auch für Hilfstechnologien genutzt werden können. Diese nicht visuelle Darstellung der Angebote eines UI-Elements wird als Semantik bezeichnet.
Semantisches HTML verwenden
Am einfachsten lässt sich die richtige Semantik mit semantisch umfangreichen HTML-Elementen vermitteln.
Mit CSS können Sie die Elemente <div> und <button> so gestalten, dass sie dieselben visuellen Angebote bieten. Bei Verwendung eines Screenreaders unterscheiden sich die beiden Elemente jedoch stark.
Ein <div> ist nur ein allgemeines Gruppierungselement, daher liest ein Screenreader nur den Textinhalt von <div> vor.
Die <button> wird als „Schaltfläche“ angesagt. Dadurch wird dem Nutzer ein viel stärkeres Signal dafür gesendet, dass er damit interagieren kann.
Die einfachste und häufig beste Lösung für dieses Problem besteht darin, benutzerdefinierte interaktive Steuerelemente komplett zu vermeiden.
Ersetzen Sie beispielsweise einen <div>, der wie eine Schaltfläche funktioniert, durch einen tatsächlichen <button>-Wert.
Semantische Eigenschaften und Baum für Barrierefreiheit
Im Allgemeinen hat jedes HTML-Element einige der folgenden semantischen Eigenschaften:
- Rolle oder Typ
- Einen Namen
- Einen Wert (optional)
- Einen state (optional)
Die role eines Elements beschreibt seinen Typ, z. B. „button“, „input“ oder einfach „group“ für Elemente wie div- und span-Elemente.
Der name eines Elements ist sein berechnetes Label. Screenreader nennen in der Regel den Namen eines Elements, gefolgt von seiner Rolle, z.B. „Schaltfläche Anmelden“. Beim Algorithmus, der den Namen eines Elements bestimmt, wird unter anderem berücksichtigt, ob das Element Text enthält, ob es Attribute wie title oder placeholder enthält, ob das Element mit einem tatsächlichen <label>-Element verknüpft ist oder ob das Element ARIA-Attribute wie aria-label und aria-labelledby hat.
Einige Elemente können einen Wert haben. Beispielsweise kann <input type="text"> einen Wert enthalten, der dem entspricht, was der Nutzer in das Textfeld eingegeben hat.
Einige Elemente können auch einen state haben, der ihren aktuellen Status angibt.
Ein <select>-Element kann beispielsweise entweder maximiert oder minimiert sein, je nachdem, ob es geöffnet oder geschlossen ist.
Baum für Barrierefreiheit
Der Browser ermittelt für jeden Knoten im DOM, ob der Knoten semantisch "interessant" ist, und fügt ihn der Struktur für Barrierefreiheit hinzu. Wenn Hilfstechnologien wie ein Screenreader dem Nutzer eine alternative Benutzeroberfläche bieten, geschieht dies oft über diesen Baum für Barrierefreiheit.
Mit den Entwicklertools von Chrome können Sie die semantischen Eigenschaften eines Elements prüfen und seine Position in der Baumstruktur für Barrierefreiheit untersuchen.
Weitere Informationen
Wenn Sie sich mit Semantik und der Navigation durch Screenreader vertraut gemacht haben, müssen Sie sich die Seiten anders ansehen. Im nächsten Abschnitt befassen wir uns damit, wie der gesamte Umriss einer Seite mithilfe effektiver Überschriften und Orientierungspunkte vermittelt werden kann.