Barrierefreie Gestaltung

Damit Ihr Shop/Website barrierefrei ist, benötigen Sie die aktuellen Versionen der Flow® Shopsoftware und der RoyalArt® Design-Website. hier wurden hunderte Dinge angepasst.
Es ist aber nicht nur die Software wichtig, sondern auch die individuelle Gestaltung wie z.B. die eingestellte Schriftgröße und die eingestellten Farben und Kontraste. Auf dieser Seite geben wir Ihnen ein paar Tipps für die Umsetzung.

Standard-Artikelbildgalerie
Ggf. deaktivieren Sie den Zoom, da Zoom keinen Alt-Tag auf das original abgelegte Bild haben kann (es ist kein eingebundenes Bild).
Für einen Blinden das wohl keine Rolle, aber Scanner könnten das mögliches Problem anzeigen. Wer dennoch einen großen tollen Zoom wünscht, könnte sich für die Seitwärz-Wisch-Galerie interessieren.

Geschäftspapier
Löschen Sie den grafischen Rechnungsfuß (DESIGN -> GESCHÄFTSPAPIER), dann wird automatisch der systemische Rechnungsfuß erstellt. Da der Platz begrenzt ist (Papier ist endlich), kann bei langen E-Mail-Adressen und Domains der Platz eng werden. Verzichten Sie daher auf Subs wie "www" und schreiben nur Ihre Hauptdomain in das Geschäftspapier. Halten Sie Ihre Daten knapp und übersichtlich, dann passt alles drauf.

Links
Wenn Sie in Texten Links erstellen, geben Sie Ihren Links einen Title und unterstreichen Sie Links. In der Konsequenz sollten Sie alles, was keine Links sind, nicht unterstreichen.

Zweiteiliger Aufbau des Seitentitels (Title-Tag)
Seitentitel bestehend aus allgemeinem und individuellem Seitentitel angeben, getrennt durch Bindestrich oder ähnlichem. Der allgemeiner Seitentitel (z. B. Name der Webseite) sollte gleichbleibend sein, damit der Nutzer bei mehreren offenen TABs die Website gut wiedererkennt. Das betrifft Ihre Seiten im Menüpunkt SEITEN (inkl. der HOME) und Ihre Title-Tags in den Kategorien.

Alternativtext für nicht verlinkte Bilder (Alt-Tag):
Objektive Beschreibung, was zu sehen ist, in 1-2 Sätzen; gilt nur, wenn nicht als dekoratives Element eingesetzt

Alternativtext für Bedienelemente (Alt-Tag)
D.h. das LupeIcon ist im Alt benannt zu „suchen“

Alternativtext für verlinkte Bilder (Alt-Tag)
Objektive Beschreibung, was zu sehen ist, in 1-2 Sätzen und Funktion des Links benennen

Dekorative Grafiken (z. B. Trennlinie)
Benötigen keinen Alternativtext; Alt-Attribut in HTML muss leer sein
D.h. wenn Sie z.B. im Artikeltext Trennlinien einbauen.

Alternativen für Captchas
Bild-Captchas sind nicht mehr erlaubt. Diese müssen deaktviert werden oder auf Zahlen-Captcha umschalten oder das Kontaktformular deaktiviert werden.

Schriftgröße & Kontrast
Großer Text – mindestens 18 pt (24 px) oder 14 pt (18,66 px) und fett – sollte ein Kontrastverhältnis von mindestens 3 zu 1. haben
Fließtext sollte ein Kontrastverhältnis von mindestens 4,5 zu 1. haben.
https://webaim.org/standards/wcag/checklist#sc1.4.3
https://www.w3.org/WAI/WCAG22/quickref/#contrast-minimum

Automatische Platzhalter
Um eine barrierefreie Website zu erhalten, müssen Sie allen eigenen Grafiken einen Title-Tag und einen Alt-Tag geben. Machen Sie das nicht, schlagen Barrierefrei-Scanner Alarm. Damit das nicht passiert, vergibt das System einen Platzhalter-Title/Alt, wenn Sie selbst nichts eingetragen haben.
Der Platzhalter ist nicht schön, aber bewahrt Sie von automatischen Scannern (z.B: von Abmahnanwälten). Ihnen selbst hilft er, dass Sie vergessene Title/Alt schneller finden. Vergeben Sie anschließend einen vernünftig beschreibenden Title/Alt.

Hinweis:
Logo, Mobillogo und Logobanner verwenden den gleichen Title/Alt vom LogoBanner.


Intern

Umsetzungshilfen für Webentwicklung

[1] https://www.barrierefreiheit-dienstekonsolidierung.bund.de/Webs/PB/DE/umsetzungshilfen/checklisten/checklisten-node.html

[2] https://www.barrierefreiheit-dienstekonsolidierung.bund.de/Webs/PB/DE/umsetzungshilfen/webentwicklung/webentwicklung-node.html

 

Checklisten

Checklisten für verschiedene Dokument-Arten: