Je nachdem, welchen Website-Baukasten du verwendest, siehst du möglicherweise eine Einstellung, die als Fokusindikatoren (Studio Editor) oder Visuelle Indikatoren (Wix Editor) bezeichnet wird. Dies si...

Barrierefreiheit: Über Fokusindikatoren (visuelle Indikatoren)

<div data-component-type="text"><div>Je nachdem, welchen Website-Baukasten du verwendest, siehst du möglicherweise eine Einstellung, die als <strong>Fokusindikatoren</strong> (Studio Editor) oder <strong>Visuelle Indikatoren</strong> (Wix Editor) bezeichnet wird. Dies sind blaue Rahmen, die um interaktiven Elementen wie Buttons und Links erscheinen, wenn Besucher die Tastatur für die Navigation auf der Website 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. Visuelle und Fokusindikatoren zeigen die aktuelle Position der Tab-Taste an, damit diese Besucher genau wissen, wo sie sich auf der Seite befinden.</div></div><div data-component-type="text"><div>Wenn Indikatoren nicht aktiviert sind, können diese Website-Besucher möglicherweise nicht auf der Seite oder im Website-Inhalt navigieren. Deshalb sind sie ein wichtiger Bestandteil der Barrierefreiheit der 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>Visuelle und Fokusindikatoren sind automatisch auf allen Websites aktiviert, die du mit Wix erstellst.</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 sie 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 meiner Website testen?</div><div class="info-content"><div>Um zu überprüfen, wie der Fokusanzeige aussieht, öffne deine Live-Website oder Website-Vorschau und navigiere mit der Tab-Taste deiner Tastatur auf der Seite. Wenn der Fokusindikator nicht in der Vorschau oder Live-Version deiner Website angezeigt wird, kannst du die Einstellungen im Wizard für Barrierefreiheit ändern.</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>Wenn du den Wix Editor verwendest, musst du die Fokusindikatoren möglicherweise im Wizard für Barrierefreiheit aktivieren.</div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Verwendest du den Studio Editor?</div><div class="info-content"><div>Fokusindikatoren sind auf Studio-Editor-Websites 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 oben im Panel des Wizard für Barrierefreiheit auf das Symbol für <strong>Weitere Aktionen</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/11/25/a94380b6-9e23-427e-b15a-655b543c14d1/b4a0776b-b9da-43ec-89ba-59cba9a49e4f.png" />.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2024/11/25/9dc097fe-2e9f-4938-a82c-2b9ec66fc828/495d872f-f036-4052-8c6b-125968669125.jpg" alt="Die erweiterten Einstellungen des Wizards. Der Cursor hat den Schalter angeklickt, um visuelle Indikatoren 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

<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

<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

<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

<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

<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="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-videos-und-animationen-werden-nicht-auf-der-live-website-abgespielt#reduced-motion" target="">Reduzierte Bewegung auf Geräten</a></li>  <li><a data-composite="true" href="https://support.wix.com/de/article/barrierefreiheit-videos-und-animationen-werden-nicht-auf-der-live-website-abgespielt#performance-options" target="">Performance-Optionen in Windows</a></li></ul></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/d64c0377-8ade-4c01-a588-356eb4091011/2022/07/25/0d97d83c-0e95-489c-870e-21c4fa928aec/efe14468-52c1-4be4-982e-8c9d19500039.png" /></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 Ihrer Live-Site abspielen können, sollten sie die Option <strong>Für optimale Darstellung anpassen</strong> wählen.</div></div></div></div>

„Weiter zu den 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 w...

Barrierefreiheit: Über „Weiter zu den Hauptinhalten“

<div data-component-type="text"><div>„Weiter zu den 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 zu den 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 zu den Hauptinhalten“ bietet Besuchern direkten Zugriff auf den Hauptinhalt der Seite, ohne dass Besucher sich wiederholende Inhalte (z. B. Website-Titel, Menü usw.) durchgehen 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 zu den 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="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="testing-skip-to-main-content" level="3">„Weiter zu den Hauptinhalten“ testen</h2></div><div data-component-type="text"><div>Du kannst jederzeit überprüfen, wie der Link aussieht. Öffne einfach die Live-Website (oder Website-Vorschau) und navigiere auf der Seite mit der Tab-Taste deiner Tastatur, um ihn zu sehen.</div></div><div data-component-type="text"><div>Wenn du feststellst, dass der Link nicht in der Vorschau- oder Live-Version deiner mit dem Wix Editor erstellten Website angezeigt wird, kannst du die Einstellungen im Wizard für Barrierefreiheit überprüfen und ändern.</div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Du erstellst eine Website mit dem Studio Editor?</div><div class="info-content"><div>Es ist nicht möglich, die Option „Weiter zu den Hauptinhalten“ auf Studio-Editor-Websites zu deaktivieren, daher musst du diese Einstellung nicht überprüfen.</div></div></div></div><div data-component-type="heading"><h2 id="" level="4">Um die Einstellungen zu überprüfen:</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 oben im Panel des Wizard für Barrierefreiheit auf das Symbol für <strong>Weitere Aktionen</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/11/25/a94380b6-9e23-427e-b15a-655b543c14d1/b4a0776b-b9da-43ec-89ba-59cba9a49e4f.png" />.</li>  <li>Wähle <strong>Erweiterte Einstellungen</strong>.</li>  <li>Klicke auf <strong>Weiter zu den Hauptinhalten</strong>.</li>  <li>Klicke auf den Schalter, um ihn zu aktivieren oder zu deaktivieren:
    <ul>
      <li><strong>Aktiviert:</strong> Besucher sehen auf deiner Live-Website die Option „Weiter zu den Hauptinhalten“. Es ist der erste Link, den Besucher bei der Verwendung der Tastaturnavigation sehen.</li>      <li><strong>Deaktiviert:</strong> Die Option „Weiter zu den Hauptinhalten“ wird auf deiner Live-Website nicht angezeigt.</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/06/5ac3a5d2-91a5-48ef-8286-09839baecca5/114bfdaa-5c69-45eb-8cd9-4836143fe4ae.jpg" alt="Die erweiterten Einstellungen im Wizard für Barrierefreiheit. Der Cursor hat die Option „Weiter zu den Hauptinhalten“ 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 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

<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