Barrierefreiheit: Den Wizard für Barrierefreiheit verwenden

Fokusindikatoren sind blaue Rahmen, die um interaktive Elemente herum angezeigt werden (wie zum Beispiel Buttons oder Links), wenn Besucher für die Navigation auf der Website die Tastatur verwenden.

Sie ermöglichen es dem Besucher zu sehen, wo auf seiner Website er sich befindet – und sind daher entscheidend für die Barrierefreiheit der Website. Erfahre hier mehr über Fokusindikatoren.

„Weiter zu den Hauptinhalten“ ist eine Funktion, die es Besuchern ermöglicht, die Tastaturnavigation zu verwenden, um die obersten Abschnitte einer Website (z. B. Menüs und Seitenüberschriften) zu umgehen und direkt zum Hauptinhalt der Seite zu springen. 

„Weiter zu den Hauptinhalten“-Links sind ein wichtiger Teil der Barrierefreiheit einer Website, da sie Besuchern einen schnellen Zugriff auf die benötigten Informationen bieten. Erfahre hier mehr über „Weiter zu den Hauptinhalten“.

Wenn du die Hauptsprache der Website festlegst, erhalten unterstützende Technologien die Informationen, die sie benötigen, um den Inhalt genau darzustellen. Das funktioniert, indem: 

Daher ist es wichtig, die Hauptsprache der Website festzulegen. So ist dafür gesorgt, dass Besucher, die diese Technologien verwenden, das bestmögliche Benutzererlebnis haben.

Wenn du Wix Multilingual zu deiner Website hinzugefügt hast, kann die bei der Einrichtung ausgewählte Hauptsprache nicht geändert werden.  

Du kannst jedoch Folgendes tun:

Die DOM Order (Document Object Model) einer Website bestimmt die „Lesereihenfolge“ der Elemente auf der Seite.

Einige Website-Besucher verwenden Screenreader und andere unterstützende Technologien, um auf einer Website zu navigieren.

Screenreader scannen beispielsweise den Inhalt der Website und „lesen“ ihn dem Besucher vor. Diese Besucher sowie Besucher mit Einschränkungen hinsichtlich der Mobilität können auch die Tabulator-Taste verwenden, um durch Website-Inhalte zu navigieren. 

Die Organisation der DOM Order einer Website ist wichtig für die Barrierefreiheit. Über sie wird dafür gesorgt, dass Besucher, die unterstützende und zusätzliche Technologien verwenden, die Website in logischer Reihenfolge durchsuchen und navigieren können. Erfahre hier mehr über DOM Order und Barrierefreiheit

Das Title-Tag einer Seite ist der Titel, den Suchmaschinen normalerweise für die Seite in den Suchergebnissen anzeigen. Er wird von dem Namen übernommen, den du der Seite gibst, sowie dem Namen der Website. 

Der Assistent fordert dich auf, den Titel einer Seite zu ändern, wenn das Title-Tag „Neue Seite“ (die Standardeinstellung für neue Seiten, die du einer Website hinzufügst) oder „Kopie von“ (die Standardeinstellung für duplizierte Seiten) enthält.

Seiten Title-Tags liefern Besuchern, die Hilfstechnologien verwenden, wichtige Informationen über den Inhalt der Seite. Um ein hervorragendes Erlebnis zu gewährleisten, sollten die Seitentitel daher folgende Merkmale aufweisen:

Tipp: Prägnante Title-Tags sind auch ein wichtiger Bestandteil der SEO deiner Website.

Überschriften-Tags sind Elemente im HTML-Code einer Website, die die Hierarchie/Struktur des Textinhalts auf einer Seite bestimmen. Überschriften-Tags folgen einer Hoch-Niedrig-Reihenfolge, von Überschrift 1 (H1) zu Überschrift 6 (H6) und dann dem Absatztext (P).

Unterstützende Technologien verwenden Überschriften-Tags, um die Reihenfolge des Seiteninhalts herauszufinden. Screenreader lesen zum Beispiel zuerst H1-Inhalte und erst danach Inhalte von H2, H3 usw. 

Daher ist eine genaue Überschriftenstruktur wichtig. Sie bietet Besuchern, die diese Technologien verwenden, ein klares, logisches Erlebnis bietet. Erfahre mehr über HTML-Tags.

Du kannst viele Überschriften-Tags im Wizard für Barrierefreiheit anpassen. Einige Elemente sind jedoch derzeit nicht vollständig in den Wizard integriert und müssen manuell angepasst werden. 

Alternativtext (Alt-Text) ist eine Textbeschreibung eines Bildes auf einer Webseite.

Einige Besucher verwenden möglicherweise unterstützende Technologien wie Screenreader, um durch Websites zu navigieren. Diese lesen den Besuchern den Inhalt der Website vor, einschließlich des Alt-Textes. 

Alt-Text ist daher ein wichtiger Bestandteil einer Website. Über ihn können Besucher, die diese Technologien verwenden, auf den Inhalt zugreifen und verstehen, was das jeweilige Bild enthält. Erfahre hier mehr über Alt-Text und Barrierefreiheit.

Der Farbkontrast ist ein Maß für den Unterschied in der wahrgenommenen Helligkeit zwischen zwei Farben und wird als Verhältnis im Bereich von 1:1 (kein Kontrast) bis 21:1 (starker Kontrast) wiedergegeben. Mit einem starken Kontrast sind Website-Inhalte gut zu sehen und zu lesen. 

Das erforderliche Farbkontrastverhältnis hängt von der Art des Elements und dem Level an Web Content Accessibility Guidelines (WCAG)ab, das du erreichen möchtest - AA (die Mindestanforderung), oder AAA (verbessert) an:

Hinweis: Für den Wizard für Barrierefreiheit ist derzeit nur das Level AA erforderlich.

Text oder Elemente, die auf andere Seiten, Abschnitte oder Websites verlinken, sollten so beschreibend wie möglich sein. So ist zum Beispiel „Mehr über unsere neuesten Studien erfahren“ eindeutiger als „Mehr erfahren“. Es sollte auch klar sein, ob Texte zu einer Aktion führen, z. B. dem Absenden eines Formulars. Informiere dich in den Web Content Accessibility Guidelines (WCAG) über den Zweck von Links.

Informationen, die durch die Farbwahl vermittelt werden, sollten zusätzlich separate Indikatoren haben, wie zum Beispiel Muster, Schriftart und Symbole. Verlinkter Text sollte beispielsweise unterstrichen sein und Grafiken sollten auch Daten mit unterschiedlichen Mustern oder Texturen anzeigen. Informiere dich in den Web Content Accessibility Guidelines (WCAG) über die Verwendung von Farben.

Text auf Bildern (z. B. Fotos von Zeichen oder Slogans) kann von Screenreadern nicht gelesen werden. Wir empfehlen, diese Bilder, wenn möglich, durch echten Text zu ersetzen. 

Wenn der Bildtext ein wichtiger Teil des Website-Inhalts oder für die Vermittlung von Informationen ist, füge den Text in die Bildbeschreibung (Alt-Text) ein. Erfahre hier mehr über Text in Bildern.

Einige Video- und Audio-Player sind möglicherweise so eingestellt, dass sie beim Laden der Seite automatisch abgespielt werden. Dies kann jedoch bei Besuchern zu Verwirrung und Ablenkung führen und unterstützende Technologien beeinträchtigen. So kann zum Beispiel ein Audio-Player, der automatisch startet, einen Screenreader überschreiben oder -„sprechen“. 

Daher solltest du Besuchern ermöglichen, den Inhalt anzuhalten oder zu pausieren und stumm zu schalten. Erfahre hier mehr über das Hinzufügen von Steuerelementen.

Website-Elemente/-Komponenten sollten auch beim Zoomen im Browser sichtbar sein. Das dient dazu, dass Nutzer mit Sehbehinderungen die Website vergrößern und trotzdem den gesamten Inhalt der Seite sehen können. Du kannst dies überprüfen, indem du eine Vorschau der Website anzeigst und den Zoom deines Browsers auf 200 % änderst. Erfahre hier mehr über herangezoomte Inhalte.

Web-Barrierefreiheit ist in mehreren Ländern eine gesetzliche Anforderung. Auch wenn dies in deiner Region nicht gesetzlich vorgeschrieben ist, empfehlen wir dennoch, die Erklärung hinzuzufügen. Diese zeigen das Engagement der Website oder deines Kunden, eine Website bereitzustellen, die allen Besuchern gefällt. Erfahre hier mehr über Barrierefreiheitserklärungen.