Test with a keyboard to ensure the pattern follows the expected keyboard interaction

Oct 13, 2025 by pinkandtrash.com 103 views

Introduction

Ensuring that digital products are accessible to everyone is a crucial aspect of modern software development. Accessibility is not just a moral obligation, but also a legal requirement in many countries. In this article, we will discuss the issues with the "People" & "Bounties" Tabs pattern in the Bounties Workspace pages, and how they can be improved to meet the established design pattern for a Tablist.

Issue

The "People" & "Bounties" Tabs do not follow the established design pattern for a Tablist. This can cause issues for users who rely on screen readers or keyboard navigation to interact with the application.

Expected Behavior

To meet the accessibility standards, the "People" & "Bounties" Tabs should follow the WAI-ARIA APG Tabs Pattern. This includes:

WCAG 2.2 AA 4.1.2 Name, Role, Value: Programmatically determined states and properties should be communicated to screen reader users.
WAI - ARIA APG Tabs Pattern: The Tablist should have a clear and consistent structure, with each tab having a unique role and state.

Acceptance Criteria

To ensure that the "People" & "Bounties" Tabs meet the accessibility standards, the following criteria should be met:

The element that serves as the container for the set of tabs has role="tablist": This ensures that the tablist is identified as a single unit, and that screen readers can announce the correct role.
Each element that serves as a tab has role="tab" and is contained within the element with role="tablist": This ensures that each tab has a unique role, and that they are contained within the tablist.
Each element that contains the content panel for a tab has role="tabpanel": This ensures that the content panel for each tab has a unique role, and that it is associated with the correct tab.
If the tab list has a visible label, the element with role="tablist" has aria-labelledby set to a value that refers to the labelling element. Otherwise, the tablist element has a label provided by aria-label: This ensures that the tablist has a clear and consistent label, and that it is announced correctly by screen readers.
Each element with role="tab" has the property aria-controls referring to its associated tabpanel element: This ensures that each tab is associated with the correct content panel.
The active tab element has the state aria-selected set to true and all other tab elements have it set to false: This ensures that the correct tab is announced as active by screen readers.
Each element with role="tabpanel" has the property aria-labelledby referring to its associated tab element: This ensures that each content panel is associated with the correct tab.
Test with a screen reader JAWS, VoiceOver, NVDA, Orca, Talkback, etc. - ensure the correct roles and selected tab are announced: This ensures that the tablist is announced correctly by screen readers, and that the correct tab is announced as active.
Test with a keyboard to ensure the pattern follows the expected keyboard interaction: This ensures that the tablist can be navigated correctly using a keyboard.
Verify in Chrome and Firefox with and without a mobile viewport enabled to ensure visual look and feel is unchanged (with exception of unselected Tab text contrast which should be 4.5:1 against the background): This ensures that the tablist looks and feels the same in different browsers and devices.

Conclusion

In conclusion, the "People" & "Bounties" Tabs in the Bounties Workspace pages do not follow the established design pattern for a Tablist. To meet the accessibility standards, the tablist should follow the WAI-ARIA APG Tabs Pattern, and the acceptance criteria should be met. By following these guidelines, developers can ensure that their application is accessible to everyone, and that users who rely on screen readers or keyboard navigation can interact with the application correctly.

Recommendations

Based on the analysis, the following recommendations are made:

Update the tablist to follow the WAI-ARIA APG Tabs Pattern: This will ensure that the tablist is announced correctly by screen readers, and that the correct tab is announced as active.
Add the required attributes to the tablist and tabs: This will ensure that the tablist and tabs have the correct roles and states, and that they are announced correctly by screen readers.
Test the tablist with a screen reader and keyboard: This will ensure that the tablist can be navigated correctly using a screen reader and keyboard.
Verify the visual look and feel of the tablist in different browsers and devices: This will ensure that the tablist looks and feels the same in different browsers and devices.

Linked to tracking issue: #1233

This issue is linked to tracking issue #1233.
Accessibility: "People" & "Bounties" Tabs Pattern Issues in Bounties Workspace Pages - Q&A

Introduction

In our previous article, we discussed the issues with the "People" & "Bounties" Tabs pattern in the Bounties Workspace pages, and how they can be improved to meet the established design pattern for a Tablist. In this article, we will answer some frequently asked questions about the issue and provide additional information to help developers understand the problem and its solution.

Q: What is the issue with the "People" & "Bounties" Tabs pattern?

A: The "People" & "Bounties" Tabs pattern does not follow the established design pattern for a Tablist. This can cause issues for users who rely on screen readers or keyboard navigation to interact with the application.

Q: What are the expected behaviors for the "People" & "Bounties" Tabs pattern?

A: To meet the accessibility standards, the "People" & "Bounties" Tabs pattern should follow the WAI-ARIA APG Tabs Pattern. This includes:

WCAG 2.2 AA 4.1.2 Name, Role, Value: Programmatically determined states and properties should be communicated to screen reader users.
WAI - ARIA APG Tabs Pattern: The Tablist should have a clear and consistent structure, with each tab having a unique role and state.

Q: What are the acceptance criteria for the "People" & "Bounties" Tabs pattern?

A: To ensure that the "People" & "Bounties" Tabs pattern meets the accessibility standards, the following criteria should be met:

The element that serves as the container for the set of tabs has role="tablist": This ensures that the tablist is identified as a single unit, and that screen readers can announce the correct role.
Each element that serves as a tab has role="tab" and is contained within the element with role="tablist": This ensures that each tab has a unique role, and that they are contained within the tablist.
Each element that contains the content panel for a tab has role="tabpanel": This ensures that the content panel for each tab has a unique role, and that it is associated with the correct tab.
If the tab list has a visible label, the element with role="tablist" has aria-labelledby set to a value that refers to the labelling element. Otherwise, the tablist element has a label provided by aria-label: This ensures that the tablist has a clear and consistent label, and that it is announced correctly by screen readers.
Each element with role="tab" has the property aria-controls referring to its associated tabpanel element: This ensures that each tab is associated with the correct content panel.
The active tab element has the state aria-selected set to true and all other tab elements have it set to false: This ensures that the correct tab is announced as active by screen readers.
Each element with role="tabpanel" has the property aria-labelledby referring to its associated tab element: This ensures that each content panel is associated with the correct tab.
Test with a screen reader JAWS, VoiceOver, NVDA, Orca, Talkback, etc. - ensure the correct roles and selected tab are announced: This ensures that the tablist is announced correctly by screen readers, and that the correct tab is announced as active.
Test with a keyboard to ensure the pattern follows the expected keyboard interaction: This ensures that the tablist can be navigated correctly using a keyboard.
Verify in Chrome and Firefox with and without a mobile viewport enabled to ensure visual look and feel is unchanged (with exception of unselected Tab text contrast which should be 4.5:1 against the background): This ensures that the tablist looks and feels the same in different browsers and devices.

Q: How can I update the "People" & "Bounties" Tabs pattern to meet the accessibility standards?

A: To update the "People" & "Bounties" Tabs pattern, you should follow these steps:

Update the tablist to follow the WAI-ARIA APG Tabs Pattern: This will ensure that the tablist is announced correctly by screen readers, and that the correct tab is announced as active.
Add the required attributes to the tablist and tabs: This will ensure that the tablist and tabs have the correct roles and states, and that they are announced correctly by screen readers.
Test the tablist with a screen reader and keyboard: This will ensure that the tablist can be navigated correctly using a screen reader and keyboard.
Verify the visual look and feel of the tablist in different browsers and devices: This will ensure that the tablist looks and feels the same in different browsers and devices.

Q: What are the benefits of updating the "People" & "Bounties" Tabs pattern to meet the accessibility standards?

A: The benefits of updating the "People" & "Bounties" Tabs pattern to meet the accessibility standards include:

Improved accessibility: The updated tablist will be announced correctly by screen readers, and the correct tab will be announced as active.
Improved user experience: The updated tablist will be navigable correctly using a keyboard, and the visual look and feel will be the same in different browsers and devices.
Compliance with accessibility standards: The updated tablist will meet the accessibility standards, and the application will be compliant with the relevant regulations.

Conclusion

In conclusion, the "People" & "Bounties" Tabs pattern in the Bounties Workspace pages does not follow the established design pattern for a Tablist. To meet the accessibility standards, the tablist should follow the WAI-ARIA APG Tabs Pattern, and the acceptance criteria should be met. By following these guidelines, developers can ensure that their application is accessible to everyone, and that users who rely on screen readers or keyboard navigation can interact with the application correctly.

Recommendations

Based on the analysis, the following recommendations are made:

Update the tablist to follow the WAI-ARIA APG Tabs Pattern: This will ensure that the tablist is announced correctly by screen readers, and that the correct tab is announced as active.
Add the required attributes to the tablist and tabs: This will ensure that the tablist and tabs have the correct roles and states, and that they are announced correctly by screen readers.
Test the tablist with a screen reader and keyboard: This will ensure that the tablist can be navigated correctly using a screen reader and keyboard.
Verify the visual look and feel of the tablist in different browsers and devices: This will ensure that the tablist looks and feels the same in different browsers and devices.

Linked to tracking issue: #1233

This issue is linked to tracking issue #1233.