0Pricing
HTML Academy · Lektion

Testen mit Screenreadern

Überprüfen Sie ARIA-Implementierungen mit VoiceOver und NVDA

Testen mit Screenreadern ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum mit Screenreadern testen?

Automatisierte Tools erkennen nur 30–40 % der Barrierefreiheitsprobleme. Tests mit echten Screenreadern zeigen Probleme auf, die automatisierte Prüfungen übersehen:

  • Unklare Lesereihenfolge
  • Un hilfreiche ARIA-Ansagen
  • Fehlende Fokusverwaltung
  • Verwirrende interaktive Muster

VoiceOver auf dem Mac

VoiceOver ist in macOS integriert – eine Installation ist nicht erforderlich:

<!-- Activate: Cmd+F5 (or System Settings → Accessibility → VoiceOver) -->

<!-- Key commands:
  VO = Control+Option
  VO+Right Arrow = Next element
  VO+Left Arrow = Previous element
  VO+Space = Activate element
  VO+U = Open rotor (landmark navigation)
  VO+H = Next heading
  Tab = Next focusable element
  Shift+Tab = Previous focusable
-->

VoiceOver auf iOS

Testen Sie die Erfahrung mit mobilen Screenreadern mithilfe von VoiceOver auf iPhone/iPad:

<!-- Activate: Settings → Accessibility → VoiceOver
     Or: triple-click side button if set up -->

<!-- Gestures:
  Swipe right = next element
  Swipe left = previous element
  Double-tap = activate element
  Two-finger scrub = back
  Three-finger swipe up/down = scroll
-->

NVDA unter Windows

NVDA ist ein kostenloser Open-Source-Screenreader für Windows:

<!-- Download: nvaccess.org -->

<!-- Key commands:
  NVDA key = Insert (or Caps Lock)
  NVDA+N = NVDA menu
  H = next heading
  K = next link
  B = next button
  F = next form field
  D = next landmark
  Insert+F7 = element list (links, headings, landmarks)
-->

Checkliste für Screenreader-Tests

Was Sie mit einem Screenreader überprüfen sollten:

  • Der Seitentitel wird beim Laden angesagt
  • Überschriften bilden eine logische Navigationsstruktur
  • Alle Bilder haben einen aussagekräftigen oder leeren alt-Text
  • Alle Formularfelder haben Beschriftungen
  • Schaltflächen und Links haben aussagekräftige Namen
  • Die Fokusfalle eines Modals funktioniert korrekt
  • Aktualisierungen dynamischer Inhalte werden angesagt

Häufige Fehler bei Screenreadern

Probleme, die automatisierte Tests übersehen:

<!-- 1. Reading order differs from visual order -->
<!-- CSS flex/grid order ≠ DOM order for screen readers -->

<!-- 2. aria-label doesn't match visible text -->
<!-- Voice control users say visible text to click -->

<!-- 3. Focus disappears after dialog closes -->
<!-- Programmatically return focus to trigger -->

<!-- 4. Dynamic content not in a live region -->
<!-- New items added silently, no announcement -->

Tastaturtests zuerst

Testen Sie zuerst ausschließlich mit der Tastatur, bevor Sie einen Screenreader verwenden:

  1. Trennen Sie Maus oder Trackpad
  2. Navigieren Sie mit der Tab-Taste durch die gesamte Seite
  3. Überprüfen Sie, dass jedes interaktive Element erreichbar ist
  4. Überprüfen Sie, dass alle Aktionen mit der Tastatur ausgeführt werden können

Tools für automatisierte Barrierefreiheitstests

Ergänzen Sie manuelle Tests durch automatisierte Tools:

  • axe DevTools – Chrome-Erweiterung; genauester automatisierter Checker
  • WAVE – wavebooth.com; visuelle Einblendung auf der Seite
  • Lighthouse – Chrome DevTools; Prüfung von Performance und Barrierefreiheit
  • pa11y – CLI-Tool; hervorragend für CI/CD-Pipelines geeignet

Referenz für ARIA-Muster

Der W3C ARIA Authoring Practices Guide (APG) stellt Referenzimplementierungen bereit:

  • Accordion, Alert, Alert Dialog
  • Breadcrumb, Button, Carousel
  • Checkbox, Combobox, Dialog
  • Disclosure, Feed, Grid
  • Listbox, Menu, Menubar
  • Tab, Tooltip, Treeview

URL: w3.org/WAI/ARIA/apg/

Kontinuierliche Integration von Barrierefreiheit

Integrieren Sie Barrierefreiheitstests in Ihren Workflow:

// Jest + axe-core for unit tests:
import { axe, toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);

test('Button is accessible', async () => {
  const results = await axe('<button>Click me</button>');
  expect(results).toHaveNoViolations();
});

// pa11y in CI pipeline:
// pa11y https://example.com --standard WCAG2AA

Zusammenfassung der Tests

Eine vollständige Strategie für Barrierefreiheitstests:

  1. Design – Farbkontrast und Größe der Touch-Ziele prüfen
  2. Entwicklung – Tastaturtests und automatisierten axe-Scan durchführen
  3. Review – Screenreader-Test (VoiceOver und NVDA)
  4. CI/CD – pa11y oder axe in der automatisierten Pipeline
  5. Produktion – Lighthouse und manuelle Stichproben

Kurztest

Welchen Anteil der Barrierefreiheitsprobleme können automatisierte Tools zuverlässig erkennen?

Zusammenfassung: Screenreader-Tests

Die wichtigsten Punkte zu Tests:

  • VoiceOver (Mac/iOS) und NVDA (Windows) sind kostenlos und unverzichtbar
  • Testen Sie zuerst ausschließlich mit der Tastatur und fügen Sie anschließend einen Screenreader hinzu
  • Automatisierte Tools: axe, WAVE, Lighthouse, pa11y
  • Automatisierte Tests erkennen nur etwa 30–40 % der Probleme
  • Verwenden Sie die APG-Muster als Referenz für korrekte ARIA-Implementierungen

Häufig gestellte Fragen

Ist die Lektion „Testen mit Screenreadern“ kostenlos?

Ja — der vollständige Text von „Testen mit Screenreadern“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Testen mit Screenreadern“?

Überprüfen Sie ARIA-Implementierungen mit VoiceOver und NVDA Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Testen mit Screenreadern“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. aria-expanded und aria-controls für Umschalter
  2. aria-selected und Tab-Muster
  3. Live-Regionen: aria-live aria-atomic aria-relevant
  4. Testen mit Screenreadern
← Zurück zu HTML Academy