Konfiguratoren und Preisrechner barrierefrei nach BFSG

Slider, Chips und Auswahlfelder: Die technische Grundlage

Konfiguratoren brauchen oft visuelle Auswahlmöglichkeiten. All das kann barrierefrei sein—wenn richtig gebaut.

Range-Slider (z. B. Preisspanne): Mit Tastatur bedienbar (Pfeiltasten plus/minus 1, Seite-Auf/Ab plus/minus 10). ARIA-Labels haben ('Minimale Preis: 50 Euro'). Aktueller Wert sichtbar und in Echtzeit aktualisiert (im Screenreader vorgelesen).

Chips oder Tiles (Farbe, Größe): Müssen als Radiobuttons oder Checkboxen erkennbar sein (nicht nur styled divs). Label-Text sichtbar (nicht nur Farbe: 'Rot', nicht nur farbige Quadrate). Fokus-Stil deutlich (Rahmen, nicht nur Hintergrundfarbe).

Dropdown: Natives Select-Element ist zugänglich, aber oft hässlich. Custom Dropdowns sind schwer barrierefrei zu bauen—Mühe lohnt sich meist nicht. Hybrid: Select für Mobile/Screenreader, Custom-UI für Desktop.

Echtzeitberechnung sauber umsetzen

Konfiguratoren zeigen Preis/Verfügbarkeit in Echtzeit. Komfortabel, aber technisch heikel.

Standard-Problem: Preis aktualisiert, aber Screenreader-Nutzer bekommt es nicht mit. Berechnung per JavaScript, aber visuelle Update so schnell, dass Fokus verloren geht. Mobile: neue Preis-Anzeige weit oben, Nutzer sieht Änderung nicht.

Besser: Jede Änderung triggert ARIA live region. Screenreader sagt auf: 'Preis aktualisiert: 299 Euro'. Nach Auswahl optional: kurz zu aktualisierten Preisen/Verfügbarkeiten scrollen (auch Sehende sehen Änderung). Fokus bleibt auf Nutzer-Element (nicht nach oben springen). Loading-State: wenn Berechnung länger dauert (über 0,5 Sek), 'Wird berechnet …' anzeigen.

Test: Öffne Konfigurator nur mit Tastatur und Screenreader. Kannst du alle Ergebnisse hören und folgen?

Anfragen aus dem Konfigurator: Schnittstelle zur Angebotsbearbeitung

Nach Konfiguration folgt oft Anfrage: 'Angebot einholen' oder 'Kontakt mit Vertrieb'. Diese Transition ist wichtig—und oft unterschätzt.

Ideal: Konfigurator zeigt Ergebnis (Bild, Spezifikationen, Preis oder 'Preis auf Anfrage'). Darunter großer Button: 'Angebot anfordern' oder 'Kontakt mit uns aufnehmen' (nicht 'Senden'). Formular folgt, vorausgefüllt mit Konfigurationen (nicht nackt). Minimum: Name, E-Mail, optional Telefon/Nachricht. Nach Submit: Bestätigungsseite mit Kopie und Erwartung ('Wir kontaktieren Sie innerhalb 24 h').

Barrierefreiheit: Formular mit Tastatur bedienbar (keine JS-Valideierung vor Submit). Fehler klar mit Feld verknüpft (nicht nur Leiste oben). Nach erfolgreichem Submit: klare Erfolgsmeldung-Modal oder neue Seite (nicht stilles Verschwinden).

Diese Schnittstelle ist oft letztes Tor für Interessenten.

Bildbasierte Auswahl und visuelle Vorschauen absichern

Viele Konfiguratoren zeigen Farben, Materialien oder Ausstattungsvarianten als Kachel mit Foto oder Farbmuster, weil sich das Ergebnis so schneller erfassen lässt. Ohne zusätzlichen Text bleibt diese Auswahl für Screenreader-Nutzer jedoch unsichtbar, und auch sehende Nutzer mit Farbfehlsichtigkeit können zwei ähnliche Farbtöne oft nicht sicher unterscheiden. Jede Bildkachel braucht deshalb einen Alternativtext oder ein sichtbares Label, das die Variante beim Namen nennt, etwa 'Anthrazit matt' statt nur einer Farbfläche. Wechselt eine große Vorschau, ein Rendering oder ein Produktbild automatisch mit der Auswahl, sollte diese Änderung ebenfalls angekündigt werden, damit Nutzer ohne Sehvermögen wissen, dass sich am Ergebnis etwas verändert hat, auch wenn sie das Bild selbst nicht sehen. Bei Konfiguratoren mit 3D-Ansicht oder Zoom-Funktion sollte zusätzlich eine textliche Zusammenfassung der aktuell gewählten Optionen vorhanden sein, damit niemand auf die grafische Darstellung angewiesen ist, um den eigenen Stand nachzuvollziehen. So bleibt die visuelle Vorschau ein angenehmes Extra und wird nicht zur einzigen Informationsquelle.

Mehrstufige Konfiguratoren: Fortschritt und Navigation

Komplexere Konfiguratoren führen Nutzer über mehrere Schritte, etwa erst Modell, dann Ausstattung, dann Zubehör, bevor am Ende der Preis steht. Ohne erkennbare Struktur wissen Nutzer mit Screenreader oft nicht, auf welchem Schritt von wie vielen sie sich befinden und ob frühere Angaben noch gültig sind. Eine Kennzeichnung wie 'Schritt 2 von 4: Ausstattung wählen' sollte deshalb als Überschrift oder in einer Statuszeile ausgezeichnet sein, die beim Wechsel zwischen Schritten vorgelesen wird. Zurück- und Weiter-Schaltflächen brauchen eindeutige Beschriftungen statt reiner Pfeil-Symbole, damit klar ist, wohin ein Klick führt. Wichtig ist außerdem, dass ein Rücksprung zu einem früheren Schritt die dort getroffene Auswahl sichtbar erhält und nicht stillschweigend zurücksetzt, denn ein solcher Datenverlust fällt Screenreader-Nutzern erst beim erneuten Durchgehen aller Felder auf und kostet doppelte Zeit. Bei langen Konfiguratoren hilft zusätzlich eine Übersichtsseite vor dem Absenden, auf der alle gewählten Optionen noch einmal als Liste erscheinen, damit Fehler vor der Anfrage auffallen und nicht erst im Angebot.

Fehlerhafte Kombinationen verständlich zurückmelden

In vielen Konfiguratoren schließen sich einzelne Optionen gegenseitig aus, etwa wenn eine bestimmte Farbe nur mit einer bestimmten Ausstattungslinie verfügbar ist. Häufig wird eine nicht mehr wählbare Option lediglich ausgegraut oder deaktiviert, ohne dass der Grund dafür irgendwo als Text erscheint. Für Screenreader-Nutzer ist ein deaktiviertes Element ohne Erklärung kaum von einem Fehler in der eigenen Bedienung zu unterscheiden. Besser ist eine kurze, konkrete Meldung direkt bei der betroffenen Option, etwa 'Nicht verfügbar in Kombination mit Ausstattung Sport', die vorgelesen wird, sobald der Nutzer die Option erreicht. Auch farbliche Kennzeichnungen wie ein rotes Ausrufezeichen sollten von einem Text begleitet sein, damit die Information nicht allein über die Farbe transportiert wird. Wenn eine bereits getroffene Auswahl durch eine spätere Entscheidung ungültig wird, sollte der Konfigurator das aktiv melden und nicht nur den Preis stumm neu berechnen, damit Nutzer nachvollziehen können, warum sich das Ergebnis verändert hat. Diese Rückmeldungen verhindern, dass Nutzer den Konfigurator für kaputt halten und die Anfrage abbrechen, obwohl nur eine einzelne Kombination technisch ausgeschlossen war. Ein kurzer Hinweistext oberhalb des Formulars, der die grundsätzliche Logik solcher Abhängigkeiten in einem Satz erklärt, hilft zusätzlich allen Nutzern, unabhängig von der verwendeten Technologie.

Häufig gestellte Fragen