Barrierefreiheit

    Hier erfährst du, welche Funktionen für Barrierefreiheit (auch Accessibility oder Zugänglichkeit genannt) in den twingle-Spendenformularen enthalten sind, wie du das barrierefreie Design im twingleMANAGER einstellst und worauf du bei der Einbindung und bei eigenen Farben achten kannst. Darunter findest du die Erklärung von twingle zur Barrierefreiheit.

    Die twingle GmbH verpflichtet sich, ihre digitalen Angebote barrierefrei zu gestalten und allen Menschen – unabhängig von ihren individuellen Fähigkeiten – einen gleichberechtigten Zugang zu ermöglichen. Diese Erklärung erläutert, wie uns dies bei unseren Online-Spendenformularen, den automatisierten Bestätigungsmails nach einer Spende und den daran angehängten PDF-Spendenurkunden sowie Dankesschreiben gelingt und wo noch Verbesserungen geplant sind.

    Stand: 07.07.2025

    Rechtlicher Rahmen

    Unsere Barrierefreiheitsmaßnahmen basieren auf dem

    • Gesetz zur Umsetzung der Richtlinie (EU) 2019/882 über die Barrierefreiheitsanforderungen für Produkte und Dienstleistungen (Barrierefreiheitsstärkungs­gesetz – BFSG), erlassen am 16. Juli 2021, das am 28. Juni 2025 in Kraft tritt de.wikipedia.org.

    • WCAG 2.1 Level AA als zugrunde liegender technischer Standard zur Evaluierung und Umsetzung digitaler Barrierefreiheit.

    Geltungsbereich

    Diese Erklärung gilt für

    • unsere Online-Spendenformulare (Spendenwidget, Spendenshop, Spendenurkunden, Mitgliedschaftswidget, Anlasspenden),

    • die automatisierten Bestätigungsmails nach einem Spendenvorgang,

    • die an diese Mails angehängten PDF-Dokumente (Spendenurkunden, Dankesschreiben).

    Neues und altes Design

    Für die Spendenformulare gibt es zwei Design-Varianten. Das neue Design ist barrierefrei und gilt für alle Projekte, bei denen es nicht abgeschaltet wurde. Das frühere Design ist nicht barrierefrei. Du kannst die Variante je Projekt selbst wechseln: Logge dich im twingleMANAGER ein und öffne Projekteinstellungen / Darstellung / Weitere Optionen. Ist dort "Altes Design verwenden (nicht barrierefrei)" aktiviert, wird das frühere Design ausgespielt. Deaktiviere die Option, um das neue Design zu verwenden.

    Hinweise:

    Technische Maßnahmen

    Zur Einhaltung der WCAG 2.1 AA haben wir umgesetzt:

    • Tastaturbedienbarkeit aller Formularfelder und Navigationselemente

    • Screenreader-Support durch semantische HTML-Elemente und ARIA-Attribute

    • Responsive Design für unterschiedliche Endgeräte

    • ARIA-Attribute, wo notwendig, zur Verbesserung der Zugänglichkeit

    • PDF-Tags und strukturierte Lesereihenfolge in Spendenurkunden und Dankesschreiben

    • Barrierefreie Formularelemente mit klaren Labels und Fokus-Indikatoren

    • Farbkontraste nach WCAG-Mindestanforderung (diese können jedoch von Kundenseite individuell angepasst werden und dadurch in Einzelfällen unzureichend ausfallen)

    • Die Formularfelder haben sichtbare Beschriftungen (Labels). Fehlermeldungen erscheinen als Text am jeweiligen Feld und sind mit dem Feld verknüpft.

    • Der Schieberegler für den Betrag hat eine Beschriftung und gibt den gewählten Betrag samt Währung für Screenreader aus.

    • Info-Symbole (zum Beispiel neben Feldern) sind per Tastatur mit Enter oder Leertaste zu öffnen und melden ihren Zustand (auf- oder zugeklappt).

    • Statusmeldungen, zum Beispiel bei Fehlern oder beim Absenden, werden von Screenreadern automatisch vorgelesen.

    • Die Sprache der Seite (lang) wird passend zur gewählten Sprache des Formulars gesetzt.

    • Dekorative Bilder sind für Screenreader ausgeblendet.

    Einbindung mit Iframe-Titel

    Der Code, den du im twingleMANAGER kopierst, setzt am Iframe automatisch einen title, der für Screenreader den Inhalt beschreibt (Standardtext: "Formular zum Spenden", in der Sprache des Projekts). Logge dich im twingleMANAGER ein und öffne Projekteinstellungen / Kontaktdaten & Einbindung, um das Code-Snippet zu kopieren.

    • Code-Snippet (JavaScript): Der Titel wird automatisch gesetzt, du musst nichts ergänzen.

    • Variante "Optimiert für Homepagebaukästen" (iframe): Der Titel steht bereits im kopierten iframe-Code.

    • Eigener oder älterer iframe-Code: Ergänze im iframe-Tag ein title-Attribut, zum Beispiel title="Formular zum Spenden", oder kopiere den aktuellen Code neu aus dem twingleMANAGER.

    Hinweise:

    Farben, Kontraste und Schrift anpassen

    Die Farben des Formulars berechnet der twingleMANAGER zum größten Teil automatisch, um einen hohen Kontrast zu erreichen. Wenn du eigene Werte einträgst, zeigt dir der twingleMANAGER eine Warnung an, sobald eine Farbkombination einen zu geringen Kontrast hat (Ziel ist ein Kontrastverhältnis von mindestens 4,5:1). Logge dich im twingleMANAGER ein und öffne Einstellungen / Design / Farben für alle Projekte oder Projekteinstellungen / Darstellung / Farben für ein einzelnes Projekt.

    • Text und Label: Passe die Farben "Text" und "Label" an, wenn Schrift und Beschriftungen zu schwach wirken, zum Beispiel dünne Schrift in einer hellen Farbe.

    • Schriftart: Die Schriftart lässt sich nicht im twingleMANAGER einstellen. Dafür kannst du eine eigene CSS-Datei hinterlegen, siehe Projekteinstellungen / Darstellung / Weitere Optionen, Feld "Eigene CSS-Datei (URL)".

    Hinweise:

    • Die Vorschau im twingleMANAGER zeigt nur typische Elemente und keine Wirkung einer eigenen CSS-Datei. Prüfe das Ergebnis immer auch auf deiner Webseite.

    • Farben aus einer eigenen CSS-Datei können unter den empfohlenen Kontrast fallen, ohne dass der twingleMANAGER warnt.

    Qualitätssicherung

    Unsere Prüfverfahren umfassen

    • Automatisierte Checks (WAVE-Check),

    • Screenreader-Tests mit VoiceOver,

    • Manuelle Nutzertests mit betroffenen Anwender:innen.

    Status & Ausnahmen

    • Letztes Audit: Juni 2025

    • Review-Zyklus: jährliche Überprüfung

    • Bekannte Einschränkungen:

      • Farbkontraste können bei kundenseitiger Anpassung unter Mindestanforderung fallen.

      • Es sind noch nicht alle Elemente im Spendenshop und bei den Spendenurkunden mit vollständigen Aria-Attributen für Screenreader ausgestattet. Dies wird in den nächsten Monaten ergänzt.

      • ALT-Texte: Bilder mit Inhalt haben einen Alternativtext: Produktbilder im Warenkorb, in der Zusammenfassung und in der Detailansicht des Spendenshops (Produktname) sowie das Logo im Kopfbereich (Projektname). Dekorative Bilder, zum Beispiel Motive in Listen, sind für Screenreader ausgeblendet. Für Betragsbilder und die Motive von Spendenurkunden fehlen Alternativtexte, sie sind als Zierelemente markiert, eine Nachrüstung ist geplant.

      • Einige Elemente in den dynamisch erzeugten PDF-Dokumenten sind nicht richtig ausgezeichnet, vor allem Bilder. Dies ist durch eine technische Einschränkung begründet, schränkt aber nicht die inhaltliche Erfassung ein

      • In den Kontaktformularen wird die Anrede automatisch eingeblendet. Dies ist in Screenreadern nicht ganz einfach zu erfassen, es wird aber durch Attribute darauf hingewiesen

      • Wenn im Straßennamen eine Hausnummer fehlt, wird ein extra Fehlertext angezeigt, dieser muss extra bedient werden, hat aber keine beschreibende Auszeichnung. Dies ist technisch bedingt und wird in einer späteren Version verbessert.

    Feedback & Kontakt

    Hast du eine Barriere gefunden oder Fragen, zum Beispiel aus einem Prüfbericht oder einem BITV-Test, schreibe an support@twingle.de. Nenne die Seite, auf der das Problem auftritt, und beschreibe kurz, was nicht funktioniert.
    Wir bemühen uns um eine Rückmeldung innerhalb von 7 Arbeitstagen.

    Kontinuierliche Verbesserung

    Wir arbeiten stetig daran, identifizierte Lücken zu schließen und unsere Barrierefreiheits­­maßnahmen weiterzuentwickeln. Änderungen an dieser Erklärung werden zeitnah veröffentlicht.

    Weitere Informationen

    Veröffentlicht:
    QR-Codes und Kurz-URLs: Vorauswahl eines Spendenzwecks
    Design-Update 2025