Wenn die Reihenfolge, in der der Inhalt einer Seite angezeigt wird, Folgen für die jeweilige Bedeutung hat, muss diese Reihenfolge auch im Quellcode festgelegt werden.

Wie wendet man das an?

Gibt es eine sinnvolle Reihenfolge?

Ermitteln Sie zuerst, ob die Reihenfolge, in der der Inhalt einer Seite angezeigt wird, Folgen für die jeweilige Bedeutung hat. Einen Text mit 2 Absätzen kann man nicht einfach umgestalten. Wenn man den zweiten Absatz vor dem ersten anordnet, wird der Text sinnlos. In dieser Situation ist also die Reihenfolge wichtig.

Auf einer Seite mit einem Navigationsmenü und einem Text spielt die Reihenfolge keine Rolle: Die 2 Teile werden unabhängig voneinander gelesen und beeinflussen sich nicht gegenseitig. Welcher Textteil zuerst kommt, ist nicht von Bedeutung. In dieser Situation ist die Reihenfolge nicht wichtig.

Reihenfolge im Quellcode beibehalten

Hilfstechnologie legt die Lesereihenfolge auf Basis des Quellcodes fest. Deshalb muss eine sinnvolle Reihenfolge nicht nur korrekt angezeigt, sondern auch im Quellcode festgelegt werden. Befolgen Sie die Regeln hierunter, um zu gewährleisten, dass Hilfstechnologie die richtige Reihenfolge bestimmen kann:

  • Sorgen Sie dafür, dass der Text im Quellcode in einer logischen Reihenfolge steht.
  • Fügen Sie die Informationen, die in eine Tabelle gehören, in eine echte HTML-Tabelle ein. So wird die Hilfstechnologie die Tabelle auf eine logische Weise (Zeile pro Zeile oder Spalte pro Spalte) vorlesen. Verwenden Sie keine Leerzeichen, um eine Tabellenform zu imitieren.
  • Verwenden Sie die Editor-Funktionen, um eine nummerierte Liste zu erstellen, damit sie korrekt im HTML-Code der Seite markiert ist. So weiß die Hilfstechnologie, dass die Reihenfolge der Aufzählungsteile wichtig ist.
  • Verwenden Sie die Editor-Funktionen, um eine Aufzählung mit Aufzählungspunkten oder anderen Aufzählungszeichen zu erstellen. So weiß die Hilfstechnologie, dass die Reihenfolge der Aufzählungsteile nicht wichtig ist.
  • ● Verwenden Sie keine Tabellen oder Leerzeichen, um einen Text oder eine Seite zu gestalten, denn ansonsten kann die Hilfstechnologie nicht die richtige Reihenfolge feststellen.

Beispiele

Verwenden Sie keine Tabelle zur Gestaltung einer Seite

Wenn Sie eine Tabelle verwenden, um eine Seite auf eine bestimmte Weise einzuteilen, besteht das Risiko, dass der Inhalt in der falschen Reihenfolge im Quellcode steht. Nehmen wir als Beispiel eine Tabelle mit 2 Spalten und 2 Zeilen:

  • In der ersten Spalte geben Sie in der ersten Zeile den Titel und in der zweiten Zeile den Haupttext an
  • In der ersten Spalte geben Sie in der ersten Zeile die Überschrift „Nachrichten“ und in der zweiten Zeile die dazugehörige Nachricht an. Sie sehen die folgende logische Einteilung:

Haupttitel

Nachrichten

Haupttext

Nachricht

Weil Sie eine Tabelle verwendet haben, wurde die angezeigte logische Reihenfolge jedoch nicht im Quellcode festgelegt. Die Vorlesesoftware kann den Text dann wie folgt vorlesen:

  • Haupttitel - Titel der Nachricht - Haupttext - Nachricht

Eine derartige Einteilung kann deshalb viel besser mit CSS als mit einer Tabelle erreicht werden, weil der Inhalt wie folgt vorgelesen wird:

  • Haupttitel - Haupttext - Titel der Nachricht - Nachricht

Zeigen Sie nicht nur mit CSS die richtige Reihenfolge an

Eine sinnvolle Reihenfolge muss immer im Quellcode (HTML) festgelegt sein. Deshalb ist die folgende Reihenfolge im Quellcode nicht erlaubt:

  • Teil 3
  • Teil 2
  • Teil 1

Stattdessen muss die Reihenfolge wie folgt mit CSS angezeigt werden:

  • Teil 1
  • Teil 2
  • Teil 3

wenn nur die Reihenfolge 1-2-3 logisch ist.

Testen

Es sind verschiedene Browser-Plugins für Web Developer verfügbar, mit denen eine Webseite leicht ohne Layout (CSS) angezeigt werden kann. So kann man die im Quellcode festgelegte Reihenfolge des Inhalts dieser Seite sehen. Überprüfen Sie, ob diese Reihenfolge auch ohne CSS noch logisch ist.

 

Wie trägt dies zu einer besseren Website bei?

Indem der Inhalt im Quellcode in einer logischen Reihenfolge angeordnet wird, ist er auch für Besucher verständlich, die Vorlesesoftware oder ein eigenes Stylesheet (Formatvorlage) verwenden.

Für Entwickler

Die Aufgabe des Web Developers ist es, Inhalte in einer logischen Reihenfolge im Quellcode anzuordnen. Er sorgt auch dafür, dass der Online-Redakteur die Reihenfolge nicht ändern kann.