Seite 13 - Barrierefreiheit

Der Merkzettel-Button gehört zu den unscheinbarsten, aber am häufigsten falsch ausgezeichneten Interaktionselementen im Onlineshop: Ein Herzen-Icon wechselt beim Klick seinen Zustand, ohne dass sich am umgebenden Markup sichtbar etwas ändert, und genau dieser stille Statuswechsel ist für Screenreader-Nutzer ohne zusätzliche ARIA-Arbeit unsichtbar. Wer das Toggle-Button-Pattern mit aria-pressed konsequent einsetzt und Statusänderungen aktiv ansagt, macht aus einem rein visuellen Wechsel eine nachvollziehbare Aktion, auch bei der Verwaltung des Merkzettels selbst.

Wer interaktive Bedienelemente als generische div oder span umsetzt, verliert automatisch Tastaturbedienung, Fokusreihenfolge und Screenreader-Ankündigungen und muss all das mühsam mit ARIA nachbauen. Native HTML-Elemente wie button, a, ul und h2 liefern diese Eigenschaften kostenlos mit. Dieser Artikel zeigt, wie ihr semantische Fehler in Magento- und Hyvä-Templates erkennt und durch die richtigen Elemente ersetzt.