Barrierefreiheit: Die DOM Order einer Website überprüfen und anpassen
6 min
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, 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 an einer Studio-Editor-Website arbeitest, siehst du möglicherweise die Option, die DOM Order im Wizard für Barrierefreiheit 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, empfehlen wir dir, sie zu ändern, um Besuchern ein besseres Nutzererlebnis zu bieten.
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 in den erweiterten Einstellungen des Wizard für Barrierefreiheit deaktivieren. Du kannst die DOM Order der Elemente dann im Ebenen-Panel deiner Website manuell nach Bedarf anpassen.
Um die DOM-Einstellungen und die DOM Order deiner Website zu ändern:
- Öffne deinen Editor.
- Klicke oben auf Einstellungen und wähle Wizard für Barrierefreiheit.
- Klicke oben im Panel des Wizard für Barrierefreiheit auf das Symbol für Weitere Aktionen .
- Wähle Erweiterte Einstellungen.
- Wählen Sie Automatische DOM Order.
- Deaktiviere den Schalter im Panel.
- Wähle im Pop-up-Fenster die Option Deaktivieren.
.
- Wähle unten links im Editor Ebenen .
- Ü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-Benutzer 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.