Barrierefreiheit (Accessibility)

Soulclick setzt auf ein barrierefreies Spendenerlebnis. Das Spendenportal wurde nach den WCAG 2.1 Level AA-Richtlinien optimiert, damit alle Menschen: unabhängig von Einschränkungen: problemlos spenden können.

Optimierte Bereiche

Die folgenden Seiten des Spendenportals sind vollständig barrierefrei gestaltet:

Seite	Beschreibung
Landingpage	Übersicht aller Spendenprojekte mit Filterfunktionen
Detailseiten	Einzelansicht eines Spendenprojekts mit Spendenformular
Warenkorb	Übersicht der ausgewählten Spenden vor dem Checkout
Checkout	Eingabe persönlicher Daten und Zahlungsinformationen
Erfolgsseite	Bestätigung nach erfolgreichem Spendenabschluss
Fehlerseite	Hinweis bei fehlgeschlagener Zahlung mit Handlungsoptionen

Hinweis: CMS-Plugins (z. B. Teaser, Akkordeons, Karten) werden in einem späteren Schritt optimiert.

Was wurde umgesetzt?

Screenreader-Kompatibilität

Alle Seiten sind vollständig von Screenreadern (z. B. VoiceOver, NVDA, JAWS) lesbar.
Interaktive Elemente wie Buttons, Links und Formulare sind korrekt mit ARIA-Attributen ausgezeichnet.
Spendenbeträge, Fortschrittsanzeigen und dynamische Inhalte werden über aria-live-Regionen angekündigt.

Lighthouse Accessibility Score: 100

Alle oben genannten Seiten erreichen einen Lighthouse Accessibility Score von 100. Das umfasst u. a.:

Korrekte Überschriftenhierarchie (h1 → h2 → h3, ohne Sprünge)
Ausreichende Farbkontraste (mind. 4.5:1 für Text)
Sichtbare Fokus-Indikatoren bei Tastaturnavigation
Korrekte alt-Texte für alle informativen Bilder
Labels für alle Formularfelder

Tastaturnavigation

Alle interaktiven Elemente sind per Tastatur (Tab, Enter, Escape) erreichbar.
Spendenbeträge können per Tastatur ausgewählt werden.
Modale Dialoge fangen den Fokus korrekt ein (Focus Trapping).
Skip-Links ermöglichen das Überspringen der Navigation.

Formulare & Validierung

Jedes Eingabefeld ist mit einem sichtbaren <label> verknüpft.
Pflichtfelder sind mit required und visuellen Hinweisen markiert.
Fehlermeldungen werden mit aria-invalid und aria-describedby verknüpft.
Formulargruppen (z. B. Zahlungsmethoden) nutzen role="radiogroup" mit role="radio" und aria-checked.

Semantisches HTML

Verwendung von HTML5-Landmark-Elementen: <header>, <nav>, <main>, <footer>, <section>
Buttons werden für Aktionen verwendet, Links für Navigation: nie umgekehrt.
Dekorative Elemente sind mit aria-hidden="true" ausgeblendet.
Screenreader-only-Texte nutzen die .sr-only-Klasse.

Zielstandard

Kriterium	Status
WCAG 2.1 Level AA	✅ Erfüllt
Lighthouse Accessibility	✅ 100/100
Screenreader-kompatibel	✅ Vollständig
Tastaturnavigation	✅ Vollständig
Semantisches HTML	✅ Umgesetzt

Nächste Schritte

CMS-Plugins: Barrierefreiheit wird schrittweise auf alle CMS-Plugins (Teaser, Akkordeons, Karten, etc.) ausgeweitet.
Regelmässige Audits: Bestehende und neue Seiten werden kontinuierlich auf Barrierefreiheit geprüft.