How to make progess bar accessible?

[Maximilian]

Hi there,

I use an upload template with a progress bar <span class='k-progress'></span>. How can I make it accessible for a screen reader?

I want to add aria-attributes like so <span class='k-progress' role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow=??? ></span>.

But the problem is, how to set aria-valuenow. How do I get the current upload percentage?

Best, Max

[Nencho]

Hello, Maximilian,

You can use the change event of the ProgressBar, in order to dynamically append the needed attribute with its current value. Please consider the dojo and the example below:

  function onChange(e) {
           e.sender.progressStatus.parent().eq(1).attr("aria-valuenow", e.value)
        }

https://dojo.telerik.com/@nenchef/iLOZAceW/2 

If you need to have other attributes, such as role="slider" aria-valuemin="1" aria-valuemax="5", you can append them at document ready, or at a preferable event, using the approach in the example above.

Hope this would help.

Regards,
Nencho
Progress Telerik

[Maximilian]

Hello Nencho,

thanks! It did not work exactly like you suggested, but you pushed me in the right direction. I did it like so:

progress: function (event) {
                    $('.k-progress').attr("aria-valuenow", event.percentComplete);
                },

[Nencho]

Hello, Maximilian,

I am happy to see that the suggestion led to the correct path for resolving the issue.

Please don't hesitate to contact us again, in case of further questions.

Regards,
Nencho
Progress Telerik