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.

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

Accessibility: update accessibility for the main tabs #6182

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

koenvangeert
Copy link

[Issue]
There are tabs without appropriate role, and state information.

[User Impact]
Screen reader users will be unable to determine that these controls reveal panels of content and which panel is currently revealed.

[Recommendation]
Ensure page tabs provide state and role.

For tabs, the following information is expected:

  • The container for the set of tabs must have role="tablist".
  • Each tab must have role="tab" and must be a descendant of the tablist element.
  • Each panel container must have role="tabpanel".
  • If the tablist has a visible label, the tablist element must have aria-labelledby set to the ID of the labelling element. Otherwise, the tablist element must have aria-label set to the accessible name.
  • Each tab must have aria-controls set to the ID of its corresponding tabpanel.
  • The selected tab must have aria-selected="true". All other tabs must have aria-selected="false".
  • Tabpanel elements must have aria-labelledby set to the ID of their corresponding tab.
  • If the tablist is vertically oriented, it must have aria-orientation="vertical".

[Compliant Code Example]
N/A

[Recommended Reading]
For more information about creating accessible tab controls, please see the W3C Web Accessibility Initiative's ARIA Authoring Practices Guide: https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/

@koenvangeert
Copy link
Author

@OlgaLarina @novikov82 @tsv2013
Hey, I have a couple of pull requests open. Can you help me get these merged please. Thank you! 🙇 🙇 🙇

@koenvangeert koenvangeert force-pushed the koenvg/tab-accessibility branch 2 times, most recently from 29b0434 to 4ecef77 Compare December 5, 2024 16:18
@tsv2013
Copy link
Member

tsv2013 commented Dec 6, 2024

@dmitry-kurmanov Could you please take a look?

@dmitry-kurmanov
Copy link
Member

@koenvangeert, thanks for your contribution! I've approved the PR. We are faced with some problems with our tests now, and I will rerun all checks for this PR as soon as we fix those problems. Then we will be able to merge.

@koenvangeert koenvangeert force-pushed the koenvg/tab-accessibility branch from 4ecef77 to 831ecde Compare December 16, 2024 09:02
@dmitry-kurmanov dmitry-kurmanov marked this pull request as draft December 18, 2024 11:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants