Abschnitt 1
Überschriften richtig einsetzen
Klare Struktur verwenden:
- Die Hauptüberschrift des Beitrags ist H1 (wird automatisch vergeben).
- Im Inhalt beginne ich mit H2 und verwende danach H3 bzw. H4 nur zur logischen Unterteilung.
- Ich überspringe keine Ebenen (kein H2 und danach H4 ohne H3).
Warum?
Screenreader-Nutzerinnen und -Nutzer orientieren sich stark an Überschriften. Eine saubere Struktur hilft beim schnellen Erfassen.
Abschnitt 2
Verständliche Texte schreiben
Kurze, klare Sätze:
Ich formuliere aktiv, konkret und vermeide zu komplizierte Satzkonstruktionen.
Fachbegriffe erklären:
Begriffe, die nicht allgemein verständlich sind, kurz erläutern.
Auf ausreichende Kontraste achten:
Ich nutze keine hellgraue oder farbige Schrift, die schwer zu lesen ist.
Warum?
Menschen mit Lernschwierigkeiten oder kognitiven Einschränkungen profitieren von klar formulierten Texten. Dies gilt auch für alle anderen.
Abschnitt 3
Links barrierefrei gestalten
Linktexte sind aussagekräftig:
Nicht: „hier klicken“
Besser: „Zur Übersicht der Veranstaltungen“
Externe Links richtig kennzeichnen:
Ich schreibe im Text „(externer Link)“, wenn es relevant ist (z. B. behördliche Seiten).
Keine Links nur aus URL-Texten:
Statt „www.meinewebsite.de/info“ besser: „Informationen zu unserem Angebot“.
Warum?
Screenreader-Nutzerinnen und -Nutzer können sich Links als Liste vorlesen lassen. Daher muss jeder Link für sich verständlich sein.
Abschnitt 4
Bilder korrekt einfügen
Für jedes Bild prüfe ich den Alternativtext (Alt-Text):
Ich beantworte die Frage: Was müsste ich jemandem erzählen, der das Bild nicht sehen kann?
Informative Bilder: kurzer, beschreibender Alt-Text
Dekorative Bilder: Alt-Text leer lassen (Feld einfach leer lassen)
Beispiele:
Foto: „Rathausplatz mit Marktständen und Besuchern“
Icon (rein dekorativ): Alt-Text bleibt leer
Bildunterschriften:
Setzen, wenn der Inhalt wichtig für den Kontext ist (z. B. bei Diagrammen, Fotos mit Personen oder Orten).
Bildgröße & Lesbarkeit:
Bilder so einbinden, dass der Text gut umfließt und wichtige Infos nicht im Bildrand verloren gehen.
Warum?
Wenn jemand ein Bild nicht sehen kann, übernimmt der Alt-Text die Rolle einer kurzen Beschreibung. Ist das Bild nur Dekoration, soll der Screenreader es überspringen.
Abschnitt 5
Videos einbinden (YouTube, Vimeo, eigene Dateien)
Untertitel verwenden:
Wenn das Video gesprochenen Inhalt hat, benötigen Nutzerinnen und Nutzer Untertitel.
Bei Nutzung von YouTube: eigene Untertitel hochladen oder automatisch erstellte Untertitel prüfen/optimieren.
Beschreibung im Text ergänzen:
Kurz erklären, worum es im Video geht.
Kein Autoplay:
Videos sollten nicht automatisch starten (Barriere, Stressfaktor, Screenreader-Probleme).
Warum?
Untertitel helfen Menschen mit Hörbehinderung und in lauter Umgebung. Ohne Autoplay behalten Nutzerinnen und Nutzer die Kontrolle und werden nicht überrascht.
Abschnitt 6
Medien allgemein
PDFs barrierefrei erstellen:
Wenn ich PDFs hochlade, achte ich darauf, dass sie aus Word/Acrobat mit Tags, Alt-Texten und Überschriftenstruktur kommen.
Wo möglich: PDF-Inhalte zusätzlich als HTML auf der Seite anbieten.
Audio-Dateien:
Eine kurze Inhaltszusammenfassung oder ein Transkript ergänzen.
Warum?
Viele technische Hilfsmittel können PDF-Inhalte nur gut verarbeiten, wenn diese korrekt strukturiert sind. HTML ist immer die barriereärmste Form.
Abschnitt 7
Tabellen korrekt nutzen
Tabellen nur für Daten, nicht fürs Layout:
Überschriftenzeilen definieren. Im Gutenberg-Block aktivieren: „Tabellenkopf“ einschalten.
Keine verschachtelten oder komplexen Tabellen.
Warum?
Screenreader lesen Tabellen zeilenweise vor. Ohne klare Kopfzeilen („Header“) oder bei verschachtelten Tabellen verlieren Nutzerinnen und Nutzer die Orientierung.
Abschnitt 8
Allgemeine Bedienbarkeit
Inhalte logisch und linear aufbauen:
Keine Sprungmarken improvisieren, keine versteckten Elemente.
Buttons statt verlinkter Bilder nutzen.
Buttons sind aus Barrierefreiheits-Sicht sicherer und klar erkennbar.
Warum?
Eine vorhersehbare Struktur erleichtert es allen Nutzerinnen und Nutzern, eine Seite zu bedienen — besonders jenen, die nur Tastatur oder Screenreader verwenden.
Abschnitt 9
Prüfung vor dem Veröffentlichen
Kurze Selbstprüfung:
Kann ich die Seite ohne Maus bedienen (Mit der Tab-Taste durch Inhalte springen)?
Sind alle Bilder mit Alt-Texten versehen?
Haben Links klare Namen?
Ist der Text klar strukturiert?
Funktionieren eingebettete Medien (also keine Autoplay-Fallen vorhanden)?
Browser-Tools / WordPress-Hilfen:
Gutenberg zeigt Warnhinweise für fehlende Alt-Texte.
Im Browser z. B. Chrome: „Entwicklertools“ zu „Barrierefreiheit“ zu „Überschriftenstruktur“ prüfen.
Warum?
Eine kurze Kontrolle stellt sicher, dass keine Barrieren übersehen wurden. Dies gilt besonders für solche, die leicht unbemerkt bleiben.
Abschnitt 10
Erklärung
Gutenberg = Baustein-Editor, mit dem Inhalte (Text, Bilder etc.) einfügt werden.
GeneratePress = Design-Gerüst, das festlegt, wie die Seite aussieht.
Beide zusammen ermöglichen:
- einfache Inhaltsbearbeitung
- saubere Struktur
- gute Voraussetzungen für Barrierefreiheit
