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 checkdomain.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.
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:
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.
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?
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:
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.
Wenn es um Website-Text geht, sind dies die Mindestanforderungen an das Kontrastverhältnis:
Sie können das Textfarbverhältnis im Homepage-Baukasten wie folgt anpassen:
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 deaktiviert ist, sollten Sie das Kontrastverhältnis über die globalen Einstellungen bearbeiten:
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.
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.
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.
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:
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.