This is a migrated thread and some comments may be shown as answers.

How to make progess bar accessible?

3 Answers 78 Views
Upload
This is a migrated thread and some comments may be shown as answers.
Maximilian
Top achievements
Rank 1
Veteran
Maximilian asked on 19 May 2020, 02:03 PM

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

3 Answers, 1 is accepted

Sort by
0
Nencho
Telerik team
answered on 21 May 2020, 12:29 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Maximilian
Top achievements
Rank 1
Veteran
answered on 25 May 2020, 09:01 AM

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);
                },
0
Nencho
Telerik team
answered on 27 May 2020, 06:26 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Upload
Asked by
Maximilian
Top achievements
Rank 1
Veteran
Answers by
Nencho
Telerik team
Maximilian
Top achievements
Rank 1
Veteran
Share this question
or