1.3.2 Bedeutungstragende Reihenfolge

Sinnvolle DOM-Reihenfolge für Assistenzgeräte

Die bedeutungstragende Reihenfolge im Dokument (DOM) ist wichtig, damit Menschen mit assistierenden Geräten, wie Screenreadern, Webseiten sinnvoll nutzen können. Auch wenn eine Webseite für Sehende visuell als zweidimensionaler Bereich erscheint, nehmen blinde Menschen sie eindimensional wahr, indem sie nacheinander von oben nach unten lesen.

Verständnis zwischen Sehenden und Blinden

Das bedeutet, dass die Reihenfolge der Elemente im DOM so strukturiert sein sollte, dass sie unabhängig von visuellen Anpassungen durch CSS Sinn ergibt. Zum Beispiel, wenn das Datum einer Nachricht optisch über der Überschrift steht, sollte die Überschrift trotzdem zuerst im DOM stehen. CSS kann dann genutzt werden, um die visuelle Anordnung anzupassen, während die logische Reihenfolge im DOM beibehalten wird.

Gleichgewicht zwischen visuellem Design und DOM-Reihenfolge

Es ist wichtig zu beachten, dass Abweichungen vom visuellen Erscheinungsbild und der DOM-Reihenfolge vermieden werden sollten, es sei denn, es gibt gute Gründe dafür. Zum Beispiel sollten Informationen zu einem Formular nicht unterhalb des Absenden-Buttons angezeigt werden, da sie leicht übersehen werden könnten. Dies könnte auch die Benutzererfahrung beeinträchtigen.

Praxisbeispiel

Auf einer typischen Archive-Seite sehen die einzelnen Blogbeiträge wie folgt aus. Zuerst ein Bild, evtl. ein Datum, dann ein Titel und meist ein Textauszug mit Link zum eigentlichen Blogartikel.

Hier würde der Screenreader alles von oben nach unten lesen, also den Alternativtext des Icons danach das Datum usw. Als Sehender liest man die wichtigsten Informationen. Heisst der Titel, Datum usw. Das Icon nimmt man war aber beachtet es eher weniger. Und hier kann man die Reihenfolge im DOM ändern, ohne das Aussehen zu verändern.

Im InDesign kann dies mit der Position der Verankerung des Bildes im Text gesteuert werden.

Reihenfolge richtig definieren von einer Blogbeitrags-Kachel