Studio Editor: Elemente nach DOM Order neu anordnen
4 Min. Lesezeit
Du kannst Elemente in einer Studio-Editor-Website anhand ihrer DOM Order neu anordnen. Dies kann die Barrierefreiheit der Website verbessern, da so sicherstellt wird, dass Besucher, die assistierende Technologien wie Screenreader verwenden, in der Anzeigereihenfolge durch den Website-Inhalt navigieren können.
In diesem Artikel erfährst du mehr über folgende Themen:
Gut zu wissen:
Elementen nach DOM Order anzuordnen ist besonders wichtig, wenn du komplexere Layout-Tools auf einer Website verwendest, zum Beispiel Stapel und Flexboxen.
Die Bedeutung der DOM Order
Einige Website-Besucher verwenden möglicherweise unterstützende Technologien, um auf Websites zu navigieren, beispielsweise Screenreader und/oder die Tab-Taste. Die DOM Order der Website bestimmt die „Lesereihenfolge“ für diese Technologien.
Daher ist eine logische DOM Order wichtig, da sie sicherstellt, dass alle Besucher durch den Website-Inhalt navigieren können. So sollte zum Beispiel das Website-Menü an erster Stelle stehen, gefolgt von den restlichen Elementen in der Kopfzeile, dann dem Seitentitel, dann dem Seiteninhalt usw.
Möchtest du die DOM Order einer Website überprüfen?
Du kannst die automatische DOM Order einer Website testen, indem du die Tab-Taste deiner Tastatur oder einen Screenreader auf der Live-Version der Website verwendest.
Die DOM Order automatisch reorganisieren
Du kannst die DOM Order von Elementen in einem Abschnitt, einer Flexbox, einem Stapel oder auf einer gesamten Seite automatisch neu organisieren. Die Reihenfolge wird optimiert, sodass sie der visuellen Reihenfolge der Elemente entspricht (von links nach rechts und von oben nach unten).
Tipp:
Das Neuordnen der DOM Order einer Seite stellt sicher, dass sie optimiert ist. Außerdem können dadurch Layout-Probleme behoben werden.
Von einer Seite:
- Klicke auf der linken Seite des Editors auf Seiten
. - Wähle die entsprechende Seite aus.
- Klicke auf das Symbol für Weitere Aktionen
. - Klicke auf DOM Order neu organisieren.
Von Elementen:
- Klicke links im Editor auf Ebenen
. - Wähle den entsprechenden Abschnitt, die Flexbox oder den Stapel aus.
- Klicke auf das Symbol für Weitere Aktionen .
- Klicke auf DOM Order neu organisieren.
Die DOM Order manuell ändern
Die DOM Order der Website sollte optimiert werden. Wenn du jedoch ein Problem mit der DOM Order einer Website bemerkt hast, an der du arbeitest, kannst du sie manuell ändern, damit sie mit der visuellen Reihenfolge der Elemente übereinstimmt (von links nach rechts und von oben nach unten).
Um die DOM Order manuell zu ändern:
- Klicke links im Editor auf Ebenen .
- Wähle aus, was du reorganisieren möchtest:
- Elemente innerhalb eines Abschnitts:
- Wähle einen Abschnitt aus, um ihn zu öffnen.
- Ziehe die Elemente per Drag-and-Drop an die richtige Position.
- Abschnitte:
- Fahre mit der Maus über den oberen Abschnitt und klicke auf das Symbol für Weitere Aktionen .
- Klicke auf Anordnen.
- Klicke auf In den Vordergrund.
- Wiederhole die Schritte i bis iii für alle anderen Abschnitte und gehe dabei von oben nach unten im Panel vor.
- Fahre mit der Maus über den oberen Abschnitt und klicke auf das Symbol für Weitere Aktionen
- Elemente innerhalb eines Abschnitts:
War das hilfreich?
|