1.3.2 Bedeutungstragende Reihenfolge (Elementor)

Manchmal möchte man die Reihenfolge bei der Anzeige von Elementen abändern.

In der Regel sollte das visuelle Erscheinungsbild nur in gut begründeten Fällen von der im DOM festgelegten Reihenfolge abweichen.

Die Lesereihenfolge kann jedoch mit css «order» geändert werden. «order» ändert nur die sichtbare Darstellung. Die Inhalte bleiben in ihrer logischen Reihenfolge im HTML-Quelltext erhalten. Wenn z.B. das Datum einer Nachricht optisch vor der Überschrift steht, muss im DOM trotzdem die Überschrift an erster Stelle stehen.

Dieses Beispiel wollen wir erreichen

Und so gehts

Damit dies erreicht wird, positionieren wir die Elemente in Elementor nach der Lesereihenfolge und nicht nach Gestaltung/Aussehen.

Jetzt ändern wir mithilfe von «order» die Gestaltung

Dazu öffne jeweils die Option unter Erweitert, order unter den drei Punkten die Einstellung dazu.

Für unser Beispiel gebe ich nun dem «Icon» eine –2 und dem «Datum» eine –1. So verschiebt sich das Aussehen so wie wir es haben wollen.

Durch die Verschiebung mit «order» sieht die Gestaltung so aus wie wir es haben wollten, aber im HTML hat sich nichts geändert. Heisst der Screenreader liest zuerst den (1) Titel, (2) Datum, (3) Textauszug, danach (4) Link zu mehr Informationen und zuletzt (5) den alternativ Text zum Icon.

<style>

    Icon { 
          order: -2; 
    }
   
    Datum { 
          order: -1; 
    }

</style>