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 einem alt-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.
