Create accessible progress bar

[stuartjnelson]

Issue

Create an accessible progress bar example using <progress> MDN page on progressbar role .

[scottaohara]

Is this an issue for creating a native <progress> example, a custom role="progress", or both?

[stuartjnelson]

Both. Do you think that would be useful?

On 15 Jan 2018 1:35 pm, "scottaohara" [email protected] wrote:

Is this an issue for creating a native example, a custom role="progress", or both?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/cehfisher/a11y-style-guide/issues/195#issuecomment-357794349, or mute the thread https://github.com/notifications/unsubscribe-auth/AFhwNm98RQ2zRhpO7qaYKlM9HowlcPYrks5tK8STgaJpZM4Re8lj .

[scottaohara]

Sure, they could be useful.

Native progress bars have really good support, but for some of the more 'designed' progress bars I've seen (multiple progress levels indicated in a single bar), there could be a use case for an ARIA version.

[scottaohara]

so...many months later.

My findings on styling native progress bars to help guide the decision here...

[scottaohara]

Worth writing content to note the difference between a progress bar and a meter

[Malvoz]

https://scottaohara.github.io/a11y_styled_form_controls/src/progress-bar/

Usage note: Though the progress element is largely reporting the correct information to browsers, screen readers have quite a few kinks in how they announce the element to users.

At the time of testing, a styled progress bar won't be fully accessible in all screen reader and browser pairings. Instead it may be more appropriate to simply treat the progress bar as a visual decoration, hide it from screen readers, and provide visually hidden text as a means to consistently convey the information.

Because styling forms is (still) hard to get right; an alternative solution that wouldn't hurt to bring up, while I can not argue is any less of a hack would be to use <progress> but visually hide it using the .sr-only class and style a sibling element or perhaps its pseudo element(s).

The same approach is applicable to <meter>.