Produktvarianten, Dropdowns und Filter gehören mittlerweile fast selbstverständlich zu Online-Shops.

Bei einem T-Shirt wählt man Farbe und Größe. Bei einem Möbelstück vielleicht Material und Breite. In einer Produktkategorie filtert man nach Preis, Hersteller, Bewertung oder Verfügbarkeit.

Für viele Kunden ist das bequem.

Für andere können genau diese Elemente dafür sorgen, dass ein Shop praktisch nicht benutzbar ist.

Das Problem liegt häufig nicht darin, dass Varianten oder Filter verwendet werden. Entscheidend ist, wie sie technisch und visuell umgesetzt sind.

Ein farbiger Kreis ist vielleicht eine hübsche Möglichkeit, eine Produktfarbe auszuwählen. Wenn ein Screenreader daraus aber nur „Button“ macht, fehlt die entscheidende Information.

Ein Dropdown kann optisch perfekt aussehen. Wenn es sich ausschließlich mit der Maus öffnen lässt, hilft das wenig.

Und ein Filter kann technisch funktionieren, aber trotzdem problematisch sein, wenn nach jeder Auswahl plötzlich die Seite springt oder die neuen Ergebnisse nicht angekündigt werden.

In diesem Beitrag schauen wir uns deshalb Schritt für Schritt an, wie Varianten, Dropdowns und Filter zugänglicher gestaltet werden können.

Warum diese Elemente besonders häufig Probleme machen

Normale Links und Buttons sind vergleichsweise einfach.

Ein Filter dagegen besteht häufig aus mehreren Komponenten:

• Überschrift
• Checkboxen
• Dropdowns
• Schieberegler
• Suchfeld
• Auswahlchips
• Zurücksetzen-Button
• Ergebnisanzahl
• dynamisch aktualisierte Produktliste

Produktvarianten können zusätzlich Bilder, Farben, Preisänderungen und Verfügbarkeiten beeinflussen.

Genau diese Dynamik macht die Sache komplizierter.

Ein Nutzer muss jederzeit verstehen:

Was kann ich auswählen?

Was habe ich ausgewählt?

Was ist nicht verfügbar?

Was hat sich durch meine Auswahl verändert?

Wie kann ich die Auswahl wieder entfernen?

Wenn diese Fragen nicht klar beantwortet werden, wird aus einer eigentlich praktischen Funktion schnell eine Barriere.

Produktvarianten barrierefrei gestalten

Beginnen wir mit Varianten. Sie sind vor allem bei WooCommerce-Shops extrem verbreitet.

Typische Beispiele sind:

• Farbe
• Größe
• Material
• Speichergröße
• Ausführung
• Länge
• Verpackungsgröße
• Geschmack
• Modell

Die einfachste technische Lösung ist häufig ein normales Auswahlfeld. Viele Shops ersetzen solche Dropdowns jedoch durch schönere Buttons, Farbfelder oder Bilder.

Genau hier entstehen häufig Probleme.

1. Jede Variante braucht einen verständlichen Namen

Der Kunde sollte immer wissen, was er gerade auswählt.

Statt einfach:

Schwarz

sollte vorher klar sein:

Farbe: Schwarz

Bei Größen:

Größe: M

und nicht nur:

M

Das klingt nach einem kleinen Unterschied. Für Screenreader und Sprachsteuerung ist der Zusammenhang aber wichtig.

Besonders bei mehreren Auswahlgruppen sollte eindeutig sein, welche Optionen zusammengehören.

Zum Beispiel:

Farbe

Schwarz
Blau
Grau

Größe

S
M
L
XL

Die Gruppen müssen nicht nur optisch, sondern auch technisch als zusammengehörig erkennbar sein.

2. Farbe niemals als einzige Information verwenden

Farbvarianten werden gerne als kleine Kreise dargestellt.

Das ist auf den ersten Blick praktisch:

⚫ ⚪ ? ?

Aber was bedeuten diese Kreise genau?

Schwarz, Weiß, Blau und Grün?

Oder Anthrazit, Creme, Marine und Oliv?

Für Menschen mit eingeschränktem Farbsehen ist der Unterschied möglicherweise nicht eindeutig. Screenreader können aus einem reinen Farbfeld ebenfalls keine brauchbare Information ableiten.

Deshalb sollte jede Farbe zusätzlich einen Namen erhalten.

Zum Beispiel:

Marineblau

Olivgrün

Sand

Anthrazit

Der Text kann sichtbar danebenstehen oder technisch zugänglich hinterlegt werden. Wichtig ist, dass die Information nicht ausschließlich über die Farbe vermittelt wird.

3. Der ausgewählte Zustand muss klar erkennbar sein

Es reicht nicht, Varianten auswählbar zu machen.

Der Kunde muss anschließend wissen, welche Variante aktiv ist.

Angenommen, fünf Farbkreise werden angezeigt. Der ausgewählte Kreis bekommt lediglich einen etwas dunkleren Schatten.

Das kann leicht übersehen werden.

Besser ist eine deutlichere Kennzeichnung:

• sichtbarer Rahmen,
• Häkchen,
• Text „Ausgewählt“,
• deutliche Hintergrundänderung.

Dabei sollte wiederum nicht nur Farbe verwendet werden.

Ein Screenreader sollte beispielsweise erkennen:

„Farbe Schwarz, ausgewählt.“

4. Nicht verfügbare Varianten verständlich kennzeichnen

Ein häufiges Shopszenario:

Das T-Shirt ist in Größe M grundsätzlich verfügbar, aber nicht mehr in Blau.

Der Nutzer wählt Blau und sieht anschließend, dass M ausgegraut wurde.

Ist M jetzt ausverkauft? Nicht auswählbar? Noch nicht geladen?

Solche Zustände müssen klar erklärt werden.

Zum Beispiel:

Größe M – in Blau nicht verfügbar

oder:

Größe M – ausverkauft

Nicht verfügbare Varianten sollten außerdem technisch als nicht verfügbar erkennbar sein.

Ein grauer Farbton allein reicht nicht.

5. Varianten müssen mit Tastatur auswählbar sein

Teste Varianten ohne Maus.

Kannst du sie mit Tab erreichen?

Kannst du die gewünschte Option mit Enter, Leertaste oder den vorgesehenen Pfeiltasten auswählen?

Ist erkennbar, welches Element gerade den Fokus hat?

Bei individuell programmierten Variantenfeldern funktioniert das erstaunlich oft nicht.

Die Elemente reagieren beispielsweise nur auf einen Mausklick.

Optisch ist dann alles in Ordnung. Tastaturnutzer kommen aber nicht weiter.

6. Fokus und Auswahl sind nicht dasselbe

Dieser Punkt wird häufig verwechselt.

Der Fokus zeigt, wo sich der Tastaturnutzer gerade befindet.

Die Auswahl zeigt, welche Variante tatsächlich aktiviert wurde.

Beide Zustände sollten sichtbar sein.

Beispiel:

Der Nutzer hat Größe M ausgewählt und bewegt sich anschließend mit der Tastatur zu Größe L.

Dann sollte er erkennen:

M ist ausgewählt.

L hat gerade den Tastaturfokus.

Wenn beide Zustände gleich aussehen, kann das schnell verwirrend werden.

7. Änderungen nach der Variantenauswahl ankündigen

Eine Variante kann mehrere Dinge gleichzeitig verändern:

• Produktbild
• Preis
• Lagerbestand
• Artikelnummer
• Lieferzeit
• Rabatt
• Warenkorb-Button

Angenommen, der Nutzer wählt Größe XL und der Preis steigt von 49 auf 59 Euro.

Sehende Nutzer bemerken die Änderung möglicherweise sofort.

Ein Screenreader muss darüber ebenfalls informiert werden.

Wichtige dynamische Änderungen sollten deshalb technisch so umgesetzt werden, dass sie wahrgenommen werden können.

Eine gute Rückmeldung könnte beispielsweise lauten:

„Größe XL ausgewählt. Preis: 59 Euro. Sofort verfügbar.“

8. Fehlende Auswahl verständlich erklären

Viele Produkte können erst in den Warenkorb gelegt werden, nachdem alle Varianten gewählt wurden.

Wenn der Nutzer auf „In den Warenkorb“ klickt, ohne vorher eine Größe auszuwählen, sollte eine klare Meldung erscheinen:

„Bitte wählen Sie eine Größe aus.“

Nicht:

„Ungültige Auswahl.“

und auch nicht einfach nur ein roter Rahmen um die Varianten.

Die Fehlermeldung sollte möglichst nah an der betreffenden Auswahl erscheinen.

Dropdowns barrierefrei gestalten

Dropdowns sind grundsätzlich nichts Schlechtes.

Browser bieten für normale Auswahlfelder bereits viele Funktionen für Tastatur und Hilfstechnologien.

Probleme entstehen häufig dann, wenn ein normales Dropdown aus Designgründen vollständig durch eine individuell programmierte Variante ersetzt wird.

9. Normale Auswahlfelder nicht unnötig ersetzen

Ein klassisches Dropdown ist vielleicht nicht spektakulär.

Dafür funktioniert es in der Regel zuverlässig mit:

• Maus
• Tastatur
• Touch
• Screenreader

Wenn keine besondere Funktion benötigt wird, kann das Standard-Auswahlfeld deshalb oft die bessere Lösung sein.

Ein individuell gestaltetes Dropdown muss dagegen viele Funktionen selbst nachbauen.

Dazu gehören:

• Fokussteuerung
• Öffnen und Schließen
• Pfeiltastennavigation
• Auswahl
• Screenreader-Ausgabe
• Escape-Funktion
• Zustandsanzeige

Das erhöht die Fehlerwahrscheinlichkeit erheblich.

10. Jedes Dropdown braucht eine Beschriftung

Ein Dropdown sollte nicht allein durch den voreingestellten Wert erklärt werden.

Schlecht:

Bitte auswählen

Besser:

Größe

[Bitte auswählen]

Noch besser kann bei Bedarf eine zusätzliche Erklärung sein:

Größe auswählen

[Bitte auswählen]

Der Nutzer muss verstehen, welche Entscheidung erwartet wird.

Das gilt genauso für Filter:

Sortieren nach

Hersteller

Preisbereich

Verfügbarkeit

11. Platzhalter sind keine Beschriftung

Bei individuell gestalteten Auswahlfeldern sieht man häufig Texte wie:

„Auswählen“

„Bitte wählen“

„Option“

Sobald eine Auswahl getroffen wurde, verschwindet dieser Hinweis.

Dann fehlt möglicherweise der Zusammenhang.

Statt:

Nike

sollte weiterhin erkennbar sein:

Hersteller: Nike

Eine dauerhaft sichtbare Beschriftung ist deshalb meist die bessere Lösung.

12. Dropdowns müssen per Tastatur vollständig funktionieren

Teste folgende Schritte:

1. Mit Tab zum Dropdown navigieren.
2. Dropdown öffnen.
3. Optionen wechseln.
4. Option auswählen.
5. Dropdown wieder schließen.
6. Weiter zum nächsten Element navigieren.

Der Nutzer darf dabei nicht hängenbleiben.

Bei individuell gebauten Dropdowns sollte auch Escape funktionieren, um eine geöffnete Liste wieder zu schließen.

13. Der Fokus darf nach dem Schließen nicht verschwinden

Ein typisches Problem:

Dropdown öffnen.

Option auswählen.

Dropdown schließt sich.

Plötzlich ist der Tastaturfokus weg.

Der Nutzer drückt Tab und landet irgendwo ganz anders auf der Seite.

Nach dem Schließen sollte der Fokus sinnvoll weitergeführt werden. Normalerweise bleibt er zunächst beim Auswahlfeld.

14. Lange Dropdowns brauchen eine gute Bedienung

Ein Dropdown mit fünf Optionen ist einfach.

Eines mit 150 Ländern oder hunderten Herstellern nicht.

In solchen Fällen kann eine Suchfunktion sinnvoll sein.

Allerdings muss auch sie barrierefrei funktionieren.

Der Nutzer sollte:

• ins Suchfeld gelangen,
• einen Begriff eingeben,
• die Treffer erkennen,
• mit Tastatur durch die Treffer navigieren,
• eine Auswahl treffen können.

Auch die Anzahl der gefundenen Ergebnisse kann hilfreich sein.

15. Dropdowns dürfen nicht unerwartet Aktionen auslösen

Eine Auswahl sollte nicht automatisch eine völlig neue Seite öffnen, wenn der Nutzer das nicht erwartet.

Angenommen, jemand navigiert mit Pfeiltasten durch ein Dropdown.

Schon beim Wechsel von „Preis“ zu „Bewertung“ wird plötzlich eine neue Seite geladen.

Das kann extrem irritierend sein.

Besser ist:

Auswahl treffen.

Dann gegebenenfalls über einen klaren Button bestätigen.

Oder die Ergebnisse kontrolliert aktualisieren und diese Änderung verständlich mitteilen.

Filter barrierefrei gestalten

Filter gehören zu den anspruchsvolleren Bereichen eines Shops.

Vor allem größere Shops bieten Kombinationen aus:

• Kategorien
• Preis
• Marke
• Farbe
• Größe
• Bewertung
• Verfügbarkeit
• Eigenschaften

Ein gut aufgebauter Filter kann die Suche stark vereinfachen.

Ein schlecht aufgebauter Filter macht sie dagegen unnötig kompliziert.

16. Filter logisch gruppieren

Filter sollten in verständliche Bereiche aufgeteilt werden.

Zum Beispiel:

Marke

Nike
Adidas
Puma

Größe

S
M
L
XL

Farbe

Schwarz
Blau
Grau

Preis

Bis 50 Euro
50 bis 100 Euro
Über 100 Euro

Der Nutzer sollte erkennen können, welche Optionen zusammengehören.

Besonders bei Screenreadern ist eine technisch sinnvolle Gruppierung wichtig.

17. Checkboxen richtig beschriften

Filter bestehen häufig aus Checkboxen.

Zum Beispiel:

☐ Schwarz
☐ Blau
☐ Grau

Die Beschriftung sollte mit der Checkbox technisch verbunden sein.

Dadurch kann der Nutzer auch auf den Text klicken und muss nicht exakt das kleine Kästchen treffen.

Das hilft besonders:

• Menschen mit motorischen Einschränkungen,
• Smartphone-Nutzern,
• Nutzern mit vergrößerter Darstellung.

18. Trefferanzahl verständlich anzeigen

Viele Filter zeigen direkt:

Schwarz (28)

Blau (14)

Das ist hilfreich.

Nach einer Filteränderung kann sich auch die Gesamtzahl der Ergebnisse ändern.

Zum Beispiel:

42 Produkte gefunden

Diese Änderung sollte nicht nur optisch sichtbar sein.

Screenreader-Nutzer sollten ebenfalls mitbekommen, dass sich die Produktliste verändert hat.

19. Dynamische Filterergebnisse ankündigen

Moderne Shops aktualisieren Produktlisten häufig ohne vollständiges Neuladen der Seite.

Der Nutzer setzt den Filter „Schwarz“.

Im Hintergrund werden neue Produkte geladen.

Für sehende Nutzer ist das offensichtlich.

Für einen Screenreader kann dagegen scheinbar überhaupt nichts passiert sein.

Eine Rückmeldung wie:

„28 Produkte gefunden.“

kann deshalb sehr hilfreich sein.

Dabei sollte die Meldung kurz bleiben. Niemand möchte nach jeder Checkbox eine minutenlange Ansage hören.

20. Der Fokus darf nach dem Filtern nicht an den Seitenanfang springen

Ein besonders nerviger Fehler:

Der Nutzer befindet sich mitten im Filter.

Er aktiviert „Schwarz“.

Die Produktliste wird neu geladen.

Der Fokus springt zurück zum Logo ganz oben auf der Seite.

Jetzt muss der Nutzer erneut durch Navigation und Filter laufen.

Nach einer Filteränderung sollte der Fokus sinnvoll an seiner bisherigen Position bleiben oder kontrolliert zu einem passenden Element geführt werden.

21. Aktive Filter deutlich anzeigen

Nach mehreren Auswahlvorgängen verliert man schnell den Überblick.

Ein guter Shop zeigt deshalb die aktiven Filter beispielsweise oberhalb der Produktliste:

Schwarz ×

Größe M ×

Bis 100 Euro ×

Diese sogenannten Filterchips sind praktisch.

Sie müssen aber ebenfalls bedienbar sein.

Der Entfernen-Button sollte einen verständlichen Namen besitzen:

„Filter Schwarz entfernen“

statt einfach:

„X“

22. Einen gut sichtbaren „Alle Filter löschen“-Button anbieten

Nach mehreren Auswahlvorgängen sollte der Nutzer nicht jede Option einzeln zurücksetzen müssen.

Ein Button wie:

„Alle Filter zurücksetzen“

oder:

„Filter löschen“

ist hilfreich.

Er sollte gut erreichbar sein und nach dem Aktivieren eine verständliche Rückmeldung geben.

Zum Beispiel:

„Alle Filter wurden entfernt. 184 Produkte werden angezeigt.“

23. Filter nicht nur über Symbole darstellen

Ein Filterbutton mit drei kleinen Schiebereglern ist mittlerweile sehr verbreitet.

Auf dem Smartphone sieht man häufig nur das Symbol.

Für Screenreader muss die Funktion aber einen verständlichen Namen besitzen:

„Filter öffnen“

Ist der Filter geöffnet, kann die Beschriftung entsprechend lauten:

„Filter schließen“

Das Gleiche gilt für Sortierung, Ansicht wechseln oder Filter zurücksetzen.

24. Mobile Filter besonders gründlich testen

Auf dem Desktop befinden sich Filter häufig links neben den Produkten.

Auf dem Smartphone werden sie oft in ein Overlay oder eine seitliche Schublade verschoben.

Genau dabei entstehen viele Probleme.

Prüfe:

• Ist der Filterbutton erreichbar?
• Wird das Filterfenster geöffnet?
• Springt der Fokus hinein?
• Kann jede Option bedient werden?
• Ist der Anwenden-Button erreichbar?
• Kann das Fenster mit Escape oder Schließen beendet werden?
• Springt der Fokus danach zurück zum Filterbutton?

Der Nutzer darf nicht hinter dem geöffneten Filter weiter durch die eigentliche Seite navigieren.

25. Der Schließen-Button muss eindeutig sein

Ein einfaches X kann visuell ausreichen.

Technisch sollte daraus aber:

„Filter schließen“

werden.

Das gilt für alle Dialoge, Overlays und mobilen Filterfenster.

„X“ allein vermittelt einem Screenreader keine zuverlässige Funktion.

26. Preis-Slider brauchen eine Alternative

Preisfilter werden gerne als Schieberegler dargestellt.

Der Nutzer zieht zwei Punkte:

20 € ————— 100 €

Für Mausnutzer funktioniert das bequem.

Für Menschen mit motorischen Einschränkungen kann die präzise Bedienung schwierig sein.

Eine gute Lösung bietet zusätzlich Eingabefelder:

Preis von: 20 Euro

Preis bis: 100 Euro

Damit kann der Wert direkt eingegeben werden.

Wenn ein Slider verwendet wird, sollte er auch mit Tastatur steuerbar sein.

27. Filter dürfen sich nicht nur über Farbe unterscheiden

Aktivierte Filter sind manchmal blau.

Nicht aktive Filter grau.

Das reicht nicht.

Zusätzlich sollte ein Zustand durch:

• Häkchen,
• Text,
• Rahmen,
• technische Statusinformation

erkennbar sein.

Beispielsweise:

☑ Schwarz

statt nur einer anderen Hintergrundfarbe.

28. Ausgeblendete Filteroptionen nicht unnötig in der Tastaturreihenfolge lassen

Manche Filterbereiche sind standardmäßig eingeklappt.

Wenn die darin enthaltenen Optionen unsichtbar sind, sollten Tastaturnutzer normalerweise nicht plötzlich durch diese versteckten Elemente springen.

Sonst passiert Folgendes:

Tab.

Nichts sichtbar.

Tab.

Nichts sichtbar.

Tab.

Plötzlich erscheint der Fokus wieder.

Das ist extrem verwirrend.

Unsichtbare Elemente sollten normalerweise erst dann erreichbar werden, wenn ihr Bereich tatsächlich geöffnet wurde.

29. „Mehr anzeigen“ verständlich beschriften

Bei langen Filterlisten sieht man oft:

Adidas
Nike
Puma
Reebok

Mehr anzeigen

Das ist okay, solange klar ist, worauf sich „Mehr anzeigen“ bezieht.

Noch besser:

„Weitere Marken anzeigen“

Wurde die Liste geöffnet:

„Weniger Marken anzeigen“

So bleibt die Funktion auch ohne visuellen Kontext verständlich.

30. Sortierung ebenfalls zugänglich machen

Sortierung ist streng genommen kein Filter, gehört aber meistens in denselben Bereich.

Typische Optionen:

• Preis aufsteigend
• Preis absteigend
• Neueste zuerst
• Beste Bewertung
• Beliebteste

Die Auswahl sollte klar beschriftet sein:

Sortieren nach

Nicht nur:

Beliebteste

Nach einer Änderung sollte verständlich sein, dass die Produktreihenfolge angepasst wurde.

31. Filterergebnisse müssen weiterhin logisch navigierbar sein

Nach der Filterung darf nicht nur die Produktanzahl stimmen.

Auch die Produktliste selbst muss weiterhin gut aufgebaut sein.

Achte auf:

• sinnvolle Überschriften,
• klar erkennbare Produktkarten,
• verständliche Links,
• richtige Reihenfolge,
• zugängliche Preise,
• Varianteninformationen.

Ein barrierefreier Filter bringt wenig, wenn die resultierende Produktliste selbst kaum bedienbar ist.

32. Ladeanzeigen zugänglich gestalten

Dynamische Filter brauchen manchmal einige Sekunden.

Dann erscheint ein kleiner Spinner.

Sehende Nutzer verstehen:

Die Produkte werden geladen.

Ein Screenreader weiß davon nicht automatisch etwas.

Eine kurze Information wie:

„Produkte werden geladen.“

und danach:

„24 Produkte gefunden.“

kann den Ablauf deutlich verständlicher machen.

33. Keine Filteränderungen ohne Vorwarnung verlieren

Ein Nutzer wählt mehrere Filter und öffnet anschließend eine Produktseite.

Wenn er zur Kategorie zurückkehrt, sind plötzlich alle Filter weg.

Das kann frustrierend sein.

Wenn technisch möglich, sollten aktive Filter zumindest während der Navigation erhalten bleiben.

Besonders bei großen Shops ist das wichtig, weil Nutzer ihre Auswahl nicht immer wieder neu erstellen möchten.

34. Auch die URL kann hilfreich sein

Bei vielen Shops lassen sich aktive Filter in der URL speichern.

Dadurch kann der Nutzer:

• die Seite neu laden,
• den Link speichern,
• zurück navigieren,
• gefilterte Ergebnisse teilen.

Das ist nicht nur praktisch für Barrierefreiheit, sondern allgemein eine gute Nutzererfahrung.

Natürlich muss die URL nicht unbedingt hübsch aussehen. Entscheidend ist, dass der Zustand zuverlässig wiederhergestellt werden kann.

35. Keine Maus-Hover-Funktionen voraussetzen

Manche Filter zeigen zusätzliche Informationen nur, wenn die Maus über ein Element bewegt wird.

Zum Beispiel:

Ein Farbfeld zeigt den Namen erst beim Hover.

Das ist problematisch.

Die Information muss auch mit Tastatur, Touch und Hilfstechnologien erreichbar sein.

Auf Smartphones gibt es schließlich ebenfalls keinen klassischen Hover-Zustand.

36. Touch-Ziele ausreichend groß gestalten

Gerade Filter besitzen oft kleine Checkboxen, Farbfelder und Entfernen-Symbole.

Auf dem Smartphone kann das schnell schwierig werden.

Die anklickbare Fläche sollte nicht nur aus dem sichtbaren 12-Pixel-Kästchen bestehen.

Wenn auch die Beschriftung aktiviert werden kann, wird die Bedienfläche automatisch größer.

Zwischen verschiedenen Optionen sollte außerdem genügend Abstand bestehen, damit nicht versehentlich der falsche Filter aktiviert wird.

37. Screenreader-Test nicht vergessen

Nach Tastatur- und Smartphone-Test lohnt sich zumindest ein grundlegender Screenreader-Test.

Dabei sollte man überprüfen:

• Werden Filtergruppen sinnvoll angekündigt?
• Werden Namen der Optionen vorgelesen?
• Wird der ausgewählte Zustand erkannt?
• Wird die Ergebnisanzahl angekündigt?
• Sind Entfernen-Buttons verständlich?
• Wird ein geöffnetes Filterfenster erkannt?
• Sind Dropdowns nachvollziehbar?

Man muss nicht sofort zum Screenreader-Profi werden.

Schon ein kurzer Test kann ungewöhnliche Ausgaben aufdecken.

Ein Button, der visuell „Größe M“ zeigt, aber vorgelesen nur „Button 17“ heißt, fällt sofort auf.

38. Drittanbieter-Plugins kritisch testen

Gerade in WooCommerce werden Varianten und Filter oft über zusätzliche Plugins umgesetzt.

Das betrifft zum Beispiel:

• Variation Swatches
• Farbvarianten
• Größenbuttons
• Ajax-Filter
• Mega Filter
• Preis-Slider
• Produktsuche

Ein Plugin kann optisch hervorragend sein und trotzdem Schwächen bei der Barrierefreiheit haben.

Prüfe deshalb immer den fertigen Shop.

Nicht nur:

„Das Plugin unterstützt Accessibility.“

Sondern:

„Kann ich damit tatsächlich ohne Maus ein Produkt finden und auswählen?“

Das ist die wichtigere Frage.

Praktische Checkliste für Varianten

Prüfe bei Produktvarianten:

• Hat jede Varianten-Gruppe einen verständlichen Namen?
• Haben Farben zusätzlich eine Textbezeichnung?
• Ist die aktuelle Auswahl klar erkennbar?
• Werden nicht verfügbare Optionen erklärt?
• Funktioniert die Auswahl ohne Maus?
• Ist der Fokus sichtbar?
• Sind Fokus und Auswahl unterscheidbar?
• Werden Preis- und Verfügbarkeitsänderungen mitgeteilt?
• Sind Fehlermeldungen verständlich?
• Funktioniert alles auch mobil?

Praktische Checkliste für Dropdowns

Prüfe:

• Besitzt das Dropdown eine sichtbare Beschriftung?
• Ist sein Zweck eindeutig?
• Funktioniert es mit Tastatur?
• Funktionieren Pfeiltasten?
• Kann es wieder geschlossen werden?
• Bleibt der Fokus logisch erhalten?
• Sind alle Optionen verständlich benannt?
• Löst die Auswahl keine überraschenden Aktionen aus?
• Funktioniert eine eventuell vorhandene Suche ebenfalls per Tastatur?

Praktische Checkliste für Filter

Prüfe:

• Sind Filter logisch gruppiert?
• Sind Checkboxen richtig beschriftet?
• Funktioniert alles ohne Maus?
• Wird die Trefferzahl verständlich aktualisiert?
• Bleibt der Fokus nach Änderungen erhalten?
• Werden aktive Filter angezeigt?
• Können einzelne Filter entfernt werden?
• Gibt es „Alle Filter zurücksetzen“?
• Funktioniert der mobile Filter?
• Ist ein Filterdialog klar schließbar?
• Gibt es eine Alternative zu Preis-Slidern?
• Werden Zustände nicht nur über Farbe dargestellt?
• Sind versteckte Optionen auch wirklich aus der Navigation entfernt?
• Funktioniert die Sortierung?
• Sind Ladezustände erkennbar?

Wo sollte man zuerst anfangen?

Bei einem bestehenden Shop würde ich nicht versuchen, jeden kleinen Detailfehler gleichzeitig zu beheben.

Priorität 1: Kaufblocker

Zuerst sollten Probleme behoben werden, durch die Nutzer Produkte gar nicht auswählen können:

• Varianten funktionieren nicht mit Tastatur
• wichtige Dropdowns sind nicht erreichbar
• Filterfenster lässt sich nicht schließen
• Warenkorb-Button bleibt wegen fehlender Varianten dauerhaft gesperrt
• nicht verfügbare Varianten werden nicht verständlich erklärt

Priorität 2: Orientierung

Danach:

• sichtbarer Fokus
• verständliche Labels
• ausgewählte Zustände
• aktive Filter
• Ergebnisanzahl
• Fehlermeldungen

Priorität 3: Komfort

Anschließend:

• Filterzustände speichern
• mobile Bedienung weiter verbessern
• Suchfunktionen in langen Dropdowns
• bessere Statusmeldungen
• komfortablere Rücksetzfunktionen

Ein sehr einfacher Praxistest

Öffne eine Kategorie mit vielen Produkten.

Dann lege die Maus weg.

Versuche nur mit der Tastatur:

1. Einen Filter zu öffnen.
2. Eine Marke auszuwählen.
3. Eine Farbe zu wählen.
4. Die Ergebnisse zu prüfen.
5. Einen Filter wieder zu entfernen.
6. Ein Produkt zu öffnen.
7. Eine Farbe auszuwählen.
8. Eine Größe auszuwählen.
9. Das Produkt in den Warenkorb zu legen.

Wenn du dabei nicht weiterkommst, werden andere Nutzer sehr wahrscheinlich dasselbe Problem haben.

Danach wiederholst du den Vorgang auf einem Smartphone.

Diese zwei einfachen Tests decken bereits erstaunlich viele Schwachstellen auf.

Fazit: Varianten und Filter müssen nicht kompliziert sein

Varianten, Dropdowns und Filter sind wichtige Funktionen moderner Online-Shops.

Sie sind auch nicht automatisch schlecht für die Barrierefreiheit.

Problematisch werden sie erst, wenn Design wichtiger wird als Bedienbarkeit.

Ein schöner Farbkreis darf bleiben. Er braucht nur einen verständlichen Namen.

Ein moderner Filter darf Produkte dynamisch aktualisieren. Der Nutzer muss nur erfahren, dass etwas passiert ist.

Ein eigenes Dropdown kann eingesetzt werden. Es muss aber dieselben grundlegenden Bedienmöglichkeiten bieten wie ein normales Auswahlfeld.

Die beste Regel ist deshalb ziemlich einfach:

Jede Auswahl muss verständlich benannt, klar bedienbar und eindeutig rückmeldbar sein.

Wer Varianten und Filter einmal konsequent mit Tastatur, Smartphone und Screenreader testet, findet meistens schnell die größten Probleme.

Und oft sind die notwendigen Verbesserungen deutlich kleiner, als man zunächst denkt.

Hinweis: Dieser Beitrag bietet eine allgemeine Orientierung und ersetzt keine individuelle Rechtsberatung oder vollständige Prüfung der Barrierefreiheit.