Scanne deine Website mit dem Wizard für Barrierefreiheit, um Barrieren auf deiner Website zu identifizieren und zu beheben.
Der Wizard bietet dir interne Lösungen sowie Leitfäden für deine eigenen Anpassungen. Das Erledigen aller Aufgaben ist eine großartige Möglichkeit, deiner Website ein solides Fundament zu geben und sie für alle barrierefreier zu machen.
Eine Website mit dem Wizard für Barrierefreiheit scannen
Beginne damit, ein barrierefreieres Erlebnis zu schaffen, indem du deine Website mit dem Wizard für Barrierefreiheit scannst. Der Wizard identifiziert und markiert nicht nur potenzielle Probleme; unsere zusätzlichen Empfehlungen unter Manuelle Aufgaben stellen sicher, dass du durch den gesamten Prozess geführt wirst.
Um den Wizard zu öffnen und deine Website zu scannen:
- Öffne deinen Editor.
- Klicke oben links im Editor auf den Namen deiner Website.
- Scrolle nach unten zum Bereich Barrierefreiheit und klicke auf Probleme beheben.
- Klicke auf Website scannen.
An Website-Level- und Seitenproblemen arbeiten
Der Wizard unterteilt erkannte Probleme in Aufgaben auf Website-Level und auf Seiten-Level. Das Durchgehen jeder Aufgabe ist ein sicherer Weg, um jeden Aspekt der Barrierefreiheit deiner Website zu verbessern – vom allgemeinen Erlebnis bis hin zu spezifischen Elementen.
Je nach Content kannst du Anpassungen direkt im Wizard oder in deinem Editor vornehmen.
Probleme auf Website-Level
Das Drop-down-Menü auf Website-Ebene zeigt Einstellungen an, die sich auf die gesamte Website auswirken (z. B. die Sprache der Website und Fokusindikatoren). Wähle eine Option aus, um mehr über Aufgaben zu erfahren, die die gesamte Website betreffen.
Fokusindikatoren anzeigen
Fokusindikatoren sind blaue Rechtecke, die um interaktive Elemente (wie Buttons oder Links) erscheinen, wenn Besucher die Tastatur verwenden, um durch die Live-Website zu navigieren.
Link „Weiter zum Hauptinhalt“ hinzufügen
„Weiter zum Hauptinhalt“ ist eine Funktion, die es Besuchern, die die Tastaturnavigation verwenden, ermöglicht, die obersten Abschnitte einer Website (wie Menüs und Seitenüberschriften) zu umgehen und direkt zum Hauptinhalt der Seite zu springen.
Die Website-Sprache einrichten
Das Festlegen der Hauptsprache der Website liefert assistiven Technologien die Informationen, die sie benötigen, um den Content korrekt darzustellen. Dies geschieht durch:
- Angabe der Schriftart/Zeichen, die im Website-Text verwendet werden
- Bestimmung der Aussprache von Textinhalten
- Ermöglichen der Anzeige der korrekten Bildbeschriftungen in Media-Playern
Es ist daher wichtig, die Hauptsprache der Website festzulegen, da dies sicherstellt, dass Besucher, die diese Technologien nutzen, das beste Erlebnis erhalten.
Wenn du Wix Multilingual zu deiner Website hinzugefügt hast, kann die bei der Einrichtung gewählte Hauptsprache
nicht mehr geändert werden.
Du kannst jedoch Folgendes tun:
Die DOM Order organisieren
Die DOM Order (Document Object Model) einer Website bestimmt die Auswahl- und Lesereihenfolge von Seitenelementen (d. h. die Reihenfolge, in der Elemente von Screenreadern gelesen und bei Verwendung der Tab-Taste hervorgehoben werden).
Die DOM Order wird auch von der Ausrichtung deiner Website-Sprache beeinflusst. Wir empfehlen, die DOM Order mit dem Wizard zu organisieren, um sicherzustellen, dass die Lese- und die visuelle Reihenfolge deiner Elemente übereinstimmen.
Erfahre hier mehr über die DOM Order und Barrierefreiheit.
Hinweis: Diese Aufgabe wird nur angezeigt, wenn die DOM Order und die Ausrichtung der Website-Sprache nicht übereinstimmen.
Seitenprobleme
Die Seiten deiner Website sind in ein Dropdown-Menü für Hauptseiten (Standardseiten, die mit dem Website-Template geliefert oder von dir hinzugefügt wurden) und Seiten unterteilt, die mit Apps geliefert werden, die du auf der Website installierst.
Egal, ob es sich um Hauptseiten oder App-Seiten handelt, der Wizard scannt nach denselben potenziellen Problemen. Öffne eine Option, um mehr über die Arten der erkannten Probleme zu erfahren.
Gib dieser Seite einen aussagekräftigen Titel
Der Title-Tag einer Seite ist der Titel, den Suchmaschinen normalerweise für die Seite in den Suchergebnissen anzeigen. Er wird aus dem Namen, den du der Seite gibst, sowie dem Namen der Website von Wix übernommen.
Der Wizard fordert dich auf, den Titel einer Seite zu ändern, wenn der Title-Tag „Neue Seite“ (der Standard, der neuen Seiten zugewiesen wird, die du einer Website hinzufügst) oder „Kopie von“ (der Standard, der duplizierten Seiten zugewiesen wird) enthält.
Seitentitel-Tags bieten Besuchern, die Hilfstechnologien verwenden, wichtige Informationen über den Content der Seite. Um das beste Erlebnis zu gewährleisten, sollten Seitentitel daher wie folgt sein:
- Aussagekräftig: Die Titel sollten den Content der Seite genau zusammenfassen und alle wesentlichen Informationen enthalten.
- Einzigartig: Titel sollten nur auf einer Seite der Website verwendet werden und sich nicht auf anderen Seiten wiederholen.
- Prägnant: Seitentitel sollten den Content zusammenfassen und gleichzeitig relevante Informationen und Keywords enthalten.
Die Überschriftenstruktur organisieren
Überschriften-Tags sind Elemente im HTML-Code einer Website, die die Hierarchie/Struktur von Textinhalten auf einer Seite bestimmen. Überschriften-Tags folgen einer Reihenfolge von oben nach unten, von Überschrift 1 (H1) bis Überschrift 6 (H6) und dann dem Textabschnitt (P).
Assistive Technologien verwenden Überschriften-Tags, um die Reihenfolge des Seiteninhalts zu kennen. Screenreader lesen zum Beispiel zuerst den H1-Content, gefolgt von H2, H3 usw.
Eine genaue Überschriftenstruktur ist daher wichtig, da sie Besuchern, die diese Technologien nutzen, ein klares, logisches Erlebnis bietet.
Du kannst viele Überschriften-Tags innerhalb des Wizards für Barrierefreiheit anpassen. Einige Elemente sind jedoch derzeit noch nicht unbeschränkt in den Wizard integriert und
müssen manuell angepasst werden.
Alt-Text zu Bildern hinzufügen
Alternativtext (Alt-Text) ist eine Textbeschreibung eines Bildes auf einer Webseite.
Einige Besucher verwenden möglicherweise assistive Technologien wie Screenreader, um durch Websites zu navigieren. Diese lesen den Content der Website den Besuchern laut vor – einschließlich des Alt-Textes.
Farbkontrast ist ein Maß für die Differenz der wahrgenommenen Helligkeit zwischen zwei Farben und wird als Verhältnis ausgedrückt, das von 1:1 (kein Kontrast) bis 21:1 (starker Kontrast) reicht. Ein starker Kontrast stellt sicher, dass der Website-Content leicht zu sehen und zu lesen ist.
- Kleiner Text: Text kleiner als 24 Px (18 pt):
- AA: 4,5:1 und höher
- AAA: 7:1 und höher
- Großer Text: Text größer als 24 Px (18 pt) oder Text über 18 Px (14 pt) und fett:
- AA: 3:1 und höher
- AAA: 4,5:1 und höher
- Nicht-Text-Komponenten (z. B. Symbole für etwas):
Du kannst den Kontrast der meisten Website-Inhalte innerhalb des Wizards für Barrierefreiheit anpassen. Einige Elemente sind jedoch derzeit noch nicht unbeschränkt in den Wizard integriert und müssen manuell angepasst werden.
Erfahre hier mehr über das Anpassen von Farbkontrasten.
Hinweis: Im Wizard für Barrierefreiheit ist derzeit nur Level AA erforderlich.
Medien-Dateien als barrierefrei bestätigen
Einige Website-Besucher haben möglicherweise eine oder mehrere Behinderungen oder Einschränkungen, die ihr Seh- und/oder Hörvermögen beeinträchtigen. Du kannst sicherstellen, dass Mediendateien barrierefrei sind, indem du Alternativen bereitstellst (z. B. Transkripte und Audiobeschreibungen) – so erleichterst du diesen Besuchern den Zugriff, das Verständnis und das Genießen des Contents.
Erfahre hier mehr über Medienalternativen.
Die DOM Order organisieren
Die DOM Order bezieht sich auf die Lade- und Lesereihenfolge von Elementen auf deinen Website-Seiten und ist wichtig für Besucher, die Screenreader und andere assistive Technologien verwenden. Du kannst die DOM Order mit dem Wizard organisieren, um sicherzustellen, dass die Lese- und die visuelle Reihenfolge deiner Elemente übereinstimmen.
Erfahre hier mehr über die DOM Order und Barrierefreiheit.
Hinweis: Diese Aufgabe wird nur angezeigt, wenn die automatische DOM Order in einem oder mehreren der Abschnitte deaktiviert ist.
Manuelle Aufgaben erledigen
Dies sind zusätzliche Details, die du manuell auf der gesamten Website überprüfst, wie z. B. den Browser-Zoom und die Mediensteuerung. Mache dir keine Sorgen um die Schritte – der Wizard gibt dir eine Erklärung für jede Aufgabe und verlinkt auf zusätzliche Informationen, die dir helfen, diese zu identifizieren und anzupassen.
Aussagekräftigen Text in Links und Buttons verwenden
Texte oder Elemente, die auf andere Seiten, Abschnitte oder Websites verlinken, sollten so aussagekräftig wie möglich sein. Zum Beispiel ist „Lies mehr über unsere neueste Forschung“ klarer als „Mehr lesen“. Sie sollten auch klar sein, wenn sie zu einer Aktion führen, wie zum Beispiel dem Absenden eines Formulars.
Lies das Dokument der Web Content Accessibility Guidelines (WCAG) zum LinkzweckMehr als nur Farben verwenden, um Informationen voneinander zu unterscheiden
Bilder mit wichtigen Informationen korrigieren
Text in Bildern (wie Fotos von Schildern oder Slogans) kann von Screenreadern nicht gelesen werden. Wir empfehlen, diese Bilder nach Möglichkeit durch echten Text zu ersetzen.
Wenn der Bildtext ein wichtiger Teil des Contents deiner Website ist oder für die Vermittlung von Informationen unerlässlich ist, füge den Text in die Beschreibung des Bildes (Alt-Text) ein.
Erfahre hier mehr über Text in Bildern.
Steuerelemente zu Audio und Videos hinzufügen
Einige Video- und Audioplayer sind möglicherweise so eingestellt, dass sie automatisch abgespielt werden, wenn die Seite geladen wird. Dies kann jedoch bei Besuchern zu Verwirrung und Ablenkung führen und Hilfstechnologien beeinträchtigen. Zum Beispiel kann ein Audioplayer, der automatisch startet, einen Screenreader überlagern oder „übersprechen“.
Stelle sicher, dass der gesamte Content unbeschränkt sichtbar ist, wenn in den Browser hineingezoomt wird
Website-Elemente und Komponenten sollten weiterhin sichtbar sein, wenn der Browser gezoomt wird. Dies stellt sicher, dass Nutzer mit Sehbehinderungen die Website vergrößern und trotzdem den gesamten Content der Seite sehen können. Du kannst dies überprüfen, indem du eine Vorschau der Website öffnest und den Zoom deines Browsers auf 200 % stellst.
Erfahre hier mehr über gezoomten Content.
Eine Barrierefreiheitserklärung hinzufügen
Barrierefreiheit im Web ist in mehreren Ländern eine gesetzliche Anforderung. Aber auch wenn es in deiner Region keine gesetzliche Anforderung ist, empfehlen wir, die Erklärung hinzuzufügen. Diese zeigt das Engagement der Website bzw. deines Kunden für die Bereitstellung einer Website, die allen Besuchern ein tolles Erlebnis bietet.
Erfahre hier mehr über Barrierefreiheitserklärungen.
Potenzielle Probleme mit dem Farbkontrast überprüfen
Häufig gestellte Fragen (FAQs)
Was scannt der Wizard für Barrierefreiheit?
Der Wizard scannt den Großteil des Contents der Website. Dies umfasst Standard-Website-Seiten und Seiten, die Teil von Unternehmenslösungen sind (z. B. die Kalenderseite in Wix Bookings).
Einige Inhalte auf diesen Seiten erfordern jedoch möglicherweise manuelle Bewertungen oder Korrekturen. Zudem werden einige Website-Seiten nicht vom Wizard gescannt oder unterstützt.
Welche Seiten und welcher Website-Content werden vom Wizard nicht unterstützt?
Der Wizard für Barrierefreiheit unterstützt Folgendes nicht:
Wir empfehlen, diese Seiten und Apps
mit unserer Checkliste durchzugehen, um zu sehen, wie du sie barrierefreier gestalten kannst.
Wie kann ich die Barrierefreiheit einer Website sonst noch verbessern?
Nachdem du den Wizard für Barrierefreiheit verwendet hast, gibt es einige Möglichkeiten, wie du deine Website für Besucher weiter barrierefrei gestalten kannst:
