Barrierefreiheit im Shop #

Diese Seite richtet sich an Designer, Entwickler und Händler, die möchten, dass alle in ihrem Shop kaufen können, einschließlich Menschen, die eine Tastatur, einen Screenreader oder eine Vergrößerung verwenden. Eine Kasse, die sich nicht abschließen lässt, ist ein verlorener Verkauf und vielerorts ein rechtliches Problem. Diese Seite nennt die Teile des Shop-Markups, die Sie steuern, und was Sie bei jedem prüfen sollten; die allgemeine Anleitung finden Sie unter Barrierefreiheit für Site-Ersteller.

Inhalt #

1. Woher das Markup stammt
2. Produktseiten
3. Warenkorb
4. Formulare der Kasse
5. Fehler- und Statusmeldungen
6. Zahlung und Belege
7. Checkliste

Woher das Markup stammt #

Alle Shop-Seiten sind Templates, die Sie in Ihrem Design überschreiben können (Template-Overrides):

Prüfen Sie die Templates, die Ihr Theme tatsächlich verwendet, nicht nur die Standard-Templates; die mitgelieferten Themes bringen ihre eigenen Shop-Templates mit (Einen Shop betreiben: Überblick).

Produktseiten #

• Der Preis ist Text, mit der Währung, nicht nur eine Grafik.
• Das Steuerelement Zum Warenkorb hinzufügen ist eine echte Schaltfläche mit einer Textbeschriftung.
• Optionsfelder (Größe, Farbe) haben jeweils ein sichtbares, mit dem Steuerelement verbundenes Label; Aufpreise stehen im Text des Labels.
• Produktbilder haben Textalternativen, die das Produkt beschreiben; dekorative Bilder haben leere Alternativen.

Warenkorb #

• Der Warenkorb ist eine Tabelle mit Kopfzellen für Produkt, Menge, Preis und Summe.
• Mengenfelder haben Labels, die das Produkt nennen („Menge von Blaues Hemd“).
• Steuerelemente zum Entfernen sagen, was sie entfernen.
• Eine Änderung der Warenkorbanzahl im Seitenkopf wird angesagt, oder der Kunde wird zum Warenkorb geführt (RedirectAfterAddToBasket=basket), damit die Änderung nicht still bleibt.

Formulare der Kasse #

• Jedes Feld hat ein sichtbares Label; Pflichtfelder sind im Text markiert, nicht nur durch Farbe.
• Felder haben die richtigen Eingabetypen und Autocomplete-Hinweise für Name, E-Mail und Adresse.
• Die Länderauswahl ist mit der Tastatur bedienbar; die mitgelieferte Auswahl listet die meistgenutzten Länder zuerst (Ländergruppen und Regionen).
• Das Formular eines eigenen Shop-Konto-Handlers folgt denselben Regeln (Shop-Konto-Handler).

Fehler- und Statusmeldungen #

• Fehler wie eine ungültige Menge oder entfernte Artikel (die Liste removed_items des Warenkorbs) werden als Text oben angezeigt, wobei der Fokus dorthin verschoben oder die Meldung angesagt wird.
• shop/checkoutagain.tpl und shop/cancelcheckout.tpl erklären in klaren Worten, was passiert ist und was als Nächstes zu tun ist.

Zahlung und Belege #

• Auf der Seite zur Auswahl des Gateways ist jedes Gateway eine beschriftete Auswahlmöglichkeit.
• Eine Weiterleitung zum Anbieter wird auf der Schaltfläche angekündigt („Weiter zu PayPal“).
• Der Beleg hat eine Ansicht Drucken nur für den Beleg und einen Download als eigenständige HTML-Datei (Dauerhafte Bestellbelege); prüfen Sie beides mit einem Screenreader.
• Eine HTML-Bestellmail hat eine sinnvolle Lesereihenfolge und Alternativen für Bilder.

Checkliste #

• To do: Der vollständige Weg, vom Produkt bis zum Beleg, nur mit der Tastatur.
• To do: Derselbe Weg mit einem Screenreader.
• To do: Zoom auf 200 Prozent: Nichts überlappt oder braucht horizontales Scrollen.
• To do: Kontrast von Preisen, Schaltflächen und Fehlermeldungen.
• To do: Fehlermeldungen für jedes Formularfeld.
• To do: Getestet mit den Methoden aus Barrierefreiheit testen.

Verwandte Seiten #

• Einen Shop betreiben
• Barrierefreiheit für Site-Ersteller
• Einen Shop testen
• Freie Dokumentation: diese Seite darf unter der GNU FDL 1.3 frei kopiert, übersetzt und verbessert werden.