Controls für animation-Player

[Matthias Scharwies]

Servus!

Ich möchte einen animation-Player mit Bedienelementen bauen.

Wie würdet ihr das Markup, auch im Hinblick zur Zugänglichkeit realisieren?

<div id="controls">
  <button class="rewind" aria-label="run animation backwards" title="Zurück">
    ⏪<span class="sr-only">Rückwärts</span>
  </button>
  <button class="play" aria-label="play animation" title="Play">
    ►<span class="sr-only">Play</span>
  </button>
  <button class="pause" aria-label="pause animation" title="Pause">
    ❙❙<span class="sr-only">Pause</span>
  </button>
  <button class="forward" title="Vorwärts" aria-label="choose next picture in animation">
    ⏩<span class="sr-only">forward</span>
  </button>
</div>

Play und Pause sollen wechselseitig ein- bzw. ausgeblendet werden. Soll ich die mit removeChild entfernen und wieder dynamisch erzeugen oder nur per CSS verschieben/ unsichtbar machen?

Beim Blättern soll der focus jeweils auf den Vor- bzw. Zurück-Tasten liegen.

Habt ihr sonst noch Ideen, was man braucht?

Herzliche Grüße

Matthias Scharwies