Tabs > Accessibility Audit
Refer to the parent epic description for more information on this effort.
Purpose
Audit the accessibility of the GitLab UI Tabs component in all variants and states in order to identify any problems and provide more documentation on the component’s page in Pajamas.
Methods and Tools
Review the initial testing methods in the parent epic. List the testing methods used for your audit below, including any additional testing methods needed for this component that is not listed in the parent epic.
- Review the following Tab examples in GitLab UI:
- tabs-basic
- tabs-scrollable
- with scroll and growing
- Visual review for contrast and states
- Semantic review to align with WAI-ARIA Authoring Guidelines for tabs
- Keyboard only
- Screen reader: VoiceOver + Safari on macOS
- Screen reader: NVDA + Chrome on Windows
Audit Criteria
Review the general audit criteria in the parent epic. Add applicable criteria to this section, including any additional criteria needed for this component that is not listed in the parent epic. A check indicates that the audit has been performed, not that it passes.
-
Tabs must have sufficient visual contrast for all states. -
Visible focus state. -
Tab semantics and behavior should follow WAI-ARIA Authoring Guidelines for tabs. -
All function can be done with a keyboard, including horizontal scrolling controls for tab overflow. -
Screen reader announces controls as expected. -
Growing tab list is announced by a screen reader.
Results
Problem | Solution | Related MR |
---|---|---|
Incorrect color for disabled text. | Update to use $gray-400 . |
!2435 (merged) |
Tab text shouldn't be able to wrap (see this example for where it's occurring). | CSS can be updated to prevent individual text labels from wrapping. | |
tablist is missing aria-label that identifies this unique set of tabs. |
Update the component to require an aria-label . |
|
The href for each anchor should reference the related tab panel so that even with JavaScript off the links will go to the right content. |
Ensure that the href links to the related tab panel for each tab. |
|
In the growing tabs example, a screen reader doesn't announce that a tab has been added. As a result nearly every time a user activates a new tab the total tab count has changed, but there's no clarification as to why. | I'm not sure what the use case is for the growing tabs, but if there is one then this variant should use aria-live="polite" to communicate tab additions. |
Completing the audit
After the solutions have been explored and applied, review the completing the audit section in the parent epic. Complete all items prior to closing this issue.
accessibility ~"Category:FE/UX Foundations" ~"component:tabs"