1664278 - Feature request: “Always underline links in text” option in Firefox

Status: RESOLVED FIXED

(Firefox :: Settings UI, enhancement)

Description

[Šime Vidas]

Attachment: Screen Shot 2020-09-10 at 9.05.27 PM.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:82.0) Gecko/20100101 Firefox/82.0

Steps to reproduce:

1. In Chrome, open https://www.sitepen.com/blog/virtual-reality-in-2020/
2. Via DevTools, enable Achromatopsia

(or see attached screenshot)

Actual results:

The links in the text are indiscernible because the website removes the underline from them.

Expected results:

Firefox should provide the option to always underline links in body text on all websites. People with vision deficiencies could use this option to make links easier to notice on websites.

Comment 1

[Emilio Cobos Álvarez (:emilio)]

Moving this to preferences. The Gecko side of this if folks think it is worth exposing in about:preferences is trivial and I'd be happy to do.

Comment 2

[MarjaE]

As of Firefox 110, there is an option in about:preferences, under colors, but it doesn't work.

Comment 3

[Jared Hirsch [:jhirsch] (he/him) (Needinfo please)]

As of Firefox 110, there is an option in about:preferences, under colors, but it doesn't work.

The "underline links" checkbox, found by going to about:preferences > Colors, then clicking Manage Colors, does toggle the value of the browser.underline_anchors preference, but the behavior controlled by that preference can still be overridden by websites.

Note that forcing links to always be underlined may unexpectedly underline a lot of things on some websites, since (for example) websites can implement buttons or tabs or other UI controls using heavily styled links. That said, it should be possible to force this on.

It's not clear to me if this falls under accessibility or general user preferences, but it seems like the accessibility aspect may be more pressing here. :morgan, are you aware of existing tools that can force-underline links, e.g. so that users with color blindness or motor impairments can scan a page for links, or might it make sense to prioritize adding this option to about:preferences?

Comment 5

[MarjaE]

It can also be an accessibility issue when

1. People sometimes need use black-and-white screens. People may need to use e-ink to reduce eye strain, or because of migraines, or because of light sensitivity, or because of motion sensitivity, and most e-ink tablets and monitors are black and white.

2. People sometimes need to avoid mousing back and forth across the screen to try to find links. Besides motor disabilities, this can be an issue with motion sensitivity since many sites use mouseover events.

Comment 6

[Morgan Reschenberg [:morgan]]

(In reply to Jared Hirsch [:jhirsch] (he/him) (Needinfo please) from comment #3)

As of Firefox 110, there is an option in about:preferences, under colors, but it doesn't work.

The "underline links" checkbox, found by going to about:preferences > Colors, then clicking Manage Colors, does toggle the value of the browser.underline_anchors preference, but the behavior controlled by that preference can still be overridden by websites.

Note that forcing links to always be underlined may unexpectedly underline a lot of things on some websites, since (for example) websites can implement buttons or tabs or other UI controls using heavily styled links. That said, it should be possible to force this on.

It's not clear to me if this falls under accessibility or general user preferences, but it seems like the accessibility aspect may be more pressing here. :morgan, are you aware of existing tools that can force-underline links, e.g. so that users with color blindness or motor impairments can scan a page for links, or might it make sense to prioritize adding this option to about:preferences?

I'm not familiar with tools that allow users to do this already -- though maybe a web extension exists since this is essentially just CSS injection?
I think this is worth prioritising :)

Comment 7

[Emilio Cobos Álvarez (:emilio)]

A userContent.css can do this quite trivially can't it?

Comment 8

[Emilio Cobos Álvarez (:emilio)]

Bug 1853323 removed the (default on) underline anchors checkbox. If we want to implement this it'd be easy to do with a custom media query and a single line in ua.css

Comment 9

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1664278 - Expose an "always underline links" checkbox in settings. r=#settings-reviewers,morgan!

Might want to run it through UX or so...

Comment 10

[Meridel [:meridel]]

Emilio and I discussed the functionality change. The string recommendation is "Always underline links". The setting is off by default, and when it is off, websites will determine whether or not links are underlined on webpages. When the user selects, "Always underline links," Firefox will override website preferences and always underline links. The use of "Always" implies overriding website preference.

Flod, since this is so minor, I am flagging you here for localization review (though I don't think it needs it most likely).

Comment 11

[Francesco Lodolo [:flod]]

(In reply to Meridel [:meridel] from comment #10)

Flod, since this is so minor, I am flagging you here for localization review (though I don't think it needs it most likely).

No concerns on my side, the string is clear.

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/59754ae1b713
Expose an "always underline links" checkbox in settings. r=morgan,settings-reviewers,fluent-reviewers,Gijs

Comment 13

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/59754ae1b713

Comment 14

[Ryan VanderMeulen [:RyanVM]]

Please add an Fx121 relnote nomination for this.

Comment 15

[Emilio Cobos Álvarez (:emilio)]

Release Note Request (optional, but appreciated)
[Why is this notable]: New accessibility feature
[Affects Firefox for Android]: Partially (can be on via pref), so I guess not for this purpose.
[Suggested wording]: Firefox now allows you to force-underline links in websites. This is useful for people with achromatopsia for example.
[Links (documentation, blog post, etc)]: this bug

Comment 16

[Ryan VanderMeulen [:RyanVM]]

Added to the Fx121 relnotes.