Barrierefreiheit: Die DOM Order einer Website überprüfen und anpassen
5 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
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
Website DOM ist die Lade- und Lesereihenfolge von Elementen auf den Seiten einer Website. Wix legt automatisch eine DOM Order basierend auf der visuellen Reihenfolge der Elemente fest, von links nach rechts und von oben nach unten. 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.
Wichtig:
Die automatische DOM Order auf Desktop-Editor-Websites wurde für von links nach rechts geschriebene Schriften entwickelt (z. B. Englisch, Spanisch usw.). Wenn deine Website eine von rechts nach links geschriebene Schrift verwendet, zum Beispiel Arabisch oder Hebräisch, musst du die DOM Order im Ebenen-Panel manuell neu anordnen.
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 deiner 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 Websites mit dem Wix Editor zu ändern. Wenn du eine Website im Studio Editor erstellst, kannst du die Reihenfolge mit den 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 diese 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.