[Tab Strip] Indications of selected and active tab states are not sufficient
Categories
(Fenix :: Tabs, defect, P2)
Tracking
(Accessibility Severity:s2)
Accessibility Severity | s2 |
People
(Reporter: ayeddi, Unassigned, NeedInfo)
References
(Blocks 1 open bug)
Details
(Keywords: access, Whiteboard: [fxdroid][group4][needs-ux])
Attachments
(2 files)
Steps to reproduce
- Open Firefox and open a few tabs
- Review the visual difference between the currently opened (selected) tab and other tabs
- Tap-and-hold another tab to move it within the tab strip. While still holding the tab, review the visual difference between the active tab and other tabs
Expected behavior
- It is visually clear which tab is selected (currently opened in the web content view) and which one is active (being held and can be moved)
- Per WCAG 2.2, having a color-based visual difference of background colors for active and inactive tabs that would have at least 3:1 in color contrast and/or shape-based indication (i.e. the border of the active tab has a thicker border) would be sufficient.
Actual behavior
- It is nearly impossible to visually distinguish selected and not selected states among tabs in the tab strip: the indication only relies on color alone, thus per WCAG 2.2, the color difference between the states should be at least 3:1 in color contrast or higher, in this case, for the background of selected and not selected tabs:
- In the Dark theme, the color contrast ratio is: 1.7:1 which is failing WCAG 1.4.11 Non-text Contrast (AA) for UI components and graphical objects.
- In the Light theme, the color contrast ratio is: 1.1:1 which is failing WCAG 1.4.11 Non-text Contrast (AA) for UI components and graphical objects.
- The active state is not distinguishable from the default state and while trying to hold it on longer, the tab becomes selected (Is it expected?).
- Similar to the bug 1704347
Device information
- Firefox version: Nightly 129.0a1 (build #2016026447)
- Android device model: Samsung Galaxy Tab S7+
- Android OS version: 13
Reporter | ||
Comment 1•7 months ago
|
||
Updated•7 months ago
|
Updated•7 months ago
|
Updated•7 months ago
|
Updated•7 months ago
|
Comment 2•7 months ago
|
||
Question for UX: Can I get some guidance on the change to make here? Should we simply make the tab items on the Tab Strip have a higher contrast or should we make their borders thicker? Or perhaps we do both?
Comment 3•7 months ago
|
||
Hi Anna, thanks for filing this bug. Would you be able to tell me if this issue also persists in private browsing mode? I tried to use the accessibility scanner to check but even in normal mode, the app is not raising any flags for the contrast.
Updated•7 months ago
|
Comment 4•7 months ago
|
||
(In reply to Nicholas Poon [:Nick] from comment #2)
Question for UX: Can I get some guidance on the change to make here? Should we simply make the tab items on the Tab Strip have a higher contrast or should we make their borders thicker? Or perhaps we do both?
This was the response that I got from Michael Verdi from UX:
This issue affects all of our browsers. Currently we don't have a tool in our design system to fix this. My only guidance for now is to leave it (sorry). Fixing this is a bigger issue that the design team will have to take up.
Updated•7 months ago
|
Updated•7 months ago
|
Updated•7 months ago
|
Updated•4 months ago
|
Comment 5•4 months ago
|
||
Assigning myself as I'm working on Bug 1920516 which updates the colors.
Comment 6•4 months ago
|
||
[:ayeddi] Could you please verify this again on nightly as Bug 1920516 has now landed which updated the colors in general. If not, we'll have to leave it for now based on the above discussion :(
Updated•4 months ago
|
Updated•4 months ago
|
Description
•