Website barrierefrei prüfen – so geht’s in 15 Minuten
Unsere Freiwillige Erklärung zur Barrierefreiheit ist online – doch Theorie reicht nicht. In diesem Leitfaden zeigen wir, wie du selbst (ohne Spezialsoftware) testest, ob deine Website für alle zugänglich ist.
Alles zusammen dauert keine Viertelstunde und liefert sofort eine To-Do-Liste.
1 | 5-Minuten-Check mit Online-Tools
| Tool | Was wird geprüft? | Link |
| WAVE | Struktur, Alternativtexte, ARIA-Rollen, Kontrast | wave.webaim.org |
| Lighthouse (Chrome) | WCAG-Score 0–100, Performance & PWA | Chrome DevTools → Reiter „Lighthouse“ |
| EXPERTE.de-Accessibility-Check | Überschriftenhierarchie, Kontrast, Formulare | experte.de/barrierefreiheit |
| Aktion-Mensch-Checkliste | Manuelle WCAG-Prüfschritte als PDF | aktion-mensch.de/digital |
Tipp: Starte mit WAVE – das Highlighting im Browser zeigt dir in Sekunden, wo Alt-Texte oder Kontrast fehlen.
2 | Reality-Check mit Screenreader (≈ 5 Min.)
2. Mit H durch die Überschriften springen.
3. Höre, ob Buttons & Links sinnvoll benannt sind (kein „link 123“).
4. CapsLock + M liest die Fokusposition aus.
5. Windows + Ctrl + Enter beendet den Narrator.
Mac Shortcut: Cmd + F5 startet/stoppt VoiceOver.
3 | Tastatur-Navigation testen (≈ 5 Min.)
• Shift + Tab rückwärts → Funktioniert jeder Schritt?
• Enter / Space → Löst jeder Button aus?
• Esc → Schließt modale Dialoge?
Wenn der sichtbare Fokus (Focus-Ring) fehlt, geht Tastatur¬navigation zwar technisch, ist aber praktisch unbrauchbar.
4 | Häufige Stolpersteine und schnelle Fixes
1. Skip-Links fehlen
Screenreader & Tastatur-Nutzer brauchen eine Sprungmarke zum Hauptinhalt.
💡 <a href="#main" class="skip-link">Zum Inhalt</a> ganz oben auf der Seite einfügen.
2. Platzhalter-Alt-Text
„image123.jpg“ sagt nichts über das Bild aus.
💡 Ersetz durch: alt="Blaues Balkendiagramm Umsatz 2024"
3. Kontrast-Grenzfall
Blau (#1B3A6B) auf Weiß ist bei 14 px nur WCAG AA – nicht AAA.
💡 Entweder Farbe anpassen (#143260) oder Textgröße auf mindestens 18 px erhöhen.
4. Leere Buttons oder Links
Beispiel: <button><i class="icon"></i></button> ist nicht zugänglich.
💡 Ergänze: aria-label="Menü öffnen"
5. Fokus nicht sichtbar
CSS: outline: none; verhindert Tastatur-Fokus.
💡 Besser: :focus { outline: 2px solid #1B3A6B; }
| Problem | Erklärung | Schneller Fix |
| Skip-Links fehlen | Springtaste „Zum Inhalt springen“ für Screenreader und Tastatur | <a href=“#main“ class=“skip-link“>Zum Inhalt</a> am Seitenanfang |
| Platzhalter-Alt-Text | „image123.jpg“ verrät nichts | Aussagekräftig: alt=“Blaues Balkendiagramm Umsatz 2024″ |
| Kontrast-Grenzfall | Blau #1B3A6B auf Weiß: bei 14 px Text nur WCAG AA, nicht AAA | Variante #143260 oder Textgröße ≥ 18 px |
| Leere Buttons/Links | <button><i class=“icon“></i></button> | aria-label=“Menü öffnen“ hinzufügen |
| Fokus nicht sichtbar | outline: none; in CSS | Fokus-Style wieder aktivieren: :focus { outline: 2px solid #1B3A6B; } |
5 | Brauche ich Profi-Hilfe?
Nicht jede Website braucht ein offizielles Barrierefreiheits-Audit – aber fast jede profitiert davon.
Wann ist ein professionelles Audit Pflicht?
- Banken und Versicherungen
- Online-Shops & E-Commerce-Plattformen
- E-Book-Anbieter
- Unternehmen mit digitalen Kundenschnittstellen, z. B. Login-Bereichen oder Ticket-Systemen
Wann ist ein Audit trotzdem sinnvoll?
- Viele kleinere Websites erfüllen schon aus Versehen wichtige WCAG-Kriterien – oder scheitern unbemerkt an simplen Hürden
- Usability für alle heißt: mehr Reichweite, mehr Verweildauer, weniger Frust – auch bei Menschen ohne Behinderungen
- Barrierefreiheit wirkt sich positiv auf SEO aus (z. B. durch bessere Struktur, klare Labels und optimierte Ladezeiten)
FAZIT
7 | FAQ – Schnell beantwortet
Muss ich Audiodeskription anbieten?
Erfüllt ein Farbschema allein die WCAG?
Was kostet ein WCAG-Audit?
TL;DR – Kurzfassung für Eilige
⏱️ In 15 Minuten prüfen, ob deine Website barrierefrei ist:
Online-Tools checken Alt-Texte, Struktur und Kontrast – z. B. WAVE oder Lighthouse
Screenreader-Test: Mit Narrator (Windows) oder VoiceOver (Mac) hörst du, was sehbehinderte Nutzer*innen erleben
Tastaturnavigation: Tab, Shift + Tab und Enter – kommt man überall hin? Ist der Fokus sichtbar?
Typische Hürden und Fixes: Skip-Links, Kontraste, leere Buttons, versteckter Fokus
Audit nötig? Nur bei gesetzlicher Pflicht – aber jedes behobene Hindernis verbessert die User Experience
💡 Bonus: Lust auf den nächsten Schritt? Dann schau mal hier rein:
Warum automatische Untertitel bis zu 15 % Fehler enthalten – Risiko Auto-UT
Wer ab 2025 gesetzlich Untertitel liefern muss – Untertitelpflicht erklärt
Wie gute Untertitel eigentlich entstehen – Profi-UT und Transkriptionen von smartspokes
Möchtest du weitere Tipps und Tricks?
Auf unserer YouTube-Seite laden wir regelmäßig kurze Videos mit Tipps und Tricks rund um Themen wie E-Learning und Übersetzung hoch. Wir laden dich zum Stöbern durch unsere Inhalte ein. Vielleicht entdeckst du ein paar Videos, die hilfreich für dich sind!
ÜBERSETZUNG
„Made in Germany“ aus Baden-Württemberg steht weltweit für Qualität. Diesem Ruf fühlen wir uns verpflichtet. Eine hochwertige Übersetzung ist gut lesbar, leicht verständlich und für das Zielpublikum nicht als Übersetzung erkennbar. Das ist unser Anspruch.
