Anleitung zur Barrierefreiheit (Accessibility) für Webseiten

1. Kontrastverhältnis

Alle Textelemente (einschließlich Buttons, Links und Formularfelder) müssen ein Kontrastverhältnis von mindestens 4.5:1 zum Hintergrund aufweisen. Dies gilt für:

regulären Text und Symbole
Texte in Buttons
Texte in Navigationselementen

2. Alternativtexte für Bilder

Alle Bilder müssen mit einemalt-Attribut versehen sein, das den Inhalt oder die Funktion des Bildes beschreibt. Bitte immer darauf aufpassen, dass in Shop-Portlets immer für das Bild ein Alttext vorhanden ist.

3. Tastaturbedienbarkeit

Alle interaktiven Elemente der Webseite müssen vollständig mit der Tastatur bedienbar sein. Das bedeutet insbesondere:

Navigation per Tab, Enter und Space muss möglich sein
Kein Element darf ohne Maus unzugänglich sein
Fokus-Reihenfolge muss logisch und konsistent sein

4. Semantische HTML-Struktur

Verwenden Sie semantisch korrekte HTML-Elemente:

Überschriften: <h1> bis <h6> in logischer Reihenfolge
Navigation: <nav>, Listen für Menüs
Formulare: <label> für jedes Eingabefeld
Tabellen nur für tabellarische Daten (nicht für Layout)

5. Fehlerhinweise bei Formularen

Formulare müssen:

Eingabefehler deutlich anzeigen
Hinweise zum Fehler geben
Nutzer:innen bei Korrektur unterstützen

Verwenden Sie dazu z. B. aria-describedby, um Fehlertexte maschinenlesbar zuzuordnen.

6. Sprache deklarieren

Die Sprache der Webseite muss im HTML-Tag korrekt deklariert werden (<html lang="de">). Für anderssprachige Abschnitte innerhalb des Inhalts ist das entsprechende lang-Attribut zu setzen.

7. Keine beweglichen Inhalte ohne Steuerung

Inhalte, die sich automatisch bewegen oder blinken (z. B. Karussells, Animationen), müssen:

manuell pausierbar, anhaltbar oder ausblendbar sein
keine epileptischen Reize (z. B. schnelles Flackern) enthalten

8. Keine leeren HTML-Tags zur Gestaltung

Leere HTML-Tags, insbesondere Überschriften-Tags wie <h1></h1>, dürfen nicht zur visuellen Gestaltung oder zum Zeilenumbruch verwendet werden. Dies gilt auch für andere strukturelle Elemente wie <p>, <div> oder <span> ohne sinnvollen Inhalt.

Stattdessen:

Verwenden Sie CSS für Abstände und Layout
Strukturieren Sie Inhalte semantisch korrekt
Nutzen Sie <br> nur bei tatsächlichem Zeilenumbruch innerhalb eines Absatzes, nicht zur Erzeugung von Abstand

Begründung: Leere oder falsch eingesetzte semantische Elemente stören Screenreader, erzeugen falsche Inhaltsstrukturen und beeinträchtigen die Barrierefreiheit erheblich.