Haben Sie sich schon einmal gefragt, wie Hilfstechnologien wie ein Display Leser, weiß, was sie den Nutzenden sagen soll. Die Antwort ist, dass diese Technologien müssen Entwickler ihre Seiten mit semantischem HTML auszeichnen. Aber was sind Semantik und wie werden sie von Screenreadern genutzt?
Angebote und Semantik
Bevor wir uns mit der Semantik befassen, ist es hilfreich, einen weiteren Begriff zu verstehen: Angebote. Ein Angebot ist ein Objekt, das seine Nutzenden eine Aktion ausführen können. Ein klassisches Beispiel ist die Teekanne:
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Für diese Teekanne ist keine Bedienungsanleitung erforderlich. Stattdessen ist das physische Design vermittelt dem Nutzenden, wie es zu bedienen ist. Es hat einen Alias andere Objekte mit ähnlichen Griffen gesehen hast, kannst du daraus ableiten, sollten Sie es abholen und bedienen.
Wenn wir grafische Benutzeroberflächen erstellen, fügen wir mithilfe von CSS visuelle Angebote auf unserer Benutzeroberfläche. Sie können einer Schaltfläche beispielsweise einen Schlagschatten so gestaltet, dass er einer echten Schaltfläche in der realen Welt ähnelt.
Wenn Nutzende den Bildschirm jedoch nicht sehen können, sind diese optischen Angebote nicht übermittelt werden. Daher müssen Sie sicherstellen, dass Ihre Benutzeroberfläche wurden so konstruiert, dass sie die gleichen Vorteile Technologie. Diese nicht visuelle Darstellung der Angebote eines UI-Elements wird als dessen Semantik.
Semantisches HTML verwenden
Die einfachste Methode, die richtige Semantik zu vermitteln, ist die Verwendung von semantisch umfangreichem HTML-Code. Elemente.
Mit CSS ist es möglich,
um die Elemente <div> und <button> so zu gestalten, dass sie dieselben visuellen Angebote vermitteln.
aber bei der Nutzung eines Screenreaders
sind die beiden Funktionen sehr unterschiedlich.
Ein <div> ist nur ein generisches Gruppierungselement.
Ein Screenreader liest also nur den Textinhalt von <div> vor.
<button> wird als „Schaltfläche“ vorgelesen
ein viel stärkeres Signal für die Nutzenden,
dass sie damit interagieren können.
Die einfachste
und oft die beste Lösung für dieses Problem
auf benutzerdefinierte interaktive Steuerelemente verzichten.
Sie können z. B. ein <div>-Element ersetzen, das wie eine Schaltfläche funktioniert.
durch einen tatsächlichen <button>.
Semantische Eigenschaften und der Baum für Barrierefreiheit
Grundsätzlich weist jedes HTML-Element einige der folgenden semantischen Merkmale auf: Eigenschaften:
- Eine Rolle oder einen Typ
- Einen Namen
- Wert (optional)
- Einen Bundesstaat (optional)
Die Rolle eines Elements beschreibt seinen Typ, zum Beispiel "Schaltfläche", „Eingabe“ oder auch nur
"gruppe" für Dinge wie div- und span-Elemente.
Der Name eines Elements ist das berechnete Label. Screenreader melden in der Regel
den Namen eines Elements gefolgt von seiner Rolle, z.B. „Registrieren“ Der Algorithmus
bestimmt der Name eines Elements, z. B. ob Text
Inhalt im Element, unabhängig davon, ob er Attribute wie title hat
oder placeholder, unabhängig davon, ob das Element mit einem tatsächlichen
<label> und wenn das Element ARIA-Attribute wie
aria-label und aria-labelledby.
Einige Elemente können einen Wert haben. Zum Beispiel kann <input type="text">
einen Wert haben, der die vom Nutzer in das Textfeld eingegebenen Daten wiedergibt.
Einige Elemente können auch einen Status haben, der ihren aktuellen Status angibt.
Ein <select>-Element kann sich z. B. entweder im maximierten oder im
minimiert, je nachdem, ob er geöffnet oder geschlossen ist.
Baum für Barrierefreiheit
Der Browser bestimmt für jeden Knoten im DOM, ob der Knoten ist semantisch „interessant“ und fügt es zur Barrierefreiheit Tree Wenn assistive Technologien wie ein Screenreader eine alternative Benutzeroberfläche bereitstellen geht es oft mit diesem Baum für Barrierefreiheit um.
Mit den Entwicklertools von Chrome können Sie die Semantik eines Elements Properties und ihre Position im Baum für Barrierefreiheit untersuchen.
Nächste Schritte
Sobald Sie etwas über die Semantik und ihre Unterstützung bei der Navigation von Screenreadern wissen, müssen Sie sich die Seiten ansehen, die Sie anders erstellen. Im nächsten Abschnitt gehen wir einen Schritt zurück und überlegen, wie der gesamte Umriss einer Seite mithilfe effektiver Überschriften und Orientierungspunkte vermittelt werden.