2053232 - [a11y] Only color is used to distinguish which container a tab is in

Status: NEW

(Firefox :: Containers, defect, P3)

Description

[Claire Joeckel]

Attachment: Screenshot 2026-07-07 132754.png

Impacted Section/Element

"Container" tab indicator elements

Steps to Reproduce

In the sidebar, open a tab in any container. Observe the stripe of color on the right-hand side of the tab section of the sidebar

Expected Behavior

Something other than color is used to distinguish which container the tab is in.

Actual Behavior

Color is used as the sole method for conveying which container the tab is in.

User Impact

When color is used as the only means of conveying information, this information will be inaccessible to blind and color-blind users and may not be visible to users with other visual disabilities.

WCAG 2.2 References

1.4.1 Use of Color

Recommendations

Add the container's assigned icon alongside the stripe of color. Ensure the elements that indicate that a tab is in a container have sufficient visual contrast and are clearly distinguishable from the backgrounds in all states.

Testing Environment

Any

Assistive Technology Used

Any

Further Reference

https://www.w3.org/TR/WCAG22/#use-of-color

Severity

3-Moderate

Comment 1

[James Teh [:Jamie]]

(In reply to Claire Joeckel from comment #0)

When color is used as the only means of conveying information, this information will be inaccessible to blind

For screen reader users, the tab's container name is exposed as part of the accessible description, so it will be reported by a screen reader. This is still a problem for users with other vision disabilities though.

3-Moderate

Claire, is the tab container name or icon exposed when you hover the tab? If not, I actually wonder whether this needs to be an s2, since a colour blind user literally wouldn't be able to tell what container this tab is in at all.

Comment 2

[Claire Joeckel]

There is no container tab or icon exposed on hover. In the context of color blind users who don't use screen readers, there is the text to the right of the url bar that informs the user which container the tab is in, but only while that tab is open. So color blind users would be able to tell (as long as that text has sufficient contrast) but only by opening each tab, which adds overhead for them. I think it could be either s3 or s2.

To allow all visual users to determine what container the tab is at a glance, I recommend displaying the icon consistently on each tab (to save space it could replace the stripe of color). Make sure the icons have at least 3:1 contrast in all states (both on the tabs and to the right of the url bar). A good practice would be to also show the tab container name (for example "Work") on hover.

Comment 3

[Jonathan Sudiaman [:jsudiaman]]

I would say this is more of a Tabbed Browser issue, as the same issue is apparent when using horizontal tabs (i.e. visually, the container line only differs in terms of color).

We will also need a spec for how to address this.

Comment 4

[Sarah Clements [:sclements]]

Baku is working on changes to container styling, so this is feedback he can share with Misha.

Comment 5

[James Teh [:Jamie]]

Still an accessibility issue, regardless of where it needs to be addressed. Re-adding access keyword.

Comment 6

[Sarah Clements [:sclements]]

(In reply to James Teh [:Jamie] from comment #5)

Still an accessibility issue, regardless of where it needs to be addressed. Re-adding access keyword.

I removed those keywords by mistake.

Comment 7

[James Teh [:Jamie]]

All good. I figured you might have. :)

Comment 8

[Andrea Marchesini [:baku]]

This should be fixed by bug 2048149.

Comment 9

[BugBot [:suhaib / :marco]]

The severity field is not set for this bug.
:baku, could you have a look please?

For more information, please visit BugBot documentation.