Hinweis: Während unsere beliebtesten Anleitungen ins Deutsche übersetzt wurden, sind einige Anleitungen nur auf Englisch verfügbar.

Ihre Squarespace-Website barrierefrei machen

Barrierefreie Websites sind für Menschen mit Behinderungen einfacher zu bedienen, wenn sie Screenreader und andere Hilfstechnologien verwenden. Du kannst viele Aspekte deiner Website anpassen, um die Navigation zu erleichtern.

Use this guide to learn best practices for designing and structuring your content. 

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.

Seitentitel

Das erste, was Screenreader kommunizieren, wenn Benutzer eine neue Seite besuchen, ist der Seitentitel. Da Seitentitel für die Orientierung wichtig sind, solltest du sicherstellen, dass jede Seite einen Titel hat, der das Thema oder den Zweck der Seite beschreibt und sie von anderen Seiten auf deiner Website klar unterscheidet.

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 einfacher auf Seiten navigieren, wenn jeder Abschnitt der Seite eine Überschrift hat. Verwende die Text-Werkzeugleiste, um einen Text als Überschrift zu formatieren.

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

Do
  • Verwende Überschriften basierend auf der Wichtigkeit des Textes. Verwende z. B. Überschrift 1 (h1) für die wichtigsten Überschriften. 
Don't
  • Sich auf in Bilder eingebetteten Text verlassen, um die Bedeutung zu übermitteln, es sei denn, du fügst auch Alternativtext hinzu.
  • Rely on bolding, italics, or other design formatting to create structure.

Links

Stelle sicher, dass deine Besucher den Zweck jedes Links ausschließlich aus dem Text des Links finden können. Diese Formatierung kommt Benutzern des Screenreaders zugute, die zwischen Links springen möchten, 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 “To reach out, visit our contact page.”
Don't

„Um mit uns in Kontakt zu treten, klicke hier.

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.

Bilder

Das Internet ist ein visuelles Medium, bei dem Bilder eine wichtige Rolle bei der Präsentation deiner Website spielen können. Vergewissere dich, dass deine Bilder für deine Besucher unabhängig von ihren Fähigkeiten zugänglich sind. Elemente wie Alternativtext und wie du animierte Bilder oder GIFs formatierst, sind wichtige Faktoren.

Alternativtext

Beim Scannen einer Seite identifizieren Screenreader Bilder und lesen den Besuchern den beschreibenden Text (Alternativtext) vor. Nimm dir beim Hinzufügen von Alternativtext einen Moment Zeit, um zu überlegen, warum du das Bild überhaupt verwendet hast. Soll es zum Beispiel Informationen vermitteln oder ist es ein dekoratives Element? Was müssen Besucher mit Sehbeeinträchtigungen über das Bild wissen, um auf alle Informationen zugreifen zu können, die sehenden Besuchern zur Verfügung stehen?

Eine bewährte Methode ist, das Bild in wenigen Worten zu beschreiben, so wie du es einem Freund am Telefon beschreiben würdest. Rein dekorative Bilder wie Grafiken, die Inhalte trennen, oder abstrakte Hintergrundbilder brauchen keine Beschreibungen.

Do
  • Berücksichtige den Zweck des Bildes und versuche, diese Bedeutung in 125 Zeichen oder weniger zu vermitteln.
  • Wenn das Bild eine Klick-URL oder eine andere funktionale Verwendung hat, beschreibe die Funktion. Beispielsweise könnte der Alternativtext für ein Bild eines verlobten und lachenden Paares, das auf eine Seite mit Verlobungsfotos verweist, die Beschreibung Ein lachendes, verlobtes Paar. Verweist auf Verlobungsfotos haben.
  • Für Bilder wie Diagramme, Grafiken oder komplexe Grafiken, die eine detaillierte Beschreibung benötigen, kannst du eine Beschreibung des Bildes in der Nähe vom Text auf deiner Website einfügen. Alternativ kannst du eine separate Seite mit einer Beschreibung des Bildes hinzufügen und dann eine Klick-URL vom Bild zu dieser Seite hinzufügen.
Don't
  • Begriffe wie „ein Bild von“ oder „ein Foto von“ in deinen Alternativtext einfügen. Hilfstechnologien identifizieren diese automatisch als Bilder.

Animierte .gif-Dateien

Du kannst animierte Bilder oder GIFs zu den meisten Bereichen deiner Website hinzufügen. Stelle sicher, dass deine animierten GIFs innerhalb einer Sekunde nicht dreimal oder öfter flackern. Diese Art von Inhalten können Anfälle oder andere körperliche Reaktionen hervorrufen.

Farben

Vermeide es, 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, und Farbe allein vermittelt blinden Besuchern, die einen Screenreader verwenden, keine Informationen. Um die Farben deiner Website zu ändern, verwende Website-Stil.

Du kannst die Entwickler-Tools von Google Chrome oder den Barrierefreiheitsinspektor von Firefox verwenden, um zu simulieren, wie deine Seiten für Personen mit häufigen Farbsehstörungen aussieht. Beachte, dass es sich um Tools von Drittanbietern handelt, die nicht in den Rahmen des Squarespace-Supports fallen.

Do
  • Group colors with high contrast.
Don't
  • Farben kombinieren, die schwer zu unterscheiden sind, wie Blau und Lila.

Videos

Beachte beim Hinzufügen von Videos zu deiner Website diese Tipps:

  • Füge synchronisierte Untertitel mit den integrierten Untertitelfunktionen für YouTube und Vimeo hinzu. Auf diese Weise können Zuschauer Untertitel im Video-Block aktivieren oder deaktivieren. Besuche YouTube und Vimeo für weitere Informationen zum Hinzufügen von Untertiteln.
  • Füge nicht mehr als zwei Hintergrundvideos pro Seite hinzu. Zu viel Bewegung kann für Menschen, die empfindlich darauf reagieren, zu einem unerwünschten Erlebnis führen.
  • Vermeide Inhalte in deinem Video, die innerhalb einer Sekunde dreimal oder öfter flackern.

Audio

Du kannst Besuchern mit Hörbeeinträchtigungen beim Zugriff auf deine Audioinhalte wie Podcasts helfen, indem du ein Transkript hinzufügst. Um eine gute Struktur deiner Seiten zu gewährleisten, kannst du Transkripte auf „Nicht verlinkt“-Seiten einfügen.

FAQ

Is my site accessible?

Die Anforderungen an die Barrierefreiheit sind weltweit unterschiedlich. Du bist dafür verantwortlich, sicherzustellen, dass deine Website den geltenden Gesetzen, einschließlich lokaler Barrierefreiheitsanforderungen, entspricht. Um dir ein Verständnis für die Barrierefreiheit deiner Website zu verschaffen und Verbesserungsbedarf zu identifizieren, kannst du einen Barrierefreiheitsexperten konsultieren. Du kannst auch diese vorläufige Checkliste für Web-Barrierefreiheit durchgehen. Der Squarespace-Kundensupport kann dir nicht dabei helfen, dafür zu sorgen, dass deine Website bestimmte Gesetze, Vorschriften oder Normen für Barrierefreiheit einhält.

Is Squarespace working to improve accessibility?

Ja. Squarespace nimmt Barrierefreiheit ernst. Wir arbeiten ständig daran, uns zu verbessern, und dies geschieht auch laufend. Wir sind bestrebt, unsere Dienste für Benutzer aller Fähigkeiten zugänglicher zu machen. Wir sind gerade dabei, unsere Dienste zu überprüfen, um die Benutzererfahrung zu verbessern und es unseren Kunden zu erleichtern, ihre Websites zugänglich zu machen.

Kann ich die Fokus-Kontur anpassen?

Squarespace-Websites verfügen über eine integrierte Fokus-Kontur, die Elemente auf einer Seite wie Navigationslinks und Formularfelder hervorhebt. Die Kontur erscheint, wenn Website-Besucher die Tabulatortaste auf ihrer Tastatur drücken. Wenn du das erste Mal die Tabulatortaste drückst, wird die Meldung Zum Inhalt springen angezeigt. Drücke die Leertaste, um den Website-Header und die Navigation zu überspringen und direkt zum Inhalt der Website zu gelangen, oder drücke weiter die Tabulatortaste, um zu anderen Inhalten zu navigieren. Diese Fokus-Kontur ist Standard für alle Websites und Seiten. Es ist nicht möglich, die Farbe oder Stärke der Linie anzupassen.

Header der Seitennavigation mit einer Kontur um eines der Menü-Elemente

War dieser Beitrag hilfreich?
212 von 265 fanden dies hilfreich
Ihre Squarespace-Website barrierefrei machen