Eine barrierefreie Website stellt sicher, dass alle Nutzer, auch Menschen mit Behinderungen, Ihre Inhalte navigieren, verstehen und mit ihnen interagieren können. Wenn Sie den Homepage-Baukasten verwenden, können Sie die Barrierefreiheit verbessern, indem Sie wichtige Elemente anpassen und bewährte Methoden befolgen – zum Beispiel, indem Sie Bildern Alt-Text hinzufügen und auf eine klare Struktur von Design und Inhalten achten. In diesem Artikel finden Sie eine Checkliste mit Empfehlungen und hilfreichen Ressourcen.
Wenn Sie allgemeine Fragen zur Barrierefreiheit von Websites haben, können Sie sich unseren Leitfaden ansehen: FAQ zur Barrierefreiheit von Websites.
Hinweis: Wir bei dogado.de bemühen uns, Ihnen die notwendigen Tools zur Verfügung zu stellen, damit Sie eine Website erstellen und pflegen können, die den Anforderungen an die Barrierefreiheit entspricht. Die Verantwortung für die vollständige Einhaltung liegt jedoch bei Ihnen. Wir empfehlen Ihnen daher dringend, sich mit den lokalen oder regionalen Gesetzen zur Barrierefreiheit vertraut zu machen, da möglicherweise Anforderungen für Sie gelten, die in diesem Artikel nicht behandelt werden.
Visuelle Elemente
Alt-Texte für Bilder, Icons und Grafiken
Der Alternativtext dient als lesbare Beschreibung eines Bildes und kann als Ersatz dienen, wenn der Website-Besucher das Bild nicht sehen kann. Der Alt-Text kann von einem Bildschirmlesegerät aufgegriffen und gelesen werden. Anleitungen zum Hinzufügen von Alt-Text zu Bildern oder anderen visuellen Elementen finden Sie in diesen Anleitungen:
- Bilder (gilt auch für SVGs und Symbole): Wie kann ich ein Bild zum Homepage-Baukasten hinzufügen?
- Logo-Komponente im Homepage-Baukasten nutzen
- Produktbilder (Webshop): Produkte in Ihrem Webshop verwalten
- Galerie- und Bild-Slider: Wie man die Galerie-Komponente im Homepage-Baukasten verwendet
- Blog-Bilder: Erste Schritte mit Blogs im Homepage-Baukasten
Sie müssen keinen Alt-Text für Hintergrundbilder hinzufügen, da diese oft nur dekorativen Zwecken dienen. Alt-Text sollte nur zu Bildern hinzugefügt werden, die wichtige Inhalte vermitteln, Informationszwecken dienen oder eine Interaktion des Website-Besuchers erfordern.
Um zu kennzeichnen, dass ein Bild von Hilfstools übersprungen werden kann, können Sie in den Bild-Einstellungen zu SEO gehen und den Schalter Als dekoratives Element festlegen auf EIN schieben.
Um die vollständige Konformität sicherzustellen, empfehlen wir Ihnen, alle Bilder auf Ihrer Website zu überprüfen und ihnen entweder Alt-Text zuzuweisen oder sie als dekorative Elemente festzulegen.
Seitensprache
Durch das Festlegen der Sprache für jede Seite Ihrer Website stellen Sie sicher, dass Bildschirmleseprogramme die Seite korrekt vorlesen können. Eine Schritt-für-Schritt-Anleitung finden Sie in diesem Leitfaden: Wie stelle ich die Sprache für eine Seite im Homepage-Baukasten ein?
Auditive Elemente
Untertitel und Transkripte für Audio und Video
Es ist nicht möglich, mit der Option für selbst gehostete Videos im Homepage-Baukasten Untertitel hinzuzufügen oder Transkripte zu erstellen. Es gibt jedoch zwei Umgehungsmöglichkeiten für dieses Problem:
- Laden Sie Videos stattdessen über YouTube hoch. Dadurch wird sichergestellt, dass Videos mit Untertiteln angezeigt werden. Weitere Informationen zu dieser Funktion finden Sie in unserem Leitfaden: Fügen Sie ein YouTube-Video zu Ihrer Website hinzu.
- Fügen Sie Transkripte separat als leicht zugängliche Datei auf Ihrer Website hinzu. Sie können hierfür das Dokument verwenden, über das Sie in unserem Leitfaden mehr erfahren: Wie füge ich ein Dokument in meiner Homepage-Baukasten-Seite ein?
Aufbau und Design
Semantische Überschriften
Verwenden Sie die semantische Überschriftenhierarchie (H1, H2, H3, Absatz) im Textlayout Ihrer Website. Diese Hierarchie stellt eine Möglichkeit dar, Inhalte logisch und sinnvoll über Tags auf HTML-Seiten zu organisieren. Sie wird von Hilfstechnologien wie Bildschirmlesegeräten verwendet, um den Inhalt zu verstehen und ihn in der richtigen Reihenfolge an den Website-Besucher weiterzugeben.
Im Homepage-Baukasten-Editor ist jede Überschrift bei Verwendung einer Textkomponente deutlich gekennzeichnet (Überschrift 1, Überschrift 2 usw.). Sie können beim Hinzufügen einer neuen Textkomponente zu Ihrer Website eine Überschrift in der Seitenleiste auswählen oder die Überschrift für vorhandene Textkomponenten im Eigenschaftenfenster bearbeiten.
Die Templates des Homepage-Baukastens enthalten klare Überschriften und Bezeichnungen und folgen standardmäßig der oben beschriebenen Logik.
Kontrastverhältnis für Text
Wenn es um Website-Text geht, sind dies die Mindestanforderungen an das Kontrastverhältnis:
- Überschriften: 3:1
- Absätze: 4,5:1
Sie können das Textfarbverhältnis im Homepage-Baukasten wie folgt anpassen:
Wenn die Farbthema-Funktion auf EIN gestellt ist:
Wenn Sie auf Ihrer Website ein Farbthema verwenden, sollten Sie das Kontrastverhältnis in den Farbthema-Einstellungen anpassen. Diese Anleitung erklärt die Vorgehensweise: Verwendung des Farbthemas im Homepage-Baukasten.
Wenn die Farbthema-Funktion auf AUS gestellt ist:
Wenn die Farbthema-Funktion deaktiviert ist, sollten Sie das Kontrastverhältnis über die globalen Einstellungen bearbeiten:
- Gehen Sie zu Template-Einstellungen in der unteren rechten Ecke des Homepage-Baukasten-Editors.
- Klicken Sie im angezeigten Menü auf Template-Stile bearbeiten.
- Sie sehen nun eine Übersicht aller auf Ihrer Website verwendeten Textstile (Text, Links, Menü, Buttons und Tabellen). Klicken Sie auf das Textfarbsymbol des jeweiligen Elements, um zu den Farbeinstellungen zu gelangen. Sie können eine Farbe über die Farbauswahl auswählen oder einen Hexadezimalcode eingeben.
Hinweis: Der Homepage-Baukasten kann Ihnen die genauen Kontrastverhältnisse Ihrer Website nicht anzeigen. Sie können jedoch externe Tools verwenden, um die benötigten Werte zu ermitteln. Probieren Sie beispielsweise das Tool von WebAIM aus. Geben Sie hier die Hexadezimalcodes für Vorder- und Hintergrund ein und passen Sie die Farbe an, bis das richtige Kontrastverhältnis und die entsprechenden Hexadezimalcodes vorliegen. Diese Codes können Sie anschließend in den Homepage-Baukasten kopieren und einfügen.
Nicht-Text-Kontrast
Farbige Elemente auf Ihrer Website, die keinen Text enthalten, wie etwa Hintergrundfarben in Abschnitten oder Button-Farben, können entweder über das Farbthema oder die globalen Template-Einstellungen vollständig angepasst werden, wie oben beschrieben.
Der Stil jedes Elements lässt sich über die Einstellungen der jeweiligen Komponente weiter anpassen. Wenn Sie beispielsweise auf einen Abschnitt, Header oder Footer klicken, wird die Option zum Ändern der Farbe oder des Stils des Elements angezeigt.
Navigation
Tastaturzugriff
Wir empfehlen Ihnen, sich auf klare Inhalte auf Ihrer Website zu beschränken und komplexe Elemente wie Fokus-Trigger-Inhalte oder Hoverboxen zu vermeiden. Letztere können durch normale Bilder und Links ersetzt werden.
Es ist zu beachten, dass Dropdown-Menüs über die Tastatur zugänglich sind.
Pausieren, Stoppen oder Ausblenden von Inhalten
Es muss möglich sein, alle beweglichen oder interaktiven Elemente auf Ihrer Website manuell zu steuern oder auszublenden. Hier sind ein paar Punkte, die Sie überprüfen sollten, wenn Sie sie auf Ihrer Website haben:
- Bild-Slider: Die Autoplay-Funktion dieser Komponente ist standardmäßig aktiviert. Sie können sie jedoch deaktivieren und stattdessen manuelle Steuerelemente hinzufügen. Gehen Sie zu Ihrer Bild-Slider-Komponente, klicken Sie auf Bild-Slider-Einstellungen und wählen Sie dann Navigation um auf diese Einstellungen zuzugreifen.
- GIFs: Vermeiden Sie das Hochladen von GIFs über die Bild-Komponente, wenn diese keine Steuerelemente enthalten.
- Hintergrundbilder und -videos: Diese Elemente verfügen derzeit nicht über eine Play/Pause-Funktion, aber wir arbeiten an einer Lösung, um diese Anforderung zu erfüllen. In der Zwischenzeit empfehlen wir, bewegte Hintergrundbilder oder Videohintergründe zu vermeiden.
- Videos: Stellen Sie sicher, dass die Steuerung für Videos sichtbar ist und die automatische Wiedergabe deaktiviert ist. Weitere Informationen zu den Video-Einstellungen finden Sie in unserem Leitfaden: Wie füge ich ein Video zu meiner Homepage-Baukasten-Website hinzu?
Blinkender Inhalt
Inhalte mit mehr als drei Blitzen pro Sekunde sollten vermieden werden. Der Homepage-Baukasten enthält keine standardmäßigen blinkenden Inhalte, Sie können diese jedoch hochladen. Wir empfehlen allerdings, dies zu vermeiden oder es dem Besucher zumindest zu ermöglichen, diese Inhalte manuell zu steuern und zu überspringen.