I am using a progress bar from Reacstrap (Progress component) and I am trying to override what the screen reader reads out. The progress bar ranges from 1 - 4 and is ranking levels of difficulty.
Here is my implementation of the component:
<Progress
tabIndex="0"
color="secondary"
value={this.props.value || 1}
max="4"
aria-label={"Level " + this.props.value || 1}
/>
Here I set the screen reader to read out the level of 'difficulty'. This reads out fine. I have implemented it with the this.props.value set to 1, but when I render it in my page, it reads out:
[Difficulty] Level 1, 25 percent, progress indicator
I have inspected my element in Dev tools, and this is what it looks like:
<div tabindex="0" aria-label="Level 1" class="progress">
<div
class="progress-bar bg-secondary"
role="progressbar"
aria-valuenow="1"
aria-valuemin="0"
aria-valuemax="4"
style="width: 25%;"
>
</div>
</div>
How can I override this component so that "25 percent, progress indicator" is no longer read out? Thanks.
It sounds like you might not want to be using the progress bar role. What is read out by a screen reader will depend on the user's setting and the specific screen reader they're using. For example the NVDA progress bar output has 4 modes where "speak" will read the progress bar value in terms of percentages. An NVDA user can turn that off and they will only hear the aria-label.
MDN describes the use case for a progress bar as "progress status for a task that take a long time or consists of several steps". If you're using it to describe steps to completion as difficulty increases this may be appropriate but you should then be prepared to hear the percentages if the screen reader users has elected to hear that.
If you're solely using the progress bar to show difficulty, and there isn't a final step "completing the requested action", then it may be appropriate to remove the role of progress bar and the aria attributes. Otherwise it's up to the screen reader and the screen reader user to not hear the percentages.