Anleitungen: Barrieren beheben

Jede Anleitung erklärt das Problem, wen es betrifft, wie du es behebst und wie du prüfst, ob es geklappt hat. Plattform-Anleitungen veröffentlichen wir erst, wenn die Schritte mit der offiziellen Dokumentation der Plattform übereinstimmen und redaktionell geprüft sind.

Nach Plattform

• Shopify

  in Prüfung, solange: allgemeine Anleitungen

• WooCommerce

  in Prüfung, solange: allgemeine Anleitungen

• WordPress

  in Prüfung, solange: allgemeine Anleitungen

• Shopware 6

  in Prüfung, solange: allgemeine Anleitungen

• JTL-Shop

  in Prüfung, solange: allgemeine Anleitungen

• Wix

  in Prüfung, solange: allgemeine Anleitungen

• Jimdo

  in Prüfung, solange: allgemeine Anleitungen

• Eigenes HTML / andere

  12 Anleitungen

Allgemeine Anleitungen (HTML und CSS)

• Alle Funktionen per Tastatur bedienbar machen

  Alles, was man im Shop mit der Maus tun kann, muss auch mit der Tastatur gehen, ohne dass man irgendwo festhängt.

• Alt-Texte für Bilder ergänzen

  Jedes Bild, das Information trägt, braucht eine kurze Textalternative, und rein dekorative Bilder bekommen ein leeres alt-Attribut.

• Aussagekräftige Linktexte schreiben

  Ein Link soll sagen, wohin er führt, damit man ihn auch ohne das Drumherum versteht, statt nur "hier" oder "mehr".

• Barrierefreiheitserklärung im Footer verlinken

  Die Seite mit den Informationen zur Barrierefreiheit soll von jeder Seite deines Shops aus über einen klar benannten Link im Footer erreichbar sein.

• Cookie-Banner barrierefrei gestalten

  Der Cookie-Banner ist oft das Erste, was man im Shop sieht, deshalb muss er per Tastatur und Screenreader bedienbar sein, und Zustimmen wie Ablehnen müssen gleich leicht gehen.

• Farbkontraste von Text und Bedienelementen verbessern

  Text und wichtige Bedienelemente brauchen genug Kontrast zum Hintergrund, damit auch Menschen mit eingeschränktem Sehen sie lesen können.

• Formularfelder richtig beschriften

  Jedes Eingabefeld braucht eine sichtbare Beschriftung, die technisch mit dem Feld verknüpft ist, damit Screenreader sie vorlesen können.

• PDF-Dokumente zugänglich machen

  PDFs wie AGB, Größentabellen oder Datenblätter brauchen Tags, damit Screenreader sie lesen können, und am besten bietest du die Inhalte zusätzlich als HTML an.

• Sichtbaren Tastaturfokus herstellen

  Wer mit der Tastatur durch deinen Shop geht, muss jederzeit sehen, welches Element gerade ausgewählt ist.

• Sprache der Seite und fremdsprachiger Passagen auszeichnen

  Mit dem lang-Attribut weiß der Screenreader, in welcher Sprache er vorlesen soll, für die ganze Seite und für einzelne fremdsprachige Abschnitte.

• Überschriften sinnvoll strukturieren

  Echte Überschriften von h1 bis h6 in logischer Reihenfolge machen deinen Shop für Screenreader und für alle anderen leichter überschaubar.

• Verständliche Fehlermeldungen in Formularen

  Wenn bei einer Eingabe etwas nicht stimmt, muss die Meldung als Text erscheinen, das betroffene Feld nennen und sagen, wie man es korrigiert.