Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Progress Bar Examples have accessibility issues #36714

Closed
3 tasks done
coliff opened this issue Jul 11, 2022 · 6 comments · Fixed by #36732
Closed
3 tasks done

Progress Bar Examples have accessibility issues #36714

coliff opened this issue Jul 11, 2022 · 6 comments · Fixed by #36732
Assignees
@patrickhlauke
Labels
accessibility v5

Comments

@coliff
Copy link
Contributor

coliff commented Jul 11, 2022 •
edited

Prerequisites

Describe the issue

The provided examples at: https://getbootstrap.com/docs/5.2/components/progress/ have accessibility issues reported by both Google Lighthouse and Webhint.io

I think that the progress bar should have a non-empty aria-label attribute or a title.

REF:
https://dequeuniversity.com/rules/axe/4.4/aria-progressbar-name?application=axeAPI

Let me know what you think, I'd be happy to open a PR...

(I realise this might be flagged as an accessibility issue incorrectly and maybe the aria-valuenow, aria-valuemax and aria-valuetext attributes are enough? cc @patrickhlauke )

Reduced test cases

Webhint screenshot:
image

Lighthouse screenshot:
image

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Microsoft Edge

What version of Bootstrap are you using?

v5.2.0-beta1
@patrickhlauke patrickhlauke self-assigned this Jul 13, 2022
@patrickhlauke
Copy link
Member

Yeah, would make sense to give them an accName...something generic for these demo ones anyway. maybe even a little callout about doing so

@coliff
Copy link
Contributor Author

coliff commented Jul 13, 2022

thanks Patrick. I'll make a PR to add the aria-label. I don't think we need to add an additional note about it because it already has this near the top which covers it:

  • The .progress-bar also requires some role and aria attributes to make it accessible.

@patrickhlauke
Copy link
Member

@coliff already started making a PR, so no worries :)

@coliff
Copy link
Contributor Author

coliff commented Jul 13, 2022

ah ok - great thanks. I got stuck at naming the aria-labels anyway :-D

@patrickhlauke
Copy link
Member

ditto...i think i'm just going to go with something generic like "example" or similar. and something a bit more creative for the stacked bars example

@patrickhlauke patrickhlauke mentioned this issue Jul 13, 2022
Merged
@patrickhlauke
Copy link
Member

#36732

patrickhlauke added a commit that referenced this issue Jul 13, 2022
@patrickhlauke
Add accNames to all progress bar examples
efd7180 
* also expands advice in progress.md, explicitly mentions giving them an accName, and includes the callout about using color to convey meaning
* updates cheat sheets, but note that for the RTL one, my arabic is...lacking. we should get somebody who knows what they're doing to translate those `aria-label`s properly

Closes #36714
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@patrickhlauke patrickhlauke

Labels
accessibility v5
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add accNames to all progress bar examples twbs/bootstrap
3 participants
@patrickhlauke @coliff @julien-deramond