Barrierefreiheit im Web bedeutet, dass Websites für alle Menschen nutzbar sind – auch für Menschen mit Behinderungen. Eine oft übersehene Nutzergruppe sind blinde und sehbehinderte Menschen, die mit Screenreadern wie VoiceOver das Internet nutzen. Wenn du sicherstellen willst, dass deine Website für alle zugänglich ist, solltest du regelmäßig Tests mit einem Screenreader durchführen. In diesem Beitrag zeigen wir dir, wie du mit VoiceOver auf dem Mac deine Website auf Barrierefreiheit testest – auch wenn du selbst keine Seheinschränkungen hast.
Was ist VoiceOver?
VoiceOver ist ein Screenreader, der auf allen Apple-Geräten vorinstalliert ist – also auf macOS, iOS und iPadOS. Er liest vor, was auf dem Bildschirm zu sehen ist, und erlaubt die Bedienung nur mit Tastatur (oder Touch-Gesten auf mobilen Geräten). Menschen, die VoiceOver nutzen, „sehen“ deine Website also nicht – sie hören sie.
Statt mit der Maus zu navigieren, bewegen sich Nutzer mithilfe von Tasten durch die Website, hören sich Überschriften, Links, Formulare und andere Elemente an und interagieren damit über Tastaturbefehle.
Warum du mit VoiceOver testen solltest
Auch wenn du kein VoiceOver-Nutzer bist, kannst du es als Tool verwenden, um Schwachstellen in der Barrierefreiheit deiner Website zu erkennen – z. B.:
- Sind deine Überschriften logisch strukturiert?
- Haben Bilder sinnvolle Alternativtexte?
- Sind Formulare korrekt beschriftet?
- Funktioniert die Navigation mit der Tastatur?
Solche Tests helfen dir dabei, ein besseres Nutzungserlebnis für alle zu schaffen.
VoiceOver aktivieren
Wenn du einen Mac nutzt, kannst du VoiceOver ganz einfach einschalten:
- Drücke Cmd + F5
(oder bei manchen Tastaturen: fn + Cmd + F5) - Du hörst nun, wie VoiceOver aktiv wird und erste Anweisungen vorgelesen werden.
- Um VoiceOver wieder zu deaktivieren, drücke dieselbe Tastenkombination.
Tipp: Wenn du das erste Mal mit VoiceOver arbeitest, kann die Stimme überwältigend wirken. Lass dich nicht abschrecken – das legt sich schnell, wenn du ein paar Minuten damit herumspielst.
Grundlagen der Navigation mit VoiceOver
Hier sind einige wichtige Tastenkombinationen, die du für Tests brauchst:
- Ctrl + Option + → oder ←: Nächste/vorherige Elemente auf der Seite
- Ctrl + Option + Shift + ↓: In ein Element hineingehen (z. B. in ein Menü oder Formular)
- Ctrl + Option + U: Rotor öffnen (eine Art Inhaltsverzeichnis, z. B. für Überschriften, Links, Formularelemente)
- Tab: Durch fokussierbare Elemente (wie Links und Buttons) springen
- Ctrl: Sprachausgabe unterbrechen
Der sogenannte „Rotor“ ist besonders hilfreich: Damit kannst du dir z. B. nur alle Überschriften auf der Seite anzeigen lassen – perfekt, um die semantische Struktur deiner Website zu überprüfen.
So testest du deine Website Schritt für Schritt
1. Lade deine Website im Safari-Browser
VoiceOver funktioniert am besten mit Safari, da Apple hier die beste Integration bietet.
2. Navigiere mit der Tastatur
Benutze Ctrl + Option + →, um dich durch die Seite zu bewegen. Achte darauf:
- Wird der Inhalt in logischer Reihenfolge vorgelesen?
- Sind alle Links und Buttons verständlich bezeichnet?
3. Öffne den Rotor mit Ctrl + Option + U
Wechsle z. B. zur Überschriftenliste und überprüfe:
- Gibt es eine H1?
- Ist die Hierarchie der Überschriften korrekt (H1, H2, H3 usw.)?
- Sind die Überschriften informativ?
4. Prüfe Formulare
Navigiere zu Formularfeldern und höre, ob:
- Das Eingabefeld korrekt beschriftet ist
- Der Zweck des Feldes verständlich ist (z. B. „E-Mail-Adresse“ statt „Textfeld“)
5. Teste Alternativtexte von Bildern
VoiceOver liest den alt-Text von Bildern vor. Achte darauf, dass:
- Dekorative Bilder alt=““ haben
- Relevante Bilder sinnvolle Beschreibungen tragen
Tipps für den Einstieg
- Starte klein: Teste zunächst nur die Startseite oder eine Unterseite.
- Schalte VoiceOver regelmäßig während der Entwicklung ein – nicht erst am Ende.
- Beobachte, wie VoiceOver-Nutzer tatsächlich arbeiten – z. B. über YouTube oder Interviews.
- Notiere dir Probleme und verbessere die Semantik und Struktur deiner Seite.
Testen mit dem Screenreader ist wichtig
VoiceOver ist ein mächtiges Werkzeug, um die Barrierefreiheit deiner Website zu testen – und es ist bereits auf deinem Mac installiert. Auch ohne tiefes technisches Wissen kannst du damit schnell erkennen, ob deine Seite für Screenreader-Nutzer zugänglich ist – oder wo du noch nachbessern solltest. Wenn du Fragen hast, nimm gerne Kontakt mit uns auf.
