Barrierefreiheit

Owned by Joerg Niemann
Last updated: Dez. 02, 2022
2 min read

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