# Barrierefrei ohne Aufwand: Was das CMF mitbringt

> Skip-Link, Fokus-Rahmen, lang-Attribut, Bildmaße gegen Layout-Sprünge: Vieles ist im CMF schon eingebaut. Vier Dinge bleiben trotzdem an dir hängen.

Kanonische URL: https://cmf.brosemedien.de/news/barrierefrei-ohne-aufwand

---

# 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.

## Das ist schon drin

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. Hat ein Bild-Block Breite und Höhe – gesetzt per API oder im JSON –, stehen `width` und `height` im Markup, und beim Nachladen springt nichts; seit Version 1.17 bleiben die Werte auch beim Speichern im Editor erhalten. Wie du die Maße ermittelst, steht im Beitrag [Schnelle Seiten: Bilder und Schriften richtig einbinden](/news/bilder-und-schriften-schnell-laden). Und wer Animationen nicht verträgt, bekommt sie nicht: Das Stylesheet respektiert `prefers-reduced-motion`.

## Das bleibt an dir

**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 vor Design kommt](/news/semantisches-html). Kurz gesagt: Wer die richtigen Elemente benutzt, bekommt den größten Teil der Barrierefreiheit geschenkt.