Text Track Display Accessibility Issues

[ardelrio]

Description

Videojs auto-generates the following div that is always updating to contain the current video caption:

This has the following issues when viewing a video using a screen reader, for instance JAWS or NVDA on a browser like Firefox or Chrome:

1. The div is aria-live="assertive" which means whenever this div is updated, all other announcements being made by the screen reader will be interrupted for the announcement of what's in the updated div. Also, if a notification pops up on the page or the user navigates to or interacts with another part of the page like a menu, whatever announcements are being made by the screen reader will be interrupted by the playing video's captions.
2. The screen reader wants to say “text track display {caption}”, but before it can read the caption it’ll often be interrupted by the next “text track display {caption}” so the result is it saying “text track display” over and over instead of the captions.

I believe this is a violation of WCAG 4.1.3 - Status Messages because assistive technology can't read the captions completely, and other important announcements that may be happening on the page will be interrupted by the video's captions. For those relying on assistive technology, important messages about the page and the video's captions get interrupted or even missed entirely.

The suggested fix here is making the div aria-live="polite" and removing the aria-label from this generated div.

P.S. This was using the azure media player

Reduced test case

No response

Steps to reproduce

1. Open a page in Chrome or Firefox containing a Videojs video that has captions.
2. Open a screen reader like JAWS or NVDA
3. Play the video with captions on
4. Notice that instead of reading the caption sometimes it just reads "Text Track Display" or not the whole caption

Errors

No response

What version of Video.js are you using?

latest

Video.js plugins used.

No response

What browser(s) including version(s) does this occur with?

Chrome 103.0.5060.114

What OS(es) and version(s) does this occur with?

Windows 11

[welcome[bot]]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[gkatsev]

@OwenEdwards thoughts?

It does seem like maybe polite is better? At the same time, a lot of SR users likely have a faster playback speed, so, might end up being fine due to that.

[OwenEdwards]

@gkatsev I agree that this should be changed to aria-live="polite". There's a broader issue with aria-live being used elsewhere in places where it shouldn't be, but this is definitely a fix that can be made separately from that.

I don't agree that we should remove the aria-label, though - this was something that was specifically pointed out by a screen reader user as being helpful. Instead, the structure can be changed:

<div role="region" aria-label="Text Track Display" ... >
  <div aria-live="polite" ... >
    <div style="..."> ... </div>
  </div>
</div>

That way there's a named region with the text track display inside it, but the label of the region isn't part of the aria-live announcement.

[OwenEdwards]

Also, to be clear, WCAG 4.1.3 Status Messages requires:

In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.

The current behavior meets that requirement, it just implements it in a way that can cause a poor user experience for screen reader users. There is no way to guarantee that any implementation would work correctly if captions are placed too close together in the timeline, and the exact definition of "too close together" in this context is dependent on factors like the SR's speech rate setting, which varies widely between users and cannot be determined by the video player.