Lade dir unser kostenloses Handbuch herunter, das dir bei der Gestaltung deiner Website helfen wird.
Die eingegebene E-Mail-Adresse ist ungültig.
Vielen Dank für deine Anmeldung.
Mit der Angabe deiner E-Mail bestätigst du, dass du unsere Datenschutzerklärung gelesen und verstanden hast und einverstanden bist, Marketing-E-Mails von Squarespace zu erhalten.
Eine barrierefreie Website sorgt dafür, dass jede Person, die deine Website besucht, auf alle Informationen zugreifen kann, die du mit ihnen teilen möchtest. Barrierefreiheit sollte von allen, die eine Website erstellen, berücksichtigt werden –nicht nur von großen Unternehmen. Maßnahmen, die die Barrierefreiheit verbessern, können sich auch positiv auf deine Suchmaschinenoptimierung (SEO) auswirken, was wiederum dazu führen kann, dass deine Website in den Suchergebnissen einen höheren Rang einnimmt und ein größeres Publikum erreicht.
Bewährte Methoden zur Barrierefreiheit entwickeln sich ständig weiter. Gesetze, Bestimmungen und Standards hinsichtlich einer Barrierefreiheit können je nach Standort variieren. Eine Website, die beispielsweise dem Americans with Disabilities Act (ADA) entspricht, erfüllt möglicherweise nicht die Standards zur Barrierefreiheit eines anderen Landes.
Du musst jedoch kein:e Expert:in sein oder wissen, wie man programmiert, um die Barrierefreiheit deiner Website zu verbessern. Hier sind fünf einfache Dinge, die du tun kannst, um die Betrachtung deines Webdesigns und deiner Inhalte für alle zu erleichtern.
Hinweis: Diese Anleitung ist als Ressource gedacht, um dir den Einstieg zu erleichtern, sollte aber nicht als Rechtsberatung ausgelegt oder verstanden werden. Squarespace kann dich nicht dabei beraten, wie du dafür sorgen kannst, dass deine Website bestimmten Gesetzen, Bestimmungen oder Standards zur Barrierefreiheit entspricht.
1. Wähle dein Farbschema mit Bedacht
Die Farbe ist ein wichtiger Teil der visuellen Identität einer Marke. Wenn du jedoch mit allen Besucher:innen deiner Website klar und deutlich kommunizieren möchtest, empfiehlt es sich, nicht nur Farben zu verwenden, um deine Botschaft zu vermitteln.
Bevor du dich für eine Farbe auf deiner Website entscheidest, solltest du Folgendes überlegen:
Nutze ich Farben, um Informationen zu vermitteln? Wenn du ein Wort farblich hervorheben möchtest, wird das Besucher:innen, die eine Seh- oder Farbschwäche haben, möglicherweise entgehen. Und unterstützende Technologien können deine Botschaft nicht allein anhand von Farben vermitteln. Wenn du Farben verwendest, um etwas zu kommunizieren (z. B. Rot für „Warnung“), solltest du darauf achten, dass deine Absicht auch im Text oder in Bildern mit Alternativtext zum Ausdruck kommt, was von assistiven Technologien erkannt werden kann.
Gibt es genug Kontrast zwischen dem Text und dem Hintergrund? Ähnliche Farben (wie Rot und Orange) sind schwer voneinander zu unterscheiden und können es Personen mit Seh- oder Farbschwächen unmöglich machen, deine Inhalte zu sehen. Um ein barrierefreies Erlebnis zu bieten, solltest du auf kontrastierende Farben für dein Website-Design setzen, wie z. B. Schwarz auf einem cremefarbenen Hintergrund.
2. Füge Alternativtext zu Bildern hinzu
Alternativtext ist eine Bildbeschreibung, die von Hilfstechnologien erkannt werden kann. Alternativtext ist nicht nur für Menschen mit Sehbehinderungen praktisch, sondern auch für:
Menschen mit kognitiven Behinderungen, die die gesprochene Sprache besser verstehen als Bildsprache
Personen, die Sprachassistenten verwenden (wenn sie sich nicht die Webseite ansehen)
User, denen aufgrund einer schlechten Internetverbindung möglicherweise kein Bild angezeigt wird
User, die Bilder aus Zeit- oder Kostengründen nicht herunterladen möchten
Das Hinzufügen von Alternativtext zu deinen Bildern stellt sicher, dass alle Besucher:innen die wichtigsten Informationen deiner Website abrufen können.
Um zu wissen, wann du Alternativtext hinzufügen und hilfreiche Beschreibungen verfassen solltest, kannst du dich fragen:
Ist dieses Bild dekorativ oder vermittelt es Informationen? Dekorative Bilder benötigen keinen Alternativtext, da sie nicht dazu dienen, die Informationen auf der Seite besser zu verstehen.
Was muss jemand über das Bild wissen? Nicht jede Information eines Bildes ist notwendig, um jemandem zu helfen, seinen Zweck zu verstehen. Beispielsweise ist die Hintergrundfarbe eines Porträts nicht wichtig, der Name der Person auf dem Foto aber wahrscheinlich schon.
Weitere Leitlinien, die es zu beachten gilt:
Versuche, den Alternativtext auf maximal 250 Zeichen zu beschränken. Wenn für ein Bild eine längere und detailliertere Beschreibung erforderlich ist, solltest du eine Beschriftung für die vollständige Beschreibung hinzufügen.
Gib in deiner Beschreibung nicht „ein Bild von“ oder „ein Foto von“ an. Unterstützende Technologien identifizieren Bilder für Benutzer:innen, sodass du dies nicht tun musst.
Hol dir mehr Tipps für das Schreiben hilfreicher Alternativtexte
3. Beschrifte deine Videos und beschränke die automatische Wiedergabe
So wie Alternativtext wichtigen Kontext für Standbilder und GIFs liefert, tun Bildbeschriftungen und Transkripte dasselbe für Video- und Audioinhalte. Du kannst eine Drittanbieter-Videoplattform nutzen, um Beschriftungen zu Videos hinzuzufügen, und dann dein Video in einen Squarespace-Video-Block oder eine Videosammlung auf deiner Website hochladen.
Mit Transkripten können Besucher:innen alle Informationen eines Videos abrufen, auch wenn sie es sich nicht ansehen oder anhören können. Du kannst deiner Website ein Transkript über eine downloadfähige Datei entweder als Textblock auf der Seite oder auf einer separaten Seite hinzufügen, auf die du unter dem Videoplayer verlinkst.
Zu viele bewegte Bilder (z. B. Zoomen, Blinken oder schnelle Wechsel) auf einer Seite können sich negativ auf Menschen auswirken, die empfindlich auf Bewegungen oder blinkende Lichter reagieren. Zum Schutz dieser User:innen kannst du Folgendes tun:
Füge nach Möglichkeit eine Option zum Pausieren von Videos hinzu.
Deaktiviere die automatische Wiedergabe auf deiner Website.
Vermeide das Hinzufügen von Hintergrundvideos auf einer Seite.
Vermeide GIFs und Videos, die drei Mal oder öfter in einem Zeitraum von einer Sekunde blinken oder aufblitzen.
4. Sorge für klare Inhalte
Die Art und Weise, wie du Inhalte auf deiner Website organisierst, erleichtert User:innen, die assistive Technologien nutzen, die Navigation. Für die meisten Websites bedeutet dies, dass du deine Seitenlayouts einfach und einheitlich gestaltest und jeder Seite auf deiner Website klare und eindeutige Namen gibst.
Wenn du einen beliebigen Text mit einem Hyperlink versiehst, solltest du deine Links mit entsprechenden Bezeichnungen versehen. Hilfstechnologien weisen im Allgemeinen darauf hin, wenn Text verlinkt ist, sodass du das Wort „Link“ nicht in deinen Inhalt aufnehmen musst. Wenn du User:innen beispielsweise auf eine Kontaktseite weiterleitest, ist es hilfreicher, „Kontaktieren Sie uns auf unserer Kontaktseite“ zu schreiben, als „Um uns zu kontaktieren, klicken Sie auf den folgenden Link“.
Wie du deine Inhalte strukturierst, ist für jede Seite deiner Website wichtig, einschließlich der Blog-Seiten. Gib deinen Seiten eine leicht verständliche Struktur, indem du Überschriften (z. B. H1, H2, H3) verwendest, anstatt dich auf fett oder kursiv gedruckten Text zu verlassen, um verschiedene Abschnitte deiner Seite voneinander zu trennen. Verwende nur ein H1 pro Seite, da ein H1 den Titel oder die Überschrift kennzeichnet, und verwende die Überschriftenebenen entsprechend ihrer Reihenfolge, anstatt direkt von einem H2 zu einem H4 überzugehen.
5. Arbeite mit Designer:innen, die Barrierefreiheit verstehen
Wenn du dich für die Zusammenarbeit mit Webdesigner:innen entscheidest, solltest du erfragen, ob sie mit den Standards für die Barrierefreiheit von Websites vertraut sind. Designer:innen mit Erfahrungen in diesem Bereich können dir Zeit sparen und möglicherweise Verbesserungen der Barrierefreiheit vornehmen, die du selbst nicht umsetzen konntest.
Im Zweifelsfall kannst du dir auch Hilfe oder Beratung von Barrierefreiheits-Expert:innen holen. Von Expert:innen geführte Beratungsunternehmen können die Barrierefreiheit deiner Website testen, Schulungen anbieten oder Änderungen an deiner Website vorschlagen.
Um deine Website zugänglicher zu machen, benötigst du keine Programmierkenntnisse oder externe Tools. Du kannst die oben genannten Schritte mit den Tools ausführen, die dir bei Squarespace bereits zur Verfügung stehen. Bitte beachte, dass du dafür verantwortlich bist, dafür zu sorgen, dass deine Website den geltenden Gesetzen entspricht, einschließlich den lokalen Anforderungen an die Barrierefreiheit. Updates dieser Art werden wesentlich dazu beitragen, ein inklusiveres und informativeres Erlebnis für jede Person zu schaffen, die deine Website besucht.
Sieh dir unseren vollständigen Leitfaden zur Barrierefreiheit im Internet an