Die Rolle der Semantik bei der Seitennavigation
Sie haben etwas über Angebote, die Semantik und die Nutzung von Hilfstechnologien gelernt. den Baum für Barrierefreiheit, um eine alternative User Experience für ihre Nutzenden zu schaffen. Wie Sie sehen, bietet das Schreiben ausdrucksstarker, semantischer HTML-Elemente viele mit wenig Aufwand zugänglich zu machen, da viele Standardelemente sowohl die Semantik und unterstützendes Verhalten integriert.
In dieser Lektion geht es um weniger offensichtliche Semantik, die sehr wichtig ist, Screenreader-Nutzenden, insbesondere die Navigation. Auf einer einfachen Seite mit Steuerelemente, aber wenig Inhalt hat, lässt sich die Seite leicht durchsuchen. die Sie brauchen. Aber auf Seiten mit vielen Inhalten, z. B. in einem Wikipedia-Eintrag oder in einem Nachrichten, Es ist nicht praktikabel, alles von oben nach unten zu lesen. ich brauchen eine Möglichkeit, effizient durch die Inhalte zu navigieren.
Entwickler glauben oft, dass Screenreader mühsam und langsam sind. oder dass alles auf dem Bildschirm für den Bildschirm fokussierbar sein muss, um sie zu finden. Das ist oft nicht der Fall.
Nutzer von Screenreadern nutzen häufig eine Liste von Überschriften, um Informationen zu finden. Meiste haben Screenreader einfache Möglichkeiten, eine Liste von Seitenüberschriften zu isolieren und zu scannen. wichtige Funktion namens Rotor. Sehen wir uns an, wie wir HTML-Überschriften um diese Funktion effektiv zu unterstützen.
Überschriften effektiv verwenden
Wiederholen wir zunächst einen früheren Punkt: DOM-Reihenfolge ist wichtig, nicht nur für sondern für die Screenreader-Reihenfolge. Wenn Sie mit Screenreadern experimentieren wie VoiceOver, NVDA, JAWS und ChromeVox, folgt die Überschriftenliste nicht die visuelle Reihenfolge, sondern die DOM-Reihenfolge.
Dies gilt allgemein für Screenreader. Da Screenreader und der Baum für Barrierefreiheit basiert auf dem DOM-Baum, dem Reihenfolge, die ein Screenreader wahrnimmt, basiert also direkt auf der DOM-Reihenfolge. Dieses bedeutet, dass eine angemessene Überschriftenstruktur wichtiger denn je ist.
Auf den meisten gut strukturierten Seiten sind die Überschriftenebenen verschachtelt, hierarchische Beziehungen zwischen Inhaltsblöcken. Das WebAIM „Checkliste“ wiederholt darauf, .
- 1.3.1 erwähnt: „Mit semantischem Markup werden Überschriften gekennzeichnet.“
- 2.4.1 und erwähnt die Überschriftenstruktur als Technik zur Umgehung von Inhalt
- 2.4.6 werden einige Details zum Schreiben nützlicher Überschriften erläutert.
- 2.4.10 „einzelne Inhaltsbereiche werden mithilfe von Überschriften gegebenenfalls“
Nicht alle Überschriften müssen auf dem Bildschirm sichtbar sein. Wikipedia verwendet zum Beispiel eine Technik, einige Überschriften bewusst nicht aus dem Bildschirm, um sie nur für Screenreader und andere Hilfstechnologien zugänglich sind.
<style>
.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
</style>
<h2 class="sr-only">This heading is offscreen.</h2>
Bei komplexen Anwendungen kann dies eine gute Möglichkeit sein, das visuelle Design keinen Platz für eine sichtbare Überschrift benötigt oder nicht.
Andere Navigationsoptionen
Obwohl Seiten mit guten Überschriften den Nutzenden bei der Navigation helfen, gibt es andere Elemente, die sie zum Navigieren auf einer Seite verwenden können, darunter Links, Formulare Steuerelemente und Markierungen.
Leser können die Rotorfunktion des Screenreaders verwenden. Damit lassen sich Liste von Seitenüberschriften scannen, um auf eine Liste mit Links auf der Seite zuzugreifen. Manchmal gibt es, wie in einem Wiki, viele Links, sodass die Lesenden in den Links einfügen. Dadurch werden die Treffer auf Links beschränkt, die und nicht jede Stelle auf der Seite.
Diese Funktion ist nur nützlich, wenn der Screenreader die Links und den Link finden kann. Text aussagekräftig ist. Hier sind einige gängige Muster, die Links schwer zu finden sind.
- Anchor-Tags ohne
href-Attribute. Häufig in Einzelseiten verwendet führen diese Linkziele zu Problemen bei Screenreadern. Sie können Weitere Informationen zu Apps mit nur einer Seite - Schaltflächen, die mit Links implementiert sind. Diese führen dazu, dass der Screenreader den Inhalt als Link interpretieren und die Schaltflächenfunktionalität geht verloren. Für ersetzen Sie das Anchor-Tag durch eine echte Schaltfläche und angemessen.
- Bilder, die als Linkinhalte verwendet werden. Manchmal können verlinkte Bilder
für Screenreader unbrauchbar. Um sicherzustellen, dass der Link
Hilfstechnologien verwenden, achten Sie darauf, dass das Bild
alt-Attributtext hat.
Ein weiterer Fehler ist ein schlechter Linktext. Anklickbarer Text wie „Weitere Informationen“ oder „Klicken Sie hier“, hier“ enthält keine semantischen Informationen darüber, wohin der Link führt. Verwenden Sie stattdessen beschreibenden Text wie „Weitere Informationen zum responsiven Design“ oder „Diese Leinwand ansehen“ Anleitung“ damit Screenreader sinnvollen Kontext zu Links liefern können.
Der Rotor kann auch eine Formularkontrollliste abrufen. Mit dieser Liste können Leser nach bestimmten Elementen suchen und sie direkt aufrufen.
Ein häufig auftretender Fehler, den Screenreader ausführen, ist die Aussprache. Zum Beispiel kann ein Bildschirm Leser könnten „Udacity“ aussprechen oder lesen Sie eine Telefonnummer große Ganzzahl oder lesen Sie Großbuchstaben wie ein Akronym. Interessanterweise sind Nutzer von Screenreadern an diese Macken gewöhnt und nehmen sie Kaufbereitschaft zeigen.
Einige Entwickler versuchen, dieses Problem zu lösen, indem sie Screenreader der phonetisch buchstabiert wird. Hier ist eine einfache Regel für die Lautschrift: Tun es nicht; macht das das Problem nur noch schlimmer! Wenn Nutzende zum Beispiel wird das Wort falsch geschrieben, was zu weiteren Verwirrung stiften. Mit Screenreadern können Wörter laut gesprochen werden. die Nutzung selbst steuern und entscheiden, wann dies notwendig ist.
Mit dem Rotor können Leser eine Liste der Markierungen anzeigen. Diese Liste hilft Lesern, den Hauptinhalt und eine Reihe von Orientierungspunkten zur Navigation, die von HTML bereitgestellt werden, zu finden Sehenswürdigkeitenelemente.
Mit HTML5 wurden einige neue Elemente eingeführt, die bei der Definition der semantischen Struktur von
die Seite, einschließlich header, footer, nav, article, section, main und
aside Diese Elemente geben speziell strukturelle Hinweise auf der Seite an.
ohne integrierte Stile zu erzwingen (was Sie auch mit CSS tun sollten).
Semantische Strukturelemente ersetzen mehrere, sich wiederholende div-Blöcke und
bieten eine klarere und beschreibendere Möglichkeit, die Seitenstruktur intuitiv auszudrücken.
für Autoren und Leser.