Zum Hauptinhalt springen

Barrierefreiheit

Docusaurus bringt viele Voraussetzungen für barrierearme Websites bereits „out of the box“ mit. Wenn Autor:innen ein paar einfache Regeln beim Schreiben und Gestalten beachten, entstehen schnell gut zugängliche Seiten. Das erleichtert besonders Teams den Umstieg, die bisher vor allem mit Word gearbeitet haben.

Warum das Thema hier steht​

Für das Föderale Entwicklungsportal gilt die Erklärung zur Barrierefreiheit der FITKO (öffnet in neuem Tab). Damit das Portal diese Aussage halten kann, müssen die dort als „erfüllt“ angegebenen Anforderungen auch von jeder einzelnen Dokumentationswebsite erfüllt werden.

Die folgenden Hinweise helfen dabei, diese Anforderungen im Redaktionsalltag zuverlässig einzuhalten.

Kurze Checkliste für Autor:innen​

Zunächst ein paar grundlegende Hinweise, die beim Erstellen von Dokumenten unbedingt zu beachten sind.

  • Überschriftenstruktur einhalten: Überschriftenebenen nicht „überspringen“ (z. B. nicht direkt von ## zu ####).
  • Aussagekräftige Linktexte: Keine Linktexte wie „hier“ oder „mehr“, sondern das Ziel benennen.
  • Download-Links auszeichnen: Bei Dateien zum Herunterladen im Linktext Format und Dateigröße in runden Klammern angeben (z. B. „Handbuch (PDF, 2,4 MB)“).
  • Tabellen sparsam und klar: Tabellen nur für Daten, nicht für Layout, Überschriftenzeile nutzen und Inhalte pro Zelle kurz halten.
  • Abkürzungen erklären: Beim ersten Auftreten ausschreiben und Abkürzung ergänzen.
  • Farbe nie als einziges Signal: Informationen nicht nur über Farbe vermitteln, sondern zusätzlich über Text oder Symbole.

Grafiken und Screenshots​

Grafiken sind ein häufiger Stolperstein: Sie sind schnell erstellt, aber ohne Kontext für Screenreader-Nutzende oft wertlos.

Alt-Text: kurz, konkret, zweckorientiert​

  • Der Alt-Text beschreibt, was die Grafik für die Seite leistet (nicht jedes Detail).
  • Bei Deko-Grafiken: kein Informationsgehalt, daher Alt-Text leer lassen.

Beispiele:

  • ![Navigation in Docusaurus: Navbar oben, Sidebar links](/images/docusaurus-navigation.png)
  • Deko-Bild: ![](/images/trennlinie.svg)

Komplexe Grafiken: Erklärung unterhalb ergänzen​

Wenn eine Grafik mehrere Elemente oder Beziehungen erklärt (z. B. Prozessdiagramme, Architektur-Skizzen), reicht ein kurzer Alt-Text selten aus. Ergänzen Sie direkt unterhalb eine kurze Erläuterung in Textform (2–6 Sätze) oder eine Liste, die die Kernaussagen der Grafik wiedergibt. Ein Beispiel, wie so etwas umgesetzt werden kann, finden Sie im Abschnitt "Aufbau des Föderalen Entwicklungsportals" auf der Startseite dieser Dokumentation.

Text in Bildern vermeiden​

Wenn möglich, keine großen Textmengen in Grafiken „einbrennen“. Text im Fließtext bleibt skalierbar, übersetzbar, durchsuchbar und kann von Screenreadern verarbeitet werden.

Weiterführende Ressourcen​

Das Informationsportal „Digitale Barrierefreiheit“ bündelt praxisnahe Hilfen zur Umsetzung barrierefreier IT-Lösungen und wird laufend ergänzt. Es wurde vom Bundesministerium des Innern und für Heimat (BMI) (öffnet in neuem Tab) gemeinsam mit der Hessischen Landesbeauftragten für barrierefreie IT (öffnet in neuem Tab) und dem Informationstechnikzentrum Bund (öffnet in neuem Tab) aufgebaut.

Der dort bereitgestellte Standardanforderungskatalog (öffnet in neuem Tab) unterstützt bei der Auswahl relevanter Anforderungen aus: