Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Ein barrierefreier Audio-Player - Version 3.0

Dienstag, 18. Februar 2014

Am 01. Dezember 2010 habe ich den AAP-Player vorgestellt, den (damals) besten barrierefreien Audio-Player.
Inzwischen ist einiges passiert: Der Yahoo! Media Player, der als Fallback erforderlich war für Browser, die das HTML5 audio-Tag nicht unterstützen, wurde eingestellt. Damit wäre der AAP-Player „eigentlich“ unbrauchbar. Wenn, ja wenn nicht inzwischen die Unterstützung des HTML5 audio-Tags fast allgemein als gegeben zu bezeichnen wäre. Wenn man bereit ist, den IE 8 und älter, und den Opera nicht (mehr) zu unterstützen, dann kann man inzwischen auf das Fallback verzichten. Und dafür Smartphones und Tablets bedienen.

Da der Entwickler des AAP-Players Terill Thomson diesen Schritt (noch) nicht gegangen ist, habe ich mal ein wenig mit der letzten veröffentlichten Version 3.0 gespielt.

Im Einzelnen:

  • Ich habe die - nicht mehr funktionierende - Fallback Lösung Yahoo! Mediaplayer entfernt
  • Dafür teste ich mittels Modernizr, ob das audio-Tag und .mp3 Dateien unterstützt werden. Falls nein, gebe ich lediglich einen entsprechenden Hinweis aus.
  • Um die kleinen Smartphone-Monitore zu unterstützen, habe ich ein wenig am CSS geschraubt. Und vor allem das entsprechende, für ordentliche Darstellung auf Smartphones unentbehrliche Metatag ins HTML eingefügt:
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />

Das Ergebnis ist in dieser Demo zu sehen bzw. zu hören.
Und das Hören bezieht sich auch auf Screen Reader und auf Tastaturnutzer ohne Maus. Der Player ist nämlich nach wie vor ein Vorbild an Barrierefreiheit.



3 Kommentare

  1. Der Player sieht klasse aus! Ich habe ihn gerade mit NVDA und Braillezeile getestet. Genial!

    Kommentar von Dominique Neuenhagen — Mittwoch, 19. Februar 2014 - 12:18 Uhr

  2. Danke für die Hinweise. Funktioniert im Screenreader JAWS 13/IE11 gut mit der Tab-Taste, nicht so gut mit Pfeiltasten etc. Trotzdem empfehlenswert.

    Kommentar von Jan Eric Hellbusch — Donnerstag, 20. Februar 2014 - 16:18 Uhr

  3. @Jan Eric
    Danke für den Kommentar.
    Ich habe irgendwann aufgehört, mit verschiedenen Jaws und verschiedenen IE Versionen zu testen. Wenn SR Tests nötig und sinnvoll sind, dann schaue ich mir das zumeist mit NVDA/Firefox oder mit VoiceOver/iOS an.

    Kommentar von Fritz — Donnerstag, 20. Februar 2014 - 16:27 Uhr

Einen Kommentar abgeben

Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu &lt;).


(notwendig)

(notwendig)

Spamschutz:
Je nach Inhalt wird Ihr Kommentar eventuell nicht sofort angezeigt, sondern muss manuell freigeschaltet werden.

Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE