Barrierefreie Website-Inhalte erstellen

Tipps zum Erstellen klarer und prägnanter Inhalte für deine Website.

Zuletzt aktualisiert: 13. September 2024

Beim Erstellen von Website-Inhalten ist es wichtig, die Barrierefreiheit zu berücksichtigen. Dazu gehören die von dir verwendete Sprache, die Struktur deines Textes und die Art und Weise, wie du deine Inhalte organisierst.

Dieser Leitfaden enthält Tipps zum Erstellen von Inhalten und zum Organisieren deiner Website unter Berücksichtigung der Barrierefreiheit.

Hinweis

Diese Anleitung ist als Ressource verfügbar, um dir den Einstieg zu erleichtern, sollte aber nicht als Rechtsberatung ausgelegt oder verstanden werden. Squarespace kann keine Ratschläge dazu geben, ob deine Website mit spezifischen Gesetzen, Vorschriften oder Standards zur Barrierefreiheit konform ist.

Klare und deutliche Sprache

Gut organisierte, kurze und klare Texte sind für alle Besucher hilfreich, insbesondere für Menschen mit Beeinträchtigungen. Berücksichtige beim Verfassen von Texten für deine Website die folgenden Tipps:

  • Verwende eine klare Sprache und Formatierung.
  • Schreibe in kurzen Sätzen und Absätzen.
  • Vermeide die Verwendung von Jargon und unnötig komplexen Wörtern und Formulierungen.
  • Schreibe Akronyme bei der ersten Verwendung aus. Beispiel: Top-Level-Domain (TLD).
  • Verwende gegebenenfalls Aufzählungslisten.
  • Du kannst Bilder, Video und Audio verwenden, um den Sinn zu verdeutlichen.

Titel

Das erste, was Screenreader Besuchern einer neuen Seite kommunizieren, ist ein Titel. Wenn die Seite einen SEO-Titel hat, lesen Screenreader diesen Titel vor und überspringen den Seitentitel. Wenn eine Seite keinen SEO-Titel hat, lesen Screenreader den Seitentitel vor.

Die Bereitstellung eines kurzen, spezifischen und eindeutigen Seitentitels hilft Benutzern, die mit Hilfstechnologien navigieren, den Inhalt und Zweck einer Webseite schnell zu verstehen.

Best Practices für Titel

Beim Verfassen deiner Titel solltest du Folgendes beachten:

  • Stelle das Thema und den Zweck der Seite vor.
  • Der Titel jeder Seite sollte einzigartig sein und sie von anderen Seiten auf deiner Website unterscheiden.
  • Stelle die eindeutigen und relevantesten Informationen an die erste Stelle. Zum Beispiel „Leitfaden zur Barrierefreiheit“ anstelle von „Ein Leitfaden zum Thema Barrierefreiheit“.
  • Füge bei Seiten, die Teil eines mehrstufigen Prozesses sind, den aktuellen Schritt in den Titel ein. Zum Beispiel: „Wähle die Farbe deines Produkts (Schritt 2 von 3) – ABC-Unternehmen.“

Text

Überschriften

Screenreader verwenden HTML-Code anstelle von visuellen Elementen, um die Struktur einer Seite zu verstehen. Wenn Besucher einen Screenreader verwenden, können sie sich besser auf Seiten zurechtfinden, wenn jeder Abschnitt der Seite eine Überschrift hat. Zudem verwenden Suchmaschinen Überschriften, um deine Inhalte besser zu verstehen. Somit ist dies auch eine großartige Möglichkeit, die SEO für deine Website zu fördern.

Do
  • Verwende Überschriften basierend auf der Wichtigkeit des Textes. Verwende z. B. Überschrift 1 (h1) für die wichtigsten Überschriften.
  • Erstelle einen Titel/eine Überschrift 1 pro Seite.
  • Verwende kurze Überschriften, um verwandte Absätze zu gruppieren und die Abschnitte klar zu beschreiben.
  • Verwende die Text-Werkzeugleiste, um einen Text als Überschrift zu formatieren.
Don’t
  • Verwende Überschriften nicht außerhalb der Reihenfolge. Die Optionen für Überschriften reichen von H1 bis H6 und Screenreader lesen sie der Reihe nach vor.
  • Verlass dich nicht auf in Bilder eingebetteten Text, um die Bedeutung zu übermitteln, es sei denn, du fügst auch Alternativtext hinzu.
  • Verlasse dich nicht auf Fettdruck, Kursivschrift oder andere Designformatierungen, um eine Struktur zu erstellen.
  • Verwendung von Überschriften ohne zugehörigen Inhalt nur zum Gestalten von Text. Dadurch wird die Struktur der Seite unübersichtlich und schwerer verständlich. 
  • Textgestaltung, die wie eine Überschrift aussieht, ohne als solche gedacht zu sein. Das kann Besucher verwirren und Benutzer von Hilfstechnologien daran hindern, schnell auf deiner Website zu navigieren. 

Weitere Informationen über die Seitenstruktur und Überschriften erfährst du unter Web Accessibility Initiative.

Beschreibe den Zweck jedes Links im Link-Text klar, damit Besucher mit Screenreadern zwischen Links wechseln können, ohne den Kontext zu verlieren. Die richtige Formatierung von Links trägt auch zur Verbesserung der SEO bei. Du musst den Begriff „Link“ nicht in den Text des Links einfügen. Die meisten Screenreader lesen „Link“ vor jedem Link vor.

Zum Beispiel:

Do „Um Kontakt aufzunehmen, besuche unsere Kontakt-Seite.“
Don’t „Um mit uns in Kontakt zu treten, klicke hier.“

Listen

Organisiere das Layout deines Textes mithilfe von Listen und Überschriften. Listen helfen dabei, anzuzeigen, wann Inhalte miteinander in Beziehung stehen, z. B. eine Gruppe von Links oder eine Reihe von Beispielen. Wenn du deinen Text als Liste formatierst, hat das folgende Auswirkungen:

  • Macht es leichter durch deine Inhalte zu navigieren.
  • Hilft Besuchern mit kognitiven Behinderungen, deine Inhalte zu verstehen.
Do
  • Verwendet nummerierte Listen, wenn die Reihenfolge der Inhalte wichtig ist.
Don’t
  • Verwendet Listen für Inhalte, die keine Listen sind (z. B. eine Datentabelle oder nur zu Gestaltungszwecken).

Abstände

Stelle sicher, dass dein Text einen angemessenen Zeilenabstand aufweist. Auf diese Weise können Besucher deinen Zeilenabstand nach ihren Bedürfnissen anpassen und somit ihr Leseerlebnis verbessern. Du kannst den Zeichenabstand und die Zeilenhöhe unter Website-Stil festlegen.

Farben

Du kannst die Farben deiner Website mithilfe von Website-Stilen anpassen. Vermeide es jedoch, dich ausschließlich auf Farben zu verlassen, um deinen Besuchern Informationen zu übermitteln. Farbunterschiede können von Personen mit Seh- oder Farbschwächen nicht wahrgenommen werden. Außerdem vermittelt Farbe allein blinden Besuchern, die einen Screenreader verwenden, keine Informationen.

Du kannst die Entwicklertools von Google Chrome oder den Barrierefreiheitsinspektor von Firefox verwenden, um zu simulieren, wie Personen mit häufigen Farbsehstörungen deine Seiten wahrnehmen.

Hinweis

Es handelt sich hierbei um Tools von Drittanbietern, die nicht in den Rahmen des Squarespace-Supports fallen.

Do Farben mit hohem Kontrast gruppieren.
Don’t Farben kombinieren, die schwer zu unterscheiden sind, wie Blau und Lila.

Formulare

Formulare können für einige Besucher eine Herausforderung sein. Es ist wichtig, dass jedes Feld eindeutig beschriftet ist und dass das Formular einfach zu navigieren ist. Verwende einen Text-Block, um kurze Anweisungen einzufügen, die Besucher genau darüber informieren, was sie wissen müssen, um das Formular ordnungsgemäß auszufüllen.

Du kannst Platzhalter mit Text einfügen, der in den Formularfeldern als Beispiel für Besucher angezeigt wird. Auf diese Weise haben Besucher eine bessere Vorstellung davon, wie sie das Formular ausfüllen sollten. Beachte, dass Platzhalter-Text den Label-Text nicht ersetzen sollte. Weitere Informationen zu Platzhalter-Text findest du in unserem Forum.

Hinweis

Kundenspezifische codebasierte Anpassungen fallen nicht in den Bereich unserer Kundenbetreuung. Das bedeutet, dass wir bei der Einrichtung oder Fehlerbehebung keine weitere Unterstützung bieten können. Des Weiteren können wir bei einer codebasierten Lösung die Funktionalität oder vollständige Kompatibilität mit Squarespace nicht garantieren. Dies bezieht sich z. B. auf die Funktionalität in Verbindung mit Responsive Design, insbesondere, was die Darstellung auf Mobilgeräten betrifft, und ob es mit allen Templates kompatibel ist. Zudem kann ein benutzerdefinierter Code nach zukünftigen Updates auf unserer Plattform zu Anzeigeproblemen führen. Wir können dir in diesem Fall nicht weiterhelfen, allerdings stehen dir viele andere Informationsquellen zur Verfügung, die dich dabei unterstützen können:

Footer Image
  • Hol dir Hilfe von der Community

  • Hol dir Hilfe von unserer Community zu erweiterten individuellen Anpassungen.

  • Beauftrage einen Squarespace-Experten

  • Hebe dich online von der Masse ab, indem du dir von einem erfahrenen Webdesigner oder Entwickler helfen lässt.

Barrierefreie Website-Inhalte erstellen