Tipps zur Nutzungsfreundlichkeit von Überschriften
[Materialsammlung]
Tipps zur Optimierung der Nutzungsfreundlichkeit von Überschriften (Useability): Anordnung, Konsistenz, …
Die visuelle Darstellung von Überschriften muss die intuitive Wahrnehmung der Seitenstruktur erleichtern. Bereiche des Hauptinhaltsbereichs oder umgebender Bereiche sollen visuell intuitiv mit Überschriften strukturiert werden.
Reihenfolge der Überschriften
Bedeutung der Reihenfolge
Was auf einer Webseite vermutlich ein Inhalt von höherer Relevanz ist, sollte sich möglichst bald am oberen Bereich des Inhalts finden lassen. Ich versuche auf Zweiter Blick Inhalte etwa nach deren Relevanz für die WCAG Konformitätsstufen zu reihen.
Ein gleich gewichtiges Kriterium für die Reihung von Inhalten ist die Erwartungshaltung für das Surfen auf einer einzelnen Webseite. Dass das Altertum vor dem Mittelalter und der Neuzeit kommen soll, ist unumstritten. Aber soll eine Zusammenfassung am Anfang oder Ende eines Webartikels angeordnet sein? Ich bin auf Zweiter Blick selbst bei dieser Fragestellung noch am Experimentieren.
Gerade bei größeren Artikeln sollte sich die Reihenfolge nicht nach der chronologischen Erarbeitung richten. Es zahlt sich also aus, beim Redigieren einer Webseite auch die Reihung der Überschriften zu überdenken.
Ich habe gerade bei diesem umfangreichen Artikel lange herumgetüftelt, welche Reihenfolge der Themen der Bedeutung der Konformitätsstufen der WCAG und andererseits Ihnen als BesucherInnen wohl am meisten entspricht. Ich bin mir sicher, dass ich es nicht allen recht gemacht habe.
Screen Reader Wahrnehmung der Reihenfolge
Screen Reader lesen durch Drücken der Pfeiltasten den BODY einer Webseite von links oben nach rechts unten aus. Es ist daher wichtig, dass die Elemente im Code linear verständlich und den Erwartungen entsprechend angeordnet sind. Auch Funktionalitäten, wie die Auflistung von Überschriften durch den Screen Reader erfolgen nach der Anordnung im Code.
Die technische Anordnung der Seitenelemente im Code ist selten ein Problem, weil vernünftige HTML Codes gewöhnlich linear konsistent angeordnet sind. Allerdings sollte die Verständlichkeit der Anordnung von Überschriften redaktionell gut reflektiert werden.
Check der Reihenfolge
Um die Konsistenz der Anordnung der Inhalte für die Useability zu prüfen, kann etwa folgendermaßen vorgegangen werden:
- Schreiben Sie die Hauptüberschriften des Inhaltsbereichs (
main) auf Kärtchen oder einfach in einen Editor. In der Regel sind das die Überschriften der Ebene 2, sofern Sie unseren Empfehlungen für Überschriftenebenen folgen. - Überlegen Sie, welche Inhalte dem Erfahrungshorizont Ihrer Zielgruppe an einer bestimmten Stelle gereiht werden sollten. Reihen Sie die Kärtchen oder Textabschnitte entsprechend.
- Überlegen Sie, welche Inhalte für Ihr Zielpublikum von besonderer Relevanz sind. Reihen Sie die Kärtchen oder Textabschnitte entsprechend.
- Legen Sie die Inhalte auf der Webseite entsprechend der ermittelten Reihung fest.
- Wiederholen Sie die Prozedur innerhalb eines Abschnittes für dessen Unterabschnitte.
Links zur Reihenfolge
Check der Konsistenz
Um die konsistente Verwendung von Überschriften auf einer Webseite zu prüfen, kann folgende Vorgangsweise verwendet werden:
- Erstellen Sie an Hand der Überschriften ein Inhaltsverzeichnis der Webseite.
- Prüfen Sie, ob das Inhaltsverzeichnis strukturell einen guten Überblick über den Seitenaufbau liefert.
- Prüfen Sie, ob die Überschriftenebenen adäquat und konsistent sind.
- Prüfen Sie, ob das Wording der Überschriften einen guten Überblick über die folgenden Inhalte des einzelnen Seitenbereiches liefern.
- Prüfen Sie, ob einzelne Überschriften möglicherweise missbräuchlich zur visuellen Formatierung verwendet wurden.
Tipp zum Erstellen eines Inhaltsverzeichnisses mittels Screen Reader
Moderne Screen Reader erlauben, aus den <H>-Tags in einem eigenen Fenster eine Liste der Überschriften zu generieren. Teilweise lässt sich einschränken, bis zu welcher Überschriftenebene solcherart ein Inhaltsverzeichnis generiert wird. Wenn auf einer Webseite Überschriften für Navigationsbereiche mit der untersten Ebene 6 gekennzeichnet sind, kann auf diese Weise bequem ein Überschriftenverzeichnis des Hauptinhalts dargestellt werden.
Der Kurztastenbefehl für die Auflistung der Überschriften ist bei Jaws JAWSTASTE + F6. Die JAWSTASTE ist standardmäßig die 0 (NULL) am NUMBLOCK oder die EINFÜGETASTE.
Achtung: Mit diesem Verfahren werden nur die aktiv verfügbaren Überschriften aufgelistet. Seitenbereiche, die etwa erst ausgeklappt werden könnten, werden nicht berücksichtigt. Für eine gründliche Evaluation bleibt also nur eine genaue Analyse des Seitencodes.