Preisdarstellung und Rabatte barrierefrei kommunizieren: del, ins und Rabatt-Badges

1. Warum reines CSS-Strikethrough für Alt-Preise nicht ausreicht

Ein Alt-Preis wird visuell meist über text-decoration: line-through auf einem beliebigen span-Element durchgestrichen. Diese CSS-Eigenschaft ist eine reine Stildeklaration ohne jede semantische Bedeutung, sie verändert weder die Rolle noch den Namen des Elements im Accessibility Tree. Ein Screenreader liest den durchgestrichenen Preis deshalb genauso vor wie den neuen Preis, ohne jeden Hinweis darauf, dass es sich um einen ungültig gewordenen, fruheren Wert handelt.

Damit geht bei rein visuellem Strikethrough genau die Information verloren, die einen reduzierten Preis überhaupt erst als Rabatt erkennbar macht: der Vergleich zwischen einem alten und einem neuen Wert. Für sehende Nutzer ist dieser Vergleich durch die durchgestrichene Linie sofort ersichtlich, für Screenreader-Nutzer bleibt ohne zusätzliches Markup nur eine verwirrende Aneinanderreihung zweier Preisangaben ohne erkennbare Beziehung zueinander.

2. Die korrekten HTML-Elemente: del für den Alt-Preis, ins für den neuen Preis

HTML stellt mit del und ins genau die semantischen Elemente bereit, die für diesen Anwendungsfall gedacht sind: del markiert einen aus dem Dokument entfernten oder ungültig gewordenen Inhalt, ins markiert neu eingefügten Inhalt. Ein reduzierter Preis lasst sich damit als del für den ursprünglichen Preis und ins für den aktuellen, reduzierten Preis auszeichnen, was semantisch exakt die Beziehung zwischen beiden Werten abbildet.

Viele Browser rendern del bereits standardmäßig mit einer durchgestrichenen Linie und ins standardmäßig unterstrichen, sodass sich mit diesen Elementen sogar zusätzliches CSS für die reine Visualisierung sparen lässt. Wichtig bleibt trotzdem, das Styling explizit selbst zu definieren, statt sich auf Browser-Standardwerte zu verlassen, da diese je nach Browser und Nutzer-Stylesheet variieren können.

<p class="price">
  <del class="price__old">79,99 EUR</del>
  <ins class="price__new">59,99 EUR</ins>
</p>

<style>
.price__old { text-decoration: line-through; color: #71717a; }
.price__new { text-decoration: none; font-weight: 600; color: #18181b; }
</style>

3. Wie Screenreader del und ins in der Praxis tatsächlich behandeln

In der Praxis kündigen nicht alle Screenreader die semantische Bedeutung von del und ins automatisch als hörbare Zusatzinformation an, manche lesen den Inhalt einfach als normalen Text vor, ohne "durchgestrichen" oder "eingefügt" zu erwähnen. Die korrekten Elemente sind trotzdem die richtige Grundlage, weil sie zumindest im Accessibility Tree die richtige semantische Rolle tragen und von Assistenztechnologien, die diese Ansage unterstützen, korrekt genutzt werden.

Für verlässliche Ergebnisse über alle Screenreader hinweg empfiehlt sich zusätzlich ein aria-label oder ein sichtbarer, aber zusammenfassender Text, der den kompletten Preisvergleich in einem Satz wiedergibt, unabhängig davon, ob die einzelne Assistenztechnologie del und ins vorliest oder nicht. Diese redundante Absicherung ist dasselbe Prinzip, das schon beim Sterne-Rating und beim Merkzettel-Toggle zuverlässige Ansagen sicherstellt.

4. Praxis-Pattern: sichtbarer Preis plus versteckter Kontext-Text

Das robusteste Pattern kombiniert del und ins mit einem zusätzlichen, visuell versteckten Satz, der den kompletten Preisvergleich in natürlicher Sprache zusammenfasst: "Statt 79,99 Euro, jetzt 59,99 Euro, Sie sparen 25 Prozent." Dieser Satz wird als sr-only-Element direkt neben oder innerhalb des Preis-Containers platziert und liefert unabhängig vom Screenreader-Verhalten bei del/ins eine vollständige, verständliche Ansage.

Dieses Pattern ist besonders wichtig für Produktlisten mit vielen reduzierten Artikeln, weil ein Nutzer beim schnellen Durchblättern der Liste sonst mehrfach zwei einzelne Zahlen ohne Kontext hört, statt einer klaren, in sich geschlossenen Aussage zu jedem Artikel.

<p class="price">
  <span class="sr-only">Statt 79,99 Euro, jetzt 59,99 Euro, Sie sparen 25 Prozent.</span>
  <del class="price__old" aria-hidden="true">79,99 EUR</del>
  <ins class="price__new" aria-hidden="true">59,99 EUR</ins>
</p>

5. Prozent-Rabatt-Badges mit Textalternative auszeichnen

Ein Rabatt-Badge zeigt oft nur eine kurze Zahl wie "-25%" in einem farbigen Kreis oder Rechteck oben links am Produktbild. Ohne begleitenden Text bleibt für Screenreader unklar, worauf sich diese Zahl bezieht, sie könnte theoretisch auch eine Bewertung, eine Lagerbestandsmenge oder etwas anderes bedeuten. Ein aria-label wie "25 Prozent Rabatt" direkt auf dem Badge-Element löst dieses Problem eindeutig.

Ist der Badge rein dekorativ und die eigentliche Rabatt-Information bereits an anderer Stelle vollständig als Text vorhanden, etwa im Preisvergleich aus dem vorherigen Abschnitt, kann der Badge stattdessen mit aria-hidden="true" aus dem Accessibility Tree entfernt werden, um doppelte Ansagen zu vermeiden. Welche der beiden Techniken passt, hängt davon ab, ob der Badge die einzige Quelle der Rabattinformation ist oder nur eine visuelle Wiederholung.

<span class="discount-badge" aria-label="25 Prozent Rabatt">-25%</span>

6. Preisspannen bei Produktvarianten verständlich und dynamisch ansagen

Konfigurierbare Produkte mit mehreren Varianten zeigen oft eine Preisspanne wie "ab 19,99 Euro" an, solange noch keine konkrete Variante ausgewählt wurde. Dieser Text sollte immer das Wort "ab" oder eine äquivalente Formulierung enthalten, statt nur die niedrigste Zahl isoliert darzustellen, da sonst der Eindruck eines Festpreises statt einer Preisspanne entsteht.

Sobald der Nutzer eine konkrete Variante ausgewählt hat, etwa eine bestimmte Grösse oder Farbe, ändert sich der angezeigte Preis dynamisch von der Preisspanne zu einem festen Wert. Diese Änderung muss über eine aria-live="polite"-Region angesagt werden, da der Preis sonst in einem bereits gerenderten, nicht neu fokussierten Element still aktualisiert wird und Screenreader-Nutzer die neue, verbindliche Zahl schlicht verpassen.

<p id="product-price" aria-live="polite">
  ab 19,99 EUR
</p>

<script>
function updatePriceForVariant(price) {
  document.getElementById('product-price').textContent = price + ' EUR';
}
</script>

7. Farbliche Kennzeichnung von Rabatten und Kontrastanforderungen

Ein reduzierter Preis wird visuell häufig zusätzlich in Rot dargestellt, um ihn von regulären Preisen abzuheben. Nach WCAG-Erfolgskriterium 1.4.1 darf Farbe niemals das einzige Unterscheidungsmerkmal sein, weshalb die durchgestrichene Linie am Alt-Preis, die veränderte Schriftstärke am neuen Preis oder ein zusätzliches Badge zwingend als nicht-farbliches Signal erhalten bleiben müssen, selbst wenn die rote Farbe zusätzlich verwendet wird.

Der Kontrast der roten Preis-Schrift zum Hintergrund muss dabei denselben WCAG-Mindestwert erfüllen wie jeder andere Text auch, mindestens 4,5 zu 1 für normalen Fliesstext. Ein häufiger Fehler ist ein zu helles, auffälliges Rot, das zwar markant wirkt, aber auf hellem Hintergrund den geforderten Kontrastwert verfehlt und damit für Nutzer mit Sehbeeinträchtigung schwer lesbar wird.

8. Währungs- und Zahlenformat-Lesbarkeit für Screenreader

Große Preisangaben mit Tausendertrennzeichen, etwa "1.299,00 EUR", werden von manchen Screenreadern je nach Sprach- und Locale-Einstellung unterschiedlich vorgelesen, in seltenen Fällen sogar als einzelne Ziffernfolge statt als zusammenhängende Zahl. Ein korrekt gesetztes lang-Attribut auf dem HTML-Dokument oder dem jeweiligen Preis-Element sorgt dafür, dass die Aussprache-Engine des Screenreaders die richtige Sprachregel für Zahlenformate anwendet.

Währungssymbole wie "EUR" oder "€" sollten konsistent entweder immer als Kürzel oder immer als Symbol verwendet werden, da manche Screenreader das Euro-Symbol korrekt als "Euro" aussprechen, während andere es stumm überspringen oder als unbekanntes Zeichen ansagen. Ein textuelles Kürzel wie "EUR" ist in der Praxis die zuverlässigere Wahl für konsistente Ansagen über verschiedene Assistenztechnologien hinweg.

9. Umsetzung in Magento und Hyvä: Price-Block-Template anpassen

In einem Hyvä-Theme lässt sich das del/ins-Pattern direkt im Price-Render-Template der Produktliste und Produktdetailseite ergänzen, sodass der ursprüngliche Magento-Preis-Block weiterhin als zentrale Datenquelle dient, aber mit korrektem semantischem Markup und einem zusätzlichen sr-only Kontext-Satz ausgegeben wird. Die dynamische Preisaktualisierung bei Variantenwahl läuft über dieselbe Alpine.js-Komponente, die auch die Variantenauswahl steuert.

Der inline eingebundene script-Block für die aria-live-Aktualisierung des Preises muss über $hyvaCsp->registerInlineScript() im jeweiligen phtml-Template registriert werden, damit die Content Security Policy die Ausführung nicht blockiert.

document.addEventListener('alpine:init', () => {
  Alpine.data('variantPrice', () => ({
    priceLabel: 'ab 19,99 EUR',
    updatePrice(newPrice) {
      this.priceLabel = newPrice + ' EUR';
    },
  }));
});

10. Zusammenfassung

11. FAQ: Preisdarstellung barrierefrei: Die wichtigsten Fragen