1714766 - Tabs need to be separated better for people with Keratokonus or ADHD

Status: RESOLVED WONTFIX

(Firefox :: Theme, defect, P2)

Description

[Jeremy]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:89.0) Gecko/20100101 Firefox/89.0

Actual results:

The new UI changes in Firefox 89 are cool, but, removing visual separators (beyond the favicon) is problematic. There needs to be a way to add visual separators back (e.g. with a theme) and tab_background_separator has been deprecated.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Firefox::Theme' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[PCurious]

I agree. This is a major accessibility problem.

Comment 3

[PCurious]

Can someone change the type to "Defect"? Since this is a regression.

Comment 4

[PCurious]

Also, add the "access" keyword.

Comment 5

[Hani Yacoub, Desktop QA]

This is the expected behaviour and it's by design. The selected tab will be highlighted and can be easily distinguished from the rest of the tabs and also the hover state will be applied when you hover the mouse over the tabs.
I don't expect any changes here in the need future.
Thank you for reporting.

Comment 6

[PCurious]

This is an accessibility problem, because it makes it difficult for me to distinguish the active space between tabs. It makes it very difficult to find tabs. This is a user-hostile, non-accessible design.

The non-selected tabs need to be divided or outlined in some way. All of them, not just the selected tab, not just the hover tab.

Please consider fixing this bug instead of marking as invalid, since it makes things more difficult for many, while providing no benefits.

Comment 7

[Jeremy]

(In reply to Hani Yacoub from comment #5)

This is the expected behaviour and it's by design. The selected tab will be highlighted and can be easily distinguished from the rest of the tabs and also the hover state will be applied when you hover the mouse over the tabs.
I don't expect any changes here in the need future.
Thank you for reporting.

Thank you for your response. This isn't really about the active tab, it's about all the other tabs. While the sleek new design is good for some, it's detrimental to others.
Making this change while simultaneously deprecating the only recourse is sub-ideal, to say the least.
Is it too much to ask for a new way for the user to customize the tab separator?

Comment 8

[Hani Yacoub, Desktop QA]

I marked this issue as invalid since this is working as designed, you're not the only person who's suggested it. We're actively looking for feedback about product design over at https://ideas.mozilla.org and invite you to join us over there where there's already a conversation underway about this and other possible improvements to the product.

Comment 9

[Dão Gottwald [:dao]]

(In reply to PCurious from comment #6)

This is an accessibility problem, because it makes it difficult for me to distinguish the active space between tabs. It makes it very difficult to find tabs. This is a user-hostile, non-accessible design.

Requesting input from Asa for potential accessibility impact.

I marked this issue as invalid since this is working as designed,

While that's true, I don't think this was designed with the explicit intent that some users would find the product harder to use ;)
I'll mark this at wontfix rather than invalid for now since it seems like legitimate complaint. We may or may not reopen this based on feedback from other users and stakeholders within Mozilla.

Off-hand, I see a couple of options for how this could be addressed:

1. add back separators by default
2. allow third-party themes to set a separator color but keep it transparent by default
3. show separators in high contrast mode

(2) and (3) could be combined.

Comment 10

[Dão Gottwald [:dao]]

Jared, has this been discussed before with UX? Any thoughts on the options outlined in comment 9? I expect (1) would likely be considered a nonstarter.

Comment 11

[Asa Dotzler [:asa]]

(In reply to PCurious from comment #6)

This is an accessibility problem, because it makes it difficult for me to distinguish the active space between tabs.

Can you please say more about this? If it's not too personal, can you say what disability you have that makes this difficult? Also, what is "active space between tabs". From my understanding of how tabs work in Firefox, there is no space between tabs. Where one tab ends, the other starts and this is clear if you try to click between two tabs you will find you're always over the tab to the left or the tab to the right, there is no space between them.

Comment 12

[Dão Gottwald [:dao]]

It's also a bit unclear to me, but I guess the lack of separators makes it harder to target the right tab before the pointer is over it. So basically you need to target more towards the center of the tab rather than utilizing the entire surface area. I suspect this is an ergonomics issue for some people more than for others, because people are just different even if they may not be diagnosed as disabled. Does that make sense?

PCurious, please chime in if you can.

Comment 13

[WIlliam Davis [:AwesomeSheep48]]

Not OP, but here is a thread on reddit that mentions the tab seperation https://www.reddit.com/r/firefox/comments/nqjjc9/for_someone_with_visual_issues_keratokonus_this/

Context: Keratokonus is a degenerative visual disease that causes your cornea to deform, leading to "smudging" of vision and what we call "ghosting", multiple (sometimes blurry, sometimes sharp) images overlayed on top of and in the vicinity of the main image. With lower contrast imagery you can't really distinguish "the border" anymore and everything can become extremely smudged. See here for some good examples how the vision of someone with Keratokonus might look.

The new tab UI is absolutely horrid for these issues. The lack of seperation between tabs makes it extremely hard to distinguish them from all the double images flying around.

Comment 14

[Asa Dotzler [:asa]]

(In reply to Dão Gottwald [::dao] from comment #12)

It's also a bit unclear to me, but I guess the lack of separators makes it harder to target the right tab before the pointer is over it. So basically you need to target more towards the center of the tab rather than utilizing the entire surface area. I suspect this is an ergonomics issue for some people more than for others, because people are just different even if they may not be diagnosed as disabled. Does that make sense?

From a vision standpoint, a typical user should be able to see and effectively target the tab title which is high contrast text between a favicon and a close button. If a user has a vision issue that makes that high contrast text not perceivable, I'd expect that user to be in a high(er) contrast mode like Mac or Window high contrast themes which increase the tab title text contrast against its background even more.

If there's something else going on here, perhaps it's a more general usability problem and not specific to a vision or other disability. I'm interested in hearing more from the reporter and other commenter about how this impacts access or use for people with disabilities.

Comment 15

[Dão Gottwald [:dao]]

I'm reopening this based on comment 13.

Comment 16

[Jeremy]

(In reply to Asa Dotzler [:asa] from comment #14)

From a vision standpoint, a typical user should be able to see and effectively target the tab title which is high contrast text between a favicon and a close button. If a user has a vision issue that makes that high contrast text not perceivable, I'd expect that user to be in a high(er) contrast mode like Mac or Window high contrast themes which increase the tab title text contrast against its background even more.

But have you considered sites with favicons that are low-contrast with the background color (i.e. black favicons against firefox dark theme) or sites with no favicon? Especially when the tabs are squished together. https://cdn.discordapp.com/attachments/614957108718338050/852635823710666803/unknown.png.

Comment 17

[Jeremy]

From my standpoint the UI is ok most of the time (with the exception being when sites don't have favicons). Some of my friends have expressed frustration with the UI change as well - that's why I initially created this bug report.
Is there any downside to letting the user customize this? Would it be challenging to implement?

Comment 18

[Asa Dotzler [:asa]]

Context: Keratokonus is a degenerative visual disease that causes your cornea to deform, leading to "smudging" of vision and what we call "ghosting", multiple (sometimes blurry, sometimes sharp) images overlayed on top of and in the vicinity of the main image. With lower contrast imagery you can't really distinguish "the border" anymore and everything can become extremely smudged. See here for some good examples how the vision of someone with Keratokonus might look.

The new tab UI is absolutely horrid for these issues. The lack of separation between tabs makes it extremely hard to distinguish them from all the double images flying around.

By my reading this person doesn't ask for separators, but separation. This makes sense to me.

Adding separators, a vertical glyph of some kind, is confusing to me. I have a (correctable) astigmatism and when not wearing my glasses I too experience strong ghosting and mild smudging similar to what someone with early Keratokonus might see, so I can actually test this somewhat myself. Separators are also "smudged" or "ghosted" along with the tab text labels but worse than that they actually eliminate the white space that makes different tabs somewhat discernible despite the ghosting and smudging.

Perhaps a wider separation, more white space between the tabs would be helpful, but I don't understand how adding another glyph where there's currently white space would help with ghosting problems. For my astigmatism it only makes things worse. Another possible improvement could be shading each tab's background like we do on hover but by default -- with plenty of "white space" space between each tab.

I can imagine we have an issue here for people with Keratokonus and other vision disabilities, but I'm not convinced that separator lines between tabs is the solution.

Comment 19

[Dão Gottwald [:dao]]

What Asa says makes sense to me, but at the same time I tend to believe people when they say they're experiencing a usability regression in Firefox 89... I hope somebody can provide further insight here.

Comment 20

[PCurious]

I have adult ADHD, but not any visual problems. The problem is that I have to actually think about finding the correct tab, which distracts me from what I was working on and trying to read. It is then difficult to get back on track after I lose concentration.

Hovering over the tab doesn't help, because I rarely use the mouse for tabs. Most often, I use ctrl+w, ctrl+pageup, ctrl+pagedown to work with tabs, and I only often use the mouse to click on links to open new tabs.

Whitespace wouldn't help me much. A vertical bar between tabs would. For now, I'm using browser.proton.enabled but I doubt that feature will survive long.

Comment 21

[Jared Wein [:jaws] (please needinfo? me)]

(In reply to Dão Gottwald [::dao] from comment #9)

Off-hand, I see a couple of options for how this could be addressed:

1. add back separators by default
2. allow third-party themes to set a separator color but keep it transparent by default
3. show separators in high contrast mode

(2) and (3) could be combined.

I talked with Katie and she said she liked options 2 and 3.

Comment 22

[Dão Gottwald [:dao]]

(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #21)

(In reply to Dão Gottwald [::dao] from comment #9)

Off-hand, I see a couple of options for how this could be addressed:

1. add back separators by default
2. allow third-party themes to set a separator color but keep it transparent by default
3. show separators in high contrast mode

(2) and (3) could be combined.

I talked with Katie and she said she liked options 2 and 3.

So I still think those are a good start, but ADHD is pretty widespread, often undiagnosed from what I know. I doubt most affected people will go out of their way to find a third-party theme to address this problem, and high contrast isn't a good fit either. Any further ideas?

Comment 23

[Asa Dotzler [:asa]]

Despite what I said earlier about a vertical separator perhaps not being a dramatic improvement for some low vision scenarios, it is a win for plenty of other users. My personal view is that vertical separators were good and not having them is a loss. I will reach out to the design team and the Firefox product managers to see what we can to to improve things and "add separators" will be part of the discussion though I suspect that's an uphill battle.

Comment 24

[Jared Wein [:jaws] (please needinfo? me)]

(In reply to Dão Gottwald [::dao] from comment #22)

So I still think those are a good start, but ADHD is pretty widespread, often undiagnosed from what I know. I doubt most affected people will go out of their way to find a third-party theme to address this problem, and high contrast isn't a good fit either. Any further ideas?

Trying to stay within the design direction of Proton, maybe we could put separators back but with very low contrast. Of course, that doesn't help people that have trouble with low contrast. I'll redirect to Katie to see if she has other ideas for the default themes.

Comment 25

[Adam Pribyl]

Attachment: Screenshot_2021-07-14_19-36-28.png

This is how the FF89 looks on Xfce - do you really think this is highligted and well distinguishable from the rest?

Comment 26

[Ray Fambro]

I am in the process of reviving this conversation with Katie. Will hope to land on a path to address this by week's end.

Comment 27

[Dianna Smith [:diannaS]]

Hi ray, is there an update on this?

Comment 28

[Ray Fambro]

Hey Dianna, thanks for the ping. We've re-engaged this conversation with our Design and A11y teams. Going to look at some possible ways to improve contrast and tab distinction.

Comment 29

[Marco Castelluccio [:marco]]

Hello Ray, any updates? How are the conversations going?

Comment 30

[Ray Fambro]

(In reply to Marco Castelluccio [:marco] from comment #29)

Hello Ray, any updates? How are the conversations going?

Hello Marco - Sorry for the delay here. I had a chance to chat with some of the a11y experts on the team and had a great dialogue. We think we have a path forward that can help to alleviate some of these usability concerns. Our focus however is going to be more about improving contrast vs the separation concern, as we think this will naturally resolve some of the same issues.

Comment 31

[Ray Fambro]

Updating this bug to "wontfix" status. We will address this issue with this bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=1704347

Comment 33

[Dão Gottwald [:dao]]

Not really a duplicate of bug 1704347, so restoring the wontfix here. There's also bug 1714339.