Barrierefreiheit

Mit dem Modul Barrierefreiheit/Accessibility das Layout des Shops um viele Elemente der Barrierefreiheit erweitert.

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