Kennst du das? Du klickst auf einen Link, freust dich auf den Inhalt und landest stattdessen auf einer 404-Seite. Ärgerlich, oder? Jetzt stell dir vor, du benutzt einen Screenreader (Bildschirmlesegerät) oder kannst die Maus nicht bedienen und dann ist die 404-Seite ist nicht barrierefrei. Plötzlich ist aus einem kleinen Ärgernis eine echte Sackgasse geworden. Genau deshalb ist nicht nur eine hilfreiche, sondern auch eine barrierefreie 404-Seite wichtig. Und genau darum soll es in diesem Beitrag gehen.
Warum eine 404-Seite überhaupt wichtig ist
Bevor wir uns der Barrierefreiheit widmen, kurz zur Einordnung: Eine 404-Seite erscheint immer dann, wenn eine URL ins Leere läuft. Vielleicht hast du eine Seite umbenannt, ein Produkt aus dem Shop genommen oder jemand hat sich schlicht vertippt. In all diesen Momenten ist die 404-Seite der Rettungsanker. Sie sollte Menschen nicht nur sanft auffangen, sondern ihnen auch wieder auf die Beine helfen. Und das sollte sie für alle Nutzenden leisten.
11 Tipp für eine barrierefreie 404-Seite
1. Eine klare, verständliche Botschaft
Fachbegriffe wie „HTTP 404" oder „Not Found" sagen vielen Menschen nichts. Schreibe stattdessen in einfacher Sprache, was passiert ist. Zum Beispiel: „Diese Seite konnten wir leider nicht finden." Punkt. Keine Panik, kein Technik-Kauderwelsch.
Wenn du möchtest, darfst du auch humorvoll sein (aber übertreibe es nicht). Ein Witz, den niemand versteht, ist keine Hilfe. Und gerade für Menschen mit kognitiven Einschränkungen oder nicht-muttersprachliche Nutzende ist wichtig, um die Botschaft zu verstehen.
2. Eine sinnvolle Seitenstruktur mit Überschriften
Auch eine 404-Seite braucht eine vernünftige Überschriftenhierarchie. Die Hauptüberschrift ist ein <h1>; zum Beispiel „Seite nicht gefunden". Screenreader-Nutzende springen oft von Überschrift zu Überschrift, um sich zu orientieren. Wenn deine 404-Seite gar keine hat, tappen sie im Dunkeln.
3. Der richtige Seitentitel
Der <title> im <head> sollte klar machen, dass hier etwas schiefgelaufen ist. „Seite nicht gefunden - deineDomain.de" ist viel hilfreicher als einfach nur „404". Screenreader lesen den Titel vor, sobald die Seite geladen ist. So weiß man sofort, woran man ist.
4. Der korrekte HTTP-Statuscode
Das ist ein Punkt, der gerne übersehen wird: Eine 404-Seite muss auch wirklich den Statuscode 404 ausliefern. Klingt logisch, ist es aber nicht immer. Manche Systeme zeigen die Fehlerseite an, liefern aber den Statuscode 200 („alles okay") zurück. Das verwirrt Suchmaschinen und manche assistiven Technologien. Prüfe das ruhig mal mit den Entwicklertools deines Browsers.
5. Hilfreiche Navigation und Handlungsoptionen
Was soll ein Nutzender jetzt tun? Biete ihr Optionen an:
- einen Link zur Startseite
- eine Suchfunktion
- Links zu den wichtigsten Bereichen deiner Seite (Seitenübersicht)
- eventuell einen Kontakt-Link, falls sie Hilfe braucht
Wichtig: Diese Links müssen per Tastatur erreichbar sein. Teste das mal selbst. Navigiere mit der Tab-Taste durch deine 404-Seite. Kommst du überall hin? Siehst du, wo der Fokus gerade steht?
6. Sichtbarer Fokus
Apropos Fokus: Der Fokus-Indikator, also die Markierung, die zeigt, welches Element gerade aktiv ist , muss deutlich sichtbar sein. Entferne ihn bitte nicht per CSS. Gestalte ihn lieber so, dass er zu deinem Design passt und gleichzeitig einen guten Kontrast hat.
7. Genügend Kontrast
Die Texte und interaktiven Elemente auf deiner 404-Seite brauchen ausreichend Kontrast. Nach WCAG 2.2 (AA) sollten normale Texte mindestens ein Kontrastverhältnis von 4,5:1 haben, große Texte 3:1. Es gibt wunderbare Tools, mit denen du das prüfen kannst; zum Beispiel den Contrast Checker von WebAIM.
8. Aussagekräftige Linktexte
Der Linktest „Hier klicken" sagt nichts aus. Schreibe stattdessen: „Zur Startseite" oder „Alle Produkte ansehen". Screenreader-Nutzende lassen sich oft nur die Links einer Seite vorlesen. Das bedeutet, dass ein Linktext immer noch verständlich sollte, wenn er aus dem Kontext gerissen wird.
9. Bilder mit sinnvollem Alt-Text
Viele 404-Seiten haben ein nettes Illustrationsbild; eine verirrte Astronautin, ein trauriger Roboter, was auch immer. Das ist charmant, aber denk an den Alt-Text. Wenn das Bild rein dekorativ ist, kann der Alt-Text leer sein (alt=""). Transportiert es eine Botschaft, beschreibe sie kurz. Und bitte keine Alt-Texte wie „Bild" oder „404.jpg".
10. Sprachauszeichnung
Stelle sicher, dass dein <html>-Element ein lang-Attribut hat (zum Beispiel lang="de"). Das hilft Screenreadern, die richtige Aussprache zu wählen. Gibt es einzelne englische Begriffe auf deiner Seite, kannst du die mit einem <span lang="en"> auszeichnen, wobei viele bekannt Begriffe vom Screenreader richtig betont werden. Die Auszeichnung ist also eher bei fremdsprachigen Textanteilen notwendig, wie zum Beispiel ein englisches Zitat.
Am besten lässt du dir die Seite mit einem Screenreader vorlesen.
11. Flexibles Layout
Deine 404-Seite sollte auf dem Smartphone genauso gut funktionieren wie auf dem Desktop. Und wenn jemand in den Browsereinstellungen eine größere Schrift gewählt hat, muss dein Layout das aushalten, ohne zu zerbrechen.
Teste deine 404-Seite
Teste deine 404-Seite. Und zwar nicht nur automatisiert, sondern auch manuell:
- Navigiere komplett mit der Tastatur durch die Seite.
- Lass dir die Seite mit einem Screenreader vorlesen (NVDA und VoiceOver sind kostenlos).
- Zoome im Browser auf 200 Prozent und prüfe, ob noch alles lesbar?
- Prüfe die Kontraste.
- Schau in den Entwicklertools, ob der Statuscode wirklich 404 ist.
Automatisierte Tools wie axe DevTools oder WAVE helfen dir zusätzlich, finden aber nicht alles. Manuelles Testen ist also erforderlich.