Widerrufsbutton und Kündigungsbutton barrierefrei umsetzen

§ 356a BGB gilt für Fernabsatzverträge, die über eine Online-Benutzeroberfläche geschlossen werden, also für den typischen Kauf im Onlineshop. Der Unternehmer muss sicherstellen, dass Verbraucher über eine Widerrufsfunktion eine Widerrufserklärung abgeben können. Die Funktion muss gut lesbar mit „Vertrag widerrufen“ oder einer anderen gleichbedeutenden eindeutigen Formulierung beschriftet sein (§ 356a Abs. 1 BGB). Die Vorschrift setzt die Richtlinie (EU) 2023/2673 um, deren Vorschriften die Mitgliedstaaten ab dem 19. Juni 2026 anwenden und nach der die Funktion während der gesamten Widerrufsfrist durchgehend verfügbar ist (Richtlinie (EU) 2023/2673). Die Widerrufsfrist beträgt 14 Tage (§ 355 Abs. 2 BGB).

Hinter dem Einstieg folgt eine Eingabeseite mit drei Angaben: der Name, Angaben zur Identifizierung des Vertrags oder des betroffenen Vertragsteils und das elektronische Kommunikationsmittel, über das die Eingangsbestätigung ankommen soll (§ 356a Abs. 2 BGB). Abgeschickt wird über eine Bestätigungsfunktion mit der Beschriftung „Widerruf bestätigen“ oder einer gleichbedeutenden eindeutigen Formulierung (§ 356a Abs. 3 BGB). Danach muss der Unternehmer unverzüglich eine Eingangsbestätigung auf einem dauerhaften Datenträger übermitteln, die zumindest den Inhalt der Erklärung sowie Datum und Uhrzeit des Eingangs enthält (§ 356a Abs. 4 BGB).

Für Abonnements und andere Dauerschuldverhältnisse, die über eine Webseite abgeschlossen werden können, gilt daneben § 312k BGB. Die Kündigungsschaltfläche trägt „Verträge hier kündigen“ oder eine entsprechende eindeutige Formulierung und führt unmittelbar zu einer Bestätigungsseite. Dort werden Art der Kündigung, Identifizierung, Vertrag, gewünschter Beendigungszeitpunkt und der Weg für die Kündigungsbestätigung abgefragt; abgeschickt wird über eine Schaltfläche mit „jetzt kündigen“ (§ 312k Abs. 2 BGB). Schaltflächen und Bestätigungsseite müssen ständig verfügbar sowie unmittelbar und leicht zugänglich sein. Webseiten, die Finanzdienstleistungen betreffen, und Verträge über Finanzdienstleistungen nimmt § 312k Abs. 1 BGB ausdrücklich aus.

„Ständig verfügbar“ und „hervorgehoben platziert“ lassen sich visuell schnell abhaken: eine Schaltfläche im Kundenkonto, ein Verweis im Fußbereich. Für Menschen mit Screenreader beginnt die Frage früher. Sie erfassen eine Seite über Überschriften, Landmarken und Linklisten. Eine Widerrufsfunktion, die nur als Symbol ohne Text im Fußbereich sitzt, taucht in keiner dieser Listen mit verständlichem Namen auf. Für Tastaturnutzende muss jede Funktion über die Tastaturschnittstelle bedienbar sein (W3C, WCAG 2.2, SC 2.1.1), und der Fokus muss dabei sichtbar bleiben (W3C, WCAG 2.2, SC 2.4.7). Worauf es bei der Reihenfolge und beim Fokusrahmen ankommt, beschreibt unser Beitrag zur Tastaturnavigation in der Webentwicklung.

Wer mit starker Vergrößerung arbeitet, sieht nur einen Ausschnitt der Seite. Text muss sich ohne Hilfsmittel auf 200 Prozent vergrößern lassen (W3C, WCAG 2.2, SC 1.4.4), und Inhalte müssen bei einer Breite von 320 CSS-Pixeln ohne waagerechtes Scrollen auskommen; das entspricht einer Vergrößerung auf 400 Prozent bei 1280 CSS-Pixeln Ausgangsbreite (W3C, WCAG 2.2, SC 1.4.10). Verschwindet die Widerrufsfunktion dabei in einem eingeklappten Menü, das nur per Mausbewegung aufgeht, ist sie für diese Gruppe weder hervorgehoben noch leicht zugänglich. Ähnlich wirkt ein Einwilligungsbanner, das den Fußbereich überdeckt: Erhält die Schaltfläche den Fokus, darf sie nicht vollständig verdeckt sein (W3C, WCAG 2.2, SC 2.4.11). Wie ein solches Banner gebaut sein muss, steht im Beitrag über barrierefreie Cookie-Banner.

Besonders wichtig ist an dieser Stelle der Name. Bei Bedienelementen mit sichtbarer Beschriftung muss der zugängliche Name den sichtbaren Text enthalten (W3C, WCAG 2.2, SC 2.5.3). Steht auf der Schaltfläche „Vertrag widerrufen“, im Code aber aria-label="Retoure starten", hört eine Screenreader-Nutzerin etwas anderes, als ihr sehender Kollege liest, und der Sprachbefehl „Vertrag widerrufen klicken“ läuft ins Leere. Rund 9 Prozent der Schaltflächen auf Desktop-Seiten und 11 Prozent auf Mobilseiten haben überhaupt keinen zugänglichen Namen (Web Almanac, 2025); leere Schaltflächen finden sich auf 30,6 Prozent der Startseiten (WebAIM Million, 2026). Ein Symbolknopf mit Pfeil oder Paketsymbol reiht sich schnell in diese Statistik ein.

Die Bestätigungsfunktion ist der Moment, in dem der Widerruf abgegeben wird. Gibt es an dieser Stelle einen Eingabefehler, muss das betroffene Feld benannt und der Fehler in Text beschrieben werden (W3C, WCAG 2.2, SC 3.3.1). Ein roter Rahmen allein erreicht weder Menschen mit Farbsehschwäche noch Screenreader-Nutzende. Bewährt hat sich eine Fehlerzusammenfassung am Formularanfang, die den Fokus erhält und auf die einzelnen Felder verweist, dazu eine Meldung direkt am Feld, die über aria-describedby angebunden ist. Ebenso wichtig ist, was nicht passieren darf: Bereits eingegebene Daten gehen bei einem Fehler nicht verloren, und die Seite lädt nicht mit leerem Formular neu.

Nach erfolgreichem Absenden braucht die Person eine eindeutige Rückmeldung. Statusmeldungen müssen so ausgezeichnet sein, dass Hilfsmittel sie ausgeben können, ohne dass sie den Fokus erhalten (W3C, WCAG 2.2, SC 4.1.3). In der Praxis gibt es zwei saubere Wege: Entweder lädt eine neue Seite, deren Titel und Hauptüberschrift „Widerruf eingegangen“ lauten und deren Überschrift den Fokus erhält, oder die Meldung erscheint auf derselben Seite in einem Bereich mit role="status". Nur etwa 33 Prozent der Websites setzen das Attribut aria-live überhaupt ein (Web Almanac, 2025). Eine Bestätigungsseite ohne Fokus und ohne Ansage ist ein typisches Muster, mit dem eine sonst ordentliche Strecke am letzten Schritt scheitert: Die Person hört nichts, drückt erneut und weiß danach nicht, ob sie zweimal widerrufen hat.

Die Eingangsbestätigung muss den Inhalt der Erklärung sowie Datum und Uhrzeit des Eingangs enthalten (§ 356a Abs. 4 BGB). Die Statusmeldung auf der Seite sollte dieselben Angaben nennen, damit niemand auf die E-Mail warten muss, um zu wissen, was eingegangen ist. Wie Live-Regionen robust angelegt werden, ohne doppelte Ansagen zu erzeugen, beschreibt der Beitrag zu barrierefreien Fehler- und Statusmeldungen. In Single-Page-Anwendungen, in denen die Bestätigung ohne Seitenwechsel erscheint, kommt das Fokus-Management in Single-Page-Apps hinzu. Das folgende Gerüst zeigt die Eingabeseite mit Einstieg, Labels, Fehlerzusammenfassung und Statusbereich.

Für Abonnements gilt die Prüfliste sinngemäß, nur mit anderen Beschriftungen. Die Kündigungsschaltfläche trägt „Verträge hier kündigen“ oder eine entsprechende eindeutige Formulierung, die Bestätigungsschaltfläche „jetzt kündigen“ (§ 312k Abs. 2 BGB). Beide Texte gehören auch in den zugänglichen Namen. Ein Knopf „Mitgliedschaft verwalten“, der erst in ein Menü mit Halteangeboten führt, erfüllt weder die Beschriftung noch das Gebot, unmittelbar zur Bestätigungsseite zu führen. Die Bestätigungsseite fragt mehr ab als der Widerruf, darunter die Art der Kündigung, den Beendigungszeitpunkt und den Weg für die Kündigungsbestätigung (§ 312k Abs. 2 BGB). Daraus werden schnell Optionsfelder und ein Datumsfeld, und beide brauchen eine saubere Auszeichnung: Optionsfelder in einer Gruppe mit fieldset und legend, das Datumsfeld mit sichtbarer Formatangabe.

Die Option „zum nächstmöglichen Zeitpunkt“ sollte als klar beschriftete erste Wahl angeboten werden, denn ohne Zeitangabe wirkt die Kündigung im Zweifel ohnehin zum frühestmöglichen Zeitpunkt (§ 312k Abs. 5 BGB). Das erspart Menschen, die ein Datumsfeld nur mühsam bedienen können, einen der schwierigsten Schritte. Wer trotzdem eine Kalenderauswahl anbietet, muss sie vollständig per Tastatur bedienbar machen und die gewählte Angabe ansagen; wie das gelingt, zeigt der Beitrag zur barrierefreien Terminbuchung mit Kalender-Widget.

Automatische Regeln allein finden fehlende Labels und leere Schaltflächen, aber nicht, ob eine Statusmeldung als solche ausgezeichnet ist oder ob der Widerruf bei 400 Prozent Vergrößerung noch auffindbar ist. Wir prüfen die Strecke deshalb Schritt für Schritt im Browser: mit automatischen Regeln und eigenen Messungen für Kontrast, Zielgrößen, Fokus, Textabstände und den Umbruch bei 320 CSS-Pixeln, in der Desktop- und der Smartphone-Darstellung und auch in geöffneten Zuständen wie Fehlerzusammenfassung und Bestätigung. Jeder Schritt wird mit der Tastatur ohne Maus durchlaufen, und an der Ausgabe für Screenreader prüfen wir, ob Namen, Rollen, Zustände und Statusmeldungen so ausgezeichnet sind, dass Screenreader sie ansagen können. Was die Prüfung der Ausgabe für Screenreader umfasst, beschreiben wir auf einer eigenen Seite. Die Ergebnisse landen im WCAG-Audit als eigener Prüfabschnitt mit einer Bewertung je Kriterium und Befunden je Schritt.

Wie weit die Praxis von diesem Anspruch entfernt ist, zeigen zwei Zahlen. Im Test der Aktion Mensch waren nur 20 von 65 untersuchten Shopping-Seiten allein mit der Tastatur bedienbar (Aktion Mensch, 2025). Und 67 Prozent der Websites entfernen ausdrücklich den Standard-Fokusrahmen (Web Almanac, 2025). Eine Widerrufsstrecke, die im selben Designsystem entsteht, erbt diese Schwächen, wenn niemand gezielt nachmisst.

Der Aufwand bleibt überschaubar, weil die Strecke kurz ist: ein Einstieg, ein Formular mit drei Feldern, eine Bestätigung, eine E-Mail. Wer sie einmal sauber baut, setzt die Vorgaben aus dem BGB so um, dass sie auch für Menschen mit Behinderung tragen, und schließt eine Lücke zwischen Checkout und Kundenkonto, die sonst leicht unbeobachtet bleibt. Die angrenzenden Stellen im Shop behandeln die Beiträge zur Kundschaft ab 65 im Onlineshop und zur barrierefreien Produktseite mit Varianten und Warenkorb.