Good afternoon!
Context
In order to fulfill WCAG 2.1 AA requirements, we want to have links that are visible enough from their neighboring text.
So far, links are not underlined in XWiki. This makes it difficult to identify them as links, especially for users with reduced contrast sensitivity (contrast sensitivity typically decreases with age).
This is a mock picture made to highlight the importance of not relying only on color changes to convey information:
This was made using the NoCoffee browser extension with a preset to simulate Achromatomaly.
We can see that itās difficult to find links that are inline and not external (because those do get an icon that is easy to spot). There is one inline link besides āWYSIWYGā in the āPage Editingā card on the screenshot above. I donāt think this link is reasonably easy to notice.
One solution we already discussed to make it easier to spot those links is to ensure thereās enough contrast between them and the surrounding text. We implemented this by making the standard text color darker.
Out of the 441 fails of this WCAG rule found by our automated accessibility tests, this solved only 145.
The others are mostly made of a failure on the color #555555
, which is the one in the mixin .text-muted
.
Itās not possible to increase contrast between this mixin and links without losing the whole point of this mixin: .text-muted
would barely be muted anymore.
Vote proposal
In order to solve those cases, we should provide an additional visual indicator to differentiate the link from its surrounding text. For the sake of consistency, the same rule would apply on all links (even if they are not inside of .text-muted).
I propose to underline inline links by default and add an option to remove all link underlining from the user preferences.
Here is a display of what it would look like:
On this second picture I added an orange square around links that do not get underlined, and a light green square around those that do:
This is a solution that has been adopted by GitHub recently in their efforts to improve accessibility. @amilica also found out that Obsidian, the french design system, and Notionās blog also use such underlining rule.
I think this is becoming a standard among complex web UIs, and we can leverage its advantages on accessibility without it looking too unusual for users. I think that the experience of a standard user is not meaningfully degraded by those improvements for low vision users.
This is going against a VOTE that was made a few years ago and ended up in links not being underlined in XWiki. @vmassol I remember we looked at it a few months ago when discussing this topic, but I canāt figure out how to find anything on the dev mail archive linked in https://dev.xwiki.org/xwiki/bin/view/Community/Discuss .
Resources
This change follows the discussion initiated by @amilica about making accessibility features enabled by default.
This forum topic and this PR describe in detail the thought process that led to this proposal.
Note that the specific implementation of the selector used to differentiate inline links from other links is non trivial and will be discussed later on if this vote is not vetoed.
Thank you in advance for your feedback!
Lucas C.