14.1.2 Präsentieren Sie den Inhalt des Warenkorbs in einer übersichtlichen Form

Hintergrund

Die Darstellung des Warenkorbinhalts ist in vielen Webshop-Implementierungen rein visuell optimiert. Verschachtelte Tabellen, mangelhaftes HTML-Markup und Layoutumsetzungen, die nicht mit dem Text mitskalieren, machen die Nutzung für viele Menschen mit Behinderungen schwierig oder gar unmöglich:

  • Zusammenhängende Informationen wie Stückzahl, Artikel, Preis sind mit Screenreadern nicht als zusammengehörig erkennbar.
  • TastaturbenutzerInnen sind durch eine nicht-intuitive Linkabfolge irritiert.
  • Beim Skalieren der Textgröße werden Inhalte abgeschnitten oder in einer Form positioniert, die korrekte Zusammenhänge nicht erkennen lässt.

Maßnahmen

  • Wählen Sie die einfachste sinnvolle HTML-Markup-Struktur für Warenlisten, z.B. Listen oder nicht verschachtelte Tabellen.
  • Tabellarische Darstellung erfordert eine entsprechende barrierefreie Gestaltung und Beschriftung der Tabellen. Achten Sie daher auf eine saubere Beschriftung der Warenlisten, z.B. durch Tabellenheader oder Überschriften. Im Notfall können diese Beschriftungen auch mit entsprechenden CSS-Techniken verborgen werden, wenn diese strukturelle Informationen für Screenreader-NutzerInnen enthalten.
  • Links und Buttons sollten anhand ihrer Beschriftung eindeutig identifizier- und zuordenbar sein – insbesondere wenn diese sich bei jedem Produkt wiederholen. Mögliche Techniken dafür sind sauber gestaltete Datentabellen, TITLE-Attribute, verborgener Linktext, korrekte Reihenfolge und Platzierung von Links.

Wer profitiert davon

  • Screenreader-NutzerInnen
  • alle NutzerInnen

Beispiel

Oeticket klicken auf nicht klickbares

oeticket.at: Optisch und semantisch gut strukturiert ist der Warenkorb von oeticket.at. Die Testerin war nur ein wenig irritiert, dass sie Karten nicht einzeln wieder löschen konnte.