---
title: Barrierefreiheit
description: Seiteninhalte auf Barrierefreiheits-Probleme prüfen und über alle Seiten hinweg im Blick behalten.
navIcon: "♿"
---
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Badge } from "@/components/ui/badge"
import { Icon } from "@/components/ui/icon"
CrispyCMS prüft Seiteninhalte automatisch auf gängige Barrierefreiheits-Probleme — ganz ohne externe Dienste oder zusätzliche Software. Die Prüfung läuft direkt im Editor sowie im Hintergrund und macht Sie auf strukturelle Probleme aufmerksam, bevor Besucher mit Screenreadern oder anderen assistiven Technologien darauf stoßen.
Was die Prüfung leistet — und was nicht
Die Prüfung analysiert den HTML-Code einer Seite serverseitig auf strukturelle und markup-bezogene Probleme (z. B. fehlende Alt-Texte oder Formularlabels). Sie ersetzt keine vollständige, gerenderte Prüfung mit Kontrastanalyse — dafür ist keine Software-Installation nötig und die Prüfung läuft sofort bei jedem Speichern.
---
## Prüfung im Seiteneditor
Im Seiteneditor finden Sie unterhalb der benutzerdefinierten Eigenschaften den Abschnitt **Barrierefreiheit**.
| Element | Beschreibung |
| :--- | :--- |
| **Jetzt prüfen** | Startet manuell eine Prüfung des aktuellen Inhalts (Entwurf, falls vorhanden, sonst der veröffentlichte Inhalt). |
| **Score-Badge** | Punktzahl von 0–100. Fehler wiegen schwerer als Warnungen. 90+ = grün, 70–89 = gelb, unter 70 = rot. |
| **Quelle** | Zeigt an, ob gegen den **Entwurf** oder den **veröffentlichten Inhalt** geprüft wurde. |
| **Problemliste** | Jedes gefundene Problem mit Schweregrad (Fehler/Warnung), Beschreibung, dem betroffenen WCAG-Kriterium und einem Ausschnitt des betroffenen HTML-Codes. |
Automatische Hintergrundprüfung
Zusätzlich zur manuellen Prüfung läuft im Hintergrund automatisch eine stille Prüfung, sobald ein Entwurf automatisch gespeichert wird oder ein Entwurf verworfen wird. So bleibt die angezeigte Punktzahl immer aktuell, ohne dass Sie selbst aktiv werden müssen.
### Geprüfte Regeln
| Regel | Schweregrad | WCAG-Kriterium |
| :--- | :--- | :--- |
| Bilder ohne (oder mit leerem) Alt-Text | Fehler | 1.1.1 |
| Links ohne erkennbaren Linktext | Fehler | 2.4.4 |
| Buttons ohne erkennbaren Text | Fehler | 4.1.2 |
| Formularfelder ohne zugeordnetes Label | Fehler | 1.3.1 |
| iFrames ohne Titel-Attribut | Fehler | 4.1.2 |
| Übersprungene Überschriftenebenen (z. B. H2 direkt zu H4) | Warnung | 1.3.1 |
| Mehr als eine H1-Überschrift auf der Seite | Warnung | 1.3.1 |
| Tabellen ohne Kopfzeile (`| `) | Warnung | 1.3.1 |
---
## Barrierefreiheit erzwingen
Unter **Einstellungen → Allgemein → Editor** steht die Option **Barrierefreiheit erzwingen** zur Verfügung.
Was diese Einstellung wirklich tut
Die Prüfung selbst läuft **immer**, unabhängig von dieser Einstellung — auch bei jedem Speichern wird der zu speichernde Inhalt automatisch geprüft. „Barrierefreiheit erzwingen" steuert ausschließlich, ob beim Speichern einer Seite mit gefundenen Problemen eine Warnmeldung erscheint, die Sie explizit bestätigen müssen, bevor gespeichert wird. Redakteure können die Speicherung nach Bestätigung trotzdem fortsetzen — Probleme werden also nicht technisch blockiert, sondern bewusst gemacht.
Ist die Option deaktiviert (Standard), wird beim Speichern nicht nachgefragt — die Prüfergebnisse bleiben aber weiterhin im Editor und in der Übersicht sichtbar.
---
## Übersicht: Werkzeuge → Barrierefreiheit
Der Menüpunkt **Werkzeuge → Barrierefreiheit** zeigt alle Seiten, deren letzter Prüfergebnis **nicht** die volle Punktzahl (100/100) erreicht hat.
| Spalte | Beschreibung |
| :--- | :--- |
| **Name** | Name der Seite, verlinkt direkt in den Editor. |
| **Score** | Punktzahl der letzten Prüfung (rot < 50, gelb < 80, blau ≥ 80). |
| **Probleme** | Anzahl der gefundenen Probleme. |
| **Quelle** | Ob die letzte Prüfung gegen den Entwurf oder den veröffentlichten Inhalt lief. |
| **Zuletzt geprüft** | Zeitpunkt der letzten Prüfung relativ zu jetzt. |
Sind alle Seiten vollständig konform, zeigt die Übersicht stattdessen einen leeren Zustand mit Erfolgssymbol.
Compliance-Chart im Dashboard
Auf dem **Dashboard** fasst eine eigene Karte mit Diagramm den Barrierefreiheits-Status aller Seiten zusammen — so behalten Sie den Gesamtüberblick, ohne jede Seite einzeln aufrufen zu müssen.
---
## Berechtigungen
Die Barrierefreiheits-Prüfung nutzt dieselben Berechtigungen wie die Seitenverwaltung — es gibt keine separate Berechtigung.
| Berechtigung | Wert | Beschreibung |
| :--- | :--- | :--- |
| **Seiten lesen** | `crispy.read_pages` | Erlaubt das Einsehen der Übersicht **Werkzeuge → Barrierefreiheit** und der Prüfergebnisse im Editor. |
| **Seiten verwalten** | `crispy.write_pages` | Erlaubt das manuelle Auslösen einer Prüfung im Editor. |
Superuser besitzen beide Berechtigungen automatisch.
---
## Einstellungen: System → Einstellungen → Barrierefreiheit
Die bisher beschriebene Inhaltsprüfung ist nur ein Teil der Barrierefreiheits-Funktionen von CrispyCMS. Unter **System → Einstellungen → Barrierefreiheit** bündelt eine eigene Einstellungsseite alles Weitere: die Kennzeichnung externer Links, die Kennzeichnung von Datei-Downloads und — auf der Enterprise Edition — einen Assistenten für Ihre Website-Besucher selbst.
### Externe Links
| Option | Beschreibung |
| :--- | :--- |
| **Externe Links kennzeichnen** | Versieht Links, die auf eine andere Domain zeigen, automatisch mit einem visuellen Hinweis (Icon), damit Besucher erkennen, dass sie die Website verlassen. |
| **Externe Links in neuem Fenster öffnen** | Öffnet externe Links automatisch in einem neuen Tab (`target="_blank"`), statt die aktuelle Seite zu verlassen. |
| **Weitere eigene Domains** | Freitextfeld für zusätzliche Domains, die trotz abweichendem Hostnamen als „intern" gelten sollen (z. B. eine zweite Marken-Domain oder ein Subshop) — Links dorthin werden dann **nicht** als extern behandelt. |
| **Externe Links über eine Weiterleitungs-Hinweisseite führen** | Aktiviert das [External-Redirect-System](#externe-links-mit-hinweisseite) — siehe unten. |
### Datei-Downloads
| Option | Beschreibung |
| :--- | :--- |
| **Downloads kennzeichnen** | Versieht Links auf Dateien im Medienbereich (`/assets/ugc/…`) automatisch mit einem ergänzenden Hinweistext direkt hinter dem Linktext, z. B. „(PDF, 2 MB, Datei ist barrierefrei)". |
| **Dateigröße anzeigen** | Steuert, ob die Dateigröße Teil des Hinweistexts ist. |
| **Auch andere Dateitypen kennzeichnen** | Ohne diese Option werden nur PDFs mit einer Typ- und Größenangabe versehen. Ist sie aktiv, gilt das auch für weitere Formate wie Word-, Excel-, PowerPoint-, ZIP- oder Textdateien — allerdings **ohne** Barrierefreiheits-Angabe, da diese ausschließlich für PDFs ermittelt wird. |
| **Dokumente verwalten** | Button, der direkt zur Übersicht [Barrierefreiheit von Dokumenten](#barrierefreiheit-von-dokumenten) springt. |
Warum nur PDFs eine Barrierefreiheits-Angabe erhalten
CrispyCMS kann die Barrierefreiheit einer Datei nur bei PDFs technisch beurteilen (siehe nächster Abschnitt). Bei anderen Dateitypen wüsste das System schlicht nicht, was es behaupten soll — deshalb bleibt der Hinweistext dort auf Typ und Größe beschränkt.
### Assistent für Barrierefreiheit
Der **Assistent für Barrierefreiheit** ist ein Widget, das Ihren Website-Besuchern direkt auf der Live-Website zusätzliche Anpassungsmöglichkeiten bietet (z. B. Schriftgröße, Kontrast). Diese Funktion ist der **Enterprise Edition** vorbehalten — auf niedrigeren Lizenzstufen ist der Abschnitt sichtbar, aber ausgegraut und mit einem Hinweis auf die benötigte Lizenz versehen.
---
## Barrierefreiheit von Dokumenten
Neben dem Seiteninhalt selbst prüft CrispyCMS auch hochgeladene **Dokumente** auf Barrierefreiheit — erreichbar über **Redaktion → Barrierefreiheit von Dokumenten** oder über den Button **Dokumente verwalten** in den Einstellungen (siehe oben).
Automatische Erkennung ist nur ein Anhaltspunkt
CrispyCMS prüft, ob ein PDF getaggt ist und eine PDF/UA-Kennung, einen Titel und eine Sprache besitzt. Das ist ein starkes Indiz, aber keine Konformitätsprüfung: Ein getaggtes Dokument kann trotzdem unbeschriftete Formularfelder oder eine unsinnige Lesereihenfolge enthalten. Bestätigen Sie die Angabe erst, nachdem das Dokument tatsächlich geprüft wurde — sie wird auf Ihrer Website veröffentlicht.
Jede hochgeladene Datei mit einer der folgenden Endungen wird erfasst und in dieser Liste geführt: `pdf`, `doc`, `docx`, `xls`, `xlsx`, `ppt`, `pptx`, `odt`, `ods`, `odp`, `rtf`, `csv`, `zip`, `txt`. Eine **automatische Erkennung** (Spalte „Erkannt") gibt es allerdings ausschließlich für PDFs — sie basiert auf einer technischen Analyse der Datei (u. a. Tagging-Struktur, PDF/UA-Kennung, hinterlegter Titel, Sprachangabe und vorhandener Textinhalt statt reiner Bildseiten).
| Spalte | Beschreibung |
| :--- | :--- |
| **Name** | Dateiname mit Pfad, verlinkt direkt auf die Datei im Medienbereich. |
| **Größe** | Dateigröße. |
| **Erkannt** | Automatisch ermitteltes Ergebnis (nur bei PDFs) — Barrierefrei, Barrierearm, Nicht barrierefrei oder Keine Angabe. Ein Tooltip zeigt die einzelnen geprüften Signale. |
| **Festgelegt** | Auswahlfeld zum manuellen Überschreiben der Einstufung, z. B. nach einer echten Prüfung durch eine Fachperson. Steht die manuelle Festlegung im Widerspruch zur automatischen Erkennung, erscheint ein Warnhinweis. |
| **Zuletzt geprüft** | Zeitpunkt der letzten automatischen Prüfung. |
Über den Button **Erneut prüfen** in jeder Zeile lässt sich die automatische Prüfung einer einzelnen Datei manuell neu anstoßen, statt auf den nächtlichen Hintergrundlauf zu warten. Über das Filter-Dropdown lässt sich die Liste auf **Zu prüfen**, **Manuell festgelegt** oder **Weicht von Erkennung ab** eingrenzen; die Suche filtert nach Pfad oder Dateiname.
Festlegung ist eine öffentliche Aussage
Die hier festgelegte Einstufung erscheint — sofern „Downloads kennzeichnen" aktiv ist — wortwörtlich im Hinweistext neben dem Download-Link auf Ihrer Website (z. B. „Datei ist barrierefrei"). Setzen Sie „Barrierefrei" nur, wenn Sie das auch tatsächlich geprüft haben.
Solange keine Dateien erfasst wurden, zeigt die Übersicht den oben abgebildeten leeren Zustand. Neu hochgeladene Dateien erscheinen automatisch, sobald die nächtliche Hintergrundprüfung sie erfasst hat — das gilt auch für Dateien, die auf anderem Weg (z. B. per FTP) auf den Server gelangt sind.
---
## Externe Links mit Hinweisseite
Ist **Externe Links über eine Weiterleitungs-Hinweisseite führen** aktiv (siehe oben), führt ein Klick auf einen externen Link nicht mehr direkt zum Ziel, sondern zunächst zu einer Zwischenseite unter `/system/redirect`.
Die Hinweisseite zeigt den Zielhost hervorgehoben sowie die vollständige Ziel-URL an und leitet nach einem kurzen Countdown (5 Sekunden) automatisch weiter — alternativ kann der Besucher über **Jetzt fortfahren** sofort weiterspringen oder über **Zurück** abbrechen.
Interne Links bleiben unangetastet
Links auf die eigene Website oder auf die unter „Weitere eigene Domains" hinterlegten Domains lösen die Hinweisseite nicht aus — sie funktionieren wie gewohnt als direkter Link.
Diese Hinweisseite dient in erster Linie der **Orientierung und Transparenz**: Besucher — insbesondere solche, die auf assistive Technologien angewiesen sind — erkennen eindeutig, dass sie die Website verlassen und wohin sie geleitet werden, bevor der Sprung tatsächlich stattfindet.
|