Die Vorschriften zur Einhaltung der Bestimmungen zu Barrierefreiheit unterscheiden sich von Region zu Region (ADA, DDA, 508, 504, AODA, EIR, ICT, UFAS usw.). Die meisten Bestimmungen basieren auf den ...

Barrierefreiheit: Einhaltung regionaler Gesetze

<div data-component-type="text"><div>Die Vorschriften zur Einhaltung der Bestimmungen zu Barrierefreiheit unterscheiden sich von Region zu Region (ADA, DDA, 508, 504, AODA, EIR, ICT, UFAS usw.). Die meisten Bestimmungen basieren auf den internationalen Spezifikationen, die in den WCAG (Web Content Accessibility Guidelines) dargelegt sind.</div></div><div data-component-type="text"><div>Wix kümmert sich um viele der Backend-Funktionen und -Konfigurationen, die deine Website benötigt, um barrierefrei zu sein: Tastatursemantik, die Definition von ARIA-Attributen für von uns bereitgestellte Elemente, die Bereitstellung visueller Indikatoren und vieles mehr. Unsere Checkliste zeigt, wie du <strong>den Inhalt, den du zu deiner Website hinzufügst,</strong> barrierefrei machst.</div></div><div data-component-type="text"><div>Da die regionale Gesetze variieren können, haben wir eine Liste mit universellen Schritten erstellt, die du ausführen kannst. Die Punkte auf der Liste decken die Grundlagen für jede Region ab: <a rel="nofollow" title="Follow link" href="https://support.wix.com/de/article/barrierefreiheit-checkliste-zur-verbesserung-der-barrierefreiheit-deiner-website">Barrierefreiheit-Checkliste</a>.</div></div><div data-component-type="text"><div>Die Einhaltung der Bestimmungen ist eine rechtliche Angelegenheit Wenn du die Checkliste abgehakt hast, musst du daher deine Website von einem regionalen, juristischen Berater für Barrierefreiheit überprüfen lassen.</div></div><div data-component-type="text"><div>Die Prüfung bestätigt entweder, dass deine Website mit den Bestimmungen konform ist oder stellt dir die verbleibenden Schritte zur Verfügung, die für die Einhaltung der Bestimmungen zur Barrierefreiheit in deiner Region erforderlich sind.</div></div><div data-component-type="text"><div>Wix kann zwar nicht garantieren, dass die Nutzung unserer Dienste allen Bestimmungen und weltweiten Vorschriften zur Barrierefreiheit entspricht, aber unsere Experten Kundenservice-Experten aus dem Support-Team helfen dir gerne, um dich bei der Durchführung zusätzlicher Schritte in deiner Region zu unterstützen. </div></div><div data-component-type="text"><div>Wir arbeiten ständig an der Aktualisierung und Verbesserung unserer Produkte. Wenn du uns Feedback zu unseren aktuellen Barrierefreiheits-Tools und -Funktionen geben möchtest oder Funktionen vorschlagen möchtest, die du dir für die Zukunft wünschst, kannst du einfach Kontakt zu unserem <a href="http://www.wix.com/contact" target="_blank">Support-Team aufnehmen</a>.</div></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Wichtig:</div><div class="info-content"><div>Als Website-Eigentümer liegt es in deiner Verantwortung, deine Website gemäß der Gesetze, die auf dich und deine Website-Besucher zutreffen, zu gestalten.</div></div></div></div>

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 Sehbehind...

Barrierefreiheit: Deine Website für Screenreader vorbereiten

<div data-component-type="text"><div>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.</div></div><div data-component-type="text"><div>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.</div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Hinweis:</div><div class="info-content"><div>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.</div></div></div></div><div data-component-type="text"><div><strong>In diesem Artikel erfährst du mehr über folgende Themen:</strong></div></div><div data-component-type="text"><ul>
  <li><a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-deine-website-f%C3%BCr-screenreader-vorbereiten#about-your-sites-dom-order" target="">Die DOM Order deiner Website</a></li>  <li><a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-deine-website-f%C3%BCr-screenreader-vorbereiten#changing-the-dom-order-of-your-site" target="">Die DOM Order deiner Website manuell ändern</a></li></ul></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="about-your-sites-dom-order" level="3">Über die DOM Order deiner Website</h2></div><div data-component-type="text"><div>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.</div></div><div data-component-type="text"><div>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:</div></div><div data-component-type="text"><ul>
  <li>Windows + Firefox oder Chrome: <strong>NVDA</strong> (kostenloser Reader)</li>  <li>Mac + Safari: <strong>Voiceover</strong> (Integrierter Reader)</li></ul></div><div data-component-type="text"><div>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.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="changing-the-dom-order-of-your-site" level="3">Die DOM Order deiner Website ändern</h2></div><div data-component-type="text"><div>Wenn du die DOM Order deiner Website testest und bemerkst, dass sie nicht logisch ist, kannst du sie manuell im <a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-über-den-wizard-für-barrierefreiheit" target="_blank">Wizard für Barrierefreiheit</a> ä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.</div></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Wichtig:</div><div class="info-content"><div>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.</div></div></div></div><div data-component-type="heading"><h2 id="" level="4">Um die DOM-Einstellungen zu ändern:</h2></div><div data-component-type="text"><ol>
  <li>Wähle in der oberen Leiste deines Editors <strong>Einstellungen</strong>.</li>  <li>Wähle <strong>Wizard für Barrierefreiheit</strong>.</li>  <li>Wähle oben rechts im Wizard das Symbol für Weitere Aktionen <img data-composite="true" src="https://lh5.googleusercontent.com/GFmdhoQTiERQyGvLuRHuRFNxOsx1FyyNRAH-nlVessPwc1sIvGDi7FPnijKu2bCkNqtijWgK4njxDfpTK5yZj-mvSQmDZT8VPnp_9fPURODwFRqUbBF_qrA0qd1LV1Juiv9rJ1Uv" />.</li>  <li>Wähle <strong>Erweiterte Einstellungen für Barrierefreiheit</strong>.</li>  <li>Wählen Sie<strong> Automatische DOM Order</strong>.</li>  <li>Deaktiviere den Schalter im Panel.</li>  <li>Wähle im Pop-up-Fenster die Option <strong>Deaktivieren</strong>.</li>  <li>Wähle unten links im Editor das Ebenen-Symbol <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/03/22/f52b1de4-3721-47b4-8588-8e0f10fbe5cb/33bdef84-9b33-4f67-bfb3-adef581774af.png" />.</li>  <li>Ü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.</li>  <li>Klicke und ziehe die entsprechenden Elemente in die gewünschte Reihenfolge.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d64c0377-8ade-4c01-a588-356eb4091011/2022/05/20/61c8c1c4-4c14-4b39-827d-ac8d5f497c55/854c01c0-bf04-4eac-8551-1191d21404fa.png" /></div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Hinweise:</div><div class="info-content"><ul>
  <li>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.</li>  <li>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.</li></ul></div></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Nächste Schritte:</div><div class="info-content"><ul>
  <li>Öffne den Mobile-Editor und wiederhole die gleichen Schritte.</li>  <li>Gehe zurück zur <a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-checkliste-zur-verbesserung-der-barrierefreiheit-deiner-website" target="_blank">Checkliste für Barrierefreiheit</a>, um weiter an der Barrierefreiheit deiner Website zu arbeiten.</li></ul></div></div></div>

Zurzeit bietet Wix keine kostenpflichtigen oder kostenlosen Bewertungen von Experten an, die überprüfen, wie barrierefrei deine Website ist. Um deine Website überprüfen zu lassen, musst du dich an ein...

Barrierefreiheit Funktionsvorschlag: Eine Bewertung von einem Experten von Wix für Barrierefreiheit erhalten

<div data-component-type="text"><div>Zurzeit bietet Wix keine kostenpflichtigen oder kostenlosen Bewertungen von Experten an, die überprüfen, wie barrierefrei deine Website ist. Um deine Website überprüfen zu lassen, musst du dich an einen externen Berater für Barrierefreiheit in deiner Region wenden.</div></div><div data-component-type="text"><div>Wir arbeiten konstant daran, unsere Produkte zu aktualisieren und zu verbessern. Dein Feedback ist uns daher sehr wichtig.</div></div>

Die Hierarchie deiner Website (ihre Struktur) hilft Webbrowsern und Screenreadern zu verstehen, wie der Website-Inhalt organisiert werden sollte. Du kannst HTML-Tags zu dem Text auf deiner Website hin...

Barrierefreiheit: Die Struktur deiner Website vorbereiten

<div data-component-type="text"><div>Die Hierarchie deiner Website (ihre Struktur) hilft Webbrowsern und Screenreadern zu verstehen, wie der Website-Inhalt organisiert werden sollte. Du kannst <a data-composite="true" href="https://support.wix.com/de/article/die-überschriften-tags-deiner-seite-verwalten" target="">HTML-Tags</a> zu dem Text auf deiner Website hinzufügen, um seinen Platz in der Website-Reihenfolge festzulegen und Besuchern ein klares Erlebnis zu bieten.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="recommendations-for-preparing-text" level="3">Empfehlungen für die Textaufbereitung</h2></div><div data-component-type="text"><div>Wir empfehlen, die folgenden Richtlinien bei der Aufbereitung von Website-Texten zu beachten:</div></div><div data-component-type="text"><ul>
  <li><strong>HTML-Tags für deinen Text verwenden:</strong> Jede Seite sollte eine H1-Überschrift haben, und danach sollten die HTML-Tags auf jeder Seite fortlaufend sein. Wenn die Hauptüberschrift auf der Seite beispielsweise ein H1-Tag ist, sollte der Untertitel H2 sein und so weiter. Auf diese Weise können Besucher mit Sehbehinderungen in logischer Reihenfolge zwischen deinen Inhalten wechseln.</li>  <li><strong>Die Überschriften sollten beschreibend sein:</strong> Stelle sie dir als Bezeichnung für den darunter liegenden Text vor (das ist auch für SEO wichtig). </li>  <li><strong>Abstände sind wichtig:</strong> Wenn du beim Bearbeiten deines Texts eine Überschrift in mehrere Zeilen aufteilen möchtest, verwende die Tastenkombination <strong>Shift + Eingabetaste</strong>, um einen Zeilenumbruch einzufügen, und nicht die <strong>Eingabetaste</strong>, um in jeder Zeile ein neues Überschriftenelement zu erstellen. </li>  <li><strong>Füge Überschriften zum Seitentext hinzu:</strong> H1-Tags, die zu einer Website-Kopfzeile hinzugefügt wurden, werden auf allen Seiten angezeigt, auf denen die Kopfzeile angezeigt wird. Wir empfehlen daher, stattdessen Überschriften in den Body der Seite einzufügen. <br /> <strong> Tipp: </strong>Wenn du eine einseitige Website ohne zusätzliche Seiten hast, kannst du diese Empfehlung ignorieren.</li></ul></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-html-tags-to-text" level="3">HTML-Tags zum Text hinzufügen</h2></div><div data-component-type="text"><div>Füge HTML-Tags zum Website-Text hinzu, um die Hierarchie zu definieren. Du kannst das Tag in den Einstellungen/im Design des Textes in deinem Editor festlegen oder es im Wizard für Barrierefreiheit auswählen (nur auf Wix Editor Websites).</div></div><div data-component-type="tabs"><div class="tabs-wrapper"><div class="headings-wrapper"><div data-slug="Studio-Editor" class="tab-heading heading-0">Studio Editor</div><div data-slug="Wix-Editor" class="tab-heading heading-1">Wix Editor</div><div data-slug="Wizard-für-Barrierefreiheit" class="tab-heading heading-2">Wizard für Barrierefreiheit</div></div><div class="tab-contents-wrapper"><div class="tab-content"><div data-component-type="text"><ol>
  <li>Klicke oben rechts im Editor auf das Symbol für <strong>Inspektor öffnen</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/06/14/2dd40586-1f79-4376-aee0-387212a246bb/dfed4075-2e24-4ad8-a7c4-8857038d5f16.png" />.</li>  <li>Klicke auf <strong>Design</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/01/15/89d6f135-f1be-4ecf-ad3c-c472a012387f/3f8a4045-d91e-4fd7-afcf-0fec7041d10f.png" />.</li>  <li>Wähle ein HTML-Tag aus dem Dropdown-Menü aus.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/06/07/37324b05-3e43-4ff6-8c7a-4f3fa5be9df0/9dcfbe15-8a57-464f-adaa-f95cba9355b7.jpg" alt="Screenshot des geöffneten Design-Tabs des Inspektor-Panels. Der Mauszeiger klickt auf das Dropdown-Menü für das HTML-Tag." /></div></div></div><div class="tab-content"><div data-component-type="text"><ol>
  <li>Wähle den entsprechenden Text in deinem Editor aus.</li>  <li>Wähle <strong>Text bearbeiten</strong> aus.</li>  <li>Wähle <strong>SEO &amp; Barrierefreiheit</strong> aus.</li>  <li>Wähle ein HTML-Tag aus dem Dropdown-Menü aus.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/06/07/38c0f86e-2441-4dbf-ba6b-6ed3a63f3ec6/b58c3202-ed38-4667-9424-d99e0570b6d6.jpg" alt="Screenshot des geöffneten Design-Tabs des Panels für Texteinstellungen. Der Mauszeiger klickt auf das Dropdown-Menü für das HTML-Tag." /></div></div></div><div class="tab-content"><div data-component-type="text"><ol>
  <li>Wähle <strong>Einstellungen</strong>.</li>  <li>Wähle <strong>Wizard für Barrierefreiheit</strong>.</li>  <li>Wähle <strong>Meine Website durchsuchen</strong> aus.</li>  <li>Wähle Karten mit dem Titel <strong>Bestimmung der Überschrift</strong> aus.</li>  <li>Wähle das entsprechende HTML-Tag aus dem Dropdown-Menü aus.</li>  <li>Klicke auf <strong>Überschrift bestimmen</strong>.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/06/07/cac03724-c700-4ba6-846d-adfcc8518a0f/5843629d-dfa8-4e85-9150-91f8932579f4.jpg" alt="Screenshot der Karte zur Bestimmung der Überschriften im Wizard. Der Mauszeiger klickt auf den Button „Überschrift bestimmen“." /></div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Hinweis:</div><div class="info-content"><div>Der Wizard für Barrierefreiheit ist <a data-composite="true" href="https://support.wix.com/de/article/studio-editor-funktionsvorschlag-wizard-für-barrierefreiheit" target="">derzeit nicht im Studio Editor verfügbar</a>.</div></div></div></div></div></div></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Gut zu wissen:</div><div class="info-content"><div>Der Inhalt von Websites wird von der DOM Order deiner Website-Seiten „gelesen“. Du kannst diese Reihenfolge überprüfen und bei Bedarf anpassen. <a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-deine-website-für-screenreader-vorbereiten" target="">Erfahre mehr über das Organisieren der Reihenfolge auf deiner Website</a>.</div></div></div></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Nächster Schritt:</div><div class="info-content"><div>Gehe zurück zur <a href="https://support.wix.com/de/article/barrierefreiheit-checkliste-zur-verbesserung-der-barrierefreiheit-deiner-website">Checkliste für Barrierefreiheit</a>, um die Barrierefreiheit deiner Website weiter zu verbessern.</div></div></div></div>

Damit unterstützende Technologien deine Website korrekt interpretieren können, empfehlen wir, die Sprache(n) deiner Website einzurichten und nach Bedarf zu verwalten.Woher erhält Wix Informationen?
  ...

Barrierefreiheit: Die Sprache deiner Website festlegen und verwalten

<div data-component-type="text"><div>Damit unterstützende Technologien deine Website korrekt interpretieren können, empfehlen wir, die Sprache(n) deiner Website einzurichten und nach Bedarf zu verwalten.</div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Woher erhält Wix Informationen?</div><div class="info-content"><ul>
  <li>Wir geben Empfehlungen gemäß der <a data-composite="true" href="https://www.w3.org/TR/WCAG21/#abstract" target="_blank">Web Content Accessibility Guidelines (WCAG)</a>, das vom <a data-composite="true" href="https://www.w3.org/" target="_blank">W3C-Gremium</a> entwickelt wurde.</li>  <li>Dieser Artikel basiert auf dem <a data-composite="true" href="https://www.w3.org/WAI/WCAG21/Understanding/language-of-page" target="_blank">Erfolgskriterium „Sprache der Seite“ (3.1.1)</a>.</li></ul></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="site-language-and-accessibility" level="3">Website-Sprache und Barrierefreiheit</h2></div><div data-component-type="text"><div>Einige Website-Besucher verwenden unterstützende Technologien und Einstellungen (z. B. Screenreader und Live-Unterschriften), wenn sie im Internet surfen. Wenn du die Hauptsprache der Website festlegst, erhalten diese Technologien die Informationen, die sie benötigen, um den Inhalt genau darzustellen. </div></div><div data-component-type="text"><div>Die von dir festgelegte Sprache:</div></div><div data-component-type="text"><ul>
  <li>Gibt die Schrift/Zeichen an, die im Text verwendet werden</li>  <li>Legt fest, wie Textinhalte vorgelesen werden sollen (z. B. Ausdruck, Akzent, Tonhöhe und Sprechgeschwindigkeit)</li>  <li>Teilt dem Gerät/Browser mit, in welcher Sprache generierte Bildunterschriften dargestellt werden sollen.</li></ul></div><div data-component-type="text"><div>Wenn die Website-Sprache falsch ist, kann dies zu Problemen für Besucher führen, die diese Technologien verwenden (z. B. können Screenreader unterschiedliche Akzente verwenden oder Dinge falsch sprechen). Daher ist es wichtig, die Sprachen deiner Website korrekt einzustellen und zu verwalten, um Besuchern das bestmögliche Erlebnis zu bieten.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="checking-and-setting-the-language-of-a-single-language-site" level="3">Die Sprache einer einsprachigen Website überprüfen und festlegen</h2></div><div data-component-type="text"><div>Wenn du eine einsprachige Website hast, kannst du die Sprache in der Website-Verwaltung überprüfen und bei Bedarf ändern.</div></div><div data-component-type="heading"><h2 id="" level="4">Um die Sprache der Website zu überprüfen oder festzulegen:</h2></div><div data-component-type="text"><ol>
  <li>Öffne die <a data-composite="true" href="https://www.wix.com/my-account/site-selector/?buttonText=Manage%20Settings&amp;title=Select%20a%20Site&amp;autoSelectOnSingleSite=true&amp;actionUrl=https://www.wix.com/dashboard/{{metaSiteId}}/manage-website" target="_blank">Einstellungen</a> in deiner Website-Verwaltung.</li>  <li>Klicke auf <strong>Sprache &amp; Region</strong>.</li>  <li>Klicke auf das Dropdown-Menü <strong>Website-Sprache</strong> und lege die Sprache deiner Website fest.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/10/08/99395f49-2d43-42ef-94be-133521c70c58/91dfc908-6141-4db2-a680-b9260243b9da.jpg" alt="Screenshot des Tabs für Sprache und Region einer Website. Das Sprachmenü der Website ist geöffnet und der Mauszeiger klickt auf „English“." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="changing-a-sites-language-in-the-accessibility-wizard" level="3">Die Sprache einer Website im Wizard für Barrierefreiheit ändern</h2></div><div data-component-type="text"><div>Möglicherweise wirst du aufgefordert, die Sprache einer einsprachigen Website im Wizard für Barrierefreiheit zu ändern. Führe die Schritte aus, um die Sprache in deinem Website-Builder zu aktualisieren.</div></div><div data-component-type="tabs"><div class="tabs-wrapper"><div class="headings-wrapper"><div data-slug="Wix-Editor" class="tab-heading heading-0">Wix Editor</div><div data-slug="Studio-Editor" class="tab-heading heading-1">Studio Editor</div></div><div class="tab-contents-wrapper"><div class="tab-content"><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Öffne deinen Editor</a>.</li>  <li>Klicke oben auf <strong>Einstellungen</strong> und wähle <strong>Wizard für Barrierefreiheit</strong>.</li>  <li>(Nur beim ersten Mal) Klicke rechts im Panel „Wizard für Barrierefreiheit“ auf <strong>Website durchsuchen</strong>.</li>  <li>Wähle oben im Editor <strong>Einstellungen</strong>.</li>  <li>Klicke in Schritt 1 auf das einklappbare Symbol <strong>Alle Seiten</strong>.</li>  <li>Klicke auf das Dropdown-Menü unter <strong>Was ist die Hauptsprache deiner Website?</strong> und wähle die Sprache deiner Website aus.</li>  <li>Klicke auf <strong>Website-Sprache festlegen</strong>.</li></ol></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Hinweis:</div><div class="info-content"><div>Die Karte wird nur angezeigt, wenn die Sprache deiner Website nicht mit der Sprache des Inhalts selbst übereinstimmt (z. B. ist die Sprache der Website auf Englisch eingestellt, aber der Website-Text ist auf Spanisch).</div></div></div></div></div><div class="tab-content"><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Öffne deinen Editor</a>.</li>  <li>Klicke links im Editor auf <strong>Website-Prüfer</strong> <img data-composite="true" src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXemmwNHvNgFnJm8W_kxBSKj8aBd0JWqS5jPGbDBFniNkCcKFyRA4DuJxGX2w5q7xpAu9btr_Nwvr_qc4NPRmf_fmojZ03sC6QLaQF9p_5OHQFi5xvgPaZiVRJw5HMrBTOeyoX3rnTD_PGSF9kGhWZYDijdL?key=k_2EM6zsnpqJcxQF7aCXIg" />.</li>  <li>Wähle <strong>Probleme der Barrierefreiheit beheben</strong>.</li>  <li>Klicke auf <strong>Website durchsuchen</strong>.</li>  <li>Wähle den Tab <strong>Gefundene Probleme</strong>.</li>  <li>Öffne das Dropdown-Menü <strong>Website-Ebene</strong>.</li>  <li>Klicke neben <strong>Hauptsprache der Website</strong> auf <strong>Bearbeiten</strong>.</li>  <li>Wähle die entsprechende Sprache aus dem Dropdown-Menü aus.</li>  <li>Klicke auf <strong>Anwenden</strong>.</li></ol></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Tipp:</div><div class="info-content"><div>Auch wenn der Wizard für Barrierefreiheit die Sprache der Website nicht anzeigt, kannst du sie im Panel überprüfen und ändern.</div></div></div></div></div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="working-with-languages-on-a-multilingual-site" level="3">Mit Sprachen auf einer mehrsprachigen Website arbeiten</h2></div><div data-component-type="text"><div><a data-composite="true" href="https://support.wix.com/de/article/wix-multilingual-übersicht" target="">Mehrsprachige Websites</a> enthalten in der Regel Sprachmenüs, mit denen Besucher zwischen den Sprachen wechseln können. Den Flaggensymbolen in diesen Menüs wird automatisch Alt-Text zugewiesen, der die entsprechende Sprache widerspiegelt.</div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/10/08/658394b5-1087-472b-bf91-c33f9616fe5b/abbee5da-70fa-467a-b9c7-69e9267ad8fe.png" alt="Ein Sprachmenü auf einer mehrsprachigen Website. Ein Auszug der Konsole wird angezeigt, in dem Englisch als Alt-Text angezeigt wird." /></div></div><div data-component-type="text"><div>Da Screenreader sowohl Standard- als auch <a data-composite="true" href="https://support.wix.com/de/article/wix-editor-barrierefreiheit-deine-bilder-und-galerien-vorbereiten" target="">Alt-Text</a> lesen, können Menüs mit Text und Symbolen dazu führen, dass der Screenreader den Namen der Sprache wiederholt. Wir empfehlen daher, das Menü so einzustellen, dass nur der Text oder das Symbol im Editor deiner Website angezeigt wird.</div></div><div data-component-type="tabs"><div class="tabs-wrapper"><div class="headings-wrapper"><div data-slug="Wix-Editor-0" class="tab-heading heading-0">Wix Editor</div><div data-slug="Studio-Editor-1" class="tab-heading heading-1">Studio Editor</div></div><div class="tab-contents-wrapper"><div class="tab-content"><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Öffne deinen Editor</a>.</li>  <li>Wähle das Sprachmenü aus.</li>  <li>Klicke auf das Symbol für <strong>Layout</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8769cf44-f342-494c-b25f-cc98c9da3e82/2018/06/20/4fa6a5d1-d55f-4b0c-bd9f-24697271fc81.png" />.</li>  <li>Wähle aus, was du in dem Menü anzeigen möchtest:
    <ul>
      <li><strong>Flaggen:</strong>
        <ol>
          <li>Aktiviere den Schieberegler <strong>Flaggen anzeigen</strong>.</li>          <li>Wähle unter <strong>Anzeige</strong> die Option <strong>Nur Flaggen</strong> aus.</li>        </ol>      </li>      <li><strong>Name der Sprache:</strong>
        <ol>
          <li>Deaktiviere den Schieberegler <strong>Flaggen anzeigen</strong>.</li>          <li>Wähle unter <strong>Anzeige</strong> entweder <strong>Vollständiger Name</strong> oder <strong>Abgekürzt</strong>.</li>        </ol>      </li>    </ul>  </li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/10/22/fe978d8f-9e8c-40cc-8bf0-4f96058b7f8e/f606f948-ab8e-459d-bed6-cf98566560f5.jpg" alt="Screenshot des Menülayout-Panels eines Sprachmenüs im Wix Editor. Der Mauszeiger klickt auf die Option „Nur Flaggen“." /></div></div><div data-component-type="text"><div><a data-composite="true" href="https://support.wix.com/de/article/wix-multilingual-das-sprachmenü-von-wix-multilingual-auf-deiner-website-anpassen?tabs=Wix-Editor-0" target="">Mehr über das Ändern eines Sprachmenü-Layouts erfahren</a></div></div></div><div class="tab-content"><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Öffne deinen Editor</a>.</li>  <li>Wähle das Sprachmenü aus.</li>  <li>Klicke auf das Symbol für <strong>Layout</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/5c3e602a-8647-41f7-bb22-686374bf97ce/2021/07/22/cd35cb5a-d719-4418-8c89-ad0b33312491/bad0640a-6114-4280-972d-1a705ccb03b5.png" />.</li>  <li>Wähle aus, was du in dem Menü anzeigen möchtest:
    <ul>
      <li><strong>Flaggen:</strong>
        <ol>
          <li>Aktiviere den Schieberegler <strong>Flaggen anzeigen</strong>.</li>          <li>Wähle unter <strong>Anzeige</strong> die Option <strong>Nur Flaggen</strong> aus.</li>        </ol>      </li>      <li><strong>Name der Sprache:</strong>
        <ol>
          <li>Deaktiviere den Schieberegler <strong>Flaggen anzeigen</strong>.</li>          <li>Wähle unter <strong>Anzeige</strong> entweder <strong>Vollständiger Name</strong> oder <strong>Abgekürzt</strong>.</li>        </ol>      </li>    </ul>  </li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/10/08/56175416-6dff-498b-8b2c-15c814c1bc2b/a4fe698b-f126-4331-b24d-4f62a1071858.jpg" alt="Screenshot des Menülayout-Panels eines Sprachmenüs im Studio Editor. Der Mauszeiger klickt auf die Option „Vollständiger Name“." /></div></div><div data-component-type="text"><div><a data-composite="true" href="https://support.wix.com/de/article/wix-multilingual-das-sprachmenü-von-wix-multilingual-auf-deiner-website-anpassen?tabs=Wix-Editor-0" target="">Mehr über das Ändern eines Sprachmenü-Layouts erfahren</a></div></div></div></div></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Nächster Schritt:</div><div class="info-content"><div>Gehe zurück zur <a href="https://support.wix.com/de/article/barrierefreiheit-checkliste-zur-verbesserung-der-barrierefreiheit-deiner-website">Checkliste für Barrierefreiheit</a>, um die Barrierefreiheit deiner Website weiter zu verbessern.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="faqs" level="3">Häufig gestellte Fragen (FAQ)</h2></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Ich habe manuell verschiedene Sprachen zur Website hinzugefügt. Was soll ich als Hauptsprache festlegen?</h4><div class="collapsible-content"><div>Wenn deine Website Inhalte in mehreren Sprachen enthält, aber <strong>nicht</strong> Wix Multilingual, solltest du als Hauptsprache diejenige festlegen, die du am häufigsten verwendest.</div><div><br /></div><div>Wenn die Sprachen auf der Website gleich oft verwendet werden, empfehlen wir, die Sprache auszuwählen, die du bei der Erstellung der Website verwendet hast.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Kann ich die Hauptsprache der Website ändern, wenn ich Wix Multilingual habe?</h4><div class="collapsible-content"><div>Wenn du Wix Multilingual zu deiner Website hinzugefügt hast, kann die Hauptsprache, die du <a data-composite="true" href="https://support.wix.com/de/article/wix-multilingual-wix-multilingual-hinzufügen-und-einrichten" target="">beim Einrichten</a> gewählt hast, nicht geändert werden.<a data-composite="true" href="https://support.wix.com/de/article/wix-multilingual-funktionsvorschlag-die-hauptsprache-deiner-website-ändern" target="">Für diese Funktion abstimmen</a></div></div></div></div>

Besucher mit Sehbehinderungen können unterstützende Technologien wie Screenreader verwenden, um deine Website zu durchsuchen. Füge Beschreibungen zu deinen Bildern und Galerien mit Alt-Text hinzu, um ...

Barrierefreiheit: Deine Bilder und Galerien vorbereiten

<div data-component-type="text"><div>Besucher mit Sehbehinderungen können unterstützende Technologien wie Screenreader verwenden, um deine Website zu durchsuchen. Füge Beschreibungen zu deinen Bildern und Galerien mit Alt-Text hinzu, um sie für diese Besucher zugänglich zu machen.</div></div><div data-component-type="text"><div>Alt-Text bietet Informationen über deine Medien und hilft Suchmaschinen und Screenreadern, sie zu „lesen“.</div></div><div data-component-type="text"><div><strong>In diesem Artikel erfährst du mehr über:</strong></div></div><div data-component-type="text"><ul>
  <li><a data-composite="true" href="https://support.wix.com/de/article/wix-editor-barrierefreiheit-deine-bilder-und-galerien-vorbereiten#adding-alt-text" target="">Alt-Text hinzufügen</a></li>  <li><a data-composite="true" href="https://support.wix.com/de/article/wix-editor-barrierefreiheit-deine-bilder-und-galerien-vorbereiten#marking-images-as-decorative" target="">Dekorative Bilder</a></li>  <li><a data-composite="true" href="https://support.wix.com/de/article/wix-editor-barrierefreiheit-deine-bilder-und-galerien-vorbereiten#text-in-images" target="">Bilder, die Text enthalten</a></li>  <li><a data-composite="true" href="https://support.wix.com/de/article/wix-editor-barrierefreiheit-deine-bilder-und-galerien-vorbereiten#images-of-text" target="">Nur Textbilder</a></li></ul></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-alt-text" level="3">Alt-Text hinzufügen</h2></div><div data-component-type="text"><div>Alt-Text sorgt dafür, dass Besucher, die Screenreader verwenden, auf den Inhalt deiner Website zugreifen und ihn verstehen können. Daher empfehlen wir, ihn zu allen relevanten Bildern hinzuzufügen, einschließlich Medien, die in Apps wie Wix Stores, Wix Bookings usw. angezeigt werden.</div></div><div data-component-type="text"><div>Füge Alt-Text zu Bildern und Galerien in deinem Website-Builder hinzu (Wix Editor und Studio Editor). Wenn du den Wix Editor verwendest, kannst du Alt-Text auch im <a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-über-den-wizard-für-barrierefreiheit" target="_blank">Wix Wizard für Barrierefreiheit</a>.</div></div><div data-component-type="tabs"><div class="tabs-wrapper"><div class="headings-wrapper"><div data-slug="Wizard-für-Barrierefreiheit" class="tab-heading heading-0">Wizard für Barrierefreiheit</div><div data-slug="Studio-Editor" class="tab-heading heading-1">Studio Editor</div><div data-slug="Wix-Editor" class="tab-heading heading-2">Wix Editor</div></div><div class="tab-contents-wrapper"><div class="tab-content"><div data-component-type="text"><div>Verwende den Wizard, um Alt-Text zu Website-Bildern und Bildern hinzuzufügen, die in deinen Apps von Wix Stores und Bookings angezeigt werden.</div></div><div data-component-type="heading"><h2 id="" level="4">Um Alt-Text zu Website-Bildern hinzuzufügen:</h2></div><div data-component-type="text"><ol>
  <li>Klicke im Hauptmenü des Editors auf <strong>Einstellungen</strong>.</li>  <li>Wähle <strong>Wizard für Barrierefreiheit</strong>.</li>  <li>Klicke auf <strong>Website durchsuchen</strong>.</li>  <li>Wähle Karten mit dem Titel <strong>Alt-Text</strong> aus.</li>  <li>Gib die Bildbeschreibung im Feld <strong>Was ist auf dem Bild?</strong> ein.</li>  <li>Klicke auf <strong>Alt-Text einrichten</strong>.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/01/15/81f37376-0fbf-490c-994c-5f4aaf0b8c1c/bd403d1c-6d92-4eca-93b3-3d67a9de423a.png" alt="Der Wizard für Barrierefreiheit. Das Feld für den Alt-Text eines Bild wurde ausgefüllt. Der Cursor klickt auf „Alt-Text einrichten“." /></div></div><div data-component-type="heading"><h2 id="" level="4">Um Alt-Text zu App-Bildern hinzuzufügen</h2></div><div data-component-type="text"><ol>
  <li>Klicke im Hauptmenü des Editors auf <strong>Einstellungen</strong>.</li>  <li>Wähle <strong>Wizard für Barrierefreiheit</strong>.</li>  <li>Klicke auf <strong>Website durchsuchen</strong>.</li>  <li>Wähle das Aufklappmenü <strong>Shops</strong>/<strong>Bookings</strong> aus.</li>  <li>Wähle Karten mit dem Titel <strong>Alt-Text</strong> aus.</li>  <li>(Nur für Shops) Wähle jedes Produktbild/Produktvariantenbild aus.</li>  <li>Gib die Bildbeschreibung im Feld <strong>Was ist auf dem Bild?</strong> ein.</li>  <li>Klicke auf <strong>Alt-Text einrichten</strong>.</li>  <li>Klicke auf <strong>OK</strong>.</li></ol><div><br /></div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/01/15/fa5d9a6b-afc0-482b-85e1-9d8df9ca0cc8/c4a46afd-8eba-405e-a681-21dd5ed77769.png" alt="Das Feld für den Alt-Text für das Produktbild in Wix Stores wurde ausgefüllt. Die Buttons „Alt-Text einrichten“ und „Fertig“ sind hervorgehoben." /></div></div></div><div class="tab-content"><div data-component-type="text"><div>Füge Alt-Text zu einzelnen Bildern aus dem Einstellungsfenster und Pro Galleries aus der Medienverwaltung der Website hinzu.</div></div><div data-component-type="heading"><h2 id="" level="4">Um Alt-Text zu Bildern hinzuzufügen:</h2></div><div data-component-type="text"><ol>
  <li>Klicke auf das entsprechende Bild im Studio Editor.</li>  <li>Klicke auf das Symbol für Einstellungen <img data-composite="true" src="https://lh6.googleusercontent.com/8-UMJ89YYXHroj1NSpWPlvTwhmZwyU7bOQy46RT1qG2ufLc7_ol3Lo8NpRQjvjzuWE4IV_1tsJ-luN-IVxXWonsMDj8z8TNAi5Pv9SagQRbeIpIbv-aV1gbmPWErze9FcQ88tpgs" />.</li>  <li>Gib unter <strong>Beschreibung (relevant für Google)</strong> eine kurze Beschreibung für dein Bild ein.</li>  <li>Drücke zum Speichern die <strong>Enter</strong>-Taste auf deiner Tastatur.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/01/15/217b3d08-0263-4f60-a51f-9ecf253ec627/57bffe05-3b86-4edb-a264-fb2402f0538e.jpg" alt="Ein Bildeinstellungs-Panel im Studio Editor. Das Feld für Alt-Text wurde ausgefüllt und ist hervorgehoben." /></div></div><div data-component-type="heading"><h2 id="" level="4">Um Alt-Text zu Pro Galleries hinzuzufügen:</h2></div><div data-component-type="text"><ol>
  <li>Klicke im Studio Editor auf die Galerie.</li>  <li>Klicke auf <strong>Medien verwalten</strong>.</li>  <li>Wähle das entsprechende Bild aus.</li>  <li>Gib einen Titel für das Bild in das Feld ein.</li>  <li>Bearbeite den Alt-Text für dein Bild unter <strong>Alt-Text</strong>, wenn er sich vom Titel deines Bildes unterscheiden soll.</li>  <li>Klicke auf <strong>OK</strong>.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/01/15/592cca29-8e8b-41a0-bade-f8bcd41941db/9387defc-3128-4158-8c8e-084ec53cbc6e.png" alt="In der Medienverwaltung wurde ein Bild ausgewählt. Das Feld für den Alt-Text ist hervorgehoben und wurde ausgefüllt." /></div></div></div><div class="tab-content"><div data-component-type="text"><div>Für Bilder kannst du den Alt-Text über das Einstellungspanel hinzufügen, für Galerien über die Medienverwaltung.</div></div><div data-component-type="heading"><h2 id="" level="4">Um Alt-Text zu Bildern hinzuzufügen:</h2></div><div data-component-type="text"><ol>
  <li>Klicke im Editor auf das Bild.</li>  <li>Klicke auf das Symbol für Einstellungen <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/07611794-742f-4d53-8c5b-24ba712a6934/2020/06/23/06955fac-1634-4797-aeb6-b08b5e8a58f5/d9af6de1-fbfd-4b4c-92a0-4244031ed4f3.png" />.</li>  <li>Gib eine Beschreibung des Bildes unter <strong>Beschreibung (relevant für Google)</strong> ein.</li>  <li>Drücke zum Speichern die <strong>Enter</strong>-Taste auf deiner Tastatur.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/01/15/3c965d02-9870-49e7-bed4-a30e8c69e40c/76d7fc6d-9c29-46c4-8799-64ac40180937.png" alt="Das Bildeinstellungs-Panel im Editor. Das Feld Alt-Text wurde ausgefüllt und der Cursor bewegt sich darüber." /></div></div><div data-component-type="heading"><h2 id="" level="4">Um Alt-Text zu Galerien hinzuzufügen:</h2></div><div data-component-type="text"><ol>
  <li>Klicke im Editor auf die Galerie.</li>  <li>Klicke auf <strong>Medien verwalten</strong> oder <strong>Bilder ändern</strong>.</li>  <li>Klicke auf ein Bild, um es auszuwählen.</li>  <li>Gib einen Titel für das Bild auf der rechten Seite ein.</li>  <li>(Für Wix Pro Gallery) Bearbeite den Alt-Text für dein Bild unter <strong>Alt-Text</strong>, wenn er sich vom Titel deines Bildes unterscheiden soll.</li>  <li>Klicke auf <strong>OK</strong>.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/01/15/03389f2c-823a-48e6-84a6-27b55120223a/5c632a8f-9f4d-4310-9dc2-54d457b9849b.png" alt="Eine Pro Gallery in der Medienverwaltung. Das Feld für Alt-Text ist hervorgehoben." /></div></div></div></div></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Tipp:</div><div class="info-content"><div>Veröffentliche deine Website, damit der Alt-Text online geht.</div></div></div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Hinweis:</div><div class="info-content"><div>Es ist derzeit nicht möglich, Alt-Text gleichzeitig zu Bildern/Galerien hinzuzufügen. Wenn du dir diese Funktion wünschst, kannst du <a data-composite="true" href="https://support.wix.com/de/article/funktionsvorschlag-alt-text-in-großen-mengen-hinzufügen-und-bearbeiten" target="_blank">hier dafür abstimmen</a>.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="marking-images-as-decorative" level="3">Bilder als dekorativ markieren</h2></div><div data-component-type="text"><div>Dekorative Bilder sind Bilder, die nicht zum Inhalt deiner Website beitragen, da sie nur zu ästhetischen oder dekorativen Zwecken da sind.</div></div><div data-component-type="text"><div>Wenn ein Bild auf deiner Website nur Dekoration und für den Kontext deiner Website nicht relevant ist, musst du keinen Alt-Text hinzufügen. Du kannst ein Bild im Wizard für Barrierefreiheit als dekorativ markieren, um sicherzustellen, dass Suchmaschinen und Screenreader es automatisch überspringen.</div></div><div data-component-type="heading"><h2 id="" level="4">Um ein Bild als dekorativ zu markieren:</h2></div><div data-component-type="text"><ol>
  <li>Klicke oben im Editor auf <strong>Einstellungen</strong>.</li>  <li>Klicke auf <strong>Barrierefreiheit</strong>.</li>  <li>Klicke auf <strong>Website durchsuchen</strong>.</li>  <li>Klicke für das entsprechende Bild auf die Karte mit dem Titel <strong>Alternativtext</strong>.</li>  <li>Aktiviere das Kontrollkästchen neben <strong>Dieses Bild ist rein dekorativ und benötigt keine Beschreibung</strong>.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/01/10/0f47939b-860f-4234-b129-a75d139e4db5/95b1cf21-153f-4dcf-8e42-f663a1434275.png" alt="Screenshot, der zeigt, wie die dekorative Bildoption im Wizard für Barrierefreiheit aktiviert ist." /></div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Hinweis:</div><div class="info-content"><div>Du kannst Bilder nur dann als dekorativ markieren, wenn sie noch keinen Alt-Text haben. Um ein Bild mit Alt-Text als dekorativ zu markieren, entferne den Alt-Text im Editor und durchsuche deine Website erneut mit dem Wizard.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="text-in-images" level="3">Text in Bildern</h2></div><div data-component-type="text"><div>Dies bezieht sich auf Bilder, die abgebildeten oder hinzugefügten Text enthalten.</div></div><div data-component-type="text"><div>Text in Bildern kann von Suchmaschinen oder Screenreadern nicht „gelesen“ werden. Wenn das Bild jedoch notwendig ist und der Text einen Kontext zur Website hat, kannst du es der Bildbeschreibung hinzufügen.</div></div><div data-component-type="text"><div>Wenn der Text keinen Kontext hat oder nicht zum Inhalt der Website beiträgt, musst du ihn nicht zur Bildbeschreibung hinzufügen.</div></div><div data-component-type="text"><div>Wähle unten eine Option aus, um mehr über Bildtexte zu erfahren, die du zur Bildbeschreibung hinzufügen solltest.</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Wichtiger Text</h4><div class="collapsible-content"><div>Wichtiger Text ist Text in Bildern, der für den Kontext der Website wichtig ist und zum Inhalt beiträgt.</div><div><br /></div><div>Das folgende Bild kannzum Beispiel auf einer Nachrichten-Website erscheinen, die die Ereignisse einer Protestaktion beschreibt. Der Text im Bild ist für den Kontext der Website relevant und sollte der Bildbeschreibung hinzugefügt werden.</div><div><br /></div><div>Es könnte lauten: <em>Eine Gruppe von Menschen bei einer Protestaktion. Einer der Demonstranten hält ein Schild mit der Aufschrift „Nein!“ hoch.</em></div><div><br /></div><div>  <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/06/25/8c621748-0fcd-430e-ae15-86c3d41d7eff/541cb4ca-296f-4c18-a32a-4d488d618aa2.png" /></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Unwichtiger Text</h4><div class="collapsible-content"><div>Beispiele für Text in Bildern, der möglicherweise nicht relevant ist, sind Wasserzeichen oder Text, der zu dekorativen Zwecken hinzugefügt oder abgebildet ist.</div><div><br /></div><div>Das folgende Bild kannzum Beispiel in einem Blogbeitrag über eine Kathedrale erscheinen. Der Text auf den Schildern ist für den Kontext des Beitrags nicht relevant, sodass er nicht im Alt-Text enthalten sein muss.</div><div><br /></div><div>Die Bildbeschreibung könnte lauten: <em>Ein Straßenschild vor einer Kathedrale. Der Wegweiser ist mit Blumen bedeckt</em>.</div><div><br />
<img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/06/25/6a8340e5-3791-410f-8494-955c651a963e/c3ae110c-5562-4dff-803c-84d4b22ced0a.png" /></div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="images-of-text" level="3">Bilder von Texten</h2></div><div data-component-type="text"><div>Textbilder enthalten nur Text und keine anderen abgebildeten Elemente. Einige Beispiele dafür sind Bilder von Schriftarten oder Logos, die nur Text enthalten.</div></div><div data-component-type="text"><div>Da es sich nicht um „echte“ Textelemente handelt, können Textbilder nicht von Suchmaschinen oder Screenreadern gelesen werden. Wir empfehlen, sie nach Möglichkeit zu vermeiden und durch echte Textelemente zu ersetzen, um die SEO und Barrierefreiheit auf deiner Website zu verbessern. </div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Nächster Schritt:</div><div class="info-content"><div>Gehe zurück zur <a href="https://support.wix.com/de/article/barrierefreiheit-checkliste-zur-verbesserung-der-barrierefreiheit-deiner-website">Checkliste für Barrierefreiheit</a>, um die Barrierefreiheit deiner Website weiter zu verbessern.</div></div></div></div>

Für Besucher mit Sehbehinderungen kann es schwierig sein, den Unterschied zwischen dem Vordergrund und dem Hintergrund der Seiten einer Website zu erkennen. Wir empfehlen daher, den Farbkontrast auf d...

Barrierefreiheit: Deinen Text und deine Grafiken vorbereiten

<div data-component-type="text"><div>Für Besucher mit Sehbehinderungen kann es schwierig sein, den Unterschied zwischen dem Vordergrund und dem Hintergrund der Seiten einer Website zu erkennen. Wir empfehlen daher, den Farbkontrast auf deiner Website zu überprüfen und bei Bedarf anzupassen.</div></div><div data-component-type="text"><div><strong>In diesem Artikel erfährst du mehr über folgende Themen:</strong></div></div><div data-component-type="text"><ul>
  <li><a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-deine-texte-und-grafiken-vorbereiten#our-recommendations" target="">Unsere Empfehlungen</a></li>  <li><a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-deine-texte-und-grafiken-vorbereiten#finding-color-codes" target="">Farbcodes finden</a></li>  <li><a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-deine-texte-und-grafiken-vorbereiten#adjusting-color-contrast" target="">Farbkontrast im Wizard für Barrierefreiheit anpassen</a></li></ul></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="our-recommendations" level="3">Unsere Empfehlungen</h2></div><div data-component-type="text"><div>Um die Barrierefreiheit für Besucher mit unterschiedlichen Sehanforderungen zu erhöhen, empfehlen wir Folgendes:</div></div><div data-component-type="text"><ul><li>Die Text- und Hintergrundfarbe des Kontrasts zu einem Verhältnis von 4.5:1 für normalen Text und 3:1 für großen Text ändern. </li><li>Ein Kontrastverhältnis von mindestens 3:1 für Grafiken und Komponenten der Benutzeroberfläche (z. B. Eingabefelder, Platzhalter usw.). </li><li>Level AAA erfordert ein höheres Kontrastverhältnis von mindestens 7:1 für normalen Text und 4.5:1 für großen Text.</li></ul></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Gut zu wissen:</div><div class="info-content"><div>Großer Text ist definiert als über 14 Punkte (ca. 18px) und fett oder 18 Punkte (ca. 24px).</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="finding-color-codes" level="3">Farbcodes finden</h2></div><div data-component-type="text"><div>Du findest die Farbcodes in dem von dir verwendeten Website-Builder (Studio Editor, Editor usw.).</div></div><div data-component-type="tabs"><div class="tabs-wrapper"><div class="headings-wrapper"><div data-slug="Studio-Editor" class="tab-heading heading-0">Studio Editor</div><div data-slug="Wix-Editor" class="tab-heading heading-1">Wix Editor</div><div data-slug="ADI" class="tab-heading heading-2">ADI</div></div><div class="tab-contents-wrapper"><div class="tab-content"><div data-component-type="text"><ol>
  <li>Wähle das entsprechende Element aus (Text, Streifenhintergrund, Container-Box usw.).</li>  <li>Klicke oben rechts im Editor auf das Symbol für <strong>Inspektor öffnen</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/06/14/2dd40586-1f79-4376-aee0-387212a246bb/dfed4075-2e24-4ad8-a7c4-8857038d5f16.png" />.</li>  <li>Klicke auf <strong>Design</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/01/15/89d6f135-f1be-4ecf-ad3c-c472a012387f/3f8a4045-d91e-4fd7-afcf-0fec7041d10f.png" />.</li>  <li>Klicke auf das Farbfeld, um die Farbauswahl zu öffnen.</li>  <li>Fahre mit der Maus über die Farbe, um den Code zu sehen.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/06/06/a94613b8-833d-4fca-b2fe-bc88952971c9/8159577b-28c9-4533-b5dd-e8b00dce4247.jpg" alt="Die Farbauswahl im Studio Editor. Der Cursor bewegt sich über eine Farbe und der Code ist im Panel hervorgehoben." /></div></div></div><div class="tab-content"><div data-component-type="text"><ol>
  <li>Wähle das entsprechende Element (Text, Streifenhintergrund, Container-Box usw.) und öffne die <strong>Farbauswahl</strong>. </li>  <li>Fahre mit der Maus über eine der Farben, um den Farbcode zu sehen. </li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/06/06/987e1f71-14d9-4355-9600-9fdae03039c0/2e535f26-c7cd-4b48-bf08-f17406fc74a3.png" alt="Die Farbauswahl im Wix Editor. Der Cursor bewegt sich über eine Farbe und der Code ist im Panel hervorgehoben." /></div></div></div><div class="tab-content"><div data-component-type="text"><ol>
  <li>Wähle im oberen Menü <strong>Website-Design</strong> aus.</li>  <li>Wähle <strong>Farben</strong> aus.</li>  <li>Wähle unten im Menü Website-Farbe die Option <strong>Erweiterte Bearbeitung</strong>. </li></ol></div></div></div></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Farbkontraste testen</div><div class="info-content"><div>Es gibt zahlreiche Websites und Browser-Plugins wie <a href="https://webaim.org/resources/contrastchecker/" target="_ blank">Contrast Checker</a>, das den Farbkontrast testet, indem es die Vordergrund- und Hintergrundfarben vergleicht (anhand der Farbcodes). Um den Farbkontrast für den Text über einem Hintergrundbild zu überprüfen, empfehlen wir dir den <a href="https://developer.paciellogroup.com/resources/contrastanalyser/" target="_blank">Colour Contrast Analyser</a> zu verwenden, mit dem du die Hintergrundfarbe auswählen und testen kannst.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adjusting-color-contrast" level="3">Farbkontrast anpassen</h2></div><div data-component-type="text"><div>Du kannst den <a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-über-den-wizard-für-barrierefreiheit" target="_blank">Wizard für Barrierefreiheit</a> nutzen, um niedrige Farbkontraste auf deinen Website-Seiten zu finden und anzupassen. Der Wizard ist ein Tool, das deine Website auf mögliche Probleme mit der Barrierefreiheit überprüft und es dir ermöglicht, erweiterte Einstellungen zu aktivieren, um die Barrierefreiheit deiner Website weiter zu verbessern.</div></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Was du wissen solltest:</div><div class="info-content"><div>Der Wizard ist nur im Wix Editor verfügbar.Du kannst <a data-composite="true" href="https://support.wix.com/de/article/studio-editor-funktionsvorschlag-wizard-für-barrierefreiheit" target="_blank">hier für den Wizard für Barrierefreiheit im Studio Editor abstimmen</a></div></div></div></div><div data-component-type="heading"><h2 id="" level="4">Um den Kontrast anzupassen:</h2></div><div data-component-type="text"><ol>
  <li>Wähle <strong>Einstellungen</strong>.</li>  <li>Wähle <strong>Wizard für Barrierefreiheit</strong>.</li>  <li>Wähle <strong>Meine Website durchsuchen</strong>.</li>  <li>Wähle Karten mit dem Titel <strong>Farbkontrast</strong>.</li>  <li>Verwende den Schieberegler, um die Text- und Hintergrundfarbe anzupassen.</li>  <li>Wähle <strong>Änderungen übernehmen</strong>.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/06/06/df090a3b-8288-4687-b670-206f42e37cd4/23ddf314-fc74-4bb4-8064-8262b32ee11a.jpg" alt="Ein Farbkontrast ist im Wizard geöffnet. Der Kontrast wurde angepasst und der Cursor fährt über die Option „Änderungen übernehmen“." /></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Hast du Diagramme oder Daten auf deiner Website?</div><div class="info-content"><div>Kontrastreiche Farben sind eine großartige Möglichkeit, Daten auf deiner Website anzuzeigen. Wir empfehlen jedoch auch die andere Indikatoren zu verwenden (z. B. Texturen und Muster), um zwischen den Informationen zu unterscheiden. </div></div></div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Nächster Schritt:</div><div class="info-content"><div>Gehe zurück zur <a href="https://support.wix.com/de/article/barrierefreiheit-checkliste-zur-verbesserung-der-barrierefreiheit-deiner-website">Checkliste für Barrierefreiheit</a>, um die Barrierefreiheit deiner Website weiter zu verbessern.</div></div></div></div>

Schriftarten sind die Art und Weise, wie Text gestaltet ist. Wix bietet zahlreiche Schriftarten sowie die Möglichkeit, eigene Schriftarten hochzuladen und zu verwenden. Einige Schriftarten sind besser...

Barrierefreiheit: Schriftarten & Lesbarkeit

<div data-component-type="text"><div>Schriftarten sind die Art und Weise, wie Text gestaltet ist. Wix bietet zahlreiche Schriftarten sowie die Möglichkeit, eigene Schriftarten hochzuladen und zu verwenden. </div></div><div data-component-type="text"><div>Einige Schriftarten sind besser lesbar als andere; daher ist es wichtig, dass die Schriftarten, die du auf deiner Website verwendest, gut lesbar sind. Die Verwendung klarer, gut lesbarer Schriftarten kann Besuchern mit Seh- oder Leseschwäche helfen.</div></div><div data-component-type="text"><div>Wir empfehlen, die folgenden Richtlinien zu befolgen, wenn du Text zu deiner Website hinzufügst:</div></div><div data-component-type="text"><ul>
  <li>Wähle eine Schriftart, die ein Gleichgewicht zwischen Mehrdeutigkeit und Komplexität der Zeichen hat. Zeichen sollten leicht voneinander zu unterscheiden sein, aber auch einfache Muster und Formen haben.</li></ul></div><div data-component-type="text"><ul>
  <li>Verwende eine begrenzte Anzahl von Schriftarten auf deiner Website und vermeide mehrere Schriftarten im selben Textblock.</li></ul></div><div data-component-type="text"><ul>
  <li>Vermeide kleine Schriftgrößen, wenn möglich. Wir empfehlen für deinen Text eine Schriftgröße von 14 Pixel und mehr. </li></ul></div><div data-component-type="text"><ul>
  <li>Achte darauf, dass deine Schrift ausreichend Abstand zwischen Zeichen, Wörtern und Zeilen hat. Dadurch wird sichergestellt, dass der Text nicht verdichtet wird und leicht lesbar ist.</li></ul></div><div data-component-type="text"><ul>
  <li>Beachte, dass formatierter Text wie Kursivschrift, Großbuchstaben und durchgestrichene Texte für Besucher mit Seh- und Leseschwierigkeiten schwieriger zu lesen sind. </li></ul></div><div data-component-type="text"><ul>
  <li>Achte auf den Farbkontrast zwischen deinem Text und dem Hintergrund, besonders wenn du leichte Schriftarten verwendest. <a href="https://support.wix.com/de/article/barrierefreiheit-deine-texte-und-grafiken-vorbereiten" target="_blank">Mehr erfahren</a></li></ul></div><div data-component-type="text"><ul>
  <li>Behalte die Textausrichtung im Auge. Blocksatz enthält Abstandsvariationen, die die Lesbarkeit beeinträchtigen können. Wir empfehlen, den Text linksbündig auszurichten, da dies in den Sprachen von links nach rechts am einfachsten zu lesen ist.</li></ul></div><div data-component-type="text"><ul>
  <li>Textblöcke und Absätze sollten leeren Raum zwischen und um sie herum enthalten, um sicherzustellen, dass sie leicht zu lesen und zu unterscheiden sind.</li></ul></div><div data-component-type="text"><ul>
  <li>Zu viele oder zu wenige Zeichen in einer Zeile können die Lesbarkeit beeinträchtigen. Wir empfehlen, die Zeilenlänge möglichst zwischen 50 und 120 Zeichen zu halten. </li></ul></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Nächster Schritt:</div><div class="info-content"><div>Gehe zurück zur <a href="https://support.wix.com/de/article/barrierefreiheit-checkliste-zur-verbesserung-der-barrierefreiheit-deiner-website" target="_blank">Checkliste für Barrierefreiheit</a>, um die Barrierefreiheit deiner Website weiter zu verbessern.</div></div></div></div>

Wenn du eine barrierefreie Website erstellst, ist es eine gute Idee, die Animation von Elemente auf deiner Website zu reduzieren. Die Animation von Elementen kann den Screenreader stören und bei einig...

Barrierefreiheit: Animationen reduzieren

<div data-component-type="text"><div>Wenn du eine barrierefreie Website erstellst, ist es eine gute Idee, die Animation von Elemente auf deiner Website zu reduzieren. Die Animation von Elementen kann den Screenreader stören und bei einigen deiner Website-Besuchern Navigationsprobleme verursachen.</div></div><div data-component-type="heading"><h2 id="automatische-wiedergabe-vermeiden-oder-limitieren-1" level="3">Automatische Wiedergabe vermeiden oder limitieren</h2></div><div data-component-type="text"><div>Du kannst Video- und Musik-Player automatisch abspielen lassen, sobald die Seite geladen ist. Dies erschwert es allerdings Screenreadern, deine Website aufgrund der Medienwechsel korrekt zu lesen  und die Audiowiedergabe kann die Sprache des Screenreaders überlagern. </div><div><br /></div></div><div data-component-type="heading"><h2 id="parallax-scrolling-vermeiden" level="3">Parallax Scrolling vermeiden</h2></div><div data-component-type="text"><div>Beim Parallax-Effekt scrollt der Hintergrund deiner Website mit einer anderen Geschwindigkeit als der Vordergrund deiner Website. Dieser Effekt wird normalerweise zwischen Seitenhintergrund und Streifen verwendet und kann Probleme beim Navigieren der Website unter Verwendung einer Tastatur oder Screenreaders verursachen.</div></div><div data-component-type="heading"><h2 id="animationen-reduzieren" level="3">Animationen reduzieren</h2></div><div data-component-type="text"><div>Wenn du dich für die automatische Wiedergabe von Animationen, Videos usw. auf deiner Website entscheidest, können deine Website-Besucher diese auf Wunsch von ihrem Betriebssystem aus deaktivieren. <br />Unter Windows heißt diese Einstellung &quot;Animationen anzeigen&quot; und unter Mac &quot;Bewegung reduzieren&quot;.</div></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Nächster Schritt:</div><div class="info-content"><div>Kehre zur <a href="https://support.wix.com/de/article/barrierefreiheit-checkliste-zur-verbesserung-der-barrierefreiheit-deiner-website">Checkliste für Barrierefreiheit</a> zurück, um die Barrierefreiheit deiner Website weiter zu verbessern.</div></div></div></div>

Wenn du deiner Website Medien wie Videos, GIFs und Audiodateien hinzufügst, solltest du sicherstellen, dass diese für alle Website-Besucher zugänglich sind.Dies erreichst du, indem du Alternativen wie...

Barrierefreiheit: Videos und Audiodateien barrierefrei gestalten

<div data-component-type="text"><div>Wenn du deiner Website Medien wie Videos, GIFs und Audiodateien hinzufügst, solltest du sicherstellen, dass diese für alle Website-Besucher zugänglich sind.</div></div><div data-component-type="text"><div>Dies erreichst du, indem du Alternativen wie Transkripte und Untertitel hinzufügst. Dadurch wird sichergestellt, dass Website-Besucher mit Behinderungen und Beeinträchtigungen auf die Inhalte auf deiner Website zugreifen können.</div></div><div data-component-type="text"><div><strong>In diesem Artikel erfährst du mehr über folgende Themen:</strong></div><ul>
  <li><a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-videos-und-audiodateien-barrierefrei-gestalten#adding-text-descriptions-to-media-without-sound" target="">Textbeschreibungen</a></li>  <li><a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-videos-und-audiodateien-barrierefrei-gestalten#adding-text-transcripts-to-audio-files" target="">Audiodatei-Transkripte</a></li>  <li><a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-videos-und-audiodateien-barrierefrei-gestalten#adding-captions-to-videos" target="">Videountertitel</a></li>  <li><a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-videos-und-audiodateien-barrierefrei-gestalten#adding-audio-descriptions-to-videos" target="">Audiobeschreibungen</a></li>  <li><a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-videos-und-audiodateien-barrierefrei-gestalten#adding-captions-to-live-events" target="">Untertitel bei Live-Veranstaltungen</a></li></ul></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-text-descriptions-to-media-without-sound" level="3">Textbeschreibungen zu Medien ohne Ton hinzufügen</h2></div><div data-component-type="text"><div>Wenn deine Website GIFs oder Videos ohne Ton enthält, können Besucher mit Sehbehinderungen möglicherweise nicht darauf zugreifen.</div></div><div data-component-type="text"><div>Wir empfehlen, den Medien eine Text hinzuzufügen, der beschreibt, was in dem Video oder GIF passiert. Die Textbeschreibung dieses GIFs könnte z. B. lauten: <em>Ein GIF der Sonne mit dem Wort „Neu“, das über ihr blinkt.</em></div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/06/29/b567d7fc-af07-4ffe-b02b-cf560471903f/4e5c1124-78d7-4571-b70a-7cf429978190.gif" alt="Ein Gif von der Sonne mit dem Wort" /></div></div><div data-component-type="text"><div>Dies verbessert die Barrierefreiheit deiner Website, da Screenreader die Beschreibung „lesen“ und den Besucher über den Inhalt der Medien informieren können. <a data-composite="true" href="https://www.w3.org/WAI/media/av/description/" target="_blank">Erfahre mehr über Textbeschreibungen für Medien</a> (Artikel nur auf Englisch verfügbar)</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-text-transcripts-to-audio-files" level="3">Texttranskripte zu Audiodateien hinzufügen</h2></div><div data-component-type="text"><div>Du solltest Texttranskripte an alle Audiodateien anhängen, die du auf deine Website hochlädst. Dies verbessert die Barrierefreiheit, da es sicherstellt, dass Besucher, die taub oder schwerhörig sind, auf diese Inhalte zugreifen und sie genießen können.</div></div><div data-component-type="text"><div>Du kannst ein Transkript erstellen, indem du es in ein Dokument schreibst und dann das Dokument unter oder über der Audiodatei verlinkst. <a data-composite="true" href="https://www.w3.org/WAI/media/av/transcripts/" target="_blank">Erfahre mehr über das Erstellen von Transkripten für deine Audiodateien</a> (Artikel nur auf Englisch verfügbar)</div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/06/29/af11e670-7b1a-4287-a495-3367c17e76f4/3a6a72d3-a8c4-4b4f-846d-a84d58983d3e.png" alt="Ein Bild von einem Audio-Player. Der Text darüber weist die Besucher darauf hin, dass sie zum Anhören klicken können. Der Link unter dem Player führt zum Transkript." /></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Tipp:</div><div class="info-content"><div>Du kannst dein Transkript <a data-composite="true" href="https://support.wix.com/de/article/wix-editor-einen-link-zu-einem-text-hinzufügen#hyperlinking-text" target="_blank">über Text</a> oder <a data-composite="true" href="https://support.wix.com/de/article/wix-editor-einen-link-zu-einem-button-hinzufügen#adding-a-link-to-your-button" target="_blank">mit einem Button</a> verlinken.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-captions-to-videos" level="3">Untertitel zu Videos hinzufügen</h2></div><div data-component-type="text"><div>Videountertitel sind eine gute Möglichkeit, um sicherzustellen, dass Besucher mit Hörbeeinträchtigungen oder kognitiven Einschränkungen deine Inhalte verstehen und genießen können.</div></div><div data-component-type="text"><div>Untertitel enthalten nicht nur Videounterschriften. Sie enthalten auch Beschreibungen von Geräuschen, die keine Dialoge sind. Zum Beispiel enthalten die Untertitel im Video-Screenshot unten die Hintergrundmusik. <a data-composite="true" href="https://www.w3.org/WAI/perspective-videos/captions/" target="_blank">Erfahre mehr über Videountertitel</a> (Artikel nur auf Englisch verfügbar)</div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/06/29/1f9e49c8-3778-48bc-99d4-79d08e660071/d0d2212f-5836-40c9-a88e-ca31c7dad970.png" alt="Ein Bild eines Videoplayers, das ein Standbild zeigt, einschließlich der Beschriftung" /></div></div><div data-component-type="text"><div>Die meisten Video-Hosting-Websites (wie YouTube) verfügen über eine Untertitel-Funktion, die es den Zuschauern ermöglicht, Untertitel während der Wiedergabe des Videos einzuschalten. Wenn du dein eigenes Video hochlädst, kannst du Untertitel mit einer externen Videobearbeitungssoftware wie Amara hinzufügen. <a data-composite="true" href="https://wethegeek.com/best-closed-captioning-software/" target="_blank">Weitere Optionen für Untertitel-Software</a></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Tipp:</div><div class="info-content"><div>Wir empfehlen, Untertitel in mehreren Sprachen hinzuzufügen, da sie auch für Zuschauer hilfreich sind, die die Sprache deines Videos möglicherweise nicht sprechen.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-audio-descriptions-to-videos" level="3">Audiobeschreibungen zu Videos hinzufügen</h2></div><div data-component-type="text"><div>Audiobeschreibungen sind eine Art von Audio, die zu Videos hinzugefügt wird, um die Barrierefreiheit zu verbessern. Sie beschreiben die Ereignisse für Besucher mit Sehbehinderung, die sich möglicherweise auf Audiodateien verlassen, um durch den Inhalt deiner Website zu navigieren und ihn zu verstehen.</div></div><div data-component-type="text"><div>Audiobeschreibungen sind aufgezeichnete Beschreibungen von visuellen Ereignissen, die keinen Ton erzeugen, z. B. Bewegungen, Mimik und Lichtverhältnisse. So kann z. B. ein Wetterbericht die Audiobeschreibung enthalten: „Der Meteorologe zeigt in den Nordwesten des Landes“.</div></div><div data-component-type="text"><div>Audiobeschreibungen werden zwischen den Dialogen und anderen wichtigen Audiodateien hinzugefügt, damit das Publikum sie deutlich hören kann. Du kannst Audiobeschreibungen im Video selbst hinzufügen oder indem du eine zusätzliche Audiospur hinzufügst. <a data-composite="true" href="https://digital.gov/2014/06/30/508-accessible-videos-how-to-make-audio-descriptions/" target="_blank">Erfahre mehr über das Erstellen von Audiobeschreibungen</a> (Artikel nur auf Englisch verfügbar)</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-captions-to-live-events" level="3">Untertitel zu Live-Veranstaltungen hinzufügen</h2></div><div data-component-type="text"><div>Wir empfehlen, Untertitel zu allen Live-Veranstaltungen hinzuzufügen, die du auf deiner Website streamst. Dadurch wird sichergestellt, dass auch Besucher, die gehörlos oder schwerhörig sind, diese ansehen und genießen können.</div></div><div data-component-type="text"><div>Es gibt zwei Methoden, um Untertitel zu Live-Veranstaltungen auf deiner Website hinzuzufügen:</div></div><div data-component-type="text"><ul>
  <li><strong>Skript:</strong> Die Darsteller, Moderatoren oder Moderatoren arbeiten nach einem festgelegten Skript. Dieses Skript wird dann in den Livestream eingebettet. Diese Methode wird häufig bei Veranstaltungen wie Theaterstücken verwendet.</li>  <li><strong>Live:</strong> Die Untertitel werden in Echtzeit zum Veranstaltungsstream hinzugefügt, entweder von einer Person oder einem Softwareprogramm. Diese Methode wird bei Veranstaltungen verwendet, die wenige oder gar keine Skripte verwenden, z. B. Live-Podcast-Aufnahmen und Preisverleihungen.</li></ul></div><div data-component-type="text"><div>Einige Browser, wie <a data-composite="true" href="https://blog.google/products/chrome/live-caption-chrome/" target="_blank">Chrome</a>, ermöglichen es den Besuchern, Live-Untertitel von ihrem Gerät aus zu aktivieren. Wenn du deine Veranstaltung jedoch von <a data-composite="true" href="https://support.google.com/youtube/answer/3068031?hl=en#zippy=%2Clive-caption-requirements-for-events%2Cturning-on-closed-captions-for-events" target="_blank">YouTube</a> streamen möchtest, müssen die Untertitel in das Video eingebettet werden oder über eine Software gesendet werden, die Untertitel über HTTP POSTs senden kann, z. B. <a data-composite="true" href="https://streamtext.net/" target="_blank">StreamText</a>.</div></div>

Wenn du Dokumente auf deiner Website hast, kannst du sie barrierefrei gestalten, damit mehr Besucher sie verwenden können.
  So machst du PDF-Dateien barrierefrei  So machst du deine Word-Dokumente ba...

Barrierefreiheit: Dokumentdateien barrierefrei gestalten

<div data-component-type="text"><div>Wenn du Dokumente auf deiner Website hast, kannst du sie barrierefrei gestalten, damit mehr Besucher sie verwenden können.</div></div><div data-component-type="text"><ul>
  <li><a data-composite="true" href="https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html" target="_blank">So machst du PDF-Dateien barrierefrei</a></li>  <li><a data-composite="true" href="https://support.microsoft.com/en-us/office/make-your-word-documents-accessible-to-people-with-disabilities-d9bf3683-87ac-47ea-b91a-78dcacb3c66d?ui=en-us&amp;rs=en-us&amp;ad=us" target="_blank">So machst du deine Word-Dokumente barrierefrei</a></li></ul></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Nächster Schritt:</div><div class="info-content"><div>Gehe zurück zur <a href="https://support.wix.com/de/article/barrierefreiheit-checkliste-zur-verbesserung-der-barrierefreiheit-deiner-website" target="_blank">Checkliste für Barrierefreiheit</a>, um die Barrierefreiheit deiner Website weiter zu verbessern.</div></div></div></div>

Barrierefreiheitserklärungen beschreiben, was du oder deine Marke/dein Unternehmen auf deiner Website getan hast, um sie für Menschen mit Behinderungen barrierefreier zu gestalten.Du kannst den folgen...

Barrierefreiheit: Eine Barrierefreiheitserklärung zu deiner Website hinzufügen

<div data-component-type="text"><div>Barrierefreiheitserklärungen beschreiben, was du oder deine Marke/dein Unternehmen auf deiner Website getan hast, um sie für Menschen mit Behinderungen barrierefreier zu gestalten.</div></div><div data-component-type="text"><div>Du kannst den folgenden Artikel als Hilfe beim Verfassen Barrierefreiheitserklärungen deiner Website verwenden. Sie ist jedoch nicht zwangsläufig rechtskräftig, da Gesetze und Anforderungen je nach Region unterschiedlich sein können.</div></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Wichtig:</div><div class="info-content"><div>In bestimmten Ländern ist der Website-Eigentümer gesetzlich dazu verpflichtet, eine Barrierefreiheitserklärung abzugeben. Bitte sorge dafür, dass du die Gesetze und Anforderungen deiner Region einhältst.</div></div></div></div><div data-component-type="text"><div><strong>In diesem Artikel erfährst du mehr über Barrierefreiheitserklärungen:</strong></div></div><div data-component-type="text"><ul>
  <li><a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-eine-erkl%C3%A4rung-zur-barrierefreiheit-auf-deiner-website-hinzuf%C3%BCgen#what-to-include-in-an-accessibility-statement" target="">Bestandteile einer Barrierefreiheitserklärung</a></li>  <li><a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-eine-erkl%C3%A4rung-zur-barrierefreiheit-auf-deiner-website-hinzuf%C3%BCgen#adding-an-accessibility-statement-to-your-site" target="">Eine Barrierefreiheitserklärung zu deiner Website hinzufügen</a></li>  <li><a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-eine-erkl%C3%A4rung-zur-barrierefreiheit-auf-deiner-website-hinzuf%C3%BCgen#accessibility-statement-template" target="">Templates für eine Barrierefreiheitserklärung</a></li></ul></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="what-to-include-in-an-accessibility-statement" level="3">Bestandteile einer Barrierefreiheitserklärung</h2></div><div data-component-type="text"><div>Wenn du eine Barrierefreiheitserklärung auf deiner Website erstellst und veröffentlichst, solltest du Folgendes hinzufügen:</div></div><div data-component-type="text"><ul>
  <li>Das Datum, an dem die Erklärung zuletzt aktualisiert wurde.</li>  <li>Eine allgemeine Erklärung über die unternommenen Schritte zur Barrierefreiheit. Beispiele:
    <ul>
      <li><strong>Tools und Richtlinien:</strong>
        <ul>
          <li>Die WCAG-Version (2.0/2.1/2.2) und das Level (A/AA/AAA), das du erreicht hast.</li>          <li>Ob du den <a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-über-den-wizard-für-barrierefreiheit" target="_blank">Wix Wizard für Barrierefreiheit</a> genutzt und alle erforderlichen Anpassungen vorgenommen hast.</li>        </ul>      </li>      <li><strong>Website-Inhalt und Struktur:</strong>
        <ul>
          <li>Ob du die <a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-die-sprache-deiner-website-festlegen" target="_blank">Website-Sprache</a> eingerichtet hast.</li>          <li>Anpassungen, die an der <a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-deine-website-für-screenreader-vorbereiten" target="_blank">Reihenfolge der Inhalte</a> deiner Website-Seiten vorgenommen wurden.</li>          <li>Anpassungen, die an der <a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-die-struktur-deiner-website-vorbereiten" target="_blank">Überschriftenstruktur</a> deiner Website-Seiten vorgenommen wurden.</li>        </ul>      </li>      <li><strong>Medien, Dateien und Animation:</strong>
        <ul>
          <li>Ob deine Website-Bilder <a data-composite="true" href="https://support.wix.com/de/article/wix-editor-barrierefreiheit-deine-bilder-und-galerien-vorbereiten" target="_blank">Alternativtext</a> haben.</li>          <li>Ob die auf deiner Website verwendeten Farbkombinationen das erforderliche <a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-deine-texte-und-grafiken-vorbereiten" target="_blank">Kontrastverhältnis</a> haben.</li>          <li>Ob <a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-animationen-reduzieren" target="_blank">störende Bewegungen reduziert wurden</a>.</li>          <li>Anpassungen zur Barrierefreiheit an <a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-videos-und-audiodateien-barrierefrei-gestalten" target="_blank">Videos und Audiodateien</a>.</li>          <li>Ob <a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-dokumentdateien-barrierefrei-gestalten" target="_blank">Dokumente</a> auf der Website zugänglich sind.</li>        </ul>      </li>    </ul>  </li>  <li>Bekannte Einschränkungen der Barrierefreiheit aufgrund der Nutzung von Drittanbieterdiensten auf der Website.</li>  <li>Alle Vorkehrungen zur Barrierefreiheit am physischen Standort von Unternehmen (z. B. Theater, Restaurants usw.).</li>  <li>Kontaktangaben der Person, die für die Barrierefreiheit deiner Website verantwortlich ist, wie zum Beispiel vollständiger Name, E-Mail-Adresse und Telefonnummer.</li></ul></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Möchtest du weitere Informationen hinzufügen?</div><div class="info-content"><div>Verwende <a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-checkliste-zur-verbesserung-der-barrierefreiheit-deiner-website" target="_blank">unsere Checkliste für Barrierefreiheit</a>, um Ideen für die Barrierefreiheitserklärung deiner Website zu erhalten.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-an-accessibility-statement-to-your-site" level="3">Eine Barrierefreiheitserklärung zu deiner Website hinzufügen</h2></div><div data-component-type="text"><div>Füge eine Barrierefreiheitserklärung hinzu, um die Bemühungen deines Unternehmens um Barrierefreiheit im Internet deutlich zu machen. Wir empfehlen, eine eigene Seite für die Erklärung zu verwenden und von der Kopf- oder Fußzeile deiner Website darauf zu verlinken.</div></div><div data-component-type="heading"><h2 id="" level="4">Um eine Barrierefreiheitserklärung zu deiner Website hinzuzufügen:</h2></div><div data-component-type="text"><ol>
  <li>Füge eine Seite zu deiner Website hinzu und nenne sie „Barrierefreiheitserklärung“.</li>  <li>Füge der Seite Textfelder hinzu und gib bei Bedarf deine Barrierefreiheitserklärung ein.</li>  <li>Erstelle einen Link zu der Seite mit Text oder einem Button und nenne ihn „Barrierefreiheitserklärung“.</li>  <li>Hänge den verlinkten Text/Button an die Fußzeile deiner Website an, um sicherzustellen, dass Besucher die Erklärung von jeder Seite deiner Website aus sehen können.</li></ol></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Hinweis:</div><div class="info-content"><div>Verwende mehrere Textfelder in deiner Erklärung, um sicherzustellen, dass jeder Teil des Textes über das <a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-die-struktur-deiner-website-vorbereiten" target="_blank">korrekte HTML-Tag</a> (h1/h2/p) verfügt. Sieh dir das Beispiel im nächsten Abschnitt an, damit du weißt, welche HTML-Tags du verwenden musst.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="accessibility-statement-template" level="3">Template für eine Barrierefreiheitserklärung</h2></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Wichtig:</div><div class="info-content"><div>Das folgende Template soll dir beim Verfassen deiner Barrierefreiheitserklärung helfen. Bitte beachte, dass du dafür verantwortlich bist, dass die Erklärung deiner Website den Anforderungen des örtlichen Gesetzes in deiner Region entspricht.</div></div></div></div><div data-component-type="text"><div><em><strong>Barrierefreiheitserklärung</strong></em><strong> </strong>(h1)</div></div><div data-component-type="text"><div>(p)<em> Diese Erklärung wurde zuletzt am [entsprechendes Datum eingeben] aktualisiert</em>.</div></div><div data-component-type="text"><div>(p)<em> Wir bei </em>[Name der Organisation/Unternehmensname eingeben] <em>arbeiten daran, unsere Website </em>[Name und Adresse eingeben]<em> für Menschen mit Behinderungen zugänglich zu machen.</em></div></div><div data-component-type="text"><div><em><strong>Was Barrierefreiheit im Web bedeutet</strong></em> (h2)</div></div><div data-component-type="text"><div>(p) <em>Eine barrierefreie Website ermöglicht es Besuchern mit Behinderungen, die Website mit der gleichen oder ähnlichen Anstrengung und Vergnügen wie andere Besucher zu durchsuchen. Dies kann mit den Möglichkeiten des Systems, auf dem die Website läuft, und durch unterstützende Technologien erreicht werden.</em></div></div><div data-component-type="text"><div><em><strong>Anpassungen zur Barrierefreiheit auf dieser Website</strong></em> (h2)</div></div><div data-component-type="text"><div>(p) <em>Wir haben diese Website in Übereinstimmung mit den WCAG-Richtlinien [2.0/2.1/2.2 - entsprechende Option wählen] angepasst </em> <em> und die Website bis zum Level </em>[A/AA/Aaa<em> - </em>entsprechende Option wählen] zugänglich gemacht. <em>Der Inhalt dieser Website wurde für unterstützende Technologien wie Screenreader und Tastatur angepasst. Im Rahmen dieser Bemühungen haben wir auch </em>[irrelevante Informationen entfernen]:</div></div><div data-component-type="text"><div>(p)</div><ul>
  <li><em>Den Wizard für Barrierefreiheit verwendet, um potenzielle Probleme mit der Barrierefreiheit zu finden und zu beheben</em></li>  <li><em>Die Sprache der Website festgelegt</em></li>  <li><em>Die Reihenfolge der Seiten festgelegt</em></li>  <li><em>Klare Kopfzeilenstrukturen auf allen Seiten der Website definiert</em></li>  <li><em>Alternativtext zu Bildern hinzugefügt</em></li>  <li><em>Farbkombinationen integriert, die den erforderlichen Farbkontrast erfüllen</em></li>  <li><em>Die Verwendung von Bewegungen auf der Website reduziert</em></li>  <li><em>Sichergestellt, dass alle Videos, Audiodateien und Dateien auf der Website zugänglich sind</em></li></ul></div><div data-component-type="text"><div><em><strong>Erklärung zur teilweisen Einhaltung des Standards aufgrund von Inhalten Dritter </strong></em>(h2) [nur hinzufügen, wenn zutreffend]</div></div><div data-component-type="text"><div>(p) <em>Die Barrierefreiheit bestimmter Seiten der Website hängt von Inhalten ab, die nicht zur Organisation gehören, sondern von [entsprechenden Drittanbieternamen eingeben]. Die folgenden Seiten sind davon betroffen: </em>[Liste die URLs der Seiten auf] Daher erklären <em>wir</em> <em>für diese Seiten eine teilweise Übereinstimmung des Standards.</em></div></div><div data-component-type="text"><div><em><strong>Barrierefreiheitregelungen in der Organisation</strong></em><strong> </strong>(h2) [nur hinzufügen, wenn zutreffend]</div></div><div data-component-type="text"><div>(p) [Gib eine Beschreibung der Barrierefreiheitregelungen in den physischen Büros/Filialen der Organisation oder des Unternehmens deiner Website ein. Die Beschreibung kann alle aktuellen Vereinbarungen über die Barrierefreiheit enthalten — vom Anfang der Dienstleistung (z. B. Parkplatz und/oder öffentliche Verkehrsmittel) bis zum Ende (z. B. Servicethek, Restaurant, Klassenzimmer usw.). Es ist auch erforderlich, alle zusätzlichen Vorkehrungen für die Barrierefreiheit anzugeben, wie zum Beispiel Services mit Barrierefreiheit und deren Standort sowie das zur Nutzung zur Verfügung stehende Barrierefreiheitszubehör (z. B. Audioanleitungen und Aufzüge).</div></div><div data-component-type="text"><div><em><strong>Anfragen, Probleme und Vorschläge</strong></em> (H2)</div></div><div data-component-type="text"><div>(p) <em>Falls du ein Problem mit der Barrierefreiheit auf der Website findest oder weitere Hilfe benötigst, kannst du uns gerne über den Koordinator für Barrierefreiheit der Organisation kontaktieren:</em></div><ul>
  <li><a href="https://support.wix.com/de/article/barrierefreiheit-checkliste-zur-verbesserung-der-barrierefreiheit-deiner-website" target="_blank">Name des Koordinators für Barrierefreiheit]</a></li>  <li>[Telefonnummer des Koordinators für Barrierefreiheit]</li>  <li>[E-Mail-Adresse des Koordinators für Barrierefreiheit]</li>  <li>[Zusätzliche Kontaktangaben eingeben, falls relevant/verfügbar]</li></ul></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Nächster Schritt:</div><div class="info-content"><div>Gehe zurück zur [Checkliste für Barrierefreiheit, um die Barrierefreiheit deiner Website weiter zu verbessern.</div></div></div></div>

Mit Formularen können Website-Besucher Informationen übermitteln, einer Mailingliste beitreten und vieles mehr. Wenn du ein Formular erstellst, ist es wichtig, die Barrierefreiheit im Hinterkopf zu be...

Barrierefreiheit: Ein barrierefreies Formular mit Wix Forms erstellen

<div data-component-type="text"><div>Mit Formularen können Website-Besucher Informationen übermitteln, einer Mailingliste beitreten und vieles mehr. Wenn du ein Formular erstellst, ist es wichtig, die Barrierefreiheit im Hinterkopf zu behalten, damit jeder es sehen und verwenden kann.</div></div><div data-component-type="text"><div>Befolge die Schritte in diesem Artikel, um ein Formular zu erstellen, mit dem Besucher navigieren und mit dem sie interagieren können.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-1-display-field-titles" level="3">Schritt 1 | Feldtitel anzeigen</h2></div><div data-component-type="text"><div>Zeige Feldtitel an, damit Besucher die einzelnen Formularfelder identifizieren können. Das Anzeigen von Titeln macht das Formular übersichtlicher, indem es Besuchern zeigt, in welchem Feld sie sich gerade befinden.</div></div><div data-component-type="heading"><h2 id="" level="4">Um Feldtitel anzuzeigen:</h2></div><div data-component-type="text"><ol>
  <li>Wähle das Formular in deinem Editor aus.</li>  <li>Klicke auf <strong>Formular bearbeiten</strong>.</li>  <li>Wähle ein Formularfeld aus.</li>  <li>Klicke auf <strong>Einstellungen</strong>.</li>  <li>Fahre mit der Maus über den Feldtitel und klicke auf das Symbol für <strong>Weitere Aktionen</strong> <img data-composite="true" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXcC5vRw8B_ITz9qd1n_rF0jP0XZvFe8Ly4NcbviMUHdlLJZIK7ATwxhjb-fPDytIlmc7hmtqMlqZt_sh3CtRvQOGzQRe_skqNqCTCHoFti1Yc1JZwr5M1G5d7vxKBGJAMf6oCDrRmiI9mYujNW1sBSBKREb?key=dRllTO6NEoYu0-D1JuBE8A" />.</li>  <li>Klicke auf <strong>Feldtitel anzeigen</strong>.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/06/06/704b585c-e85a-42a3-a4f6-4918fc22ea7d/de509bb7-f65c-4ee0-9aa6-8c945a368eb3.jpg" alt="Das Formular-Center. Ein Feld wurde ausgewählt und der Cursor klickt auf „Feldtitel anzeigen“." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-2-define-your-field-titles" level="3">Schritt 2 | Den Feldtitel festlegen</h2></div><div data-component-type="text"><div>Nachdem du Feldtitel aktiviert hast, definiere diese eindeutig. Der Titel sollte spezifisch sein, damit Besucher wissen, was genau erforderlich ist (Nachname, Telefonnummer usw.).</div></div><div data-component-type="heading"><h2 id="" level="4">Um die Feldtitel zu definieren:</h2></div><div data-component-type="text"><ol>
  <li>Wähle das Formular in deinem Editor aus.</li>  <li>Klicke auf <strong>Formular bearbeiten</strong>.</li>  <li>Wähle ein Formularfeld aus.</li>  <li>Klicke auf <strong>Einstellungen</strong>.</li>  <li>Gib unter <strong>Feldname</strong> den Text ein.</li>  <li>Klicke auf <strong>Speichern</strong>.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/06/06/b0c417e6-adb2-4bbb-9ac2-2d4990c1374b/83955b53-2aba-47eb-9a01-33be5f0f8066.jpg" alt="Das Formular-Center. Ein Feld wurde ausgewählt und der Cursor klickt auf „Feldtitel anzeigen“." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-3-customize-the-forms-design" level="3">Schritt 3 | Das Design des Formulars anpassen</h2></div><div data-component-type="text"><div>Indem du die <a data-composite="true" href="https://support.wix.com/de/article/wix-forms-deine-website-formulare-gestalten" target="_blank">Felder und Buttons des Formulars</a> je nach Status (Standard, Mouseover und Fehler) anpasst, schaffst du ein stimmiges visuelles Erlebnis. Wir empfehlen, das Design beispielsweise für den Mouseover-Status anzupassen, damit Besucher wissen, mit welchem Teil des Formulars sie interagieren.</div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Gut zu wissen:</div><div class="info-content"><div>Der Mouseover-Status bestimmt wie das Formularfeld oder der Button aussieht, wenn ein Besucher mit der Maus darüber fährt. Der Standard-Status legt fest, wie der Status angezeigt wird, bevor ein Besucher damit interagiert.</div></div></div></div><div data-component-type="heading"><h2 id="" level="4">Um das Design des Formulars anzupassen:</h2></div><div data-component-type="text"><ol>
  <li>Wähle das Formular in deinem Editor aus.</li>  <li>Klicke auf <strong>Einstellungen</strong>.</li>  <li>Wähle <strong>Design</strong> aus.</li>  <li>Wähle, welchen Teil des Formulars du anpassen möchtest:
    <ul>
      <li><strong>Felder:</strong>
        <ol>
          <li>Wähle <strong>Formularfelder</strong> aus.</li>          <li>Wähle aus dem Aufklappmenü <strong>Mouseover</strong> aus.</li>          <li>Ändere das Felddesign:
            <ul>
              <li><strong>Füllfarbe &amp; Deckkraft: </strong>Lege die Farbe des Feldhintergrunds fest und ziehe den Schieberegler, um die Deckkraft zu ändern.</li>              <li><strong>Rand - Farbe &amp; Deckkraft: </strong>Lege die Farbe und Deckkraft des Feldrands fest.</li>            </ul>          </li>        </ol>      </li>      <li><strong>Buttons:</strong>
        <ol>
          <li>Wähle <strong>Buttons</strong> aus.</li>          <li>Wähle den Button aus, den du anpassen möchtest (Einreichen, Zurück, Hochladen usw.).</li>          <li>Klicke auf den Tab <strong>Mouseover</strong>.</li>          <li>Ändere das Design des Buttons:
            <ul>
              <li><strong>Textfarbe:</strong> Lege die Farbe des Buttontextes im Mouseover-Status fest.</li>              <li><strong>Farbe &amp; Deckkraft:</strong> Lege die Farbe des Buttonhintergrunds fest und ziehe den Schieberegler, um die Deckkraft zu ändern.</li>              <li><strong>Randfarbe &amp; Deckkraft:</strong> Lege die Farbe und Deckkraft des Buttonrands fest.</li>            </ul>          </li>        </ol>      </li>    </ul>  </li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/06/07/f9359600-cb03-4d29-bbce-67dba5e29d86/8b155fad-596d-41c2-8d1b-ef00a834a912.jpg" alt="Das Design-Panel des Formularfelds ist geöffnet. Der Mouseover-Status wurde ausgewählt und der Cursor klickt auf das Farbfeld." /></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Tipps:</div><div class="info-content"><ul>
  <li>Du solltest auch die Formularfelder im Fehlerstatus anpassen, um eine verbesserte Barrierefreiheit zu gewährleisten.</li>  <li><a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-deine-texte-und-grafiken-vorbereiten" target="_blank">Mehr über Farben und Kontrast bei der Barrierefreiheit von Websites erfahren</a></li></ul></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-4-enable-visual-indicators-on-your-site" level="3">Schritt 4 | Visuelle Indikatoren auf deiner Website aktivieren</h2></div><div data-component-type="text"><div>Visuelle Indikatoren können Personen mit unterschiedlicher Sehkraft/Mobilität helfen, sich auf deiner Website zurechtzufinden. Wenn du sie aktivierst, sehen Besucher, die die Tab-Taste verwenden, ein blaues Feld um den Abschnitt oder das Element, auf dem sie sich befinden. <a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-blaue-rahmen-visuelle-indikatoren-aktivieren-oder-deaktivieren" target="_blank">Mehr über visuelle Indikatoren erfahren</a></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title"></div><div class="info-content"><div>Auf Websites, die im Studio Editor erstellt wurden, sind visuelle Indikatoren automatisch aktiviert.</div></div></div></div><div data-component-type="heading"><h2 id="" level="4">Um visuelle Indikatoren zu aktivieren:</h2></div><div data-component-type="text"><ol>
  <li>Wähle in der oberen Leiste des Wix Editors <strong>Einstellungen</strong> aus.</li>  <li>Wähle <strong>Wizard für Barrierefreiheit</strong>.</li>  <li>Wähle oben rechts im Wizard das Symbol für <strong>Weitere Aktionen</strong> <img data-composite="true" src="https://lh6.googleusercontent.com/opXJFSSKoZdZ0l3N8VdFcrR4TnvE4tiiTz1AHYBHytfL3f-dkfjJ1TOkrC6j10wq-fDeiHvvQRjeAs3Hb-Lo3v0PmC_O6vamAU4QV6z69ZVZUzUC3VXQE7c6E5eOVQNncGR4w70a" /> aus.</li>  <li>Wähle <strong>Erweiterte Einstellungen</strong>.</li>  <li>Wähle <strong>Visuelle Indikatoren</strong>.</li>  <li>Aktiviere den Schalter <strong>Tastaturbenutzer können durch die Website navigieren</strong>.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2021/07/22/451e930b-a31a-4d26-915c-95ff0c2c53a4/f00095b7-c375-43b5-aaba-479698334c3f.png" alt="Der Schalter visuelle Indikatoren wurde in den erweiterten Einstellungen des Wizard für Barrierefreiheit aktiviert." /></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Nächster Schritt:</div><div class="info-content"><div>Gehe zurück zur <a href="https://support.wix.com/de/article/barrierefreiheit-checkliste-zur-verbesserung-der-barrierefreiheit-deiner-website">Checkliste für Barrierefreiheit</a>, um die Barrierefreiheit deiner Website weiter zu verbessern.</div></div></div></div>

Wix bietet Vorlagen mit integrierten Barrierefreiheitsfunktionen, damit Besucher mit Behinderungen oder Beeinträchtigungen das Beste aus deiner Website herausholen können. Diese Vorlagen sind eine gro...

Barrierefreiheit: Templates mit Barrierefreiheitsfunktionen

Barrierefreiheit: Vorlagen mit Barrierefreiheitsfunktionen

<div data-component-type="text"><div>Wix bietet Vorlagen mit integrierten Barrierefreiheitsfunktionen, damit Besucher mit Behinderungen oder Beeinträchtigungen das Beste aus deiner Website herausholen können. Diese Vorlagen sind eine großartige Möglichkeit, mit dem Aufbau einer Website zu beginnen, die für alle Besucher zugänglich ist, und zwar unabhängig von ihren Fähigkeiten.</div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/09/07/85e6bf05-c707-40a6-bd37-933da0447387/d4911e23-e097-4aef-8b52-714a080b173e.png" alt="Screenshot der barrierefreien Vorlagen, die bei Wix verfügbar sind" /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="accessibility-templates" level="3">Barrierefreie Vorlagen</h2></div><div data-component-type="text"><div>Barrierefreie Vorlagen haben grundlegende Barrierefreiheits-Funktionen integriert wie eine barrierefreie Kopfzeilenstruktur und Farbkontrast der Website-Farben. Die angebotenen Funktionen variieren je nach Stil der ausgewählten Website-<a data-composite="true" href="https://de.wix.com/website/templates/html/accessible" target="_blank">Barrierefreie Vorlagen anzeigen, in der Vorschau anzeigen und bearbeiten</a></div></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Wichtig:</div><div class="info-content"><div>Einige erweiterte Funktionen für die Barrierefreiheit, wie benutzerdefinierte ARIA-Labels und Alt-Text, sind in diesen Vorlagen nicht enthalten und müssen manuell hinzugefügt werden.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="continue-optimizing-your-site-for-accessibility" level="3">Deine Website hinsichtlich Barrierefreiheit weiter optimieren</h2></div><div data-component-type="text"><div>Nachdem du deine Website-Vorlage hinzugefügt und bearbeitet hast, empfehlen wir dir, unsere <a href="https://support.wix.com/de/article/barrierefreiheit-checkliste-zur-verbesserung-der-barrierefreiheit-deiner-website#accessibility-checklist" target="_blank">Checkliste</a> durchzugehen, um sicherzustellen, dass deine Website alle von uns angebotenen Barrierefreiheitsfunktionen genutzt hat. </div></div><div data-component-type="text"><div>Weitere Schritte sind:</div><div><br /></div><ul>
  <li><a href="https://support.wix.com/de/article/barrierefreiheit-die-struktur-deiner-website-vorbereiten" target="_blank">Die Struktur deiner Website vorbereiten</a></li>  <li><a href="https://support.wix.com/de/article/barrierefreiheit-animationen-reduzieren" target="_blank">Bewegung reduzieren</a></li>  <li><a href="https://support.wix.com/de/article/barrierefreiheit-eine-erklärung-zur-barrierefreiheit-auf-deiner-website-hinzufügen" target="_blank">Eine Erklärung zur Barrierefreiheit hinzufügen</a></li>  <li><a href="https://support.wix.com/de/article/wix-editor-barrierefreiheit-deine-bilder-und-galerien-vorbereiten" target="_blank">Bilder und Galerien vorbereiten</a> </li>  <li><a href="https://support.wix.com/de/article/barrierefreiheit-deine-texte-und-grafiken-vorbereiten" target="_blank">Text und Grafiken vorbereiten</a></li></ul></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Wichtig:</div><div class="info-content"><div>Wir sind zwar ständig bestrebt, sicherzustellen, dass jeder, unabhängig von seinen Fähigkeiten, unsere Produkte und Dienstleistungen nutzen kann, aber wir können nicht garantieren, dass deine Website den lokalen Gesetzen und Vorschriften zur Barrierefreiheit entspricht.</div><div><br /></div><div>Wir empfehlen dir, unsere Checkliste für Barrierefreiheit durchzugehen und einen Experten für Barrierefreiheit zu konsultieren, um sicherzustellen, dass deine Website die Kriterien der in deiner Region geltenden Bestimmungen zur Barrierefreiheit erfüllt.</div></div></div></div>

Zurzeit ist es nicht möglich, die Tab- und DOM-Reihenfolge des Seiteninhalts für verschiedene Sprachen zu ändern, z. B. Sprachen, die von rechts nach links gelesen werden.Wir arbeiten konstant daran, ...

Funktionsvorschlag für Barrierefreiheit: Die Tab-Reihenfolge (DOM) für verschiedene Sprachen ändern

<div data-component-type="text"><div>Zurzeit ist es nicht möglich, die Tab- und DOM-Reihenfolge des Seiteninhalts für verschiedene Sprachen zu ändern, z. B. Sprachen, die von rechts nach links gelesen werden.</div></div><div data-component-type="text"><div>Wir arbeiten konstant daran, unsere Produkte zu aktualisieren und zu verbessern. Dein Feedback ist uns daher sehr wichtig.</div></div>

Deine Website-Besucher verwenden möglicherweise ein Zoom-Tool (normalerweise in ihrem Browser), um Inhalte oder Elemente zu vergrößern, die zu klein oder undeutlich sind, wenn die Browser-Ansicht auf ...

Barrierefreiheit: Über herangezoomte Inhalte

<div data-component-type="text"><div>Deine Website-Besucher verwenden möglicherweise ein Zoom-Tool (normalerweise in ihrem Browser), um Inhalte oder Elemente zu vergrößern, die zu klein oder undeutlich sind, wenn die Browser-Ansicht auf 100 % eingestellt ist.</div><div><br /></div><div>Sicherzustellen, dass deine Website in der Vergrößerung sichtbar ist, ist ein wichtiger Aspekt der Barrierefreiheit, da Besucher mit Sehbehinderungen den Inhalt deiner Website sehen können.</div></div><div data-component-type="text"><div>Der gesamte Inhalt deiner Website sollte bei 200 %-Zoom klar, sichtbar und lesbar sein.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="checking-your-sites-zoom" level="3">Den Zoom deiner Website überprüfen</h2></div><div data-component-type="text"><div>Wir empfehlen, den Zoom deiner Website zu überprüfen, um sicherzustellen, dass dein gesamter Inhalt bei 200 % klar und sichtbar ist. Du kannst dies über deine Browsereinstellungen tun.</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">So prüfst du in Chrome</h4><div class="collapsible-content"><ol>
  <li>Wähle das Symbol für <strong>Weitere Aktionen</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/7f40210b-c6c2-4c15-bbcf-5bb78a69d10e/2020/05/19/a53b52b5-9ef9-4c51-a650-d3d64405ede7/656a564f-13b8-47be-a40f-b5d29b7d0e41.png" /> oben rechts in deinem Browser.</li>  <li>Erhöhe die Zoomstufe, indem du auf das <strong>Plus</strong>-Symbol <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/7f40210b-c6c2-4c15-bbcf-5bb78a69d10e/2020/05/19/5a2c2bb5-a459-4934-9d6c-9f7222655653/b5230cf0-4640-4dbf-834e-65d6d63fff3a.png" /> klickst oder drücke <strong>Strg</strong> und dann <strong>+</strong> auf deiner Tastatur.</li></ol></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">So prüfst du in Safari</h4><div class="collapsible-content"><ol>
  <li>Wähle in der Bearbeitungsleiste des Browsers <strong>Ansicht/Darstellung</strong>.</li>  <li>Erhöhe die Zoomstufe, indem du auf <strong>Zoom</strong> klickst oder auf deiner Tastatur <strong>cmd</strong> und dann <strong>+</strong> drückst.</li></ol></div></div></div><div data-component-type="text"><div>Wenn du den Wizard für Barrierefreiheit verwendest, um die Barrierefreiheit deiner Website zu verbessern, kannst du deine Website mit den oben genannten Schritten überprüfen und sie dann im Wizard als „Fertig“ markieren.</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">So geht's</h4><div class="collapsible-content"><ol>
  <li>Scanne deine Website mit dem Wizard für Barrierefreiheit und <a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-den-wizard-für-barrierefreiheit-verwenden#step-2-fix-detected-issues" target="_blank">behebe alle erkannten Probleme</a>.</li>  <li>Wähle <strong>Weiter zu Schritt 2</strong>.</li>  <li>Wähle die Karte mit dem Titel <strong>Herangezoomte Inhalte</strong> und folge den Schritten unten:
    <ol>
      <li>Zeige eine Vorschau deines Inhalts mit 200 % Zoom an, um sicherzustellen, dass alles sichtbar und lesbar ist.</li>      <li>Wenn du fertig bist, aktiviere das Kontrollkästchen neben <strong>Fertig mit allem? Markiere diese Aufgabe als erledigt</strong>.</li>      <li>Klicke auf <strong>Fertig</strong>.</li>    </ol>  </li></ol><div><br /></div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d64c0377-8ade-4c01-a588-356eb4091011/2022/02/22/159411ac-2978-4764-9108-048c85bdca03/48596f39-b26a-4367-a1a0-181b399b153b.png" /></div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="resolving-zoom-issues" level="3">Zoom-Probleme lösen</h2></div><div data-component-type="text"><div>Wenn du gezoomte Inhalte auf deiner Website überprüfst, solltest du auf einige Dinge achten, die die Barrierefreiheit deiner Website beeinträchtigen können. Diese Probleme sollten behoben werden, um deine Website so barrierefrei wie möglich zu halten.</div></div><div data-component-type="heading"><h2 id="pinned-elements" level="4">Gepinnte Elemente</h2></div><div data-component-type="text"><div>Gepinnte Elemente sind immer auf deiner Live-Website sichtbar, auch wenn Besucher auf deiner Website nach unten scrollen. Häufig gepinnte Elemente sind Menüs und Buttons.</div><div><br /></div><div>Wenn du Elemente sowohl auf der linken als auch auf der rechten Seite des Bildschirms gepinnt hast, stellst du möglicherweise fest, dass sie sich beim Heranzoomen überlagern. Große fixierte Elemente können auch andere Inhalte auf deiner Website blockieren.</div><div><br /></div><div>Um Überschneidungen zu vermeiden oder dass Inhalte blockiert werden, kannst du <a data-composite="true" href="https://support.wix.com/de/article/wix-editor-elemente-auf-dem-bildschirm-fixieren#changing-the-settings-of-a-pinned-element" target="_blank">die Position ändern, an der ein Element gepinnt wird</a> oder <a data-composite="true" href="https://support.wix.com/de/article/wix-editor-mit-elementen-arbeiten#resizing-your-elements" target="_blank">die Größe des Elements ändern</a>, um es zu verkleinern.</div><div><br /></div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/05/12/3e1e7a64-74e0-4b70-b2cb-058427c73139/79261d18-9410-4279-8ec8-0a727d41fa21.gif" /></div></div><div data-component-type="heading"><h2 id="elements-outside-the-gridlines" level="4">Elemente außerhalb der Rasterlinien</h2></div><div data-component-type="text"><div>Der Wix Editor verfügt über <a data-composite="true" href="https://support.wix.com/de/article/wix-editor-rasterlinien-im-editor" target="_blank">Rasterlinien</a>, damit du all deine Inhalte in verschiedenen Bildschirmgrößen sichtbar halten kannst.</div><div><br /></div><div>Elemente, die außerhalb der Rasterlinien liegen, sind auf kleineren Bildschirmen oder beim Heranzoomen möglicherweise nicht sichtbar. Wenn dein Inhalt bei der Verwendung des Zoom-Werkzeugs abgeschnitten wird, empfehlen wir, ihn so zu verschieben, dass er innerhalb der Rasterlinien liegt.</div><div><br /></div><div>Ein Beispiel dafür findest du in den Screenshots unten. Das erste Bild zeigt die Elemente innerhalb der Rasterlinien (die vertikalen gepunkteten Linien). Im zweiten Bild befindet sich der Text jedoch außerhalb der Rasterlinien, was bedeutet, dass er auf der Live-Website möglicherweise nicht sichtbar ist.</div><div><br /></div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/07/20/5253aa20-745b-4f6e-a102-a4b42dd2910b/5dbed7da-bbf4-4803-b62e-bc61a4c253ef.png" /></div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/07/20/cc9ff834-bcd4-4ee0-b323-8af6e2096e67/8f1554e5-01e5-4bbe-8cc9-31b5c6276312.png" /></div></div>

Website-Navigation ist die Art und Weise, wie Besucher durch die Seiten und Inhalte der Website navigieren. Eine Website sollte mehrere, einheitliche Navigationsmethoden verwenden, da dies die Website...

Barrierefreiheit: Website-Navigation

<div data-component-type="text"><div>Website-Navigation ist die Art und Weise, wie Besucher durch die Seiten und Inhalte der Website navigieren. Eine Website sollte mehrere, einheitliche Navigationsmethoden verwenden, da dies die Website für ein breiteres Publikum zugänglich machen kann. Einige Besucher finden es möglicherweise leichter, etwas anzuklicken und andere etwas einzugeben.</div></div><div data-component-type="text"><div>Derzeit gibt es 2 Methoden für eine Website von Wix: Website-Menüs und Website-Suche.</div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Woher bezieht Wix seine Informationen?</div><div class="info-content"><ul>
  <li>Wir geben Empfehlungen gemäß der <a data-composite="true" href="https://www.w3.org/TR/WCAG21/#abstract" target="_blank">Web Content Accessibility Guidelines (WCAG)</a>, das vom <a data-composite="true" href="https://www.w3.org/" target="_blank">W3C-Gremium</a> entwickelt wurde.</li>  <li>Dieser Artikel basiert auf dem <a data-composite="true" href="https://www.w3.org/WAI/WCAG21/Understanding/multiple-ways" target="_blank">Erfolgskriterium 2.4.5 (Mehrere Möglichkeiten)</a> und <a data-composite="true" href="https://www.w3.org/WAI/WCAG21/Understanding/consistent-navigation.html" target="">Erfolgskriterium 3.2.3 (Einheitliche Navigation)</a>.</li></ul></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-a-site-menu" level="3">Ein Website-Menü hinzufügen</h2></div><div data-component-type="text"><div>Website-Menüs sind eine beliebte Navigationsmethode und werden normalerweise in der Kopf- oder Fußzeile einer Website platziert. Verwende sie, um Seiten, Abschnitte und Links anzuzeigen, damit Besucher Website-Inhalte finden und darauf zugreifen können.</div></div><div data-component-type="text"><div>Die meisten Website-Templates enthalten bereits Menüs. Du kannst jedoch auch ein Menü aus dem <strong>Elemente hinzufügen</strong>-Panel in deinem Website-Editor hinzufügen.</div></div><div data-component-type="tabs"><div class="tabs-wrapper"><div class="headings-wrapper"><div data-slug="Studio-Editor" class="tab-heading heading-0">Studio Editor</div><div data-slug="Wix-Editor" class="tab-heading heading-1">Wix Editor</div></div><div class="tab-contents-wrapper"><div class="tab-content"><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="">Öffne deinen Editor</a>.</li>  <li>Klicke auf der linken Seite des Editors auf <strong>Elemente hinzufügen</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/06/14/cef22a14-dfc9-43c7-a54f-72ed83266050/741248d2-4240-497e-a282-2a7d15d8afac.png" />.</li>  <li>Klicke auf <strong>Menü &amp; Suche</strong>.</li>  <li>Wähle den gewünschten Menütyp aus (Horizontal, Vertikal usw.).</li>  <li>Klicke und ziehe das Menü, um es zu deiner Website hinzuzufügen.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/11/06/dffea31c-0991-4363-bc8a-04ec8a5a82e0/eecf09c5-5406-4ffe-b117-e5c99be0c5d0.jpg" alt="Elemente im Studio Editor hinzufügen. „Menü &amp; Suche“ ist hervorgehoben und der Cursor klickt auf ein horizontales Menü." /></div></div></div><div class="tab-content"><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="">Öffne deinen Editor</a>.</li>  <li>Klicke auf der linken Seite des Editors auf <strong>Elemente hinzufügen</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/65d5031a-8d20-483c-b08f-0a758e1cf2fd/68a0236f-77f4-43c6-931f-8298ae691a9e/2022/11/17/01f24c8b-2ea3-4d06-a26d-9975a43d617e/a79e245b-4870-4444-ba82-248eca4eb9a7.png" />.</li>  <li>Klicke auf <strong>Menü &amp; Anker</strong>.</li>  <li>Wähle den gewünschten Menütyp aus (Horizontal, Vertikal usw.).</li>  <li>Klicke und ziehe das Menü, um es zu deiner Website hinzuzufügen.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/11/06/bc582988-5eaa-42cd-80f0-26b27a01c3ef/b5bc7f2c-f64d-4db9-9889-e7c3e4879d87.jpg" alt="Elemente im Wix Editor hinzufügen. „Menü &amp; Anker“ ist hervorgehoben und der Cursor klickt auf ein horizontales Menü." /></div></div></div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-site-search" level="3">Website-Suche hinzufügen</h2></div><div data-component-type="text"><div>Die Website-Suche ermöglicht es Besuchern, bestimmte Inhalte oder Informationen über eine Suchleiste zu finden und zeigt die Ergebnisse in einer Liste an. Dies kann die Barrierefreiheit verbessern, da Besucher nicht durch Inhalte klicken oder scrollen müssen, um zu finden, was sie suchen.</div></div><div data-component-type="text"><div>Installiere die Website-Suche über das <strong>Elemente hinzufügen</strong>-Panel in deinem Editor. Wenn du sie kürzlich installiert hast, kannst du eine neue Suchleiste hinzufügen.</div></div><div data-component-type="tabs"><div class="tabs-wrapper"><div class="headings-wrapper"><div data-slug="Studio-Editor-0" class="tab-heading heading-0">Studio Editor</div><div data-slug="Wix-Editor-1" class="tab-heading heading-1">Wix Editor</div></div><div class="tab-contents-wrapper"><div class="tab-content"><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="">Öffne deinen Editor</a>.</li>  <li>Klicke auf der linken Seite des Editors auf <strong>Elemente hinzufügen</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/06/14/cef22a14-dfc9-43c7-a54f-72ed83266050/741248d2-4240-497e-a282-2a7d15d8afac.png" />.</li>  <li>Klicke auf <strong>Menü &amp; Suche</strong>.</li>  <li>Wähle <strong>Website-Suche</strong>.</li>  <li>Füge sie zur Website hinzu:
    <ol>
      <li>(Bei der ersten Installation) Klicke auf <strong>Hinzufügen</strong> <img data-composite="true" src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcrZJ7ls2yKCv1uvXeLZCbudmC8gjaVk84R7xHn7HoGmzVDeqZ3NQdnCldUbhrk0AN4v07WmK49Y2o2Nwynv68UknnIhL_mNEFOSlcITjraeFTYNjnI9Z2qNUuV6zBTtY1Y4Zmh?key=k_2EM6zsnpqJcxQF7aCXIg" />.</li>      <li>Klicke und ziehe die Suchleiste, um sie zur Website hinzuzufügen.</li>    </ol>  </li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/11/06/5d200efc-8767-4e43-b312-89dc083309da/62bdc851-deef-48bb-8ed8-e4790842a502.jpg" alt="Elemente im Studio Editor hinzufügen. Die Website-Suche ist hervorgehoben und der Cursor klickt auf das Symbol, um sie hinzuzufügen." /></div></div></div><div class="tab-content"><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="">Öffne deinen Editor</a>.</li>  <li>Klicke auf der linken Seite des Editors auf <strong>Elemente hinzufügen</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/65d5031a-8d20-483c-b08f-0a758e1cf2fd/68a0236f-77f4-43c6-931f-8298ae691a9e/2022/11/17/01f24c8b-2ea3-4d06-a26d-9975a43d617e/a79e245b-4870-4444-ba82-248eca4eb9a7.png" />.</li>  <li>Klicke auf <strong>Menü &amp; Anker</strong>.</li>  <li>Wähle <strong>Website-Suche</strong>.</li>  <li>Füge sie zur Website hinzu:
    <ol>
      <li>(Bei der ersten Installation) Klicke auf <strong>Hinzufügen</strong> <img data-composite="true" src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcrZJ7ls2yKCv1uvXeLZCbudmC8gjaVk84R7xHn7HoGmzVDeqZ3NQdnCldUbhrk0AN4v07WmK49Y2o2Nwynv68UknnIhL_mNEFOSlcITjraeFTYNjnI9Z2qNUuV6zBTtY1Y4Zmh?key=k_2EM6zsnpqJcxQF7aCXIg" />.</li>      <li>Klicke und ziehe die Suchleiste, um sie zur Website hinzuzufügen.</li>    </ol>  </li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/12/02/8e38590b-5cea-4649-901c-4d213dda9efb/8e451a50-f4f7-4d8b-b000-ffc2be02e290.jpg" alt="Elemente im Wix Editor hinzufügen. Die Website-Suche ist hervorgehoben und der Cursor klickt, um sie zur Website hinzuzufügen." /></div></div></div></div></div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Was du wissen solltest:</div><div class="info-content"><div><a data-composite="true" href="https://support.wix.com/de/article/über-die-website-suche-von-wix#visitors-can-search-for-the-content-they-need" target="">Einige Website-Elemente/Inhalte können von der Website-Suche nicht gefunden werden</a>.</div></div></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Wie geht es weiter?</div><div class="info-content"><div>Du kannst <a data-composite="true" href="https://support.wix.com/de/article/wix-site-search-hinzufügen-und-einrichten-7117754" target="">die Website-Suche einrichten</a>, damit sie so aussieht und sich so verhält, wie du möchtest.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="consistent-site-navigation" level="3">Einheitliche Website-Navigation</h2></div><div data-component-type="text"><div>Nachdem du Website-Navigationsmethoden hinzugefügt hast, solltest du sicherstellen, dass sie auf allen Seiten der Website an derselben Position sichtbar sind.</div></div><div data-component-type="text"><div>Wenn du eine Website mit dem Studio Editor erstellst, kannst du die Navigationselemente an die <a data-composite="true" href="https://support.wix.com/de/article/studio-editor-globale-abschnitte-verwenden" target="">Kopfzeile, Fußzeile oder einen globalen Abschnitt</a> anheften.</div></div><div data-component-type="text"><div>Mit dem Wix Editor kannst du Navigationselemente an die <a data-composite="true" href="https://support.wix.com/de/article/wix-editor-elemente-in-deiner-kopfzeile-fußzeile-und-auf-deiner-seite-platzieren" target="">Kopf- oder Fußzeile der Website</a> anheften. Wenn du sie lieber im Seitenbereich anzeigen möchtest, kannst du sie <a data-composite="true" href="https://support.wix.com/de/article/wix-editor-ein-element-auf-allen-seiten-anzeigen" target="">so einstellen, dass sie auf allen Seiten angezeigt werden</a>.</div></div>

Web-Barrierefreiheit sorgt dafür, dass jeder, auch Menschen mit Behinderungen, auf deine Website zugreifen und sie nutzen kann. Einige Besucher erleben Websites anders. Es ist wichtig, deine Website f...

Barrierefreiheit: Die Barrierefreiheit von Websites mit dem Monitor für Barrierefreiheit überprüfen

<div data-component-type="text"><div><a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-über-die-barrierefreiheit-im-web" target="_blank">Web-Barrierefreiheit</a> sorgt dafür, dass jeder, auch Menschen mit Behinderungen, auf deine Website zugreifen und sie nutzen kann. Einige Besucher erleben Websites anders. Es ist wichtig, deine Website für diese Besucher anzupassen.</div></div><div data-component-type="text"><div>Es gibt verschiedene Möglichkeiten, die Barrierefreiheit deiner Website zu überprüfen und zu verbessern, einschließlich des Monitors für Barrierefreiheit. Der Monitor für Barrierefreiheit ist ein Tool, das deine Live-Website auf potenzielle Probleme mit der Barrierefreiheit durchsucht und den Status in deiner Website-Verwaltung anzeigt.</div></div><div data-component-type="text"><div><strong>In diesem Artikel erfährst du mehr über folgende Themen:</strong></div></div><div data-component-type="text"><ul>
  <li><a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-die-barrierefreiheit-von-websites-mit-dem-monitor-für-barrierefreiheit-überprüfen#checking-and-using-the-accessibility-monitor" target="">Den Monitor für Barrierefreiheit prüfen und verwenden</a></li>  <li><a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-die-barrierefreiheit-von-websites-mit-dem-monitor-für-barrierefreiheit-überprüfen#faqs" target="">Häufig gestellte Fragen (FAQs)</a></li></ul></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="checking-and-using-the-accessibility-monitor" level="3">Den Monitor für Barrierefreiheit prüfen und verwenden</h2></div><div data-component-type="text"><div>Öffne den Monitor für Barrierefreiheit in deiner Website-Verwaltung, um den Barrierefreiheitsstatus deiner Live-Website zu überprüfen. Wenn Probleme erkannt wurden, kannst du den Monitor für Barrierefreiheit verwenden, um den <a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-über-den-wizard-für-barrierefreiheit" target="_blank">Wix Wizard für Barrierefreiheit</a> im Wix Editor zu öffnen und die Probleme zu beheben.</div></div><div data-component-type="heading"><h2 id="" level="4">Um den Monitor für Barrierefreiheit zu verwenden:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://www.wix.com/my-account/site-selector/?buttonText=Website-Verwaltung%20öffnen&amp;title=Wähle%20eine%20Website%20aus&amp;autoSelectOnSingleSite=true&amp;actionUrl=https://www.wix.com/dashboard/%7B%7BmetaSiteId%7D%7D/home/" target="_blank">Öffne deine Website-Verwaltung</a>.</li>  <li>Fahre im linken Menü mit der Maus über <strong>Website &amp; App</strong>.</li>  <li>Wähle unter <strong>Website &amp; SEO</strong> die Option <strong>Website</strong> aus.</li>  <li>Überprüfe die Karte für <strong>Barrierefreiheit</strong>.</li>  <li>(Falls Probleme identifiziert wurden) Klicke auf <strong>Probleme beheben</strong>.</li>  <li>Folge den <a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-den-wizard-für-barrierefreiheit-verwenden" target="_blank">Schritten im Wizard</a>, um die Barrierefreiheit deiner Website zu verbessern.</li>  <li>Speichere und veröffentliche die Änderungen.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/06/14/62d09168-98af-4ee4-83df-100c3c468c6b/4fadff12-b41f-4621-824e-6022802c9af5.jpg" alt="Eine Website-Verwaltung von Wix. Das Widget „Monitor für Barrierefreiheit“ ist hervorgehoben. „Probleme beheben“ wird angeklickt." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="faqs" level="3">Häufig gestellte Fragen (FAQs)</h2></div><div data-component-type="text"><div>Wähle eine Frage aus, um mehr über den Monitor für Barrierefreiheit zu erfahren.</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Auf welchen Website-Buildern ist der Monitor für Barrierefreiheit verfügbar?</h4><div class="collapsible-content"><div>Wie der <a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-über-den-wizard-für-barrierefreiheit" target="_blank">Wizard für Barrierefreiheit</a> ist der Monitor für Barrierefreiheit nur für Websites verfügbar, die im Wix Editor erstellt wurden.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Was ist der Unterschied zwischen dem Wizard für Barrierefreiheit und dem Monitor für Barrierefreiheit?</h4><div class="collapsible-content"><div>Der Monitor für Barrierefreiheit identifiziert nur Probleme mit der <strong>veröffentlichten</strong> Version deiner Website. Der <a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-über-den-wizard-für-barrierefreiheit" target="_blank">Wizard für Barrierefreiheit</a> identifiziert Probleme mit der gespeicherten Version deiner Website (die du möglicherweise noch nicht veröffentlicht hast).</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Wie oft sollte ich den Monitor für Barrierefreiheit überprüfen?</h4><div class="collapsible-content"><div>Du solltest den Monitor für Barrierefreiheit jedes Mal überprüfen, wenn du neue Änderungen auf deiner Website veröffentlichst, damit du die Barrierefreiheit deiner Website weiter verbessern kannst, während du deine Marke oder dein Unternehmen ausbaust.</div></div></div></div>

Der Wizard für Barrierefreiheit ist ein nützliches Tool, das dir helfen kann, deine Website für deine Besucher barrierefrei zu gestalten.Je nach Art der visuellen oder Backend-Inhalte, die du auf dein...

Barrierefreiheit: Fehlerbehebung bei dem Wizard für Barrierefreiheit

<div data-component-type="text"><div>Der Wizard für Barrierefreiheit ist ein nützliches Tool, das dir helfen kann, deine Website für deine Besucher barrierefrei zu gestalten.</div></div><div data-component-type="text"><div>Je nach Art der visuellen oder Backend-Inhalte, die du auf deiner Website hast, können bei der Verwendung des Wizards verschiedene Probleme auftreten. Informiere dich in diesem Artikel über diese Probleme und deren Lösungen.</div></div><div data-component-type="text"><div><strong>In diesem Artikel erfährst du mehr über folgende Themen:</strong></div></div><div data-component-type="text"><ul>
  <li><a data-composite="true" href="https://support.wix.com/de/article/accessibility-troubleshooting-the-accessibility-wizard#color-contrast-on-images" target="">Farbkontrast auf Bildern</a></li>  <li><a data-composite="true" href="https://support.wix.com/de/article/accessibility-troubleshooting-the-accessibility-wizard#color-contrast-in-containers" target="">Farbkontrast in Containern</a></li>  <li><a data-composite="true" href="https://support.wix.com/de/article/accessibility-troubleshooting-the-accessibility-wizard#heading-tags-on-your-pages" target="">Überschriften-Tags</a></li>  <li><a data-composite="true" href="https://support.wix.com/de/article/accessibility-troubleshooting-the-accessibility-wizard#linked-text" target="">Verlinkter Text</a></li>  <li><a data-composite="true" href="https://support.wix.com/de/article/accessibility-troubleshooting-the-accessibility-wizard#alt-text-and-cms" target="">Alt-Text und CMS</a></li>  <li><a data-composite="true" href="https://support.wix.com/de/article/accessibility-troubleshooting-the-accessibility-wizard#aria-attributes-in-images" target="">ARIA-Attribute</a></li>  <li><a data-composite="true" href="https://support.wix.com/de/article/accessibility-troubleshooting-the-accessibility-wizard#repeated-issues" target="">Wiederkehrende Probleme</a></li></ul></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="color-contrast-on-images" level="3">Farbkontrast auf Bildern</h2></div><div data-component-type="text"><div>Um den Text deiner Website deutlich sichtbar zu machen, markiert der Wizard alle Bereiche, die keinen Farbkontrast von 3,0 und höher für großen Text und 4,5 für normalen Text haben. Möglicherweise wird eine dieser Benachrichtigungen angezeigt, wenn du einen ausreichenden Farbkontrast hast, aber Text auf einem Bild platziert ist.</div></div><div data-component-type="text"><div>Der Wizard berechnet den Kontrast basierend auf der Helligkeit des Textes und des<strong> Abschnitts</strong> oder <strong>Streifenhintergrunds</strong> , auf dem sich das Bild befindet. Um dieses Problem zu beheben, musst du daher die Helligkeit des Textes oder des Hintergrunds ändern.</div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2023/10/09/c812240a-0c56-4aa0-b9fa-43dc354f15a7/08739e7c-686f-4901-8726-7f5ab07cd7aa.png" alt="Der Wizard in einer Editor-Website. Der Farbkontrast für Text über einem Bild wurde markiert." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="color-contrast-in-containers" level="3">Farbkontrast in Containern</h2></div><div data-component-type="text"><div>Wenn du Text über einer Container-Box platzierst, ohne ihn an den Container anzuheften, ist die Berechnung des Farbkontrasts nicht korrekt. Als Ergebnis siehst du möglicherweise eine Karte, die auf ein Problem mit dem Kontrast hinweist.</div></div><div data-component-type="text"><div>Das liegt daran, dass der Wizard den Container nicht als Hintergrund erkennt, und stattdessen den Kontrast basierend auf dem Hintergrund berechnet, auf dem sich der Container befindet (z. B. ein Streifen oder Abschnitt).</div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2023/10/09/6f65f80f-8446-49a0-a50f-3330d2d21b8b/5db8ead6-5482-4241-8ebb-c119c7fa8f33.png" alt="Der Wizard in einer Editor-Website. Der Farbkontrast für Text wurde markiert, obwohl er sich über einem Container befindet." /></div></div><div data-component-type="text"><div>Um dieses Problem zu beheben, musst du den Text an die Container-Box anheften.</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Text an einen Container anheften</h4><div class="collapsible-content"><ol>
  <li>Wähle das entsprechende Textfeld in deinem Editor aus.</li>  <li>Ziehe es aus und lege es auf dem Abschnitt oder Streifen ab.</li>  <li>Klicke erneut auf das Textfeld und ziehe es an die gewünschte Position in der Container-Box.</li>  <li>Lasse den Text fallen, wenn du die Nachricht <strong>An Box anheften</strong> siehst.</li></ol><div><br /></div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/08/29/1a63f890-0d32-4904-9f8f-9c06c1b93f80/426cf749-0e3c-4260-87bf-bd0423df6677.png" alt="Screenshot einer Box im Editor. Der Cursor zieht einen Text darüber. Es wird „An Box anheften“ angezeigt." /></div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="heading-tags-on-your-pages" level="3">Überschriften-Tags auf deinen Seiten</h2></div><div data-component-type="text"><div><a data-composite="true" href="https://support.wix.com/de/article/die-überschriften-tags-deiner-seite-verwalten" target="_blank">Überschriften-Tags</a> definieren die Hierarchie des Seiteninhalts und ermöglichen Besuchern, durch diese zu navigieren. Wenn du den Text auf deiner Seite nicht definierst, zeigt der Wizard möglicherweise Karten an, in denen du aufgefordert wirst, die Hauptüberschrift der Seite und die Überschriften-Tags des anderen Textes festzulegen.</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Fehlerbehebung bei Überschriften-Tags</h4><div class="collapsible-content"><div>Möglicherweise siehst du doppelte Tags in einer Überschrift. Dies passiert, wenn die Überschrift einen Zeilenumbruch enthält. Wir empfehlen, den Zeilenumbruch wenn möglich zu entfernen oder die doppelten Tags zu entfernen.</div><div><br /></div><div>Wenn du deinen Text aus einer externen Quelle eingefügt hast, können sich verschiedene Überschriften-Tags in einem einzigen Textfeld befinden. Wir empfehlen, für jedes HTML-Tag separate Textfelder zu verwenden, um die Barrierefreiheit zu verbessern und sicherzustellen, dass deine Website genau gescannt wird.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Fehlerbehebung bei Seitenüberschriften</h4><div class="collapsible-content"><div>Die Hauptüberschrift (H1) deiner Seite sollte der Titel der Seite sein und beschreiben, worum es auf der Seite geht (z. B. Übersicht, Projekte usw.). Da jeder Seitentitel einzigartig sein sollte, sollten sie nicht:</div><div><br /></div><ul>
  <li>An einen Abschnitt angehängt werden, der auf allen Seiten angezeigt wird (die Kopfzeile der Website)</li>  <li>So eingestellt sein, dass sie <a data-composite="true" href="https://support.wix.com/de/article/wix-editor-ein-element-auf-allen-seiten-anzeigen" target="_blank">auf allen Seiten angezeigt werden</a>.</li></ul><div><br /></div><div>Wenn du aufgefordert wirst, die Überschrift deiner Seite erneut zu definieren, achte darauf, dass sie sich nicht in der Kopfzeile befindet oder so eingestellt ist, dass sie auf allen Seiten angezeigt wird.</div></div></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Werden sowohl die Karten „Hauptüberschrift“ als auch „Überschriftendefinition“ im Wizard anzeigen?</div><div class="info-content"><div>Wir empfehlen, dich zuerst um die Karte „Hauptüberschrift“ zu kümmern. Dadurch wird eine der Karten über die Überschriftendefinition automatisch aufgelöst, sodass du den Text nicht erneut definieren musst.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="linked-text" level="3">Verknüpfter Text</h2></div><div data-component-type="text"><div>Möglicherweise siehst du eine Karte im Wizard, die verlinkten Text auf deiner Website anzeigt oder dich auffordert, diesen manuell zu überprüfen. Das liegt daran, dass allgemeiner verlinkter Text (z. B. „Mehr lesen“) nicht klar beschreibt, was passiert, wenn Besucher darauf klicken.</div></div><div data-component-type="text"><div>Am besten sorgst du dafür, dass jeder verlinkte Text, den du deiner Website hinzufügst, eine Beschreibung beinhaltet und Besucher über seine Funktion informiert (z. B. „Lies die Bewertungen zu unserer Sendung“).</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="alt-text-and-cms" level="3">Alt-Text und CMS</h2></div><div data-component-type="text"><div>Wenn du ein Bild mit einem Datensatz verknüpfst und darüber Alt-Text hinzufügst, wirst du möglicherweise aufgefordert, den Alt-Text im Wizard für Barrierefreiheit erneut hinzuzufügen. Das liegt daran, dass der Wizard die Datensätze deiner Website nicht liest und die Informationen aus den Einstellungen des Bildes übernimmt.</div></div><div data-component-type="text"><div>Um das Problem der Alt-Text-Karte zu beheben/verhindern, empfehlen wir, einen guten Alt-Text zum Bild im Wix Editor hinzuzufügen. Sobald du das Bild mit dem Datensatz verknüpft hast, kannst du überprüfen, ob das Alt-Text-Feld mit dem Alt-Text verknüpft ist, den du in deinem Editor hinzugefügt hast.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="aria-attributes-in-images" level="3">ARIA-Attribute in Bildern</h2></div><div data-component-type="text"><div><a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-aria-attribute-zu-deinen-benutzerdefinierten-webanwendungen-hinzufügen" target="_blank">ARIA-Attribute</a> bieten zusätzliche Informationen über die Semantik von Elementen für unterstützende Technologien. Wir empfehlen, ARIA-Attribute nur zu benutzerdefinierten Webanwendungen auf deiner Website hinzuzufügen, da die meisten anderen Elemente vorcodierte Attribute haben.</div></div><div data-component-type="text"><div>Da Alternativtext über deine Website-Medien Infos für unterstützende Technologien bereitstellt, musst du keine zusätzlichen ARIA-Attribute hinzufügen.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="repeated-issues" level="3">Wiederkehrende Probleme</h2></div><div data-component-type="text"><div>Der Wizard hebt möglicherweise Probleme hervor, die du bereits <a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-den-wizard-für-barrierefreiheit-verwenden#step-3-find-and-fix-issues" target="_blank">in Schritt 3</a> behoben hast. Wenn du zum Beispiel eine Barrierefreiheitserklärung hinzugefügt (und sie im Wizard als „abgeschlossen“ markiert) hast, wird die Karte möglicherweise wieder angezeigt, wenn du die Website erneut scannst.</div></div><div data-component-type="text"><div>Die Änderungen/Einstellungen, die du gespeichert hast, sollten weiterhin auf die Website angewendet werden - klicke einfach auf den Button, um sie als „abgeschlossen“ zu markieren.</div></div>

Verbessere die Barrierefreiheit auf der Website deines Kunden mit dem Wizard für Barrierefreiheit. Dieses Tool scannt die Website und zeigt 2 Tabs an, die du bearbeiten musst:
  Erkannte Probleme: Pro...

Barrierefreiheit: Den Wizard für Barrierefreiheit im Studio Editor verwenden

Der Wizard für Barrierefreiheit ist ein Tool, das dir hilft, Probleme mit der Barrierefreiheit auf der Website, an der du gerade arbeitest, zu finden und zu beheben. Der Wizard durchsucht die Website ...

Barrierefreiheit: Über den Wizard für Barrierefreiheit im Studio Editor

<div data-component-type="text"><div>Der Wizard für Barrierefreiheit ist ein Tool, das dir hilft, Probleme mit der Barrierefreiheit auf der Website, an der du gerade arbeitest, zu finden und zu beheben. Der Wizard durchsucht die Website in deinem Editor und führt dich durch Aktionen, um das Erlebnis für Website-Besucher und Kunden deines Kunden zu verbessern.</div></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Wichtig:</div><div class="info-content"><ul>
  <li>Dieser Artikel bezieht sich auf den Wizard für Barrierefreiheit im Studio Editor. Um mehr über den Wizard im Wix Editor zu erfahren, <a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-über-den-wizard-für-barrierefreiheit" target="">klicke bitte hier</a>.</li>  <li>Obwohl wir bei Wix stets bemüht sind, unsere Produkte und Services zu verbessern, können wir nicht garantieren, dass deine Website <strong>nach Nutzung des Wizards</strong> den Gesetzen und Vorschriften zur Barrierefreiheit in deiner Region entspricht. Wir empfehlen dir, einen Experten für Barrierefreiheit zu konsultieren, um sicherzustellen, dass deine Website den Standards für deine Region entspricht.</li></ul></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="get-a-comprehensive-overview" level="3">Einen umfassenden Überblick erhalten</h2></div><div data-component-type="text"><div>Wenn du <a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-den-wizard-für-barrierefreiheit-im-studio-editor-verwenden#scanning-the-site-with-the-accessibility-wizard" target="">eine Website mit dem Wizard für Barrierefreiheit scannst</a>, werden die Ergebnisse in 2 Tabs angezeigt: <strong>Gefundene Probleme</strong> und <strong>Manuelle Aufgaben</strong>.</div></div><div data-component-type="text"><div>Wir geben Empfehlungen gemäß der <a data-composite="true" href="https://www.w3.org/WAI/standards-guidelines/wcag/" target="_blank">Web Content Accessibility Guidelines (WCAG) 2.2</a>. Dieses Dokument wurde vom <a data-composite="true" href="https://www.w3.org/" target="_blank">World Wide Web Consortium (W3C)</a> entwickelt und beschreibt den internationalen Standard für Barrierefreiheit im Web.</div></div><div data-component-type="text"><div>Wenn du eine Website mit dem Wizard für Barrierefreiheit scannst, bekommst du ein Gefühl für die Barrierefreiheit der Website und erhältst hilfreiche Verbesserungsvorschläge.</div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Wusstest du schon?</div><div class="info-content"><div>Deine Änderungen werden im Wizard gespeichert, sodass du zwischen Tabs wechseln (oder den Wizard vollständig verlassen) kannst, ohne deine Bearbeitungen zu verlieren.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="optimize-the-way-you-build-sites" level="3">Die Website-Erstellung optimieren</h2></div><div data-component-type="text"><div>Der Wizard hebt im Tab <strong>Gefundene Probleme</strong> hervor, was er gefunden hat, und teilt sie in Probleme auf Website-Ebene und Seitenprobleme auf:</div></div><div data-component-type="text"><ul>
  <li><strong>Probleme auf Website-Ebene:</strong> Dies sind potenzielle Barrieren, die für die gesamte Website gelten (z. B. Hauptsprache der Website, DOM Order usw.), damit du schnell ganzheitliche Anpassungen vornehmen kannst.</li>  <li><strong>Probleme einzelner Seiten:</strong> Jede Website-Seite hat ein eigenes Aufklappmenü im Wizard, mit dem du bestimmte Inhalte und Einstellungen wie Alt-Text, Farbkontrast und vieles mehr aktualisieren kannst.</li></ul></div><div data-component-type="text"><div>Erkannte Probleme helfen die Barrierefreiheit einer Website zu verbessern und eine gleichwertige Erfahrung für alle zu schaffen. <a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-den-wizard-für-barrierefreiheit-im-studio-editor-verwenden#fixing-detected-issues" target="">Erfahre mehr über erkannte Probleme</a>.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="get-actionable-solutions" level="3">Umsetzbare Lösungen erhalten </h2></div><div data-component-type="text"><div>Die Barrierefreiheit einer Website ist wichtig. Der Tab <strong>Manuelle Aufgaben</strong> zeigt Aktionen oder Probleme an, die der Wizard nicht erkennen kann, und hilft dir, so viele Schwachstellen wie möglich zu finden.</div></div><div data-component-type="text"><div>Der Tab enthält detaillierte Richtlinien zum Anpassen von Elementen und Einstellungen, z. B. die Verwendung von Farbe, den Browser-Zoom und vieles mehr. <a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-den-wizard-für-barrierefreiheit-im-studio-editor-verwenden#doing-manual-tasks" target="">Mehr über manuelle Aufgaben erfahren</a></div></div><div data-component-type="text"><div>Das Bearbeiten jeder Aufgabe kann Kunden helfen, ihr Unternehmen voranzubringen und für eine Website-Erfahrung mit besserer Barrierefreiheit zu sorgen.</div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Bist du bereit?</div><div class="info-content"><div><a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-den-wizard-für-barrierefreiheit-im-studio-editor-verwenden" target="">Mehr über das Scannen einer Website mit dem Wizard für Barrierefreiheit erfahren</a></div></div></div></div>

Deine Website barrierefrei gestalten