search

cehfisher / a11y-style-guide

Accessibility (A11Y) Style Guide
http://a11y-style-guide.com/style-guide
MIT License
558 stars 61 forks source link

Create accessible progress bar #195

Open stuartjnelson opened 6 years ago

stuartjnelson commented 6 years ago

Issue

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

scottaohara commented 6 years ago

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

stuartjnelson commented 6 years ago

Both. Do you think that would be useful?

On 15 Jan 2018 1:35 pm, "scottaohara" notifications@github.com 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 commented 6 years ago

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 commented 6 years ago

so...many months later.

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

scottaohara commented 6 years ago

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

Malvoz commented 5 years ago

_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>.