Barrierefreiheit: Die DOM Order einer Website überprüfen und anpassen
7 min
In diesem Artikel
- DOM Order auf Websites
- Warum die DOM Order wichtig ist
- Automatische DOM Order im Wizard für Barrierefreiheit
- Die DOM Order einer Website manuell ändern
- Website-Sprache und DOM
Die DOM Order einer Website ist die Reihenfolge, in der Screenreader und die Tab-Taste Inhalte auf der Seite hervorheben und / oder „lesen“. Sie sollte einer logischen Reihenfolge folgen, um sicherzustellen, dass Besucher das bestmögliche Erlebnis auf der Website haben und durch den Inhalt navigieren können.
DOM Order auf Websites
Die DOM einer Website bezeichnet die Lade- und Lesereihenfolge von Elementen auf den Seiten einer Website. Wix legt eine DOM Order automatisch basierend auf der visuellen Reihenfolge der Elemente fest. Bei der Entwicklung unserer Tools für Barrierefreiheit testen wir unsere Produkte mit den folgenden Screenreadern:
- Windows + Firefox oder Chrome: NVDA (kostenloser Reader)
- Mac + Safari: Voiceover (Integrierter Reader)
Das bedeutet, dass die automatische DOM Order deiner Website die Funktionen der oben genannten Screenreader berücksichtigt.
Warum die DOM Order wichtig ist
Einige Website-Besucher verwenden möglicherweise Screenreader und andere Hilfstechnologien, um auf deiner Website zu navigieren. Diese Technologien helfen Besuchern mit Sehbehinderungen und -einschränkungen, indem sie den Website-Inhalt scannen und dem Besucher vorlesen.
Besucher, die Screenreader verwenden, und Besucher, deren Mobilität eingeschränkt ist, können die Tab-Taste verwenden, um durch den Inhalt deiner Website zu navigieren. Die DOM Order deiner Website ist daher für Besucher wichtig, die Screenreader und / oder die Tab-Taste verwenden, da diese Besucher in der Lage sein müssen, in logischer Reihenfolge auf deiner Website zu navigieren.
Zum Beispiel sollte das Website-Menü an erster Stelle stehen, gefolgt von den restlichen Elementen in der Kopfzeile, dann dem Seitentitel, dann dem Seiteninhalt usw. Wenn die DOM Order falsch ist, kann dies dazu führen, dass der Screenreader / die Tab-Taste Seiteninhalte überspringt.
Möchtest du die DOM Order der Website testen?
Du kannst die automatische DOM Order deiner Website testen, indem du die Tab-Taste deiner Tastatur oder einen Screenreader auf deiner veröffentlichten Website verwendest.
Automatische DOM Order im Wizard für Barrierefreiheit
Wenn du den Wizard für Barrierefreiheit im Studio Editor öffnest, siehst du möglicherweise die Option, die DOM Order automatisch zu organisieren. Wir empfehlen, diese Option auszuwählen, da sie sicherstellt, dass der Scan des Wizards und die daraus folgenden Aufgaben korrekt sind.
Du siehst dieses Kontrollkästchen nicht?
Die Option, die DOM Order der Website zu organisieren, wird in den folgenden Fällen nicht angezeigt:
- Die Website wurde nach Anfang November 2024 erstellt.
- Du hast vorher die DOM Order der Website mit dem Wizard für Barrierefreiheit geordnet.
- Du hast die automatische DOM Order auf der Website deaktiviert.
Die DOM Order einer Website manuell ändern
Wenn du feststellst, dass die DOM Order deiner Website nicht logisch ist, kannst du sie manuell anpassen, um ein verbessertes Erlebnis für Besucher zu gewährleisten.
Verwende den Wizard für Barrierefreiheit und das Ebenen-Panel, um die DOM Order auf Wix-Editor-Websites zu ändern. Wenn du eine Website im Studio Editor erstellst, kannst du die Reihenfolge über die Ebenen- und Seiten-Panels der Website anpassen.
Wichtig:
Wenn die Tab-Reihenfolge auf deiner Website logisch ist, musst du nichts weiter tun. Wenn du die Reihenfolge änderst, wenn sie bereits korrekt ist, kann es zu Problemen für Besucher kommen, die Screenreader und/oder die Tab-Taste verwenden.
Um die DOM Order zu ändern:
Wix Editor
Studio Editor
Da Wix automatisch eine DOM Order für deine Website festlegt, musst du dies im Wizard für Barrierefreiheit deaktivieren. Du kannst die DOM Order der Elemente dann im Ebenen-Panel deiner Website nach Bedarf manuell anpassen.
Um die DOM Order manuell festzulegen:
- Öffne deinen Editor.
- Klicke oben auf Einstellungen und wähle Barrierefreiheit.
- Wähle im Assistenten auf der rechten Seite die Option Website scannen.
- Klicke auf den Tab Probleme gefunden.
- Wähle Website-Level aus.
- Klicke auf DOM Order ordnen.
- Wähle Manuell aus.
- Klicke auf Anwenden.
- Wähle unten links im Editor Ebenen
aus. - Überprüfe die Liste und lösche alle überflüssigen Elemente. Dazu gehören doppelte Elemente, die keinen Nutzen auf deiner Website haben und Screenreader-Nutzer verwirren können.
- Klicke und ziehe die entsprechenden Elemente in die gewünschte Reihenfolge.
Nächster Schritt:
Öffne den Mobile-Editor und wiederhole die gleichen Schritte.
Hinweise:
- Wenn du mit der Tabulatortaste (Tab) durch eine Website navigierst, navigierst du dabei nur durch die interaktiven Elemente und nicht durch statische Elemente wie Text. Wenn du einen Screenreader mit statischen Elementen wie Text testen möchtest, befolge die Anweisungen in der Hilfe zu deinem Screenreader, um eine Website mit der Tastatur richtig zu navigieren.
- Fixierte Elemente werden automatisch am Ende der Tab-Sequenz platziert. Wenn du möchtest, dass sie früher in der Tab-Reihenfolge platziert werden, empfehlen wir dir, die Fixierung zu lösen und das Element in der Kopfzeile zu platzieren.
Wie geht es weiter?
Gehe zurück zur Checkliste für Barrierefreiheit, um weiter an der Barrierefreiheit deiner Website zu arbeiten.
Website-Sprache und DOM
Verschiedene Sprachen haben unterschiedliche Leserichtungen (Englisch wird z. B. von links nach rechts und Hebräisch von rechts nach links gelesen). Wenn du die Sprache einer Website zu einer Sprache mit einer anderen Leserichtung geändert hast, kann es vorkommen, dass die visuelle und die DOM Order der Elemente möglicherweise nicht mehr übereinstimmen.
Wir empfehlen, im Wizard für Barrierefreiheit die automatische DOM-Option zu aktivieren. So stimmt die Reihenfolge der Elemente mit der Leserichtung der Website-Sprache überein.
Wichtig:
Wenn die Website Inhalte sowohl Sprachen, die von links nach rechts als auch Sprachen, die von rechts nach links geschrieben werden enthält, empfehlen wir, die DOM Order manuell anzupassen.
Um im Wizard die automatische DOM Order zu aktivieren:
- Scanne die Website mit dem Wizard für Barrierefreiheit.
- Klicke auf den Tab Probleme gefunden.
- Wähle Website-Level aus.
- Klicke auf DOM Order ordnen.
- Wähle Automatisch (empfohlen).
- Klicke auf Anwenden.
- (Optional) Überprüfe die visuelle Anzeige der Website-Elemente, um sicherzustellen, dass sie korrekt aufeinander ausgerichtet sind.
Hinweise:
- Diese Option kann die visuelle Anzeige von Elementen verändern. Wir empfehlen daher, die Änderungen zu überprüfen, damit die Website ganz sicher so aussieht, wie du es möchtest.
- Diese Funktion unterstützt nicht alle Website-Komponenten und möglicherweise musst du die Leserichtung manuell anpassen.
Du hast deine Meinung geändert?
Du kannst die automatische DOM Order in deinem Editor rückgängig machen:
- Wix Editor: Klicke in der oberen Leiste deines Editors auf das Symbol für Rückgängig
.
Hinweis: Diese Option wird nur dann angewendet, wenn die letzte Aktion die automatische Neuordnung der DOM Order war. - Studio Editor: Stelle aus dem Website-Verlauf eine frühere Version der Website wieder her.