Re: Underline vs. bottom border

Hi Guy,

That is important input and I would like to add just two details: some browsers (I’m writing on my phone right now, so I can’t verify it) do not draw the lines through the lower parts of letters - at least safari on both desktop and smartphone (this I can check on my phone) and Firefox as shown by Jen Simmons in the Mozilla vlog.

And again: although there are workarounds (or better say hacks) to fake the behavior of ff and safari, I recommend to stick with the real thing - Heydon Pickering wrote a solution in his first inclusive design book and some more tricks you find at https://css-tricks.com/styling-underlines-web/


On the other hand I strongly want to support you saying that overdoing the styling can be a problem - also for users with screen magnifiers or really small fields of vision.

It’s quite common that new possibilities or ideas soon become a fashion and designers getting crazy with it - for example the fancy inputs without visible labels.

So really - don’t do whatever is possible, just because it’s possible. Design with accessibility in mind (I hope everybody on this list here does not need such an advice anyway...)

--
Mit freundlichen Grüßen

Marc Haunschild
www.mhis.de

Am 04.01.2021 um 19:40 schrieb Guy Hickling <guy.hickling@gmail.com>:


I think there is just one caveat to what has been said on this. Many designers position  bottom border underlines way below the line of text - often nearly an inch below it. You often see this in main menus particularly. It has become something of a fashion.

I think this makes it difficult for users to associate the border line with the link. In fact I sometimes realise that I have mentally been disregarding such a line as irrelevant decoration until I see it move with changing keyboard focus when I do keyboard testing.

So using a bottom border to move the underline a small distance below the text is fine, but I always caution against making the gap too large.

Interesting, however, that this should be raised just now, because it has suddenly become less necessary to make this change to border underlines. And Amy, you might find events will make it unnecessary to do the change you were planning!

The huge problem with using the standard underline, of course, has always been that it goes right through all the descenders of letters like p, g, y etc, making it difficult to read the text for people with poor eyesight. But looking at caniuse.com<http://caniuse.com> I see that Chrome and Edge have just (in the latest update, v87) implemented the CSS text-underline-offset property. It applies to underlines created using the usual text-decoration: underline property.

So all the mainstream browsers on desktop now implement it (Firefox has had it a while). (I have also, by the way, just noticed that Edge now uses the same version numbers as Chrome, now that it uses the same internal engine.)

Just having done a quick test with this property, it seems that any value of text-underline-offset of 0.3em or more is enough to position the standard link underline well clear of descenders, for most fonts. (Using em units is recommended, not px units, so that it scales when users are using larger font sizes.)

So this at last solves the main problem with link underlines, and it seems to me that designers and developers would do well if they include this property in their link CSS as standard from now on.

Support for it is still very patchy on mobile browsers. But, for any browser that doesn't implement it, that just means link underlines will appear in their normal position on those devices (and since screens are usually more readable on them, underlines going through descenders is probably less of a legibility problem anyway).
Regards,
Guy Hickling