Seminar Docusaurus – Barrierefreiheit und inklusive Dokumentation

Inhaltsübersicht

1. Zielsetzung
2. Schritt 1: Prüfrahmen und Ausgangslage bestimmen
3. Schritt 2: Semantische Inhaltsstruktur aufbauen
4. Schritt 3: Navigation und Tastaturbedienung prüfen
5. Schritt 4: Farben, Typografie und responsive Darstellung absichern
6. Schritt 5: Medien und technische Inhalte zugänglich gestalten
7. Schritt 6: Zugängliche MDX- und React-Komponenten entwickeln
8. Schritt 7: Prüfungen automatisieren und manuell ergänzen
9. Schritt 8: Redaktionsregeln und Freigabeprozess etablieren
10. Praxisphasen
11. Zielgruppe und Voraussetzungen

Zielsetzung

Das Seminar verbindet barrierearme Content-Gestaltung mit der technischen Anpassung einer Docusaurus-Oberfläche. Semantik, Tastaturbedienung, Fokusführung, Kontraste, Medien, Tabellen, Codebeispiele und wiederverwendbare MDX-Komponenten werden systematisch geprüft.

• Barrieren in technischen Dokumentationsportalen methodisch erkennen und priorisieren
• semantisch robuste Markdown-, MDX- und React-Inhalte erstellen
• Theme-Anpassungen für Tastatur, Fokus, Kontrast und Vergrößerung absichern
• manuelle und automatisierte Prüfungen in Redaktions- und Entwicklungsprozesse integrieren

Seminarinhalte

Schritt 1: Prüfrahmen und Ausgangslage bestimmen

Zunächst werden Nutzergruppen, Nutzungssituationen und kritische Aufgaben des Portals erfasst. Ein reproduzierbarer Ausgangstest trennt redaktionelle, gestalterische und technische Barrieren.

• Schlüsselpfade und Seitentypen auswählen
• Tastatur-, Screenreader- und Vergrößerungsszenarien definieren
• Befunde nach Auswirkung und Häufigkeit priorisieren

Schritt 2: Semantische Inhaltsstruktur aufbauen

Überschriften, Listen, Tabellen, Hinweise und Regionen werden nach ihrer Bedeutung eingesetzt. Eine konsistente Hierarchie verbessert Orientierung, Vorlesbarkeit und maschinelle Interpretation.

• Überschriftenebenen ohne Sprünge planen
• Listen und Tabellen nur für passende Inhaltsarten verwenden
• Linktexte und Bedienelemente eindeutig formulieren

Schritt 3: Navigation und Tastaturbedienung prüfen

Navbar, Sidebar, Inhaltsübersicht, Versions- und Sprachauswahl werden vollständig per Tastatur getestet. Fokusreihenfolge, sichtbare Fokusmarkierung und das Schließen überlagernder Elemente werden nachvollziehbar bewertet.

• Tab-Reihenfolge und Fokusfallen untersuchen
• Sprungmöglichkeiten zum Hauptinhalt prüfen
• Dropdowns und mobile Navigation ohne Zeigegerät bedienen

Schritt 4: Farben, Typografie und responsive Darstellung absichern

Design-Tokens und CSS-Anpassungen werden für Hell- und Dunkelmodus sowie verschiedene Zoomstufen geprüft. Informationen dürfen nicht ausschließlich über Farbe, Position oder Bewegung vermittelt werden.

• Kontrast und Fokusdarstellung kontrollieren
• Zeilenlänge, Abstände und Schriftvergrößerung testen
• Layout bei schmalen Ansichten und starkem Zoom prüfen

Schritt 5: Medien und technische Inhalte zugänglich gestalten

Bilder, Diagramme, Videos, mathematische Inhalte und Codebeispiele erhalten geeignete Alternativen und klare Kontextinformationen. Komplexe Tabellen und lange Codeblöcke werden so strukturiert, dass die Orientierung erhalten bleibt.

• Alternativtexte nach Informationszweck formulieren
• Diagramminhalte zusätzlich textlich beschreiben
• Tabellenköpfe, Beschriftungen und Codekontext ergänzen

Schritt 6: Zugängliche MDX- und React-Komponenten entwickeln

Eigene Komponenten werden mit nativen HTML-Elementen, korrekten Beschriftungen und vorhersehbarem Fokusverhalten aufgebaut. ARIA-Angaben werden nur ergänzend und nachvollziehbar eingesetzt.

• Komponentenverträge für Label, Status und Fehlerzustände definieren
• Tastaturinteraktion und Fokuswechsel implementieren
• statische Ausgabe und Hydration ohne Bedeutungsverlust prüfen

Schritt 7: Prüfungen automatisieren und manuell ergänzen

Automatisierte Analysen werden als frühe Qualitätskontrolle eingerichtet, ersetzen jedoch keine Bedien- und Verständlichkeitsprüfung. Der Prozess verbindet Build-Gates mit einer wiederholbaren manuellen Checkliste.

• repräsentative Seiten in automatisierte Tests aufnehmen
• Tastatur- und Screenreader-Prüfschritte dokumentieren
• Regressionen mit Befundvorlagen und Verantwortlichen behandeln

Schritt 8: Redaktionsregeln und Freigabeprozess etablieren

Barrierearme Gestaltung wird in Vorlagen, Definition-of-Done und Reviewregeln verankert. Neue Komponenten und Inhaltsmuster erhalten eine Freigabe, bevor sie breit eingesetzt werden.

• redaktionelle Prüfliste in Änderungsanträge integrieren
• zugelassene Komponenten und Muster dokumentieren
• regelmäßige Stichproben und Nachprüfungen planen

Praxisphasen

Die einzelnen Arbeitsschritte werden an einer durchgängigen Übungsplattform umgesetzt. Konfigurationen, Inhalte und Prüfungen werden schrittweise erweitert und jeweils mit einem produktionsnahen Build kontrolliert.

• Audit einer vorbereiteten Docusaurus-Seite mit Tastatur, Zoom und semantischer Strukturanalyse
• Überarbeitung einer problematischen MDX-Komponente mit zugänglicher Interaktion und Fokusführung
• Erstellung einer kombinierten Redaktions- und Entwicklungscheckliste für Freigaben

Zielgruppe und Voraussetzungen

Zielgruppe: Technische Redaktionen, Frontend-Entwickler, UX-Verantwortliche, Qualitätsmanagement und Betreiber von Dokumentationsportalen

Voraussetzungen: Docusaurus-Grundkenntnisse; für technische Übungen sind grundlegende Kenntnisse in HTML, CSS und React hilfreich