Barrierefreiheit

Mit dem Modul Barrierefreiheit/Accessibility das Layout des Shops um viele Elemente der Barrierefreiheit erweitert.
Es kann unter Shops → Bearbeiten → Layoutanpassungen/Inhalt aktiviert werden.

Tastaturbedienbarkeit

• Alle interaktiven Elemente könen mit der Tastatur (Tabulatortaste) ausgewählt werden.

• Alle Funktionen können mit der  Tastatur (Eingabe- oder Leertaste) aktiviert werden.

• Elemente werden als HTML-Standardelemente verwendet oder mit den entsprechenden ARIA-Attributen versehen,
  damit sie vom Screenreader korrekt ausgegeben werden und bedient werden können

Sichtbarkeit des Tastaturfokus 

• Mit Hilfe von CSS Eigenschaften wird der Fokus deutlich sichtbar hervorgehoben

• Der Rahmen ist mindestens 2px breit und hat einen Mindestkontrastabstand von 3:1.

Nicht-Text-Inhalte

• Icons, die als Grafiken innerhalb eines Buttons umgesetzt sind, enthalten ein Alt-Attribut.

• Der Zweck von Buttons wird mit einem Beschreibungstext im Textknoten des Buttons dargestellt.

• Alle Grafiken, die Informationen übermitteln, enthalten einen inhaltlich äquivalenten Alternativtext.

Aufgabenangemessene Fokusreihenfolge

• Für Benutzer, die linear durch den Inhalt navigieren, sind Bedienelemente so gestaltet sein, dass sie
  in einer aufgabenangemessenen Reihenfolge erreicht werden können.

• Beim Öffnen von Pop-ups wird der Tastaturfokus auf das erste interaktive Element oder die Überschrift gesetzt.

• Nach dem Schließen von Pop-ups wird der Fokus auf das auslösende Element gesetzt.

Informationen und Beziehungen

• Inhalte, die keine Überschrift darstellen, werden nicht mit Überschriften-Element ausgezeichnet.

• Sollen Inhalte auch für blinde Nutzer hervorgehoben werden erhalten Sie eine Überschrift, die entsprechend ausgezeichnet ist.

• Optisch unterscheidbare Abschnitte enthalten eine Abschnittsüberschrift.

Farbkodierung

• Links erhalten eine Unterstreichung oder ein anderes Merkmal, welches nicht auf Farbe beruht, um sich vom umgebenden Text zu unterscheiden.

• Unterscheiden Links sich nur durch Farbe vom umgebenden Text, haben sie mindestens einen Kontrastabstand von 3,0:1.

• Die Links verändern auch beim beim Mouseover ihr Aussehen.

Kontrastabstand (Minimalkontrast) 

• Zwischen Vorder-und Hintergrund wird ein Mindestkontrast von 3:1 für große Schrift und 4,5:1
  für kleine Schrift eingehalten.

• Deaktivierte Elemente halten einen Mindestkontrast von (3,0:1) ein, sofern sie Informationen
  übermitteln.

Kontrastabstand von Nicht-Text-Inhalten

• Bei Bedienelementen wird zwischen Vorder-und Hintergrund ein Mindestkontrast von 3:1
  eingehalten.

Seitentitel

• Mit Hilfe des <title>-Elements im Dokumentenheader werden für alle Seiten unterschiedliche Titel vergeben.

Fehlermeldungen in Textform

• Fehlermeldungen werden sowohl oberhalb des Formulars als auch im Label des betroffenen
  Eingabefeldes textlich beschrieben werden.

• Farbe oder Textformatierungen werden, um das fehlerhafte Feld zusätzlich zu kennzeichnen.

• Der Tastaturfokus wird in das erste fehlerhafte Feld gesetzt.

Eingabehinweise in Labels

• Pflichtfelder werden durch einen Stern im Label des Feldes gekennzeichnet