Barrierefrei ohne Aufwand: Was das CMF mitbringt – und was du selbst tun musst

Barrierefreiheit klingt nach einem großen Projekt. Das meiste davon ist aber einmalige Arbeit an der Grundlage – und die ist im CMF bereits erledigt. Was übrig bleibt, sind vier Gewohnheiten beim Schreiben.

Jede Seite beginnt mit einem Sprunglink: „Zum Inhalt springen“ steht als erstes Element im Markup und wird sichtbar, sobald jemand mit der Tastatur navigiert. Wer nicht mit der Maus arbeitet, muss sich damit nicht durch das ganze Menü tabben.

Dazu kommen die unauffälligen Dinge: Das html-Element trägt die Sprache der Seite, damit Screenreader richtig aussprechen. Für Fokus-Zustände gibt es eigene Regeln – der Rahmen um das gerade aktive Element wird also nicht wegdesignt, was in freier Wildbahn erschreckend oft passiert. Bilder bekommen automatisch width und height ins Markup, damit beim Nachladen nichts springt. Und wer Animationen nicht verträgt, bekommt sie nicht: Das Stylesheet respektiert prefers-reduced-motion.

Alt-Texte. Das System schreibt das alt-Attribut immer ins Markup – was drinsteht, entscheidest du. Beschreibe, was auf dem Bild zu sehen ist, nicht was es darstellen soll. Ein rein dekoratives Bild darf ein leeres alt haben; das ist kein Versäumnis, sondern die richtige Angabe.

Überschriften der Reihe nach. Eine h1 pro Seite, darunter h2, darunter h3. Keine Ebene überspringen, nur weil die kleinere Schrift besser aussieht – dafür sind die Größen im Theme da.

Linktexte, die alleine stehen. „Hier klicken“ hilft niemandem, der sich nur die Linkliste vorlesen lässt. „Zur Feldreferenz“ schon.

Kontrast bei eigenen Farben. Sobald du im Theme Vorder- und Hintergrundfarbe änderst, ist das Kontrastverhältnis deine Verantwortung. Für Fließtext gelten 4,5:1 als Untergrenze.

Warum das zusammenpasst, steht im Beitrag Semantisches HTML: Warum Struktur wichtiger ist als Design. Kurz gesagt: Wer die richtigen Elemente benutzt, bekommt den größten Teil der Barrierefreiheit geschenkt.