Share
Die HTML-Spezifikation beschreibt sechs Überschriftenelemente: h1, h2, h3, h4, h5, und h6. Die Nummer in jedem dieser Überschriftenelemente gibt seine Priorität mit an h1 das allgemeinste und h6 das spezifischste.
Dies ist eine wichtige Sache zu wissen! WebAIMs Screen Reader-Umfrage aus dem Jahr 2017 besagt, dass die Navigation über Überschriften die wichtigste Möglichkeit ist, um Personen, die auf assistive Technologie angewiesen sind, Informationen zu finden. Aus diesem Grund ist es wichtig, die Überschriften Ihrer Website richtig zu erstellen.
Dieses Tutorial ist Teil von Web Accessibility: der Complete Learning Guide, in dem wir eine Reihe von Tutorials, Artikeln, Kursen und E-Books zusammengestellt haben, um Ihnen das Verständnis der Web-Zugänglichkeit von Anfang an zu erleichtern.
Bevor wir uns näher mit der Funktionsweise der assistiven Technologie beschäftigen, gibt es einen Grund, warum unsere Printmedien Dinge wie Kapitel, Abschnitte und Unterabschnitte sowie Szenenumbrüche verwenden. Das Aufteilen von Inhalten in Abschnitte erleichtert das Verständnis, das Verdauen, das Speichern und das Nachschlagen.
Teile des Inhalts von der Zeitung The GuardianDas Web ist zwar nicht gedruckt, leiht sich jedoch alles Gute aus den it-HTML-Überschriftenelementen aus und entspricht diesen Druckkonventionen. Es ist eines dieser Dinge, die jeder als selbstverständlich ansieht, aber es hilft einer Menge Menschen. Kognitive Bedenken sind weit verbreitet und überwiegen jede andere Form von Behinderung. Das Gruppieren von Inhalten in logische Brocken hilft jedem, von Menschen mit einer biologischen Erkrankung wie Demenz bis hin zu Menschen, die an einer Situationsstörung wie Schlafmangel leiden oder eine völlig neue Fähigkeit erlernen.
Bestimmte Arten von unterstützender Technologie (einschließlich, aber nicht beschränkt auf Bildschirmlesegeräte) ermöglichen es den Benutzern, von einer Seite zur nächsten zu springen. Es ist das Äquivalent dessen, was Leute, die keine assistive Technologie verwenden, jeden Tag tun, auf einer Seite herumblättern, um den Hauptinhalt zu ermitteln, und aufhören, wenn sie die gewünschten Informationen finden.
Einige Hilfstechnologien können diese Überschriften in eine geordnete Liste umwandeln. Diese Liste kann verwendet werden, um die allgemeine Bedeutung der Seite schnell zu ermitteln.
Erzeugte Liste der Überschriften auf der Wikipedia-SeiteWenn Sie keine logische Reihenfolge beibehalten (beispielsweise von Überschriftenebene 1 zu Überschriftenebene 3), ohne zwischen zwei Überschriftenebenen zu deklarieren, kann dies zu einer möglicherweise verwirrenden, auf jeden Fall störenden Erfahrung für die Person führen, die sich auf die Überschriften für die Navigation stützt. Diese Lücke in der logischen Reihenfolge belastet den Benutzer und zwingt ihn, andere, zeit- und müheintensive Methoden zu verwenden, um die Logik zur Gesamtseitenstruktur (falls vorhanden) zu bestimmen und ob der Inhalt, den sie benötigen, tatsächlich ist auf der Seite vorhanden.
Eine weitere wichtige Sache, die wir tun können, ist sicherzustellen, dass es nur etwas gibt ein Überschrift der ersten Ebene pro Seite. Diese Überschrift sollte den Hauptinhalt des Inhalts der Seite beschreiben. Beispielsweise könnte eine Seite über die Geschichte des französischen Gebäcks eine Überschrift der ersten Ebene wie folgt enthalten:
Die Geschichte des französischen Gebäcks
…
Leider gibt es ein Missverständnis, dass Sie Überschriften der ersten Ebene für den Anfang jedes Inhaltssektionselements auf einer Seite verwenden können, indem Sie darauf vertrauen, dass der Browser den Rest mithilfe des Document Outline Algorithm herausfindet. Dieser Algorithmus ist eine spekulative Fiktion - zum Zeitpunkt der Veröffentlichung dieses Artikels wurde er noch nicht implementiert irgendein Browser. Aus diesem Grund müssen wir die Priorität der Wahlkreise einhalten und die anderen Überschriftenelemente verwenden.
Überschriften der Ebenen zwei bis sechs sollten der Überschrift der ersten Ebene folgen und in einer sequentiellen Reihenfolge verfasst werden, in der die wichtigsten Punkte des Inhalts der Seite beschrieben werden.
Dies ist beispielsweise die Überschriftenstruktur für diesen Artikel:
Wenn Sie diese Liste durchlesen, können Sie schnell feststellen, worum es in diesem Artikel geht. Ziemlich ordentlich, huh?
Die andere Sache, die hervorgehoben werden sollte, ist, dass Überschriften - ähnlich wie hierarchische Formate wie JSON - in andere Überschriften geschachtelt werden können, sofern sie logisch ablaufen. Innerhalb einer Überschrift der zweiten Ebene können Sie mehrere Überschriften der dritten Ebene verwenden. Jede dieser Unterüberschriften kann wiederum verschachtelte Unterüberschriften der vierten Ebene haben.
Wenn Sie mit einem Thema fertig sind, können Sie die geschachtelten Überschriften schließen. Dies ist der einzige Ort, an dem das Überspringen von Überschriftenebenen akzeptabel ist. Sie sind damit fertig, ein bestimmtes Konzept zu besprechen und zu einem allgemeineren Thema zurückzukehren.
Accentsconagua
h1 Die Geschichte des französischen Gebäcksh2 Wichtige Momenteh3 Das 16. Jahrhunderth4 Blätterteigh4 Oubliesh3 Das 17. Jahrhunderth4 Blätterteiggebäckh4 Schlagsahneh5 Der Chef von Condéh3 Das 18. Jahrhunderth4 Macaronsh3 Das 19. Jahrhunderth3 Das 20. Jahrhunderth2 Wichtige Leuteh3… Dieses Beispiel zeigt, wie es zulässig ist, eine Überschrift der fünften Ebene (Chef des Prinzen von Condé) gefolgt von einer Überschrift der dritten Stufe (Das 18. Jahrhundert) zu haben, sofern die übergeordneten Überschriften in aufeinanderfolgender Reihenfolge sind. Wenn der Überschrift der fünften Stufe eine Überschrift der dritten Ebene vorangestellt wäre, wäre diese ungültig.
Die Verwendung zu vieler Überschriften kann eine überwältigende Erfahrung für eine Person darstellen, die sich beim Navigieren auf einen Bildschirmleser verlässt. Dies mag auf den ersten Blick ein wenig kontrapunktisch erscheinen, wenn man bedenkt, dass ich Ihnen gerade gesagt habe, wie wichtig Überschriften als Navigationshilfe sind.
Stellen Sie sich das so vor: So wie zu viele visuelle Navigationsoptionen auf einer Seite den Fokus und die Aufmerksamkeit einer Person negativ beeinflussen können, erzeugen zu viele Überschriften „Lärm“, der den Hauptpunkt, den Sie vermitteln möchten, ablenkt und verdeckt.
Es gibt keine Regel, wie viele Überschriften zu viele sind. Es hängt völlig davon ab, was der Inhalt ist und wie viel davon vorhanden ist. Beispielsweise benötigt ein Rezept möglicherweise nur den Namen des Gerichts, seine Zutaten und Anweisungen, während für eine wissenschaftliche Arbeit eine wesentlich differenziertere Aufschlüsselung erforderlich ist.
Eine gute Überschriftenstruktur kommt nicht nur den Menschen zugute, die assistive Technologien einsetzen. Da Überschriften eine semantische Bedeutung haben, können andere Dienste in diese programmatische Beschreibung des Inhalts eingebunden und auf verschiedene benutzerfreundliche Weise rekontextualisiert werden. Zum Beispiel, was die Bing-Suchmaschine mit gut aufgebauten Seiten macht:
Bing SuchmaschinenergebnisÄhnlich wie Bildschirmlesegeräte erstellen Dienste wie Google Docs und Dropbox Paper automatisch eine geordnete Liste von Überschriften, damit Sie ein Dokument schnell verstehen und navigieren können. Viele Textverarbeitungsprogramme können auch schnell ein dynamisch aktualisiertes Inhaltsverzeichnis aus Überschriften generieren, eine ansonsten mühsame und zeitraubende Aufgabe. Dank der Interoperabilität von HTML können wir dieses Navigationsverhalten sogar als Browsererweiterung erstellen!
Was wir zu oft zu vergessen scheinen, ist, dass CSS-Klassen auf Überschriftenelemente angewendet werden können, genau wie jedes andere HTML-Element, das innerhalb von deklariert ist Karosserie.
Der Grund, warum ich dies erwähne, ist, dass Überschriftenelemente häufig verwendet werden, weil sie so sind aussehen("Ooh! Ich mag die Farbe und die Schriftart der h3, Ich benutze das. “) Und nicht welche Priorität sie haben beschreiben (Brioche ist eine Art Viennoiserie). Es ist ein weit verbreitetes Problem.
In einer idealisierten Welt akademischer Reinheit würden wir die materielle Ehrlichkeit der Überschriftenelemente würdigen, indem wir sie nach der von ihnen beschriebenen Hierarchie bemessen und anordnen.
Dies ist jedoch die reale Welt. Moderne Websites und Web-Apps sind komplizierte Dinge, an denen viele verschiedene Personen arbeiten, die alle unterschiedliche Erfahrungen, Interessen, Vertrautheit und Fähigkeiten beim Entwerfen und Codieren haben.
Die reale Welt kann eine Überschrift der fünften Ebene erfordern, die so aussehen muss, als sei sie eine Überschrift der zweiten Ebene oder etwas völlig Neues. In diesen Situationen ist es besser, die zugrunde liegende logische Seitenstruktur beizubehalten und stattdessen die Visualisierung der Überschrift zu ändern:
Expertenbetreuung zu einem vernünftigen Preis
Es ist ein Kompromiss und eine Anerkennung, dass die reale Welt kompliziert ist. Dieser Ansatz bevorzugt den Erhalt des wichtigen Teils: die intuitive und effiziente Navigation für die unterstützende Technologie.
Methoden wie Dienstprogrammstile ermöglichen eine noch flexiblere Anpassung der Visualisierung der Kopfzeile:
Geschäftsbedingungen
In diesem Beispiel deklariere ich eine Reihe kleiner Änderungen, um die Darstellung der Überschrift anzupassen, bis ich das gewünschte optische Erscheinungsbild erhalten habe. In der Regel finden Sie Utility-Stile auf größeren staatlich gesteuerten Websites und Web-Apps, bei denen die geringe Spezifität der Klassen die Konsistenz gewährleistet.
Um die Verwendung korrekter und verschachtelter Überschriften zu verstärken, kann es sogar sinnvoll sein, einen Überschriftenstil zurückzusetzen, damit alle Überschriften beibehalten werden, ohne dass eine deklarierte Klasse gleich aussieht.
h1, h2, h3, h4, h5, h6 color: vererben; Schriftgröße: 1em; Zeilenhöhe: erben; Marge: 0; Polsterung: 0; vertikal ausrichten: Grundlinie;
Dies ist ein wenig defensiver Entwurf, der zum Nachdenken über die Struktur eines Dokuments anregt geformt darüber wie es geht sieht aus. Es ist dazu gedacht, nach einem importierten CSS-Reset deklariert zu werden, sodass die Meinungen des Reset überschrieben werden können.
Das zweit schwierigste Problem in der Informatik ist die Benennung von Dingen. Der erste ist, zuzugeben, dass Sie nichts wissen. Ich gehe nicht davon aus, die beste Methode zu benennen, um Überschriftenstile für Ihre Website oder Web-App zu benennen. Wenn Sie jedoch einen anderen Stil verwenden, der auf anderen Anwendungen basiert, würde ich empfehlen nicht benennen sie .h1, .h2, .h3, usw.
Das Problem bei diesem Ansatz ist, dass Benutzer, die mit der Codebase nicht vertraut sind, diese Klassennamen als Anweisungen interpretieren, die vorschreiben, dass der Klassenname mit der Überschriftenebene übereinstimmen muss. Dies wird das "Wie es aussieht" in Bezug auf das "Was es beschreibt" -Problem verstärkt.
Ich bin auch auf Situationen gestoßen, in denen es unterstreicht, dass die Verwendung von HTML-Elementen außer Überschriftenelementen zum Verfassen von Überschriften zulässig ist („Ah, ich kann das machen.) div aussehen wie ein h5!”). Nicht gut!
Die WebAIM-Umfrage von Screen Reader für das Jahr 2017 zeigt uns auch, dass fehlende oder unpassende Überschriften eines der zehn problematischsten Probleme sind, mit denen Benutzer konfrontiert sind, die beim Navigieren im Internet auf assistive Technologien angewiesen sind.
Dies ist ein weit verbreitetes Problem der Zugänglichkeit mit einer einfachen Lösung. Nehmen Sie sich etwas Zeit, um die Seiten Ihrer Website oder Web-App zu überprüfen, um herauszufinden, ob Ihre Überschriftenstruktur die Seite genau beschreibt und dass diese Beschreibung einer logischen Reihenfolge folgt. Es könnte so einfach sein, einige Zahlen zu verschieben!
