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

[Jonathan Harker]

Servus! 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?

Nimm nur einen button und toggle hin und her.

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

Am Anfang focus auf dem Pause-button?

Gruß Jo

[Tabellenkalk]

Hallo,

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

nette Idee!

Habt ihr sonst noch Ideen, was man braucht?

Einen Schieberegler für die Dauer der Animation, eine Auswahlliste für den zu animierenden Effekt.

Gruß
Kalk

[Matthias Scharwies]

Servus!

Habt ihr sonst noch Ideen, was man braucht?

Einen Schieberegler für die Dauer der Animation, eine Auswahlliste für den zu animierenden Effekt.

Ja, danke. Das soll ein Bildwechsler werden. In der Komfortvariante könnte man dann mehrere CSS-Eigenschaften zur Auswahl stellen.

Herzliche Grüße

Matthias Scharwies

[Tabellenkalk]

Hallo,

Das soll ein Bildwechsler werden.

Achso? Eben sprachst du noch von einem animation-player.

Gruß
Kalk

[Matthias Scharwies]

Servus!

Hallo,

Das soll ein Bildwechsler werden.

Achso? Eben sprachst du noch von einem animation-player.

Ja, mit der Web Animations API.

Damit können CSS-Eigenschaften mit JavaScript animiert und gesteuert werden.

Theoretisch soll damit alles viel besser und schneller gehen - praktisch ist gerade die genaue Taktung noch ein bisschen diffizil.

Wenn damit alles klappt, dann auch für andere Animationen, auch in SVG.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

<div id="controls">
  <button class="rewind" aria-label="run animation backwards" title="Zurück">
    ⏪<span class="sr-only">Rückwärts</span>
  </button>

Ich hab keinen blassen Schimmer, was das Symbol ⏪ bedeutet, aber ich fahr dann mal mit der Maus rüber, mal sehen, ob da ein Tooltip aufgeht … —kein Nutzer, jemals

Weg mit dem title-Attribut.

Der Button ist mit aria-label beschriftet. Wozu das <span class="sr-only">? Weg damit.

class="rewind" möchte keine Klasse, sondern eine ID sein?

Play und Pause sollen wechselseitig ein- bzw. ausgeblendet werden.

Warum nicht ein Button, der das Symbol wechselt?

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

Steve Faulkner hat eine Warnung rausgegeben.

LLAP 🖖

[Matthias Scharwies]

Servus!

Weg mit dem title-Attribut.

Der Button ist mit aria-label beschriftet. Wozu das <span class="sr-only">? Weg damit.

Ok, das macht es viel übersichtlicher!

class="rewind" möchte keine Klasse, sondern eine ID sein?

Ja, das gibt's ja nur einmal - stimmt!

Play und Pause sollen wechselseitig ein- bzw. ausgeblendet werden.

Warum nicht ein Button, der das Symbol wechselt?

Ja, bin ich jetzt auch schon drauf gekommen!

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

Steve Faulkner hat eine Warnung rausgegeben.

IIRC hab ich den Vorschlag von dir, als es um Marctrix' CSS-Slider ging. Also auch weg damit? (würde den zu schreibenden Code sehr verkürzen)

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

class="rewind" möchte keine Klasse, sondern eine ID sein?

Ja, das gibt's ja nur einmal - stimmt!

Es sei denn, es kann mehrere dieser Player auf einer Seite geben (durchaus plausibel). Dann wäre aber die die ID bei <div id="controls"> unpassend.

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

Steve Faulkner hat eine Warnung rausgegeben.

IIRC hab ich den Vorschlag von dir, als es um Marctrix' CSS-Slider ging. Also auch weg damit? (würde den zu schreibenden Code sehr verkürzen)

Ich erinnere mich.

Nun, die Warnung sagt: „can reduce usability and accessibility for users“. Ist vielleicht in diesem Fall nicht so; ich weiß es nicht. Mal Steve oder Eric oder Marco oder Heydon oder Léonie fragen …

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

IIRC hab ich den Vorschlag von dir, als es um Marctrix' CSS-Slider ging. Also auch weg damit? (würde den zu schreibenden Code sehr verkürzen)

Ich erinnere mich.

Hm, du meinst einsiedlers Galerie?

Nun, die Warnung sagt: „can reduce usability and accessibility for users“. Ist vielleicht in diesem Fall nicht so; ich weiß es nicht. Mal Steve oder Eric oder Marco oder Heydon oder Léonie fragen …

2/5

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Nun, die Warnung sagt: „can reduce usability and accessibility for users“. Ist vielleicht in diesem Fall nicht so; ich weiß es nicht. Mal Steve oder Eric oder Marco oder Heydon oder Léonie fragen …

2/5

Und da ist auch schon die Antwort von Marco: „ist, denke ich, gerechtfertigt, es muss auf jeden Fall verhindert werden, dass Focus verloren geht.“

LLAP 🖖

[Matthias Scharwies]

Servus!

@Gunnar Bittersmann

Und da ist auch schon die Antwort von Marco: „ist, denke ich, gerechtfertigt, es muss auf jeden Fall verhindert werden, dass Focus verloren geht.“

Vielen Dank, dann werd' ich versuchen das so zu realiseren. (Wie ich oben schon @Tabellenkalk schrieb, gibt's mit der grundlegenden Vorarbeit noch Probleme, die ich lösen muss.)

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Und da ist auch schon die Antwort von Marco: „ist, denke ich, gerechtfertigt, es muss auf jeden Fall verhindert werden, dass Focus verloren geht.“

Vielen Dank, dann werd' ich versuchen das so zu realiseren.

Nicht so schnell, junger Freund!

Eric sagt: „Autofocus ist da doch gar nicht geeignet. Focus Management ist ja klar. Siehe W3C Tutorial: https://w3c.github.io/wai-tutorials/carousels/“

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Der Button ist mit aria-label beschriftet. Wozu das <span class="sr-only">? Weg damit.

Marco sagt: „Nee, wie alles bei ARIA ist auch aria-label eigentlich dann einzusetzen, wenn andere Techniken nicht gehen.
Sprich, wenn ein span mit sr-only Text geht, sollte man das nutzen und aria-label weglassen.“

LLAP 🖖