I implement audio/video player and always considering “what is the best element/role for seek bar ?”.
What I said in “seek bar” is below.
It shows current time of playing audio/video, and use can change the playing position with dragging or clicking.
as Progressbar
You can say its a “Progress Bar” and use <progress> or role=progress would fit for this.
But progressbar is basically a indicator and not a controller.
in aria spec, role=progressbar says that
It is not possible for the user to alter the value of a progressbar because it is always readonly.
So if seek bar is not draggable, it seems fine. but it basically druggable.
slider
If implement it as a controller, <input type=range> or role=slider seems fit for this.
But semantically, it is an input controller which value is changing dynamically.
So there are no mention about progress update to the user.
I think part of them are complemented by aria attributes, but it’s not progressbar.
my consideration
I thinks it’s better to use slider than progressbar basically. but if there are a role which is kind of role=(progressbar + slider), say its basically controller which has botton to slide to change current value but also tell the user a progress updates.
seekbar in the wild
progressbar
-
https://music.youtube.com/:
<progress role=progressbar> -
https://soundcloud.com/:
<div role=progressbar> -
https://radiotalk.jp:
<progress>
slider
-
https://youtube.com:
<div role=slider> - amazon prime video:
<input type=range> -
amp-video:
<input type=range> -
https://vimeo.com/:
<div role=slider> -
https://voice.ameba.jp/:
<div role=slider>
div
-
https://netflix.com:
<div> -
https://music.amazon.co.jp:
<div> -
https://www.hulu.jp/:
<div> -
https://anchor.fm:
<div> -
https://stand.fm:
<div> -
https://voicy.jp:
<div>
any comments are welcome.
Jxck