sul-dlss / sul-embed

An oEmbed Service for Stanford University Libraries
Other
19 stars 6 forks source link

Aria-live attribute inappropriate for player controls #2237

Open alundgard opened 2 weeks ago

alundgard commented 2 weeks ago

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 commented 2 weeks ago

@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