Barrierefreiheit

By Joerg Niemann
2 min

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

 

 

 

 

Related content