Accessibility bug: Video player is keyboard accessible, but does not have labels

[SleeplessByte]

Steps to Reproduce

1. Go to https://bsky.app/profile/codewithbeto.dev/post/3lato2jya4c27
2. To discover this issue quickly, open any screen reader, but you can also see this in the dev tools
3. Tab into the video player because you want to interact with it
4. Only the seek slider is "accessible"

The biggest issue here is that none of the buttons have accessible labels, so you don't know what they do, if you cannot see it well or don't understand the iconography.

This is what happens when I tab into the video player:

clickable  button  

Seek slider  slider  0:26 of 1:00
0:27 of 1:00
0:28 of 1:00

button  
button  
button  

The first `clickable button I think is the entire video, when clicked to make it full screen. The last three buttons are probably the pause, volume, and full screen button.

• Each interactive element of the video player should have an accessible label
• Optional: Show the accessible label to all users, not just users who use screen readers or similar assistive technology

Attachments

Stripped down, the HTML for a video embed looks like this:

                    <div>
                      <div>
                        <div>
                          <div>
                            <div>
                              <div>
                                <figure>
                                  <video></video>
                                </figure>
                                <div>
                                  <button role="button" tabindex="0" type="button"></button>
                                  <div>
                                    <div>
                                      <div>
                                        <div aria-label="Seek slider" role="slider" aria-valuemax="60.07" aria-valuemin="0" aria-valuenow="17.04" aria-valuetext="0:17 of 1:00" tabindex="0">
                                        </div>
                                      </div>
                                    </div>
                                    <div>
                                      <button role="button" tabindex="0" type="button">
                                        </svg>
                                      </button>
                                      <div>
                                        <button role="button" tabindex="0" type="button">
                                        </button>
                                      </div>
                                      <button role="button" tabindex="0" type="button">
                                      </button>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

What platform(s) does this occur on?

Web (Desktop), Web (Mobile)

Device Info

Not relevant

What version of the app are you using?

Web

Additional Information

Here is the equivalent output for an accessible component:

Play  button  
Show captions  button  
Mute  button  
Volume slider  slider  67 percent
Video Settings  button  
Picture-in-Picture  button  
Full screen  button  

You should really consider adding floating labels for sighted users here. These icons may feel universal, but I can guarantee you that I can find at least one person who doesn't know that the arrows mean to toggle full screen. Adding a floating label and attaching it as aria-labelledby to the buttons will help all users in one go.

[mozzius]

Hey - I didn't realise that accessibilityHint doesn't work on web, easy fix

[SleeplessByte]

@mozzius FYI, accessibilityHint and accessibilityLabel are not equivalent. The former is "what's the result of the action", the latter is "what's the label of the element" (similar to aria-label). There is no web equivalent for the former, as it doesn't exist in aria.