Preisauszeichnung

Einer der wichtigen Aspekte beim Verkaufen - egal ob analog oder digital - ist der Preis. Und weil dieser einer der wichtigen Säulen eines jeden Verkaufs ist, häufig gar die Kaufentscheidung wesentlich bestimmt, ergibt sich, dass es sehr entscheidend ist, diesen klar und unmissverständlich zu kommunizieren.

Häufig gibt es sowohl im physischen wie digitalen Verkauf ein Muster, bei dem eine Reduzierung eines Preises kommuniziert wird. Man kann als Händler oder Händlerin beispielsweise den unverbindlichen Verkaufspreis (UVP) des Herstellers unterbieten, und möchte diesen guten Deal prominent kommuniziert wissen. Rein grafisch läuft es oft folgendermaßen ab: der alte Preis wird durchgestrichen und ein neuer, reduzierter Preis daneben ausgewiesen.

Wenn man sich den E-Commerce als Betätigungsfeld anschaut, dann bieten die Werkzeugkästen HTML und CSS einige Mittel, um für dieses Durchstreichen zu sorgen: Im HTML gibt es das <s>-Element, und im CSS die Textdekorationseigenschaft line-through. Ist somit alles gut und für jeden Nutzenden mit egal welcher Hilfstechnologgie klar, was der alte (durchgestrichene) und was der neue (gültige) Preis ist?

Leider nicht ganz. Auch wenn das Thema Barrierefreiheit mehr bedeutet als „Dinge kompatibel und verständlich für Screenreader-Nutzende zu machen“ ist es nötig, dass wir uns anschauen, wie sich dieses Alter-Preis-neuer-Preis-Schema für Bildschirmvorleseprogramme und ihre Nutzer*innen gestaltet. Da ist zum einen text-decoration: strike-through als CSS-Anweisung, was diese Software in fast allen Fällen nicht dazu veranlasst, „durchgestrichen“ oder Ähnliches auszugeben. Hintergrund ist, dass die Präsentationssprache CSS für die meisten Screenreader in der großen Mehrheit irrelevant ist (mit der entscheidenden Ausnahme von display: none, das auch vor Bildschirmvorleseprogrammen versteckt und weiteren Ausnahmen [Artikel maschinell übersetzt]). Insofern bekommt man gegebenenfalls nicht mit, dass einer der Preise auf andere Art formatiert ist als der andere (der alte durchgestrichen ist und der neue nicht).

„Kein Problem - für die Bedeutungsebene eines Interfaces gibt es ja HTML!“, mag der Gedanke jetzt sein - und er ist ja auch im Prinzip richtig. Und mit dem <del>-Element scheint ja ein HTML-Tag bereitzustehen, der einerseits visuell kommuniziert, dass etwas durchgestrichen und damit „veraltet“ oder aktuell ungültig ist – andererseits diese Bedeutungsebene auch im HTML-Sinne semantisch z. B. an Hilfsmittel kommuniziert: Es hat implizit die ARIA-Rolle deletion und damit genau die Semantik, die es für einen mal ausgezeichneten, aber inzwischen überholten Preis braucht. Leider ist die aktuelle Screenreader-Realität so, dass manche Hilfs-Software die Rolle und damit auch Aussage unterstützen (allen voran der Screenreader NVDA). Manche jedoch auch nicht (JAWS, Apples VoiceOver auf dem Mac und auf i-Geräten) (Mehr dazu hier, maschinell übersetzt). Um Nutzenden dieser Software dennoch unzweifelhaft zu vermitteln, dass ein Wert durchgestrichen und damit veraltet ist und bei Software mit Unterstützung eine Doppelausgabe zu vermeiden, wird aktuell empfohlen mit sogenanntem „visuell verstecktem Text“ zu arbeiten.

Infobox: Es gibt viele Arten zu verstecken, mit „nur visuellem Verstecken“ ist aber eine Variante gemeint, die optisch kaschiert, Texte für Screenreader und ähnliche Software aber wahrnehmbar lässt – genauer gesagt dieser Ansatz, der häufig die Klassennamen wie visually-hidden oder sr-only hat, siehe Basics-Modul.

Damit ist auch für Nutzende, die eine Oberfläche nicht-visuell besuchen, klar, welcher Preis alt (und damit ungültig) und welcher neu ist. Auf der Einzelproduktseite von ecbf.shop findet sich eine Demo-Implementation dieses Ansatzes.

Untersuchen Sie Ihren E-Commerce-Auftritt. Verwenden Sie das Alter-Preis-neuer-Preis-Schema und wenn ja, wie ist es per HTML und CSS umgesetzt? Haben Sie bereits eine CSS-Helferklasse in Ihrem Werkzeugkasten, die man für einen zugänglichen Umbau im Sinne des Moduls verwenden könnte?