html-einfach.de

Barrierefreie Komponenten · Medien

Barrierefreier Media-Player

Von Zuletzt geändert am

Ein Mediaplayer ist ein Bündel aus Bedienelementen: Play, Pause, Lautstärke, Zeitleiste, Untertitel. Jedes davon kann eine Barriere werden, wenn man es selbst nachbaut. Deshalb gilt auch hier zuerst der Blick auf das, was der Browser schon mitbringt.

Native Controls zuerst

<video controls> und <audio controls> liefern einen vollständig zugänglichen Player – tastaturbedienbar, beschriftet, mit Untertitel-Umschaltung. Kombiniert mit der <track>-Spur ist das Fundament fertig: 

<video controls preload="metadata" width="800" height="450">
  <source src="/video/einfuehrung.mp4" type="video/mp4" />
  <track kind="captions" src="/video/einfuehrung.de.vtt" srclang="de" label="Deutsch" default />
</video>

Bevor du das controls-Attribut entfernst, frag dich, ob der Eigenbau den Aufwand wert ist – die nativen Controls sind erstaunlich gut.

Eigene Controls richtig bauen

Wenn das Design eigene Bedienelemente verlangt, gelten klare Regeln:

  • Jeder Knopf ist ein echter <button> mit eindeutigem Namen („Wiedergabe“, „Pause“, „Stumm“). Reine Icons brauchen ein aria-label.
  • Zustände ansagen: Der Play/Pause-Knopf ändert seinen Namen oder nutzt aria-pressed.
  • Tastatur: alles per Tab erreichbar, Leertaste/Enter lösen aus; eine sichtbare Fokusmarkierung ist Pflicht.
  • Zeitleiste als echter Schieberegler (<input type="range"> oder role="slider" mit Werten) – nicht nur ein klickbarer Balken.
  • Untertitel-Umschaltung nicht vergessen, wenn du die nativen Controls ersetzt.

Bewegung, Ton und Autoplay

  • Kein Autoplay mit Ton. Automatisch startender Ton ist aufdringlich und ein WCAG-Verstoß (1.4.2) – biete mindestens eine sofortige Pause/Stummschaltung.
  • prefers-reduced-motion respektieren: Wer reduzierte Bewegung wünscht, sollte keine automatisch spielenden Videos oder Hintergrund-Loops vorgesetzt bekommen.
  • Untertitel & Transkript gehören dazu – Details auf Untertitel, Transkripte & Audiodeskription.

Randnotiz – das schwerste Element gleich mitdenken. Ein Player mit großem Video ist auch ein Performance-Thema: preload="metadata" statt des ganzen Videos, feste Maße gegen Layout-Sprünge und kein automatisches Abspielen schonen LCP und Datenvolumen. Barrierefreiheit und Performance ziehen wieder am selben Strang.

Häufige Fehler

  • controls entfernt und durch unvollständigen Eigenbau ersetzt.
  • Icon-Buttons ohne Label – „Knopf“ ohne Funktion für Screenreader.
  • Autoplay mit Ton ohne sofortige Stoppmöglichkeit.
  • Zeitleiste als klickbares <div> ohne Tastatur und Werte.
  • Untertitel vergessen, weil die native Umschaltung wegfiel.

Häufige Fragen

Reichen die nativen Controls?

Für die meisten Fälle ja. Sie sind zugänglich und sparen viel Arbeit. Eigene Controls lohnen nur, wenn das Design sie zwingend verlangt – dann vollständig nachbauen.

Wie binde ich Untertitel ein?

Über die <track kind="captions">-Spur als WebVTT-Datei mit srclang und label. So lassen sie sich an- und abschalten – mehr unter semantische Medien.

Ist eingebettetes Video (YouTube) automatisch barrierefrei?

Nicht automatisch. Lade korrekte Untertitel hoch, vermeide Autoplay mit Ton und stelle ein Transkript bereit – die Verantwortung bleibt bei dir.

Fazit

Der zugänglichste Player ist meist der native: <video controls>/<audio controls> plus <track>-Untertitel. Baust du eigene Controls, sind es echte, benannte Buttons mit Tastatur und Zustandsansage, eine echte Zeitleiste und eine Untertitel-Umschaltung. Kein Autoplay mit Ton, prefers-reduced-motion achten – dann ist der Player für alle bedienbar.