From an Accessibility standpoint, links should not be visual styles similar to other elements in the content/text (like bold or highlight) but visually distinct. Eg. they can be bold or highlighted if you absolutely want them to be, but then they should be designed to look like they are clickable (eg. look like a button or have an icon or add an underline in addition to the bold/highlighted style)

I have an alternative suggestion: underline the links instead of making them bold. The most easily reconizable characteristic of an link, is an underline. Making it bold introduce more ambiguity, because it will just look the same as the table headings.

I know that's the theory but it does feel... weird/uncommon to underline it in this particular use case. I checked a few tools (WordPress, Accountable, Combell, ...) and they all put it in bold with a clear hover. Theory vs habit?

@LordRembo @Mike-Dropsolid

The ideal scenario here would be to keep a normal font weight but apply a saturated color. For the Mautic brand, it could be the yellow or green (everyone would probably find it weird since these colors are rarely used on UI). Is it there a possibility for us to consider? Could I make all links yellow or green?

An underline is commonly used for accessibility improvement as a feature which you can enable/disable but it’s not exactly often used on the “normal theme”/for all users… We would also have the same issue since columns header are also a link

The point about theory vs habit is important: things become recognizable through repetition. If we keep everything consistent, probably it would be all good to proceed this way

If we can get another review that agrees with just making it bold, I'm fine with it. In the end, consistency and habit are the best indicators if something will work or not. No need to change the colors or styles to something that is not used anywhere.

I like the proposed idea. My only suggestion would be to consider using a slightly lighter font weight for the link probably. Additionally, I would recommend making the links in the 'thead' regular font weight instead of bold, to distinguish them from the links in the list. Other than that, it looks good! 👌

@code5rick We would fall into the issue mentioned on the feedback, now for thead links, if they become not-bold

@RCheesley Any UX idea here?

I'm afraid I'm from the old school ... underlines signify to me that something's a link! 🙈

I like how Joomla does it with their accessibility plugin which ships with core and can be turned on, it gives the user the power to change links to be underlined and a bunch more stuff based on their own needs. You can see it in action on my site here. Could be something to consider in the future, maybe.

From their article, it states:

WCAG does not require the links to be underlined (they must be highlighted). But underlined links can improve accessibility for visually impaired people or for people who have difficulty concentrating.

I think making them bold does help if we don't want to underline. I don't think yellow/green would help as those colours don't go well on a white background, but maybe a hover of those colours (probs the Mautic yellow) might assist with signifying a clickable link, if we really want to avoid underlining.

@code5rick
Our font weight options are:

300 (light)
400 (normal, currently used)
600 (semibold)
700 (bold, on the screenshot)

I can set 600 to be a bit thicker, but should it be applied to all links on the interface or only to the ones on the second column of all tables?

@RCheesley It would be good if we had a feature like this (lots of enable/disable for each accessibility item)

If hard to implement, a high contrast theme with standard accessibility changes would also work fine (kind of a LESS file where accessibility features overwrite the normal theme rules)

Regarding the link on tables, this one is hard. Could you select 1 way to proceed, then we start a slack discussion to decide if we implement it or not?

The options:

1. Bold (increase visibility, subtle, not accessible)
2. Underline (increase visibility, commonly recognized but not subtle at all, accessible)

(an additional comment: is this comparison fair? Is it right to compare accessible vs non-accessible? If not, would bold be the only option? Should we give up on this change for now?)

So, these are the options I think we're considering here:

Personally, I don't think that making it bold gives enough of direction to the user that it's a click-able link. I think that regular underline (without bold) would be the best option for making it clear it's a link, but it doesn't look so 'tidy'.

So I would indeed put this out for discussion in the community and get wider viewpoints.

@andersonjeccel there's a conflict now.

@escopecz Conflicts solved!

@RCheesley @kuzmany @LordRembo could you please give this PR another try? Anderson made more changes according to your feedback. I don't want to get this PR merged until the majority agrees. At the same time, this PR is blocking a bunch of others so we are stuck without your feedback.

@RCheesley Thanks for taking time to review!

Hm, we have a difference between the way different page lists were created over the time
Specifically this one doesn't show because someone placed the names inside a <div> which is inside the actual link <a> (😭) so you're not technically clicking the link

I can take a note to fix this with other PR specifically for minor fixes like HTML structural changes, but it would be great to move this PR here forward to avoid text contrast issues with the light gray tile components 🙏

OK @andersonjeccel perhaps you could be really specific then on what we should be reviewing? As I wasn't really sure from the original description / conversations in this PR what was and wasn't to be reviewed and what was/wasn't being changed specifically in this PR.

@RCheesley You should review:

• Contrast (see if the text color feels better to your eyes)

I reverted the outline to ensure this PR will move forward, it's blocking great improvements like

• [UX] Tokens help #13942
• [UX] Search commands modal #13939
• [UI] Accordions.less #13940