Aria-live attribute inappropriate for player controls

[alundgard]

Current behavior

The aria-live="polite" attribute on player controls causes the screen reader to announce button names repeatedly upon selection. For example, when clicking the "Play" button, the screen reader announces "Play Play Play." Similarly with "Pause Pause Pause," "Mute Mute Mute," so on).

Steps to reproduce

Use a screen reader to interact with an embedded video item or audio item.

Note: The described behavior appears in the Chrome and Firefox browsers, but not in Safari.

Possible solution

Removing the aria-live="polite" attribute results in the screen reader only announcing the button name a single time, as expected.

Reported by SODA

Violation: Avoid inappropriate use of ARIA roles, states, and properties
Severity: Minor

[Issue]
There is an aria-live region on a button which is most likely inappropriate.

[User Impact]
When inappropriate ARIA roles, states, and/or properties are used it may prevent users of assistive technology from correctly interpreting and interacting with the content.

[Code Reference]

<button class="vjs-fullscreen-control vjs-control vjs-button" type="button" title="Fullscreen" aria-disabled="false">
        <span class="vjs-icon-placeholder" aria-hidden="true"></span>
        <span class="vjs-control-text" aria-live="polite">Fullscreen</span>
</button>

[Recommendation]
Developers must avoid inappropriate use of ARIA roles, states, and/or properties. The aria-live region is most likely inappropriate for this element, but further testing may be needed.

[jcoyne]

@alundgard I think those controls are on the video.js player. You may want to report that here: https://github.com/videojs/video.js/issues

[dnoneill]

I looked around and it does look like this is set in video.js. https://videojs.com/blog/feature-spotlight-accessibility/

[taylor-steve]

@alundgard et al, I added more context to the remote issue: videojs/video.js#8912. Tagging you just in case you've got any thoughts on approach here. It's a tricky issue.

I think removing aria-live as SODA suggests isn't a possible solution for the reason I mentioned in the issue. Technically if we are only worried about controlling the video via direct interaction with the controls, we could maintain a custom version of Video.js or try and hook that behavior to alter it. That'd be its own kind of nightmare though, people might throw virtual tomatoes at me.

[jcoyne]

🍅