/ Webanwendungen

Barrierefreie Webanwendungen und Kundenportale: WCAG 2.1 AA auf Komponentenebene

Wahrscheinlich haben Sie schon fünf Seiten über Alt-Texte, Kontrastwerte und Überschriftenhierarchie gelesen. Für eine Broschürenseite ist das die richtige Ebene. In einer Anwendung brechen die Kriterien woanders — an der Datentabelle, am Dialog, am mehrstufigen Formular, am erzeugten PDF. Diese Seite geht die zwölf Komponenten durch, aus denen Ihre Anwendung wirklich besteht.

Warum die üblichen Checklisten hier nicht weiterhelfen

Nehmen Sie eine beliebige BFSG-Checkliste und gehen Sie damit durch ein Kundenportal. Sie werden feststellen: Die Alt-Texte sind in Ordnung, weil es kaum Bilder gibt. Die Kontraste stimmen, weil das Design aus einem System kommt. Die Überschriftenhierarchie ist sauber, weil ein Framework sie erzeugt. Und trotzdem kann eine blinde Sachbearbeiterin in dieser Anwendung nicht arbeiten.

Der Grund ist, dass Anwendungen aus anderen Bausteinen bestehen als Websites. Eine Website zeigt Inhalte. Eine Anwendung führt Vorgänge — und ein Vorgang hat einen Zustand, der sich ändert, ohne dass die Seite neu lädt. Genau an dieser Stelle greifen Erfolgskriterien, die auf einer Broschürenseite nie auffallen: Statusmeldungen, Fokus-Reihenfolge, Name, Rolle und Wert von Bedienelementen, die es in HTML gar nicht gibt.

Die Faustregel, an der man das misst: Legen Sie die Maus weg und bearbeiten Sie einen vollständigen Vorgang mit der Tastatur. Wenn Sie dabei einmal nicht wissen, wo Sie gerade sind, ist die Anwendung nicht konform — unabhängig davon, was ein Prüfwerkzeug meldet.

Die offene Rechtsfrage, gleich zu Anfang

Eine Sache, die selten früh genug gesagt wird: Ob und in welchem Umfang der Bereich hinter einer Anmeldung erfasst ist, hängt daran, ob er zur erfassten Dienstleistung gehört. Bei einem Onlineshop mit Kundenkonto ist die Sache klar — das Konto ist Teil des elektronischen Geschäftsverkehrs. Bei einer reinen Verwaltungsoberfläche für die eigene Belegschaft ist sie es nicht. Dazwischen liegen die meisten Portale, und dazwischen gibt es keine gerichtliche Klärung.

Unsere praktische Empfehlung ohne Rechtsberatungsanspruch: Behandeln Sie alles, worauf Ihre Kunden zugreifen, als erfasst. Nicht wegen des Gesetzes, sondern weil es dieselben zwölf Muster sind — und weil die interne Nutzung derselben Anwendung durch Mitarbeitende mit Behinderung ohnehin unter das Behindertengleichstellungsrecht und das Arbeitsrecht fällt.

Der Komponenten-Katalog

Zwölf Komponenten, je mit dem Erfolgskriterium, das an ihr bricht, mit dem, was ein Screenreader stattdessen sagt, und mit dem Muster, das es löst. Die mittlere Spalte ist die, die Diskussionen beendet: Sie beschreibt keinen Verstoß, sondern einen Vorgang, den jeder nachvollziehen kann.

Haken Sie an, was in Ihrer Anwendung vorkommt, und nehmen Sie die Auswahl als Ticketliste mit. Das ist ausdrücklich so gedacht — auch dann, wenn ein anderes Team sie abarbeitet.

Zwölf Komponenten, zwölf Tickets.

0 von 12 ausgewählt

Haken Sie an, was in Ihrer Anwendung vorkommt, und nehmen Sie die Liste als Tickets mit — nach Jira, Linear oder in eine Tabelle. Nichts wird gesendet, nichts gespeichert, keine E-Mail-Adresse nötig.

  • Auftragsliste, Rechnungsübersicht, Objektliste — die Startseite fast jeder Anwendung

    • 1.3.1 Info und Beziehungen · A
    • 4.1.2 Name, Rolle, Wert · A
    • Aufwand: ein bis drei Personentage
    Was heute passiert — und was es löst

    Screenreader: „Tabelle, 12 Spalten, 400 Zeilen.“ Beim Sprung in Zelle 7 der Zeile 118 fehlt die Spaltenüberschrift — der Wert „14.203“ steht ohne die Information, dass es sich um einen Betrag handelt. Der Sortierknopf wird als „Schaltfläche Kunde“ angesagt; ob nach Kunde gerade auf- oder absteigend sortiert ist, sagt niemand.

    Lösungsmuster: Kopfzellen als th mit scope, Sortierzustand über aria-sort am th selbst statt am Knopf, und nach dem Sortieren eine Meldung in einer Live-Region: „Nach Kunde aufsteigend sortiert, 400 Zeilen.“ Bei Tabellen über zwei Bildschirmbreiten zusätzlich eine Kurzfassung mit den vier Spalten, die tatsächlich gebraucht werden.

    Als Ticket: Datentabelle: th/scope setzen, aria-sort am Kopf pflegen, Sortierergebnis über Live-Region ansagen

  • Bestätigung vor dem Löschen, Detailansicht, Formular im Overlay

    • 2.4.3 Fokus-Reihenfolge · A
    • 2.1.2 Keine Tastaturfalle · A
    • Aufwand: unter einem Personentag
    Was heute passiert — und was es löst

    Screenreader: Der Dialog erscheint optisch, der Fokus bleibt aber auf der Seite dahinter stehen. Der Screenreader liest weiter den Text unter dem Overlay vor — man hört eine Seite, die man nicht mehr bedienen kann, und findet den Dialog nur, wenn man zufällig weit genug tabbt.

    Lösungsmuster: Das native dialog-Element mit showModal(). Es bringt Fokusfang, das Stilllegen des Hintergrunds und das Schließen mit Escape von sich aus mit — drei Dinge, an denen handgebaute Overlays regelmäßig scheitern. Fokus beim Öffnen auf die Dialogüberschrift, beim Schließen zurück auf den auslösenden Knopf.

    Als Ticket: Overlays auf natives dialog + showModal() umstellen, Fokusrückgabe an den Auslöser sicherstellen

  • Antrag, Bestellstrecke, Onboarding, Schadensmeldung

    • 3.3.1 Fehlererkennung · A
    • 4.1.3 Statusmeldungen · AA
    • Aufwand: ein bis drei Personentage
    Was heute passiert — und was es löst

    Screenreader: Nach „Weiter“ wechselt der Inhalt, der Fokus steht aber weiter auf dem Knopf am Seitenende. Man hört nichts und muss raten, ob der Schritt geklappt hat. Bei einem Fehler erscheint oben „3 Felder fehlen“ — außerhalb des Sichtfelds und ohne Ansage.

    Lösungsmuster: Nach jedem Schrittwechsel den Fokus auf die Überschrift des neuen Schritts setzen, die per tabIndex ansteuerbar ist. Fehlerzusammenfassung als role=alert mit Sprungmarken auf die betroffenen Felder. Der Fortschritt gehört als Text in die Überschrift — „Schritt 3 von 5“ — und nicht nur in einen Balken.

    Als Ticket: Wizard: Fokus nach Schrittwechsel auf die Schrittüberschrift, Fehlerzusammenfassung als role=alert mit Feldsprüngen

  • Belege, Fotos, Anlagen zum Vorgang

    • 2.1.1 Tastatur · A
    • 4.1.3 Statusmeldungen · AA
    • Aufwand: unter einem Personentag
    Was heute passiert — und was es löst

    Screenreader: Die Ablagefläche ist ein div mit Mausereignissen und taucht in der Tabulatorreihenfolge gar nicht auf — mit der Tastatur gibt es keinen Weg zum Hochladen. Läuft der Upload doch, zeigt ein Balken den Fortschritt; angesagt wird weder der Verlauf noch, dass die Datei angekommen ist.

    Lösungsmuster: Das input vom Typ file bleibt das eigentliche Bedienelement und wird nur visuell ersetzt, nicht entfernt. Drag-and-drop ist die zusätzliche, nie die einzige Möglichkeit. Ergebnis in einer höflichen Live-Region: „angebot.pdf, 2,4 MB, hochgeladen“ — und im Fehlerfall der Grund, nicht nur ein rotes Feld.

    Als Ticket: Upload: file-input als Bedienelement erhalten, Ablagefläche als Zusatz, Ergebnis in Live-Region ansagen

  • Terminbuchung, Zeitraumfilter, Fälligkeiten

    • 2.1.1 Tastatur · A
    • 1.3.1 Info und Beziehungen · A
    • 2.4.7 Fokus sichtbar · AA
    • Aufwand: mehr als drei Personentage
    Was heute passiert — und was es löst

    Screenreader: Das Kalendergitter besteht aus div-Elementen. Beim Lauf mit den Pfeiltasten wird „15“ gesagt — ohne Wochentag, ohne Monat, ohne Jahr. Welcher Tag gewählt ist, erkennt man nur an einer Hintergrundfarbe, und der Fokusring ist beim Umbau der Oberfläche wegoptimiert worden.

    Lösungsmuster: Ein Texteingabefeld, in das man das Datum direkt tippen darf, bleibt immer erhalten — es ist für viele der schnellere Weg und für manche der einzige. Das Gitter darüber als role=grid mit aria-selected, jede Zelle mit vollständigem Namen: „Dienstag, 15. September 2026“. Ein Fokusring, der sich mit mindestens 3:1 von seiner Umgebung abhebt.

    Als Ticket: Datumsauswahl: Texteingabe erhalten, Gitter als role=grid mit vollständigen Zellnamen, Fokusring wiederherstellen

  • Kundensuche, Artikelsuche, Adressvervollständigung

    • 4.1.2 Name, Rolle, Wert · A
    • 4.1.3 Statusmeldungen · AA
    • Aufwand: ein bis drei Personentage
    Was heute passiert — und was es löst

    Screenreader: Man tippt drei Buchstaben, unter dem Feld erscheint eine Liste — akustisch passiert nichts. Wie viele Vorschläge es gibt, bleibt offen; welcher gerade hervorgehoben ist, ebenfalls. Escape schließt die Liste nicht, sondern leert das Feld.

    Lösungsmuster: role=combobox mit aria-expanded und aria-controls am Feld, der hervorgehobene Eintrag über aria-activedescendant. Trefferzahl in einer höflichen Live-Region: „7 Vorschläge“. Escape schließt die Liste und lässt den eingegebenen Text stehen — das Feld zu leeren ist eine eigene Handlung.

    Als Ticket: Suchfeld: combobox-Rollen und aria-activedescendant ergänzen, Trefferzahl ansagen, Escape-Verhalten korrigieren

  • „Gespeichert“, „Auftrag angelegt“, „Fehler beim Senden“

    • 4.1.3 Statusmeldungen · AA
    • 2.2.1 Zeiteinteilung anpassbar · A
    • Aufwand: unter einem Personentag
    Was heute passiert — und was es löst

    Screenreader: Der Hinweis blendet sich nach vier Sekunden wieder aus. Wer ihn nicht sieht, erfährt nie, dass gespeichert wurde — und im schlimmeren Fall nicht, dass es fehlgeschlagen ist. Vier Sekunden reichen auch für Sehende nicht, die gerade auf die Tastatur schauen.

    Lösungsmuster: Erfolg als role=status, Fehler als role=alert. Fehlermeldungen blenden sich überhaupt nicht selbst aus, sondern werden geschlossen. Erfolgsmeldungen bleiben lange genug stehen, um gelesen zu werden, und tragen einen Schließen-Knopf mit richtigem Namen statt eines nackten Kreuzes.

    Als Ticket: Kurzmeldungen: role=status/alert trennen, Fehler nicht automatisch ausblenden, Schließen-Knopf benennen

  • Auswertung, Dashboard, Monatsbericht

    • 1.1.1 Nicht-Text-Inhalt · A
    • 1.4.1 Benutzung von Farbe · A
    • 1.4.11 Nicht-Text-Kontrast · AA
    • Aufwand: ein bis drei Personentage
    Was heute passiert — und was es löst

    Screenreader: „Grafik.“ Mehr kommt nicht. Die drei Linien unterscheiden sich ausschließlich in der Farbe; wer Rot und Grün nicht trennen kann, sieht zwei identische Kurven. Die Achsenbeschriftung liegt bei 2,4:1 gegen den Hintergrund.

    Lösungsmuster: Dieselben Zahlen zusätzlich als Tabelle, aufklappbar unter dem Diagramm — nicht versteckt, sondern als zweite Lesart angeboten. Linien zusätzlich über Strichart oder eine Beschriftung am Endpunkt unterscheidbar machen. Achsen, Gitter und Linien auf mindestens 3:1 gegen ihren Hintergrund bringen.

    Als Ticket: Diagramme: Datentabelle als zweite Lesart ergänzen, Serien nicht nur farblich trennen, Kontrast auf 3:1 heben

  • Jede Anwendung mit Login — besonders dort, wo Formulare lang sind

    • 2.2.1 Zeiteinteilung anpassbar · A
    • Aufwand: unter einem Personentag
    Was heute passiert — und was es löst

    Screenreader: Nach zwanzig Minuten ist die Sitzung beendet und das halb ausgefüllte Formular mit ihr. Wer mit Screenreader, Vergrößerung oder Sprachsteuerung arbeitet, braucht für dieselbe Strecke ein Mehrfaches der Zeit — die Frist trifft genau die Gruppe am härtesten, für die das Gesetz gemacht ist.

    Lösungsmuster: Spätestens zwanzig Sekunden vor Ablauf warnen und mit einer einfachen Handlung um mindestens das Zehnfache verlängern lassen. Eingaben überstehen die Verlängerung. Die Ausnahme für Sicherheitsanforderungen greift nur, wenn die Frist wirklich sicherheitsbedingt ist — „das war schon immer so“ zählt nicht dazu.

    Als Ticket: Session-Timeout: Vorwarnung mit Verlängerung ergänzen, Formulareingaben über die Verlängerung retten

  • Rechnung, Bescheid, Vertrag, Export aus der Anwendung

    • 1.3.1 Info und Beziehungen · A
    • 1.3.2 Bedeutungstragende Reihenfolge · A
    • Aufwand: mehr als drei Personentage
    Was heute passiert — und was es löst

    Screenreader: Die Rechnung wird spaltenweise quer gelesen. Positionsnummer, Bezeichnung und Betrag landen in einer Zeile, die es auf dem Papier nie gab — das Ergebnis ist nicht schwer lesbar, sondern inhaltlich falsch. Bei mehrseitigen Dokumenten wiederholt sich der Kopf mitten im Satz.

    Lösungsmuster: Getaggtes PDF direkt aus dem Generator, mit echter Lesereihenfolge, ausgezeichneter Tabellenstruktur und gesetzter Dokumentsprache. Nachträgliche Reparatur mit einem Prüfwerkzeug hält genau bis zum nächsten Rechnungslauf. Dies ist die teuerste Position dieser Liste — und die, die in Angeboten am häufigsten fehlt.

    Als Ticket: PDF-Generator auf getaggte Ausgabe umstellen: Lesereihenfolge, Tabellenstruktur, Dokumentsprache

  • Die eine Seite, an der alle vorbeimüssen

    • 3.3.2 Beschriftungen oder Anweisungen · A
    • 1.3.5 Eingabezweck bestimmen · AA
    • Aufwand: unter einem Personentag
    Was heute passiert — und was es löst

    Screenreader: Das Feld heißt „E-Mail“, trägt aber kein autocomplete — der Passwortmanager füllt nichts aus, und wer sein Passwort nicht tippen kann, kommt nicht hinein. Nach dem Fehlversuch steht „Anmeldung fehlgeschlagen“ rot über dem Formular, ohne Verbindung zu einem Feld und ohne Ansage.

    Lösungsmuster: autocomplete auf username und current-password, Beschriftung fest mit dem Feld verbunden, Fehler über aria-describedby am Feld und zusätzlich in einer Zusammenfassung. Das Einfügen aus der Zwischenablage nicht unterbinden: Es ist keine Sicherheitsmaßnahme, sondern eine Barriere.

    Als Ticket: Login: autocomplete-Werte setzen, Fehler mit dem Feld verknüpfen, Einfügeverbot im Passwortfeld entfernen

  • Suchergebnisse, Artikelübersicht, Aktenrecherche

    • 4.1.3 Statusmeldungen · AA
    • 2.4.3 Fokus-Reihenfolge · A
    • Aufwand: unter einem Personentag
    Was heute passiert — und was es löst

    Screenreader: Ein Filter wird gesetzt, die Liste darunter tauscht sich aus — akustisch passiert nichts. Ob es jetzt drei Ergebnisse sind oder dreihundert, bleibt offen. Gesetzte Filter lassen sich nur über ein Kreuz entfernen, das als „Schaltfläche“ angesagt wird.

    Lösungsmuster: Trefferzahl nach jeder Änderung in eine höfliche Live-Region: „14 Ergebnisse“. Der Fokus bleibt beim Filter, springt also nicht in die Liste. Jeder gesetzte Filter bekommt einen Entfernen-Knopf mit vollständigem Namen: „Filter Farbe: rot entfernen“.

    Als Ticket: Filterleiste: Trefferzahl über Live-Region ansagen, Entfernen-Knöpfe vollständig benennen

Sobald Sie mindestens eine Komponente angehakt haben, können Sie die Liste hier als Tickets mitnehmen.

In welcher Reihenfolge man das abarbeitet

Nicht alphabetisch und nicht nach Aufwand, sondern nach Hebel. Drei Gruppen, und die erste ist die, die in Angeboten am häufigsten fehlt.

  1. Alles, was aus einer gemeinsamen Bibliothek kommt. Dialog, Kurzmeldung, Formularfeld, Upload — wenn diese Elemente an einer Stelle definiert sind, wirkt jede Korrektur überall gleichzeitig. Das ist der einzige Teil der Arbeit, der sich vervielfacht.
  2. Die Abläufe mit Außenwirkung. Anmeldung, Antragstrecke, Bestellung, alles, wo jemand etwas abschließt. Hier ist der Schaden am größten, wenn es nicht geht — und hier schaut eine Prüfstelle zuerst hin.
  3. Die Ausgabedokumente. Rechnungen, Bescheide, Exporte. Sie werden regelmäßig übersehen, weil sie außerhalb der Anwendung liegen, und sie sind die teuerste Position, weil der Generator angefasst werden muss statt einer Vorlage.

Was in dieser Reihenfolge auffällt: Die Einzelseite kommt nirgends vor. Das ist Absicht. Wer eine Anwendung Seite für Seite abarbeitet, wird nie fertig, weil jede neue Maske dieselben Fehler wieder mitbringt. Wer die Bibliothek in Ordnung bringt, hat den Großteil der Arbeit ein einziges Mal.

Wann ein Audit Geldverschwendung ist

Ein Prüfbericht kostet je nach Umfang einen vier- bis fünfstelligen Betrag. Ob sich das lohnt, hängt vom Zeitpunkt ab, und die übliche Reihenfolge ist die falsche.

Ihr StandAudit jetzt?Warum
Nichts geprüft, keine der zwölf Komponenten angefasstNeinDer Bericht wird dieselben zwölf Muster in dreihundert Ausprägungen auflisten. Sie zahlen dafür, dass Ihnen jemand dreihundertmal dasselbe sagt.
Bibliothek überarbeitet, Hauptabläufe mit Tastatur durchlaufenJaJetzt findet ein Bericht das, was eigene Durchläufe nicht finden — und dokumentiert belastbar den erreichten Stand.
Ausschreibung oder Lieferantenfragebogen verlangt einen NachweisJa, unabhängig vom StandHier ist der Bericht selbst die Lieferung. Dann sollte man allerdings wissen, dass er Mängel enthalten wird, und das vorher einplanen.
Wann ein externer Prüfbericht sein Geld wert ist

Wer baut, sollte nicht prüfen. Wir dokumentieren, was wir umgesetzt haben, und sagen, was offen ist — für eine unabhängige Prüfung gibt es Stellen, die nichts anderes tun. Ein Anbieter, der Ihnen Umsetzung und Testat aus einer Hand verkauft, hat ein Interesse am Ergebnis.

Wie wir daran arbeiten

Am Anfang steht kein Angebot, sondern eine Sichtung: ein Tag, in dem wir mit Tastatur und Screenreader durch Ihre Hauptabläufe gehen und aufschreiben, welche der zwölf Muster betroffen sind und wie oft. Danach steht die Aufwandsspanne, und zwar nach oben und unten begründet — an dieser Stelle entscheidet sich, ob eine Nachrüstung überschaubar ist oder ob Teile der Oberfläche neu entstehen müssen.

Danach wird nicht seitenweise, sondern musterweise gearbeitet: erst die gemeinsame Bibliothek, dann die Abläufe, dann die Ausgabedokumente. Jede Änderung kommt mit einem Testfall, der beschreibt, was mit der Tastatur möglich sein muss — sonst ist der nächste Umbau der nächste Rückfall.

Was wir nicht tun: Overlays einbauen, Konformität testieren oder Ihnen einen Zustand als „vollständig barrierefrei“ bescheinigen. Der erste Punkt hilft nicht, der zweite steht uns nicht zu, und der dritte ist bei einer laufend weiterentwickelten Anwendung ohnehin nur eine Momentaufnahme.

Und wenn die Anwendung neu entsteht

Dann ist es ein überschaubarer Posten statt einer Nachrüstung. Der Glanz-K-Shop ist nach WCAG 2.1 AA umgesetzt worden und nicht nachgerüstet; der Unterschied liegt nicht im Ergebnis, sondern im Aufwand — und darin, dass niemand hinterher entscheiden musste, welche der bestehenden Masken man dafür wegwirft.

Häufige Fragen

Zählt der Bereich hinter dem Login überhaupt mit?

Er zählt mit, soweit er zur erfassten Dienstleistung gehört — beim Kundenkonto eines Onlineshops eindeutig, bei einer reinen internen Verwaltungsoberfläche eindeutig nicht. Für die Portale dazwischen gibt es keine gerichtliche Klärung. Praktisch spielt das eine kleinere Rolle, als es klingt: Es sind dieselben zwölf Muster, und wer sie einmal in der Bibliothek behebt, behebt sie überall.

Reicht es, wenn ein Prüfwerkzeug keine Fehler mehr meldet?

Nein. Automatische Prüfwerkzeuge finden nach gängigen Untersuchungen nur einen Teil der Verstöße, und es ist der Teil, der ohnehin leicht zu beheben ist. Fokus-Reihenfolge, Statusmeldungen, sinnvolle Namen für Bedienelemente und die Frage, ob ein Ablauf mit der Tastatur überhaupt zu Ende geht, prüft kein Werkzeug — das prüft ein Mensch mit einem Screenreader.

Wir haben ein Framework mit barrierefreien Komponenten eingesetzt. Reicht das?

Es ist die beste Ausgangslage, die es gibt, und es reicht trotzdem nicht allein. Die Bausteine sind dann in Ordnung; was sie nicht wissen können, ist die Reihenfolge, in der Ihr Ablauf sie zusammensetzt, und was nach dem Absenden angesagt werden muss. Erfahrungsgemäß sind mit einem guten Framework die Hälfte der zwölf Punkte erledigt.

Was ist mit den PDF-Dokumenten, die unser System erzeugt?

Sie gehören dazu, und sie sind die teuerste Position dieser Liste. Ein Screenreader liest eine nicht getaggte Rechnung spaltenweise quer, wodurch Beträge in Zeilen landen, die es nie gab — das Ergebnis ist nicht schwer lesbar, sondern inhaltlich falsch. Reparaturwerkzeuge helfen für einzelne Dokumente; bei einem monatlichen Rechnungslauf muss der Generator getaggt ausgeben.

Können Sie an einer Anwendung arbeiten, die wir nicht bei Ihnen gebaut haben?

Ja, das ist sogar der häufigere Fall. Vorausgesetzt ist Zugang zum Quellcode und eine Umgebung, in der sich Änderungen testen lassen. Wenn beides nicht verfügbar ist, weil der ursprüngliche Anbieter darauf sitzt, ist das ein anderes Problem als Barrierefreiheit — und eines, das Sie unabhängig davon lösen sollten.

Wie es weitergeht

45 Minuten mit dem Geschäftsführer. Kostenlos.

Sie beschreiben Ihren Prozess. Wir sagen Ihnen ehrlich, ob sich eine Eigenentwicklung für Sie rechnet — und wenn nicht, welches Standardprodukt besser passt. Danach bekommen Sie eine Einschätzung zu Aufwand und Kosten. Keine Präsentation, kein Verkaufsgespräch.

Termin vereinbaren