Barrierefreiheit: Deine Website für Screenreader vorbereiten
3 Min. Lesezeit
Einige deiner Website-Besucher verwenden möglicherweise unterstützende Technologien wie Screenreader, um auf deiner Website zu navigieren. Screenreader sind Anwendungen, die von Menschen mit Sehbehinderung verwendet werden. Sie durchsuchen den Inhalt deiner Website und „lesen“ den Inhalt dann dem Besucher vor. Besucher, die Screenreader verwenden, verwenden in der Regel auch die Tab-Taste, um durch deine Website zu navigieren, da sie möglicherweise nicht sehen können, wo sie klicken müssen.
Die DOM Order deiner Website ist die Reihenfolge, in der Screenreader und die Tab-Taste Inhalte auf deiner Seite hervorheben und/oder „lesen“. Sie sollte einer logischen Reihenfolge folgen, um sicherzustellen, dass deine Besucher die bestmögliche Erfahrung auf deiner Website erhalten und deren Inhalt verstehen und genießen können.
Hinweis:
Einige Besucher verwenden möglicherweise keinen Screenreader, verwenden aber trotzdem die Tab-Taste, um auf deiner Website zu navigieren, z. B. Besucher mit Mobilitätsproblemen. Daher empfehlen wir, immer darauf zu achten, dass die DOM Order deiner Website korrekt ist.
In diesem Artikel erfährst du mehr über folgende Themen:
Über die DOM Order deiner Website
Das DOM ist die Reihenfolge der Elemente auf deiner Website. Dies ist besonders wichtig, wenn deine Website-Besucher Screenreader und/oder die Tab-Taste verwenden, da sie in der Lage sein müssen, in einer logischen Reihenfolge auf deiner Website zu navigieren. So sollte zum Beispiel das Website-Menü an erster Stelle stehen, gefolgt von den anderen Elementen in der Kopfzeile, dann dem Seitentitel, dann dem Seiteninhalt usw. Wenn die DOM Order nicht korrekt ist, kann dies dazu führen, dass der Screenreader/die Tab-Taste Elemente auslässt oder durch deine Seiteninhalte springt.
Wix legt automatisch eine DOM Order für dich fest. Die Sequenz verwendet die visuelle Reihenfolge der Elemente, 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 wir die automatische DOM Order deiner Website unter Berücksichtigung der oben genannten Funktionen erstellt haben. Du kannst die automatische DOM Order deiner Website testen, indem du die Tab-Taste deiner Tastatur oder einen Screenreader auf deiner Live-Website verwendest.
Die DOM Order deiner Website ändern
Wenn du die DOM Order deiner Website testest und bemerkst, dass sie nicht logisch ist, kannst du sie manuell im Wizard für Barrierefreiheit ändern. Der Wizard ist ein Tool, das deine Website durchsucht, potenzielle Probleme mit der Barrierefreiheit lokalisiert und umsetzbare Lösungen zur Behebung dieser Probleme bietet. Darüber hinaus kannst du den Wizard für Barrierefreiheit verwenden, um die erweiterten Einstellungen für die Barrierefreiheit auf deiner Website zu ändern.
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-Einstellungen zu ändern:
- Wähle in der oberen Leiste deines Editors Einstellungen.
- Wähle Wizard für Barrierefreiheit.
- Wähle oben rechts im Wizard das Symbol für Weitere Aktionen
.
- Wähle Erweiterte Einstellungen für Barrierefreiheit.
- 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 das Ebenen-Symbol
. - Ü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.
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.
Nächste Schritte:
- Öffne den Mobile-Editor und wiederhole die gleichen Schritte.
- Gehe zurück zur Checkliste für Barrierefreiheit, um weiter an der Barrierefreiheit deiner Website zu arbeiten.
War das hilfreich?
|