Description
In the Progress Bar documentation the examples guide to add a tabindex attribute to the progress bar elements that makes them focusable.
The current example looks like this:
<div class="progress" role="progressbar" tabindex="0" aria-valuenow="50" aria-valuemin="0" aria-valuetext="50 percent" aria-valuemax="100">
<div class="progress-meter" style="width: 50%"></div>
</div>
Why is this?
We just got a report of an accessibility analysis on a website using Foundation progress bar as instructed in the documentation and one of the reported issues stated that the progress bar should not be focusable.
Possible Solution
Remove the tabindex attribute from the progress bar documentation examples unless there is a valid reason for that.
If there is a valid reason for making it focusable, this valid reason should be documented with the documentation.
Checklist
Description
In the Progress Bar documentation the examples guide to add a
tabindexattribute to the progress bar elements that makes them focusable.The current example looks like this:
Why is this?
We just got a report of an accessibility analysis on a website using Foundation progress bar as instructed in the documentation and one of the reported issues stated that the progress bar should not be focusable.
Possible Solution
Remove the
tabindexattribute from the progress bar documentation examples unless there is a valid reason for that.If there is a valid reason for making it focusable, this valid reason should be documented with the documentation.
Checklist