Verbessere die Benutzerfreundlichkeit deiner Website für Menschen mit Beeinträchtigungen.

Du kannst viele Bereiche deiner Website anpassen, um sie für alle Besucher zugänglicher und einfacher zu gestalten, einschließlich Besuchern mit Behinderungen, die Screenreader und andere Hilfstechnologien verwenden.

Verwende diese Anleitung, um dich mit den Best Practices für die Gestaltung und Strukturierung deiner Inhalte vertraut zu machen.

Weitere nützliche Infos: Deine Website mit integrierten Funktionen barrierefrei gestalten

Hinweis: Diese Anleitung ist eine Ressource und stellt keine Rechtsberatung dar. Wie in unseren Nutzungsbedingungen angegeben berät dich Squarespace nicht zu bestimmten Gesetzen oder Standards zur Barrierefreiheit, die für deine Website oder dein Unternehmen gelten.

Layout

Die Erstellung deiner Website mit einem klaren Layout und Design ist für Menschen mit Sehbehinderungen oder kognitiven Behinderungen hilfreich. Ein einfaches und einheitliches Layout kann jedoch auch für Besucher hilfreich sein, die sich mit Computern nicht auskennen, oder jene, die deine Website auf einem kleineren Bildschirm, z. B. einem Mobilgerät, ansehen. Verschiedene Teile deiner Website wie Navigationsmenüs, Links und Text-Abschnitte sollten leicht zu identifizieren sein.

Tastaturnavigation

Einige Besucher verwenden möglicherweise eine Tastatur anstelle einer Maus, um auf deiner Website zu navigieren. Die Barrierefreiheit über die Tastatur ist auch für bestimmte Hilfstechnologien wie Spracherkennung und Screenreader wichtig. Du kannst die Barrierefreiheit deiner Website testen, indem du versuchst, nur mit deiner Tastatur zu navigieren.

Fokus-Kontur anpassen

Squarespace-Websites umfassen in Version 7.1 eine integrierte Fokus-Kontur, die Elemente wie Navigationslinks und Formularfelder auf einer Seite hervorhebt. Für diese Fokus-Kontur sind auf allen Websites und Seiten feste Standardeinstellungen konfiguriert. 

Es ist also nicht möglich, die Farbe oder Dicke der Konturlinie anzupassen. Die Kontur erscheint, wenn Website-Besucher die Tabulatortaste auf ihrer Tastatur drücken. Beim ersten Drücken der Tabulatortaste wird die Meldung Zum Inhalt springen angezeigt. Durch Drücken der Leertaste werden der Website-Header und die Navigation übersprungen, sodass Besucher direkt zum Inhalt der Website gelangen. Alternativ können sie weiterhin die Tabulatortaste drücken, um zu anderen Inhalten zu navigieren.

Hinweis: Stelle sicher, dass dein Browser aktuell ist, um Probleme mit der Fokus-Kontur zu vermeiden. Folge diesen Schritten, um deine Browserversion zu aktualisieren.

Squarespace-Tastaturkürzel

Erfahre mehr über die Tastaturkürzel, die du beim Verwalten und Bearbeiten deiner Website verwenden kannst.

Kreativer Editor

Beachte bei der Bearbeitung von Abschnitten des Kreativen Editors die folgenden Best Practices:

• Wenn sich Blöcke überlappen, solltest du sicherstellen, dass der Inhalt aller Blöcke für Besucher weiterhin sichtbar und nutzbar ist.
• Denke darüber nach, wie verschiedene Blockelemente interagieren könnten. Wenn du beispielsweise einen Formular-Block hast, solltest du vielleicht keinen Button-Block darüber platzieren, da Besucher möglicherweise nicht sicher sind, welcher Button zum Absenden des Formulars vorgesehen ist.
• Wenn du Text über anderen Arten von Inhalten platzierst, stelle sicher, dass er lesbar ist. Dafür musst du möglicherweise einen Farbhintergrund zu einem Block hinzufügen, die Farbe des Textes ändern, damit er auf einem Bild sichtbar ist, oder den Text an eine Stelle verschieben, an der er noch lesbar ist.

Klare und deutliche Sprache

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. 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“.

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.

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

Listen

Organisiere das Layout deines Textes mithilfe von Listen und Überschriften. Mithilfe von Listen kann deutlich gemacht werden, dass Inhalte miteinander in Beziehung stehen, z. B. bei einer Gruppe von Links oder einer 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.

Links

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:

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.

Formulare

Formulare können für einige Besucher eine Herausforderung darstellen. 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.