Barrierefreiheit ohne Pflicht: was diese Website kann und was nicht

Seit Juli hat diese Website eine Erklärung zur Barrierefreiheit. Sie ist kurz, sie listet Mängel auf, und sie sagt, dass niemand von außen draufgeschaut hat. Dieser Beitrag zeigt, was hinter den einzelnen Punkten im Code steckt. Und warum die Erklärung im September eine neue Fassung gebraucht hat.

Warum überhaupt, wenn es keine Pflicht gibt

Das Barrierefreiheitsstärkungsgesetz (BFSG) gilt seit dem 28. Juni 2025. Es erfasst bestimmte Produkte und bestimmte Dienstleistungen, darunter Dienstleistungen im elektronischen Geschäftsverkehr. Gemeint sind laut § 2 Nr. 26 Angebote über Websites und Apps, die auf individuelle Anfrage von Verbraucherinnen und Verbrauchern „im Hinblick auf den Abschluss eines Verbrauchervertrags“ erbracht werden.

Auf dieser Website wird kein Vertrag geschlossen. Meine Apps kosten teils Geld, gekauft werden sie aber im App Store, nicht hier. Die Bundesfachstelle Barrierefreiheit schreibt in ihren FAQ, dass bei reinen Informationsseiten das Merkmal der individuellen Anfrage fehlen dürfte, ebenso bei Seiten, die Produkte nur bewerben. Die Seite fällt also aller Voraussicht nach nicht unter das Gesetz. Das ist meine Lesart, keine Rechtsberatung. Wer einen Shop betreibt, sollte das für sich prüfen lassen.

Gemacht habe ich es trotzdem. Maßstab sind die Web Content Accessibility Guidelines (WCAG) 2.2 auf Stufe AA. Der Grund ist unspektakulär: Die Seite soll auch mit Tastatur, Screenreader oder starker Vergrößerung funktionieren. Und nachrüsten kostet mehr als gleich mitdenken.

Was umgesetzt ist

Der Rahmen jeder Seite

Kopfleiste, Navigation, Fußzeile und Sprunglink kommen auf allen Seiten aus derselben Datei. Das ist vor allem eine Wartungsfrage. Für die Barrierefreiheit heißt es: Ein Fehler steckt dann überall. Die Korrektur auch.

• Sprunglink. Ganz oben steht „Zum Inhalt springen“. Der Link liegt außerhalb des sichtbaren Bereichs und fährt herein, sobald er den Tastaturfokus bekommt. Wer mit der Tastatur unterwegs ist, muss so nicht auf jeder Seite erst durch das Menü (WCAG 2.4.1).
• Fokus. Jedes fokussierbare Element bekommt über :focus-visible einen Rahmen in der Akzentfarbe (WCAG 2.4.7). Wo ein Container den Rahmen abschneiden würde, etwa bei den Galeriebildern, liegt er nach innen versetzt.
• Zustände. Der Menüknopf meldet über aria-expanded, ob die Navigation offen ist. Escape schließt sie und setzt den Fokus auf den Knopf zurück. Der Schalter für Hell und Dunkel trägt aria-pressed, die aktuelle Seite aria-current.

Sprache

Die Seite ist zweisprachig, und das betrifft die Barrierefreiheit mehr, als man denkt. Eine Sprachausgabe liest Text in der Sprache vor, die im Code steht. Steht dort die falsche, klingt ein deutscher Titel wie Kauderwelsch.

• Jede Seite deklariert ihre Sprache im html-Element.
• Der Sprachumschalter zeigt sichtbar nur „EN“. Dieses Kürzel ist für Screenreader ausgeblendet, stattdessen steht dort unsichtbar „English“, als Englisch ausgezeichnet. Vorgelesen wird also ein Wort, das man versteht, in der richtigen Aussprache.
• Führt ein Link in die andere Sprache, etwa von der Erklärung zu ihrer englischen Fassung, trägt er ein sichtbares Kürzel wie „EN“ und hreflang. So ist vor dem Klick klar, was einen erwartet.
• Blogbeiträge zitieren Quellen unter ihrem Originaltitel. Hinter einem Link kann {lang=en} stehen, dann bekommt er lang und hreflang. Das dient WCAG 3.1.2, Sprache von Teilen. Die englischen Quellen unter diesem Beitrag sind so ausgezeichnet.

Tabellen, Farben, Bewegung

• Tabellen. Der Blog-Renderer setzt an jede Kopfzelle scope="col". Damit ist eindeutig, welche Spalte eine Kopfzelle beschriftet.
• Kontraste. Die Selbstbewertung hat alle Farbpaare rechnerisch geprüft. Für diesen Beitrag nachgerechnet, direkt aus den Farbwerten im Stylesheet: Fließtext auf dem Seitenhintergrund liegt bei 13,3:1 im hellen und 14,3:1 im dunklen Erscheinungsbild. Am niedrigsten liegt Text in der Grundfarbe in der markierten Quelltextzeile der Spielbücher im hellen Modus, bei 10,7:1. Gefordert sind 4,5:1 (WCAG 1.4.3). Knapp wird es beim gedämpften Grau für Nebentexte im hellen Modus: 4,9:1 auf dem Seitenhintergrund, 4,5:1 auf den etwas dunkleren Flächen, etwa den kleinen Etiketten in Projektkarten. Das reicht, aber gerade so.
• Akzentfarbe. Als Schrift käme die Akzentfarbe auf dem hellen Hintergrund nur auf 4,35:1. Fließ- und Kleintext bekommen deshalb eine dunklere Variante mit 5,8:1. Die hellere steht nur in großen Schriftgraden, für die 3:1 genügen.
• Bewegung. Wer im System „Bewegung reduzieren“ einschaltet, bekommt keine Animationen und Übergänge mehr, und das weiche Scrollen fällt weg. Das zugehörige Kriterium, WCAG 2.3.3, gehört zur Stufe AAA. Es liegt über meinem eigenen Ziel.
• Zoom. Die Seite blockiert das Vergrößern nicht.

Die Galerie

Die Fotogalerie hat 125 Bilder (Stand: September 2026), und jedes hat einen Alternativtext. Der steht auf Deutsch in captions.json und auf Englisch in captions.en.json, beide von Hand gepflegt. Ein Skript gleicht sie mit dem Bildordner ab und warnt, wenn eine englische Beschreibung fehlt. Fehlt sie trotzdem, zeigt die Galerie den deutschen Text statt gar keinen.

Die Vorschaubilder sind echte Buttons, also per Tab erreichbar und mit Enter zu öffnen. Die Großansicht ist ein Dialog. Darin bleibt der Fokus gefangen, Escape schließt ihn, und danach landet der Fokus wieder auf dem Bild, von dem man kam.

Die Spiele

Sudoku im Browser, die Logikquadrate und die Spielbücher bauen ihre Oberfläche erst im Browser. Ihre Texte kommen deshalb aus Stringtabellen im Skript, getrennt nach Sprache. Das gilt auch für jedes aria-label, das ein Skript setzt. Bei den beiden Rätseln stehen Meldungen wie „Rätsel wird geladen“ in einer Statuszeile, die als Live-Region ausgezeichnet ist, damit ein Screenreader sie von selbst vorliest. Bei den Logikquadraten wird zusätzlich das ausgewählte Feld angesagt, mit Zeile, Spalte und Inhalt.

Die Spielbücher

Die vier Spielbücher laufen in einem Player, der jede Wahl als Button zeigt. Der Name des Buttons ist der Text der Wahl, die Ziffer davor ist nur fürs Auge da und für Screenreader ausgeblendet. Die ersten neun Wahlen gehen auch über die Zifferntasten, allerdings nur, solange der Fokus im Spiel oder auf keinem Element liegt. Wer gerade anderswo auf der Seite ist, löst mit einer Ziffer nichts aus. Nach jeder Wahl springt der Fokus auf den neuen Absatz.

Die Sprache setzt der Player am Spiel selbst. „Brüder dunklen Rufes“ gibt es nur auf Deutsch, auf der englischen Seite läuft das Buch deshalb mit lang="de", damit eine Sprachausgabe es deutsch vorliest. Neben dem Spiel steht der Quelltext des Buchs in einem Fenster, das per Tab erreichbar ist und sich mit der Tastatur scrollen lässt. Zwei Bücher beginnen mit einer Auswahl, etwa der Waffe. Das ist ein Formular mit Optionsfeldern, jede Gruppe mit einer Legende, jedes Feld mit Beschriftung.

Was fehlt

Die Erklärung nennt in ihrer Fassung vom 22. September 2026 sieben bekannte Einschränkungen. Behoben ist keine davon, Stand: September 2026.

• Rätselgitter. Beide Spielbretter melden sich als Gitter (role="grid"), die Zeilen und Zellen, die zu dieser Rolle gehören, fehlen im Code aber. Die Erklärung nennt das eine unvollständige ARIA-Struktur. Mit einem Screenreader lassen sich die Felder deshalb nicht Zelle für Zelle durchgehen. Die Logikquadrate sagen immerhin das ausgewählte Feld an, das Sudoku nicht. Bedienbar sind beide vollständig über die Tastatur.
• Tastenkürzel. Sudoku, Logikquadrate und Pausensnake reagieren auf der ganzen Seite auf einzelne Tasten wie W, A, S und D, die Rätsel auch auf N, H, P, C und die Ziffern. Das gilt auch, wenn der Fokus gar nicht auf dem Spielfeld liegt, und abschalten lässt es sich nicht. WCAG 2.1.4 verlangt für solche Kürzel aus einem einzigen Zeichen, dass man sie abschalten oder umbelegen kann oder dass sie nur bei Fokus wirken. Der Grund: Wer per Sprache diktiert, dessen Worte kommen als Folge von Buchstaben an, und wer leicht danebentippt, löst ungewollt Befehle aus. Dazu scrollen die Pfeiltasten auf diesen Seiten nicht, sie steuern immer das Spiel. Die Spielbücher sind vorsichtiger, aber nicht ganz: Ihre Zifferntasten wirken auch, wenn gar kein Element den Fokus hat.
• Pausensnake. Das Spiel lässt sich starten und neu starten, aber nicht anhalten, und die Schlange läuft in festem Tempo. Für Menschen, die mehr Zeit brauchen, ist das eine Hürde. Die alte Fassung der Erklärung hat das mit WCAG 2.2.2 begründet. Das passt nicht: 2.2.2 betrifft Bewegung, die von selbst startet, und die Schlange läuft erst los, wenn jemand eine Taste oder einen Knopf drückt. Dass Zeit keine wesentliche Rolle spielen darf, verlangt erst 2.2.3 auf Stufe AAA. Die Hürde bleibt trotzdem. Eine Pausefunktion ist geplant, gebaut ist sie noch nicht.
• Spielbücher. Der Player setzt ein eigenes main-Element in eine Seite, die schon eines hat. Screenreader finden dort also zwei Hauptbereiche. Meldungen im Kampf stehen in Statusbereichen, die bei jedem Schritt neu entstehen, und ob sie zuverlässig angesagt werden, ist offen. Bei The Intercept und beim Fortsetzen eines gespeicherten Spiels springt der Fokus schon beim Laden der Seite ins Spiel, an der Einleitung vorbei. Das Quelltextfenster trägt keine Sprachangabe, auch wenn darin eine Datei in der anderen Sprache steht, etwa der deutsche Quelltext auf der englischen Seite. Und die Markierung, die dort der aktuellen Stelle folgt, ist nur sichtbar.
• Akzentfarbe im dunklen Modus. Auf getönten Flächen kommt die Akzentfarbe nur auf 4,0:1, gefordert sind 4,5:1. Das betrifft das Etikett „Neu“ auf den App-Karten und, solange der Mauszeiger darüber steht, die letzte Spalte der Materialtabelle auf der Maker-Seite sowie den Store-Link von App-Karten mit eigener Produktseite. Ohne Mauszeiger sind es dort 4,7:1.
• Alpine Drift. Das Spiel ist von itch.io eingebettet. Wie barrierefrei es ist, liegt nicht in meiner Hand. Daneben steht ein direkter Link zur Originalseite.
• Fremde Inhalte. Blogbeiträge verlinken Studien, PDFs und Videos. Für deren Zustand kann ich nicht einstehen.

Wie eine Erklärung veraltet

Die ersten beiden Spielbücher sind am 11. August erschienen, das vierte am 27. August. In der Erklärung standen sie bis zum 22. September nicht. Deren Satz „keine Formulare“ stimmte schon ab dem ersten Buch nicht mehr, denn jedes hat ein beschriftetes Auswahlfeld für die Quelldatei. Abgeschickt wird damit nichts, ein Formularelement ist es trotzdem. Die Einschränkung zu den Rätselgittern kam am 8. August in die Erklärung, das Prüfdatum blieb beim 26. Juli stehen.

Bei der Überprüfung im September kam mehr zusammen als die Spielbücher: die Tastenkürzel, die Akzentfarbe im dunklen Modus, die falsche Begründung bei Pausensnake. Die Angabe „über 13:1“ für den Fließtext galt nicht auf allen Flächen, jetzt steht dort für Text in der Grundfarbe „mindestens 10,7:1“. Und „weitgehend konform“ ist kein Begriff, den die Mustererklärung kennt. Eine Erklärung beschreibt die Website an einem bestimmten Tag. Jede neue Seite ist ein Anlass, sie wieder aufzumachen.

Was nicht geprüft ist

Die Erklärung beruht auf einer Selbstbewertung vom 18. Juli 2026. Geprüft wurden Quelltext, Stilvorlagen und Skripte gegen die Erfolgskriterien der Stufe AA, dazu die Kontraste rechnerisch. Überprüft wurde die Erklärung am 26. Juli und zuletzt am 22. September 2026, dabei wieder am Code. Eine unabhängige Prüfung von außen hat nicht stattgefunden. Tests mit Screenreadern oder anderen Hilfsmitteln nennt die Erklärung nicht, und dieser Beitrag behauptet auch keine.

Die Erklärung nennt die Seite „teilweise vereinbar“ mit den Anforderungen. Der Begriff stammt aus der Mustererklärung der EU-Kommission, die vollständig, teilweise und nicht vereinbar unterscheidet. Der Code zeigt, ob ein Attribut da ist. Ob sich die Seite mit einem bestimmten Screenreader in einem bestimmten Browser gut bedienen lässt, zeigt er nicht. Das wissen die Menschen, die sie so benutzen.

Wenn etwas nicht geht

Genau dafür steht in der Erklärung zur Barrierefreiheit eine Kontaktadresse. Hilfreich sind die betroffene Seite, die Hürde und gern auch das verwendete Hilfsmittel. Ich antworte in der Regel innerhalb einer Woche. Jede Meldung ist ein Test, den ich allein nicht hätte machen können.

Quellen

• W3C: Web Content Accessibility Guidelines (WCAG) 2.2 - Maßstab dieser Website, Erfolgskriterien 1.3.1, 1.4.3, 2.1.4, 2.2.2, 2.2.3, 2.3.3, 2.4.1, 2.4.7 und 3.1.2 mit ihren Stufen
• W3C: Understanding Success Criterion 2.1.4: Character Key Shortcuts - warum Kürzel aus einem einzigen Zeichen Menschen mit Spracheingabe treffen
• W3C: Understanding Success Criterion 2.2.2: Pause, Stop, Hide - was „startet automatisch“ bedeutet
• Österreichische Forschungsförderungsgesellschaft (FFG), digitalbarrierefrei.at: Mustererklärung zur Barrierefreiheit (deutsch) - Vorlage nach dem Durchführungsbeschluss (EU) 2018/1523 mit den Stufen vollständig, teilweise und nicht vereinbar
• Bundesministerium der Justiz und Bundesamt für Justiz: Barrierefreiheitsstärkungsgesetz (BFSG) - Gesetzestext, Anwendungsbereich in § 1, Begriffsbestimmungen in § 2
• Bundesfachstelle Barrierefreiheit: FAQ zum Barrierefreiheitsstärkungsgesetz (BFSG) - Geltung seit 28. Juni 2025, Einordnung reiner Informations- und Präsentationswebsites
• MDN Web Docs: prefers-reduced-motion - die Systemeinstellung „Bewegung reduzieren“ im CSS
• MDN Web Docs: lang HTML global attribute - Sprachauszeichnung und korrekte Aussprache in Screenreadern
• MDN Web Docs: ARIA: aria-live attribute - wie Statusmeldungen der Spiele vorgelesen werden
• MDN Web Docs: ARIA: grid role - welche Zeilen und Zellen zu einem Element mit role="grid" gehören