Wenn du an der Barrierefreiheit einer Website arbeitest, siehst du möglicherweise eine Einstellung, die als Fokusindikatoren bezeichnet wird. Das sind blaue Rahmen, die um interaktive Elemente wie But...

Barrierefreiheit: Über Fokusindikatoren (visuelle Indikatoren)

Erfahre, wie du Fokusindikatoren auf deiner Wix-Website aktivieren und testen kannst, um die Barrierefreiheit zu verbessern. Diese blauen Rahmen helfen Besuchern, die mit der Tastatur navigieren, ihre Position auf der Seite zu erkennen. Der Artikel erklärt, warum diese Indikatoren wichtig sind und wie du sicherstellen kannst, dass sie sichtbar sind, um allen Nutzern eine bessere Navigation zu ermöglichen.

<div data-component-type="text"><div>Wenn du an der Barrierefreiheit einer Website arbeitest, siehst du möglicherweise eine Einstellung, die als Fokusindikatoren bezeichnet wird. Das sind blaue Rahmen, die um interaktive Elemente wie Buttons und Links herum erscheinen, wenn Besucher für die Navigation auf der Website die Tastatur verwenden. </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/09/24/5392965c-0d96-41fc-b26c-0991fea45819/85b68dd0-01d0-4601-bfdc-b88d6eb68f8a.png" alt="Ein Bild einer Website mit einem visuellen Indikator um den Menüpunkt „Home“." /></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/focus-visible.html" target="_blank">Fokus sichtbar ( Kriterium 2.4.7)</a>.</li></ul></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="why-focus-indicators-are-important" level="3">Warum Fokusindikatoren wichtig sind</h2></div><div data-component-type="text"><div>Einige Besucher navigieren auf Websites, indem sie die Tab-Taste auf ihrer Tastatur verwenden. Fokusindikatoren zeigen die aktuelle Position der Tab-Taste an, damit Besucher genau wissen, wo sie sich auf der Seite befinden.</div></div><div data-component-type="text"><div>Wenn diese Indikatoren nicht aktiviert sind, können Website-Besucher möglicherweise nicht auf der Seite oder im Website-Inhalt navigieren. Fokusanzeigen sind daher ein wichtiger Bestandteil der Barrierefreiheit einer Website. </div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="focus-indicators-on-your-wix-site" level="3">Fokusindikatoren auf deiner Website von Wix</h2></div><div data-component-type="text"><div>Fokusindikatoren sind auf allen Websites, die du mit Wix erstellst, automatisch aktiviert.</div></div><div data-component-type="text"><div>Der Indikator ist so gestaltet, dass er zu den Farbkombinationen der meisten Websites passt. Auf Buttons mit einer weißen Füllung auf einem blauen Hintergrund ist er jedoch weniger sichtbar. Wir empfehlen daher, die Farbe der Elemente auf deiner Website zu überprüfen, um sicherzustellen, dass alle Besucher den Indikator sehen können.</div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Wie kann ich den Fokusindikator auf einer Website testen?</div><div class="info-content"><div>Um zu überprüfen, wie der Fokusindikator aussieht, öffne deine Live-Website oder die Website-Vorschau und navigiere mit der Tab-Taste deiner Tastatur auf der Seite.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="enabling-focus-indicators" level="3">Fokus-Indikatoren aktivieren</h2></div><div data-component-type="text"><div>Beim Überprüfen einer Live-Website des Wix Editor stellst du möglicherweise fest, dass der Fokusindikator nicht erscheint. Wenn du die Fokusindikatoren zuvor deaktiviert hast, wirst du dazu aufgefordert, diese zu aktivieren. Das kannst du im Wizard für Barrierefreiheit machen.</div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Du arbeitest mit dem Studio Editor oder dem Wix Harmony Editor?</div><div class="info-content"><div>Fokusindikatoren sind auf Websites, die du mit dem Studio oder Harmony Editor erstellt hast, immer aktiviert, sodass du diese Einstellung nicht überprüfen musst.</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><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>Klicke im Panel auf der rechten Seite deines Editors auf <strong>Website scannen</strong>.</li>  <li>Klicke auf den Tab <strong>Probleme gefunden</strong>.</li>  <li>Öffne das Dropdown-Menü <strong>Website-Ebene</strong> und klicke auf <strong>Fokusindikatoren anzeigen</strong>.</li>  <li>Aktiviere den Schieberegler <strong>Visuelle Indikatoren einbeziehen </strong> . </li>  <li>Klicke auf <strong>Anwenden</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>Sobald du auf deiner Wix Editor-Website Fokusindikatoren aktiviert hast, ist es nicht mehr möglich, diese zu deaktivieren.</div></div></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/2025/05/30/e14f55c3-776b-419a-8fea-dbf25cdfbb56/b312085b-1950-49f3-81e5-ac06d1c799e3.png" alt="Der Cursor klickt auf den Schieberegler, um Indikatoren im Wizard zu aktivieren." /></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 data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-checkliste-zur-verbesserung-der-barrierefreiheit-deiner-website" target="">Checkliste für Barrierefreiheit</a>, um die Barrierefreiheit der Website weiter zu verbessern.</div></div></div></div>

Mit den Symbolleisten für Barrierefreiheit können Besucher bestimmte Aspekte deiner Website ändern, zum Beispiel Schriftart und Textgröße. Wix bietet zwar keine integrierten Symbolleisten für Barriere...

Barrierefreiheit: Eine Symbolleiste für Barrierefreiheit hinzufügen

Finde heraus, wie du eine Barrierefreiheitssymbolleiste mit Drittanbieter-Code zu deiner Wix-Website hinzufügen kannst, um Besuchern die Anpassung von Schriftart und Textgröße zu ermöglichen. Obwohl Wix keine integrierten Symbolleisten bietet, kannst du durch das Einbetten von benutzerdefiniertem Code die Zugänglichkeit deiner Website verbessern. Folge unserer Checkliste für Barrierefreiheit und nutze den Wizard, um das Nutzererlebnis zu optimieren.

<div data-component-type="text"><div>Mit den Symbolleisten für Barrierefreiheit können Besucher bestimmte Aspekte deiner Website ändern, zum Beispiel Schriftart und Textgröße. Wix bietet zwar keine integrierten Symbolleisten für Barrierefreiheit, du kannst aber mit dem Code eines Drittanbieters eine Symbolleiste zu deiner Website hinzufügen.</div></div><div data-component-type="text"><div>Diese Symbolleisten sind keine Voraussetzung, um den Standard der <a data-composite="true" href="https://www.w3.org/WAI/standards-guidelines/wcag/" target="_blank">Richtlinien zur Barrierefreiheit im Web</a> zu erreichen. So oder so empfehlen wir, unserer <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> zu folgen und deine Website mit dem <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> zu scannen, um ein verbessertes Erlebnis für deine Besucher zu gewährleisten.</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>Das Einbetten von benutzerdefiniertem Code ist nur für Websites mit einer <a data-composite="true" href="https://support.wix.com/de/article/ueber-domains-3495123" target="_blank">verbundenen Domain</a> verfügbar.</div></div></div></div><div data-component-type="heading"><h2 id="" level="3">Um eine Symbolleiste für Barrierefreiheit mit Code von Drittanbietern hinzuzufügen:</h2></div><div data-component-type="text"><ol>
  <li>Öffne den Bereich <a data-composite="true" href="https://www.wix.com/my-account/site-selector/?buttonText=Einstellungen%20verwalten&amp;title=Wähle%20eine%20Website%20aus&amp;autoSelectOnSingleSite=true&amp;actionUrl=https://www.wix.com/dashboard/{{metaSiteId}}/manage-website" target="_blank">Einstellungen</a> in deiner Website-Verwaltung.</li>  <li>Wähle unter <strong>Erweiterte Einstellungen</strong> den Tab <strong>Benutzerdefinierter Code</strong> aus.</li>  <li>Wähle oben rechts <strong>+ Benutzerdefinierten Code</strong> aus.</li>  <li>Füge den Codeausschnitt in das Textfeld ein.</li>  <li>Gib einen Namen für deinen Code ein. <strong>Tipp: </strong>Gib dem Codeausschnitt einen Namen, der leicht zu erkennen ist, damit du ihn später schnell identifizieren kannst.</li>  <li>Wähle eine Option unter <strong>Code zu Seiten hinzufügen</strong>:
    <ul>
      <li><strong>Alle Seiten: </strong>Dadurch wird der Code zu allen Seiten deiner Website hinzugefügt, einschließlich aller neuen Seiten, die du in Zukunft erstellst. Wähle, ob der Code nur einmal pro Besuch oder auf jeder Seite, die dein Besucher öffnet, geladen werden soll.</li>      <li><strong>Bestimmte Seiten auswählen: </strong>Verwende das Aufklappmenü, um die relevanten Seiten auszuwählen.</li>    </ul>  </li>  <li>Wähle aus, wo du deinen Code platzieren möchtest:
    <ul>
      <li>Kopfzeile</li>      <li>Textkörper - Anfang</li>      <li>Textkörper - Ende</li>    </ul>  </li>  <li>Wähle <strong>Anwenden</strong>.</li></ol></div>

Hier bei Wix arbeiten wir ständig daran, die Barrierefreiheit unserer Websites zu verbessern. Wir möchten dir die Tools an die Hand geben, die du benötigst, um sicherzustellen, dass deine Website barr...

Barrierefreiheit: Externe Prüfsoftware oder -Tools verwenden

Entdecke, wie du die Barrierefreiheit deiner Wix-Website verbessern kannst. Dieser Artikel bietet dir hilfreiche Tools und Empfehlungen, um sicherzustellen, dass deine Website für alle zugänglich ist. Außerdem erfährst du, wie externe Tools zur Überprüfung der Barrierefreiheit eingesetzt werden können und warum es wichtig ist, deine Website von einem Fachmann überprüfen zu lassen, um regionale gesetzliche Anforderungen zu erfüllen.

<div data-component-type="text"><div>Hier bei Wix arbeiten wir ständig daran, die Barrierefreiheit unserer Websites zu verbessern. Wir möchten dir die Tools an die Hand geben, die du benötigst, um sicherzustellen, dass deine Website barrierefrei ist, und haben einen <a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-checkliste-zur-verbesserung-der-barrierefreiheit-deiner-website" target="">Leitfaden mit unseren Empfehlungen erstellt</a>.</div></div><div data-component-type="text"><div>Du kannst externe Tools verwenden, um die Barrierefreiheit deiner Website zu überprüfen und Verbesserungsvorschläge zu erhalten. Jedes <a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-einhaltung-regionaler-gesetze" target="">Land und jede Region hat jedoch unterschiedliche Gesetze</a> - daher empfehlen wir, deine Website von einem Berater für Barrierefreiheit überprüfen zu lassen, um sicherzustellen, dass sie den Anforderungen für deine Region entspricht.</div></div>

ARIA-Attribute bieten zusätzliche Informationen über die Semantik von Elementen für unterstützende Technologien wie Screenreader. Du kannst ARIA-Attribute zu allen benutzerdefinierten Elementen oder A...

Barrierefreiheit: ARIA-Attribute zu deinen benutzerdefinierten Webanwendungen hinzufügen

Entdecke, wie du ARIA-Attribute zu benutzerdefinierten Elementen auf deiner Website hinzufügen kannst, um die Zugänglichkeit für unterstützende Technologien wie Screenreader zu verbessern. Lerne, den Dev-Modus im Studio Editor zu aktivieren und ARIA-Attribute für verschiedene Elemente hinzuzufügen oder zu bearbeiten. So kannst du sicherstellen, dass deine Website für alle Benutzer zugänglich ist und die Benutzererfahrung optimiert wird.

<div data-component-type="text"><div>ARIA-Attribute bieten zusätzliche Informationen über die Semantik von Elementen für unterstützende Technologien wie Screenreader. Du kannst ARIA-Attribute zu allen benutzerdefinierten Elementen oder Anwendungen auf deiner Website hinzufügen.</div></div><div data-component-type="text"><div>ARIA-Attribute sind wichtig, da sie definieren, wie benutzerdefinierte Elemente und Anwendungen zugänglich gemacht werden können, wenn das mit dem HTML des Elements nicht möglich ist. </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>Diese Funktion ist für Benutzer mit benutzerdefinierten Anwendungen/Elementen gedacht, die ARIA-Attribute erfordern. Wenn du diese nicht auf deiner Website hast, musst du die ARIA-Attribute nicht bearbeiten.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adding-aria-attributes" level="3">ARIA-Attribute hinzufügen</h2></div><div data-component-type="text"><div>Wir haben ARIA-Attribute für die meisten Elemente einer Website bereits fest programmiert. Wenn du jedoch benutzerdefinierte Anwendungen erstellt hast, möchtest du möglicherweise deine eigenen ARIA-Attribute für Barrierefreiheit 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"><div>Aktiviere den Dev-Modus (Velo by Wix) im Studio Editor, um Attribute zu Elementen hinzuzufügen. Mit Velo kannst du <a data-composite="true" href="https://dev.wix.com/docs/develop-websites/articles/getting-started/about-velo-by-wix" target="">Programmierung hinzufügen, Datenbanken erstellen und mehr</a>.</div></div><div data-component-type="text"><ol>
  <li>Wähle auf der linken Seite des Editors <strong>Code</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/31/0de74f7a-9d8a-4c0c-8279-219bd3eefe97/d55e629b-e8dc-4acc-8af2-7a7779fb8bbc.png" /> aus.</li>  <li>Wähle die entsprechende App oder das Element aus und klicke auf das Symbol für <strong>Weitere Aktionen</strong> <img data-composite="true" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXdFGzMGNDzgiZQ0F979Jv1-o5331SfuPnrxO8m55pHp_EiDKy7_zvShglz_oxBkkonbL4dOmmectOTVLG8_Lwhsvbvn33GQEVRVFTt0SaKfQnbZ33f2OyrtaR5ki1Fo_2ovT0Vy4H_uPEi3jljAkW-gqs8?key=dRllTO6NEoYu0-D1JuBE8A" />.</li>  <li>Wähle <strong>Barrierefreiheit</strong>.</li>  <li>Wähle <strong>Attribut hinzufügen</strong>.</li>  <li>Wähle ein Attribut aus dem Aufklappmenü.</li>  <li>Gib eine Bezeichnung ein/wähle die Stufe oder den Wert aus.</li>  <li>Wähle <strong>Hinzufügen</strong> 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/06/28953d00-e0af-4830-9a6e-befc645463b7/d306108c-c260-44f0-8301-e5713d96a4c6.jpg" alt="Screenshot des Panels für Barrierefreiheit eines Elements im Studio Editor. Der Mauszeiger klickt auf den Button „Attribute hinzufügen“." /></div></div></div><div class="tab-content"><div data-component-type="text"><div>Aktiviere Dev-Tools im <a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-über-den-wizard-für-barrierefreiheit" target="">Wizard für Barrierefreiheit</a>, um ARIA-Attribute zu deinen benutzerdefinierten Elementen hinzuzufügen. Du kannst das Attribut dann hinzufügen, indem du mit der rechten Maustaste auf das Element oder die Anwendung klickst.</div></div><div data-component-type="text"><ol>
  <li>Wähle in der oberen Leiste deines Editors <strong>Einstellungen</strong> aus.</li>  <li>Wähle <strong>Wizard für Barrierefreiheit</strong>.</li>  <li>Wähle in der oberen Leiste des Wizards das Symbol für <strong>Weitere Aktionen</strong> <img data-composite="true" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXdFGzMGNDzgiZQ0F979Jv1-o5331SfuPnrxO8m55pHp_EiDKy7_zvShglz_oxBkkonbL4dOmmectOTVLG8_Lwhsvbvn33GQEVRVFTt0SaKfQnbZ33f2OyrtaR5ki1Fo_2ovT0Vy4H_uPEi3jljAkW-gqs8?key=dRllTO6NEoYu0-D1JuBE8A" /> aus.</li>  <li>Wähle <strong>Erweiterte Einstellungen für Barrierefreiheit</strong>.</li>  <li>Klicke auf den Schieberegler <strong>Barrierefreiheit Dev-Tools</strong>, um diese zu aktivieren.</li>  <li>Klicke mit der rechten Maustaste auf die Anwendung oder das Element, dem du die Attribute hinzufügen möchtest.</li>  <li>Wähle <strong>Barrierefreiheit</strong>.</li>  <li>Wähle <strong>Attribut hinzufügen</strong>.</li>  <li>Wähle ein Attribut aus dem Aufklappmenü.</li>  <li>Gib eine Bezeichnung ein/wähle die Stufe oder den Wert aus.</li>  <li>Wähle <strong>Hinzufügen</strong> 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/06/08f56fa8-dbc6-4484-b600-2447401cd390/51281520-4c34-49dc-a5f1-8159f3ce06e7.jpg" alt="Screenshot, in dem das Panel für Barrierefreiheit und der Wizard geöffnet sind. Der Mauszeiger klickt auf „Attribut hinzufügen“ und der Schieberegler ist aktiviert." /></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>Du kannst die erweiterten Einstellungen für die Barrierefreiheit jederzeit deaktivieren, und die ARIA-Attribute werden nicht gelöscht.</div></div></div></div></div></div></div></div><div data-component-type="heading"><h2 id="" level="4">Du kannst ARIA-Attribute zu folgenden Elementen hinzufügen:</h2></div><div data-component-type="table"><div class="table-wrapper"><table><thead><tr><th><div>Element</div></th><th><div>Zimmer</div></th></tr></thead><tbody><tr><td><div>Lightbox</div></td><td><div>Label</div></td></tr><tr><td><div>Text </div></td><td><div>label, role <a data-composite="true" href="https://www.wix.com/contact/de" target="_blank">heading, status, alert], live, relevant, atomic, hidden, current, level</a></div></td></tr><tr><td><div>Container-Box</div></td><td><div>label, tabindex, role [region, group, none, status, alert], live, relevant, atomic, current, controls, hidden</div></td></tr><tr><td><div>Streifen</div></td><td><div>label, tabindex, role [heading, status, alert], live, atomic, hidden, current</div></td></tr><tr><td><div>Repeater-Steuerelemente</div></td><td><div>label, role [heading, status, alert]</div></td></tr><tr><td><div>Text-Button</div></td><td><div>tabindex, pressed, expanded, haspopup</div></td></tr></tbody></table></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title"></div><div class="info-content"><div>Wir arbeiten ständig an der Möglichkeit, weitere Elemente mit ARIA-Attributen zu versehen. [Kontaktiere uns, wenn du spezielle Fragen zu ARIA-Attributen hast.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="editing-your-aria-attributes" level="3">Deine ARIA-Attribute bearbeiten</h2></div><div data-component-type="text"><div>Nachdem du Attribute zu benutzerdefinierten Apps hinzugefügt hast, kannst du diese jederzeit über das Symbol für Barrierefreiheit bearbeiten und aktualisieren <img data-composite="true" src="https://lh6.googleusercontent.com/tzGAKNeD3huzfUCBGbiHOAmMhpoOMn2d7mXWbB8x3rd5_wDvr4uEfNczYUD_5EqzSdzFPLv5nc9zp7VkwFDWloqQmUBf71J5_kTbI5nE3o9Wb2s_CS8xcsfkw0eHNAxCpa4dBBIq=s0" /> . Dieses Symbol wird automatisch zu Elementen hinzugefügt, mit denen du Attribute verbunden hast.</div></div><div data-component-type="heading"><h2 id="" level="4">Um das Attribut zu bearbeiten:</h2></div><div data-component-type="text"><ol>
  <li>Wähle das Element/die Anwendung in deinem Editor aus.</li>  <li>Wähle das Symbol für <strong>Barrierefreiheit</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/05/05/123b3ec4-f910-485b-ba95-c80ee1f6723b/29accdaa-a7f8-4070-a4e9-be08ffc45e99.png" /> aus.</li>  <li>Fahre mit der Maus über das entsprechende Attribut und wähle 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" /> aus.</li>  <li>Wähle <strong>Bearbeiten</strong>.</li>  <li>Nimm die entsprechenden Änderungen vor und wähle <strong>Speichern</strong>.</li></ol></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="types-of-aria-attributes" level="3">Arten von ARIA-Attributen</h2></div><div data-component-type="table"><div class="table-wrapper"><table><thead><tr><th><div>Name des Attributs</div></th><th><div>Category</div></th><th><div>Tokens</div></th></tr></thead><tbody><tr><td><div>tabindex</div></td><td><div><br /></div></td><td><div>0, -1</div></td></tr><tr><td><div>Rolle</div></td><td><div><br /></div></td><td><div>token: according to definition in primitive</div></td></tr><tr><td><div>aria-level</div></td><td><div><br /></div></td><td><div>int</div></td></tr><tr><td><div>aria-live</div></td><td><div>Live</div></td><td><div>token: polite, assertive</div></td></tr><tr><td><div>aria-multiline </div></td><td><div>Beschreibung</div></td><td><div>true, false</div></td></tr><tr><td><div>aria-multiselectable</div></td><td><div>Beschreibung</div></td><td><div>true, false</div></td></tr><tr><td><div>aria-pressed</div></td><td><div>Bundesstaat</div></td><td><div>true, false</div></td></tr><tr><td><div>aria-relevant</div></td><td><div>Live</div></td><td><div>token: all, additions, removals, text</div></td></tr><tr><td><div>aria-activedescendant</div></td><td><div>Beziehungen</div></td><td><div>ID_REF</div></td></tr><tr><td><div>aria-atomic</div></td><td><div>Live</div></td><td><div>true, false</div></td></tr><tr><td><div>aria-autocomplete</div></td><td><div>Beschreibung</div></td><td><div>true, false</div></td></tr><tr><td><div>aria-controls</div></td><td><div>Beziehungen</div></td><td><div>ID_REF</div></td></tr><tr><td><div>aria-current</div></td><td><div>Bundesstaat</div></td><td><div>step, page, true, false</div></td></tr><tr><td><div>aria-describedby</div></td><td><div>Beziehungen</div></td><td><div>ID_REF (space separated items)</div></td></tr><tr><td><div>aria-expanded</div></td><td><div><br /></div></td><td><div>true, false</div></td></tr><tr><td><div>aria-haspopup</div></td><td><div>Beziehungen</div></td><td><div>dialog, menu, true, false</div></td></tr><tr><td><div>aria-hidden</div></td><td><div><br /></div></td><td><div>true, false</div></td></tr><tr><td><div>aria-invalid</div></td><td><div>Bundesstaat</div></td><td><div>true, false</div></td></tr><tr><td><div>aria-label</div></td><td><div><br /></div></td><td><div>string</div></td></tr><tr><td><div>aria-labelledby </div></td><td><div>Beziehungen</div></td><td><div>ID_REF (space separated items)</div></td></tr></tbody></table></div></div>

Zurzeit gibt es keine eingebaute Symbolleiste für Barrierefreiheit, mit der deine Besucher bestimmte Teile deiner Website anpassen oder verbessern können. Als Alternative kannst du eine Symbolleiste f...

Funktionsvorschlag für Barrierefreiheit: Eine Symbolleiste für Barrierefreiheit zu deiner Website hinzufügen

Finde heraus, wie du eine Barrierefreiheitssymbolleiste zu deiner Website hinzufügen kannst, indem du Drittanbieter-Code einbettest. Obwohl es derzeit keine integrierte Symbolleiste gibt, kannst du dennoch die Benutzererfahrung für deine Besucher verbessern. Beachte, dass solche Symbolleisten nicht erforderlich sind, um die Barrierefreiheitsstandards zu erfüllen. Dein Feedback hilft uns, unsere Produkte kontinuierlich zu verbessern.

<div data-component-type="text"><div>Zurzeit gibt es keine eingebaute Symbolleiste für Barrierefreiheit, mit der deine Besucher bestimmte Teile deiner Website anpassen oder verbessern können. </div></div><div data-component-type="text"><div>Als Alternative kannst du eine Symbolleiste für Barrierefreiheit hinzufügen, indem du <a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-eine-symbolleiste-für-barrierefreiheit-hinzufügen" target="_blank">Drittanbieter-Code verwendest und auf deiner Website einbettest</a>.</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>Symbolleisten für Barrierefreiheit sind keine Voraussetzung, um den Standard für Barrierefreiheit zu erreichen, wie er in den <a data-composite="true" href="https://www.w3.org/WAI/standards-guidelines/wcag/" target="_blank">Richtlinien für Barrierefreiheit im Web</a> beschrieben ist.</div></div></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>

Möglicherweise stellst du oder deine Besucher fest, dass Elemente, die Bewegung enthalten (wie Animationseffekte und transparente Videos), nicht sowohl auf der Mobil- als auch auf der Desktop-Version ...

Barrierefreiheit: Videos und Animationen werden nicht auf der Live-Website abgespielt

Erfahre, warum Animationen und Videos auf deiner Website möglicherweise nicht angezeigt werden und wie du das Problem beheben kannst. Das Artikel behandelt die Funktionen „Reduzierte Bewegung“ und „Beste Leistung“, die die Wiedergabe von bewegten Inhalten auf Mobil- und Desktop-Geräten beeinflussen. Du lernst, wie du diese Einstellungen auf verschiedenen Betriebssystemen deaktivieren kannst, um das volle visuelle Erlebnis deiner Website zu genießen.

<div data-component-type="text"><div>Möglicherweise stellst du oder deine Besucher fest, dass Elemente, die Bewegung enthalten (wie Animationseffekte und transparente Videos), nicht sowohl auf der Mobil- als auch auf der Desktop-Version deiner Live-Website wiedergegeben werden. Dies kann an Einstellungen im Betriebssystem liegen, die du oder dein Besucher verwenden.</div></div><div data-component-type="text"><div>Es gibt zwei Einstellungen, die verhindern, dass Animationen und Videos auf einer Live-Website abgespielt werden: Reduzierte Bewegung und Beste Leistung.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="reduced-motion" level="3">Reduzierte Bewegung</h2></div><div data-component-type="text"><div>Die Funktion „Reduzierte Bewegung“ stoppt die Wiedergabe von Animationen und Videos im Browser. Bewegungsreduzierung ist eine Barrierefreiheitsfunktion, was bedeutet, dass sie hauptsächlich dafür verwendet wird, es Besuchern mit Behinderungen und bestimmten Leiden (z. B. Reisekrankheit) zu ermöglichen, um deine Website zu besuchen.</div></div><div data-component-type="text"><div>Die Funktion „Reduzierte Bewegung“ ist auf den meisten Betriebssystemen verfügbar. Du und deine Besucher können die Funktion auf dem Gerät deaktivieren, um die gesamte Bandbreite an Effekten, Bewegungen und Animationen auf deiner Website zu sehen.</div></div><div data-component-type="text"><div>Wähle das entsprechende Gerät aus der Liste unten aus, um zu erfahren, wie du die Funktion „Reduzierte Bewegung“ deaktivieren kannst.</div></div><div data-component-type="text"><ul>
  <li><a data-composite="true" href="https://support.apple.com/de-de/HT202655" target="_blank">iPhone und iPad</a></li>  <li><a data-composite="true" href="https://support.apple.com/de-de/guide/mac-help/mchlc03f57a1/mac" target="_blank">Mac OS</a></li>  <li><a data-composite="true" href="https://support.office.com/de-de/article/Turn-off-Office-animations-9EE5C4D2-D144-4FD2-B670-22CEF9FA025A" target="_blank">Windows OS</a></li>  <li><a data-composite="true" href="https://www.howtogeek.com/415161/does-looking-at-your-phone-make-you-dizzy-disable-animations/" target="_blank">Android</a></li></ul></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 Bewegungsreduzierung ist für einige Mobilgeräte auch im Energiesparmodus automatisch aktiviert.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="performance-options" level="3">Performance-Optionen</h2></div><div data-component-type="text"><div>Deine Besucher können eine Einstellung auf ihrem Computer ändern, um die Leistung deiner Website zu verbessern. Mit der Einstellung <strong>Für optimale Leistung anpassen</strong>, die auf Geräten mit einem Windows-Betriebssystem verfügbar ist, kannst du auswählen, was mit visuellen Effekten wie animierten Elementen und Videos geschehen soll.</div></div><div data-component-type="text"><div>Je nach Präferenz können die Besucher wählen, ob sie visuelle Effekte in ihrem Browser aktivieren oder deaktivieren möchten.</div></div><div data-component-type="heading"><h2 id="" level="4">Um die Leistungseinstellungen zu ändern:</h2></div><div data-component-type="text"><ol>
  <li>Gib „Performance“ in das Windows-Suchfeld ein.</li>  <li>Wähle <strong>Darstellung und Leistung von Windows anpassen</strong>.</li>  <li>Wähle den Tab <strong>Visuelle Effekte</strong>.</li>  <li>Wähle eine Option aus der Liste unten:
    <ul>
      <li><strong>Optimale Einstellung automatisch auswählen:</strong> Windows ändert die Leistungseinstellungen deines Geräts basierend auf den Fähigkeiten deines Geräts.</li>      <li><strong>Für ein optimale Darstellung anpassen:</strong> Alle erweiterten visuellen Effekte und Einstellungen sind aktiviert und können auf deinem Gerät abgespielt werden (einschließlich Animationen und Videos).</li>      <li><strong>Für optimale Leistung anpassen:</strong> Alle erweiterten visuellen Effekte und Einstellungen sind deaktiviert und können nicht auf deinem Gerät abgespielt werden.</li>      <li><strong>Benutzerdefiniert:</strong> Passe die Einstellungen manuell an, um die gewünschten Funktionen zu aktivieren und zu deaktivieren.</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/2022/07/18/fdef93a2-4781-416b-8a15-f73d77c4f12c/8fae3cab-b453-4700-9e83-97d8d57a83b9.png" alt="Das Erscheinungsbild und die Leistung des Windows-Tabs werden angepasst. Die Maus fährt über die Option „Für optimale Darstellung anpassen“." /></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>Damit Besucher Animationen und Videos auf deiner Live-Website sehen können, sollten sie die Option <strong>Für optimale Darstellung anpassen</strong> auswählen.</div></div></div></div>

„Weiter zum Hauptinhalten“ ist eine Funktion, mit der Besucher zusätzliche Technologien und/oder Hilfstechnologien verwenden können, um irrelevante oder sich wiederholende Inhalte zu umgehen.So wird s...

Barrierefreiheit: Über „Weiter zu den Hauptinhalten“

Entdecken Sie die Funktion „Weiter zum Hauptinhalt“, die es Besuchern ermöglicht, direkt auf den Hauptinhalt Ihrer Wix-Website zuzugreifen, ohne sich durch wiederholende Inhalte navigieren zu müssen. Diese Funktion verbessert die Benutzerfreundlichkeit, insbesondere für Menschen mit Sehbehinderungen. Erfahren Sie, wie Sie diese Funktion aktivieren und testen können, um die Zugänglichkeit Ihrer Website zu optimieren.

<div data-component-type="text"><div>„Weiter zum Hauptinhalten“ ist eine Funktion, mit der Besucher zusätzliche Technologien und/oder Hilfstechnologien verwenden können, um irrelevante oder sich wiederholende Inhalte zu umgehen.</div></div><div data-component-type="text"><div>So wird sie auf einer Live-Website angezeigt:</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/09/13/04bd498b-4bcc-471d-9078-111775493073/0d4f6684-5a9a-49f5-9279-b83acfee00b9.png" alt="Eine Live-Website mit aktiviertem „Weiter zu den Hauptinhalten“-Button" /></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>, die vom <a data-composite="true" href="https://www.w3.org/" target="_blank">W3C</a> entwickelt wurden.</li>  <li>Dieser Artikel basiert auf dem <a data-composite="true" href="https://www.w3.org/WAI/WCAG21/Understanding/bypass-blocks.html" target="_blank">Erfolgskriterium 2.4.1 (Blöcke umgehen)</a>.</li></ul></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="why-skip-to-main-content-is-important" level="3">Warum „Weiter zum Hauptinhalten“ wichtig ist</h2></div><div data-component-type="text"><div>Besucher, die sehen können oder eine Maus verwenden, können den Hauptinhalt einer Seite visuell oder durch Scrollen finden. Manche Website-Besucher, zum Beispiel Menschen mit Sehbehinderungen, nutzen möglicherweise Hilfstechnologien und / oder eine Tastatur zur Navigation.</div></div><div data-component-type="text"><div>„Weiter zum Hauptinhalt“ bietet Besuchern direkten Zugriff auf den Hauptinhalt der Seite, ohne dass sie sich wiederholende Inhalte (z. B. Website-Titel, Menü usw.) durchgehen zu müssen.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="skip-to-main-content-and-wix-sites" level="3">„Weiter zum Hauptinhalten“ und Websites von Wix</h2></div><div data-component-type="text"><div>„Weiter zu den Hauptinhalten“ ist automatisch auf allen Websites aktiviert, die du mit Wix erstellst. Die Funktion wird als Link angezeigt, wenn Besucher mit der Tab-Taste auf der Seite navigieren.</div></div><div data-component-type="text"><div>Der Link ist so gestaltet, dass er zu den Farbkombinationen der meisten Websites passt. Auf Kopfzeilen und Abschnitten mit weiß-blauem Farbschema ist er jedoch möglicherweise weniger gut sichtbar. Wir empfehlen daher, die Farbe dieser Abschnitte zu überprüfen, um sicherzustellen, dass der Link für alle Besucher gut erkennbar ist.</div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Wie kann ich „Weiter zum Hauptinhalt“ testen?</div><div class="info-content"><div>Um zu überprüfen, wie das Tool funktioniert, öffne deine Live-Website oder die Website-Vorschau und navigiere mit der Tab-Taste deiner Tastatur auf der Seite.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="enabling-skip-to-main-content" level="3">Die Option „Weiter zum Hauptinhalt“ aktivieren</h2></div><div data-component-type="text"><div>Wenn du feststellst, dass der Link nicht in der Vorschau- oder Live-Version einer Wix Editor-Website angezeigt wird, kannst du ihn im Wizard für Barrierefreiheit überprüfen und aktivieren.</div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Du arbeitest mit Studio oder Wix Harmony?</div><div class="info-content"><div>„Weiter zum Hauptinhalt“ ist auf Websites, die du mit diesen Editoren erstellst, immer aktiviert, sodass du diese Einstellung nicht überprüfen musst.</div></div></div></div><div data-component-type="heading"><h2 id="" level="4">Um „Weiter zum Hauptinhalt“ zu aktivieren:</h2></div><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>Klicke im Panel auf der rechten Seite deines Editors auf <strong>Website scannen</strong>.</li>  <li>Klicke auf den Tab <strong>Probleme gefunden</strong>.</li>  <li>Öffne das Dropdown-Menü <strong>Website-Ebene</strong> und klicke auf den Link <strong>„Weiter zu den Hauptinhalten“ hinzufügen</strong>.</li>  <li>Klicke auf den Schieberegler <strong>„Weiter zum Hauptinhalt“ aktivieren</strong>.</li>  <li>Klicke auf <strong>Anwenden</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/2025/05/30/f72e7a62-0f9b-405e-8380-a6bacc71b7f6/0631eb61-6455-4b3a-8392-503423216f1f.png" alt="Screenshot, auf dem der Mauszeiger auf den Schieberegler klickt, um im Wizard die Option „Weiter zum Hauptinhalt“ zu aktivieren." /></div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Gut zu wissen:</div><div class="info-content"><div>Sobald du im Wizard die Option „Weiter zum Hauptinhalt“ aktiviert hast, kann sie nicht mehr deaktiviert werden.</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 data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-checkliste-zur-verbesserung-der-barrierefreiheit-deiner-website" target="">Checkliste für Barrierefreiheit</a>, um die Barrierefreiheit der Website weiter zu verbessern.</div></div></div></div>

Zurzeit ist es nicht möglich, eine dynamische HTML-Sitemap zu erstellen, die automatisch aktualisiert wird, wenn du neue Seiten zu deiner Website hinzufügst. Als Alternative kannst du eine Website-Sei...

Funktionsvorschlag: Eine dynamische HTML-Sitemap erstellen

Erfahre, wie du eine statische HTML-Sitemap für deine Website erstellen kannst, um alle Seiten aufzulisten und zu verlinken. Da eine automatische Aktualisierung derzeit nicht möglich ist, kannst du die Sitemap manuell aktualisieren, wenn du neue Seiten hinzufügst. Dein Feedback ist uns wichtig, da wir kontinuierlich an der Verbesserung unserer Produkte arbeiten.

<div data-component-type="text"><div>Zurzeit ist es nicht möglich, eine dynamische HTML-Sitemap zu erstellen, die automatisch aktualisiert wird, wenn du neue Seiten zu deiner Website hinzufügst. </div></div><div data-component-type="text"><div>Als Alternative kannst du <a data-composite="true" href="https://support.wix.com/de/article/wix-editor-eine-seite-zu-deiner-website-hinzufügen" target="_blank">eine Website-Seite erstellen</a>, auf der du alle Seiten deiner Website auflistest und <a data-composite="true" href="https://support.wix.com/de/article/wix-editor-einen-link-zu-einem-element-hinzufügen" target="_blank">verlinkst</a> und diese bei Bedarf aktualisierst.</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>

Erste Schritte

Template auswählen

Einen Profi von Wix engagieren

Grundlagen

Erfahre, wie du Wix für den Aufbau deiner Website und deines Unternehmens nutzen kannst

Erweiterte Funktionen für Barrierefreiheit