Anleitungen/Website bearbeiten/Website-Einstellungen/Die Barrierefreiheit deiner Website verbessern

Die Barrierefreiheit deiner Website verbessern

Eine barrierefreie Website ist so gestaltet, dass sie von möglichst vielen Benutzern verwendet werden kann, darunter auch Menschen mit Behinderungen, die bei der Navigation im Internet auf unterstützende Technologien angewiesen sind. In diesem Ratgeber erfährst du, wie du deine Website barrierefrei gestaltest.

Webinar: Erstelle eine barrierefreie Website

Dieses Video ist auf Englisch.
YouTube bietet automatische Übersetzungsfunktionen, damit du es in deiner Sprache ansehen kannst:

Automatisch übersetzte Untertitel:

  1. Spiele das Video ab.
  2. Klicke auf ⚙️ Einstellungen (unten rechts im Video).
  3. Wähle Untertitel/CC.
  4. Wähle Automatisch übersetzen.
  5. Wähle deine bevorzugte Sprache.

Automatische Synchronisation (experimentell):

  1. Klicke auf ⚙️ Einstellungen.
  2. Wähle Audiospur.
  3. Wähle die Sprache, in der du das Video hören möchtest.

ℹ️ Übersetzungen und Synchronisationen werden von Google erstellt, können ungenau sein und sind möglicherweise noch nicht für alle Sprachen verfügbar.

Die Barrierefreiheit deiner Website verbessern

Wenn du deine Website erstellst, kannst du einige Maßnahmen ergreifen, um sicherzustellen, dass deine Inhalte barrierefrei sind.

Alt-Text auf Bildern verwenden

Nicht alle Besucher deiner Website können deine Bilder sehen. Einige Menschen mit Sehbehinderungen verwenden sogenannte Screenreader, um im Internet zu navigieren.

Um Menschen mit Sehbehinderungen zu helfen, füge einen alternativen Text hinzu (allgemein als Alt-Text bezeichnet), der beschreibt, was im Bild zu sehen ist.

Im WordPress-Editor kannst du in den Einstellungen des Bild-Blocks, des Galerie-Blocks, des Cover-Blocksund des Medien- und Text-Blocks Alt-Texte hinzufügen.

Suchmaschinen-Crawler lesen den Alt-Text auch, um den Inhalt eines Bildes zu erkennen, sodass Alt-Text den zusätzlichen Vorteil hat, die SEO zu verbessern.

Die Einstellung für alternativen Text im Bildblock.

Beschreibende Bildunterschriften verfassen

Wenn du ein Bild einfügst, solltest du eine Bildunterschrift hinzufügen, um das Leseerlebnis für alle zu verbessern, insbesondere für Leser, die das Bild nicht sehen können.

Mit Bildunterschriften kannst du kreativ sein. Der Alt-Text sollte sachlicher sein, aber Bildunterschriften können helfen, das Gefühl des Bildes zu vermitteln.

Probiere zum Beispiel statt „Mein Sohn auf seiner Schaukel“ „Mein Sohn spielt auf seiner Lieblingsschaukel. Sein Gesicht versprüht Freude an einem schönen Frühlingstag. Perfektion.“

Wenn du Links in deinen Text einfügst, sollte der Linktext beschreibend sein. Zum Beispiel ist „Hier klicken“ nicht so aufschlussreich wie „Kontaktiere mich“.

Geeignete Überschriften verwenden

Verwende Überschriften großzügig auf deinen Seiten und in deinen Beiträgen, damit deine Leser deinen Inhalten leichter folgen können (insbesondere auf langen Inhaltsseiten).

Wenn du Überschriften verwendest, wirst du feststellen, dass jede Überschrift eine Ebene von 1 bis 6 hat. Wenn du eine falsche Überschriftengröße einfügst, wird das in der Seitengliederung angezeigt, damit du sie korrigieren kannst. Um die Seitengliederung anzuzeigen, öffne die Listenansicht und wähle den Tab „Gliederung“ aus:

Bild des Gliederungs-Tools, auf dem falsche Überschriftengrößen hervorgehoben werden.
Die Gliederung hebt falsche Überschriftengrößen hervor. In diesem Beispiel wäre H2 am besten geeignet.

Schriften und Farben mit Bedacht auswählen

Vermeide Schriftstile und -größen, die das Lesen deiner Website erschweren. Achte außerdem auf Kontrastfarben, also den Unterschied zwischen der Dunkelheit deines Textes und der Helligkeit deines Hintergrunds.

Die Farbeinstellungen zeigen eine Warnmeldung an, wenn schlechte Farbkontrastoptionen erkannt werden:

Die Farbeinstellungen zeigen zwei ähnliche Blautöne an, die für Text und Hintergrund ausgewählt wurden, sowie die entsprechende Kontrastwarnung.
Der Editor zeigt eine Warnung an, wenn du Farben mit schlechtem Kontrast auswählst

Transkripte zu Multimedia-Inhalten hinzufügen

Wenn deine Website Video– oder Audioinhalte enthält, kannst du Untertitel oder Transkripte hinzufügen (die Audio, Geräusche und Aktionen dokumentieren, die auf dem Bildschirm zu sehen sind).

Am besten ist es, wenn Video- und Audioinhalte nicht automatisch abgespielt werden, aber wenn das nicht möglich ist, sollten Optionen zum Pausieren oder Anpassen der Lautstärke auf der Seite deutlich sichtbar sein.

Barrierefreie Themes

WordPress.com möchte sicherstellen, dass alle unsere Themes barrierefrei sind. Einige Themes können jedoch zusätzliche Funktionen enthalten, die die Komplexität der Website erhöhen und bestimmte Aspekte der Barrierefreiheit beeinträchtigen können.

Wenn dies besonders wichtig ist, findest du hier Themes, die wir getestet haben, um die Barrierefreiheit sicherzustellen: Für Barrierefreiheit geeignete Themes. Wenn du dir unsicher bist, welches Theme für eine barrierefreie Website verwendet werden soll, sind die Themes hier eine sichere Wahl.

Richtlinien für Barrierefreiheit

Wir bei WordPress.com bemühen uns um größtmögliche Inklusivität und Barrierefreiheit. Wir folgen Webdesign-Standards und Best Practices, wenn wir neue Funktionen und Themes erstellen. Wir suchen ständig nach neuen Wegen, um mit der Weiterentwicklung von Webtechnologien auf spezifische Probleme einzugehen.

Auch wenn wir bestrebt sind, WordPress.com möglichst barrierefrei zu machen, liegt die Einhaltung bestimmter Vorschriften wie ADA und Section 508 letztlich in den Händen des Website-Betreibers. Wir bieten eine barrierefreie Plattform, aber die Barrierefreiheit einer Website hängt von den Website-Betreibern und davon ab, ob sie die Tipps zur Barrierefreiheit auf dieser Seite kennen.

Du kannst bestimmte Themes mit einem Tool wie dem WAVE Web Accessibility-Toolauf Konformität mit diesen Richtlinien testen. Für Websites, die eine 100%ige Konformität erfordern, empfehlen wir, das Theme deiner Wahl mithilfe der Demoseite für das Theme zu testen, z. B. Twenty Twenty-Four oder Twenty Twenty-Five.

Copied to clipboard!