Rasic-Rudel Analytics

đŸ‘ïž

1. Wahrnehmbar

Informationen mĂŒssen so prĂ€sentiert werden, dass sie von allen Nutzer:innen wahrgenommen werden können – visuell, akustisch oder alternativ.

Beispiel: Alt-Texte fĂŒr Bilder, ausreichender Farbkontrast, Untertitel bei Videos.

Level A – AA – AAA
⌚

2. Bedienbar

Alle Funktionen mĂŒssen per Tastatur erreichbar und bedienbar sein. Nutzer:innen dĂŒrfen nicht durch Zeit oder Bewegung behindert werden.

Beispiel: Fokus sichtbar, keine Mauspflicht, ĂŒberspringbare Navigation.

Level A – AA – AAA
🧠

3. VerstÀndlich

Inhalte mĂŒssen klar, konsistent und sprachlich verstĂ€ndlich sein – auch fĂŒr Menschen mit kognitiven EinschrĂ€nkungen oder Lernschwierigkeiten.

Beispiel: Eindeutige Linktexte, konsistente Navigation, einfache Sprache.

Level A – AA
🔧

4. Robust

Websites mĂŒssen mit möglichst vielen Technologien kompatibel sein – z. B. Screenreadern, Browsern, mobilen GerĂ€ten – heute und in Zukunft.

Beispiel: Sauberes HTML, semantische Tags, ARIA-Rollen.

Level A – AA

ErklÀrungen zu den WCAG-Leveln:

Level Bedeutung
A Mindestanforderung – muss erfĂŒllt sein
AA Standard fĂŒr öffentliche Stellen, Behörden, Unternehmen in der EU (z. B. laut EU-Richtlinie)
AAA Höchste ZugĂ€nglichkeit – meist nicht in allen Bereichen erreichbar

Beispiele zur digitalen Barrierefreiheit

Vergleich typischer guter und schlechter Umsetzungen – zur Schulung, Inspiration oder EigenprĂŒfung

❌ 1. Schlechter Farbkontrast

Text mit zu geringem Kontrast – schwer lesbar fĂŒr viele Nutzer:innen.

✅ 1. Guter Farbkontrast

Starker Kontrast zwischen Text und Hintergrund erhöht die Lesbarkeit.

❌ 2. Kein Alternativtext

Screenreader können das Bild nicht interpretieren.

✅ 2. Alternativtext vorhanden

Ein rotes Auto auf einem Parkplatz

Bild mit alt-Text – hilft Screenreadern und SEO.

❌ 3. Nicht mit Tastatur bedienbar

Absenden

Kein echtes Button-Element – nicht mit Tab erreichbar.

✅ 3. Tastaturfreundliches Formular







❌ 4. Unklare Buttons

Keine Aussage ĂŒber Funktion – nicht selbsterklĂ€rend.

✅ 4. Klar beschriftete Buttons

Buttons sind verstĂ€ndlich und fĂŒhren zu konkreten Aktionen.

❌ 5. Feste SchriftgrĂ¶ĂŸen

Nicht skalierbar – schlecht auf Smartphones.

✅ 5. Responsive SchriftgrĂ¶ĂŸen

Text skaliert je nach BildschirmgrĂ¶ĂŸe – gut lesbar auf allen GerĂ€ten.

❌ 6. Nur visuelles Feedback

Fehlermeldung nur rot markiert – nicht fĂŒr Screenreader zugĂ€nglich.

✅ 6. ZusĂ€tzlich sprachliches Feedback

„E-Mail fehlt“ – verstĂ€ndlich fĂŒr alle Nutzer:innen.

❌ 7. Leere Links

 

Ein Link ohne Inhalt – verwirrend fĂŒr Screenreader.

✅ 7. Eindeutige Linktexte

Zur Produktseite

Links mit Sinn – auch außerhalb des Kontexts verstĂ€ndlich.

❌ 8. Tooltip nur fĂŒr Mausnutzer

đŸ–±ïž Info

Ohne Tastatur nicht erreichbar – Barriere fĂŒr viele.

✅ 8. Tooltip fĂŒr alle

â„č Info (mit Tooltip)

Tooltip mit title funktioniert per Maus und Tastatur.

❌ 9. Placeholder statt Label

Nur visuell – Screenreader erkennen das Feld nicht korrekt.

✅ 9. Label & Placeholder


Formularfeld mit klarer, sichtbarer Beschriftung.

❌ 10. Kein Fokus sichtbar

Orientierungsverlust bei Tastaturnavigation.

✅ 10. Sichtbarer Tastaturfokus

Nutzer:innen erkennen, welches Element fokussiert ist.

Hinweis: Diese Beispiele zeigen typische Fehler und gute Praktiken in der digitalen Barrierefreiheit.