Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The progress bar has hidden text (for screen reader users) which does not get updated #5251

OwenEdwards opened this issue Jun 12, 2018 · 0 comments


Copy link

@OwenEdwards OwenEdwards commented Jun 12, 2018


The progress bar has hidden vjs-control-text for "Loaded" and "Progress" which is initialized as "0%" and never updated. For example:

<div class="vjs-progress-control vjs-control">
    <div tabindex="0" class="vjs-progress-holder vjs-slider vjs-slider-horizontal" role="slider" aria-valuenow="35.02" aria-valuemin="0" aria-valuemax="100" aria-label="Progress Bar" aria-valuetext="03:48 of 10:53">
        <div class="vjs-load-progress" style="width: 44.3632%;">
            <span class="vjs-control-text">
                : 0%
            <div style="left: 76.0904%; width: 23.9096%;"></div>
        <div class="vjs-mouse-display" style="left: 17.0144px;">
            <div class="vjs-time-tooltip" style="right: -15.5px;">00:51</div>
        <div class="vjs-play-progress vjs-slider-bar" style="width: 35.02%;">
            <div class="vjs-time-tooltip" style="right: -20.525px;">03:48</div>
            <span class="vjs-control-text">
                : 0%

Steps to reproduce

Using a screen reader such as NVDA with Firefox, switch into Virtual Cursor mode and use the arrow keys to move through the control bar after the video has played for a while and then been paused.



The "Loading" and "Progress" values should match the visual representation of loading and progress (and the progress value should match the ARIA values being updated on the <div role="slider" ...> element).


The "Loading" and "Progress" values are always announced as "0%"

Additional Information

Please include any additional information necessary here. Including the following:



Observed with v6.6 on, but present it more recent version.

gkatsev added a commit that referenced this issue Dec 11, 2018
- Update the Control Text in the load-progress-bar during loading, remove unnecessary Control Text from the play-progress-bar, and hide the time-tooltip feature from Assistive Technology using ARIA.
- Add a span around the vjs-control-text-loaded-percentage in load-progress-bar, and use that for the text to update.
- Hide the time-tooltip feature from Assistive Technology using ARIA

Fixes #5251
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

1 participant