2.4.11 text-decoration as focus indication for links

[7mary4]

The new requirement for focus indication fundamentally changes the focus style for links. For many years, links were styled with

a {text-decoration:none}; 
a:hover, a:focus {text-decoration:underline}

This new requirement significantly improves the readability of focused links and I'm not arguing about it's purpose. However, this is going to have a long-tail impact on websites that have used this pattern. It's hard to quantify the impact, as this pattern has been so ingrained in web development styles.

This change also affect web sites that are using an underline on links to make them more obvious and then removing the underline on hover and focus. Again, this change makes the link interaction more understandable. But it's going to impact an enormous number of web sites.

a {text-decoration:underline}; 
a:hover, a:focus {text-decoration:none}

I have done a quick audit of our company web sites and this will require updates to footers and some inline links on most of our pages. I feel we are in better shape, as we already have defined an outline style for the majority of our links, but I appreciate how this will impact other creators significantly.

Ted Drake, Accessibility and Inclusive Design Leader (Intuit)

[patrickhlauke]

as discussed in Slack - and apologies, I missed that nuance myself too at first - underline-only will work, provided that the text link is longer than approximately 4-5 letters.

or is at least as large as a 4 CSS pixel thick line along the shortest side of the minimum bounding box of the unfocused component

shortest side of the bounding box is the line-height of the link. so assuming the underline is 1px, it needs to be as long as 4 times the line-height

[patrickhlauke]

this would make a great (and necessary) addition to the understanding document, as it's non-obvious

[7mary4]

Thank you Patrick. I appreciated Wilco's understanding of how an underline could correlate with the height of a link to be acceptable. I'm still supportive of updating our link styles, but having this knowledge of underline being acceptable will help the millions of legacy pages that would need to be updated.

[bruce-usab]

Thank you @7mary4 for flagging, since the WG is very keen on improving the Understanding documents for the new SC.

[yatil]

I wished this SC was written in a more straight forward way. Having two or clauses in the three clauses of point 2 means that there are many permutations that apply. It would be much better if the permutations were clearly stated in the SC. This is probably also a nightmare to translate as the sentence structure is already complicated in English.

Also I wonder if the 4px × shortest side would not always be met before meeting the perimeter clause in point 1? For a 10×20 pixel box, the bounding box is 2×10-2+2×20-2 = 56, the shortest side ×4 is 40px. The only time it makes a difference (by 4 pixels) are if the element is square (4×10-4 = 36px vs. 4×10 = 40px) or a square where the side is off by one (10×2+11×2-4 = 38px) which seems super niche use cases and the question is if those two or 4 pixels really make a difference in visibility.

[patrickhlauke]

and the question is if those two or 4 pixels really make a difference in visibility

it's once again one of those "we had to draw a line in the sand somewhere" aspects.

same reason why nobody can honestly argue in good faith that if something has a contrast ratio of 4.5:1 it's fine, but if it's 4.49999:1 it suddenly becomes really hard to distinguish for folks.

[alastc]

Ted wrote:

having this knowledge of underline being acceptable will help the millions of legacy pages that would need to be updated.

Patrick wrote:

it's once again one of those "we had to draw a line in the sand somewhere" aspects.

Relying on an underline is right on the edge of that line. On a continuum of visibility, it's just edging over the line. It also must have included: a:focus { outline: none;}, otherwise the browser would have also shown an outline, so some visibility has intentionally been removed.

To make it "safe", I'd recommend adding text-decoration-thickness: 2px;.

Eric wrote:

I wonder if the 4px × shortest side would not always be met before meeting the perimeter clause in point 1?

Usually, but not always. Circles are another common shape that needs the perimeter calculation to pass at 1px thickness.

The only time it makes a difference (by 4 pixels) are if the element is square...

The other major difference is the understandability of the intent. A 1px perimeter is reasonably straightforward to understand, and the more desirable approach.

If we only used the 4x shortest side metric we'd be requiring 2px perimeter on circles, and hiding the more desirable approach.

[alastc]

Next step: Someone to propose an update to the understanding doc to include underlines as text links.

[bruce-usab]

Very unambitious proposed update to Understanding on my part. Just the one line in what I thought to be best place.

I expect there to be other edits to Understanding but no reason not to close this one issue.

[alastc]

Hi @bruce-usab, I updated the PR. The text-decoration isn't a browser default, at least not for focus, so I moved and updated the text.

[bruce-usab]

Thanks @alastc – and it looks good to me – but I was not the originator of the suggested prose. I was just mechanically just trying to finish off the PR.

[alastc]

The update was approved in the meeting:
https://www.w3.org/2023/02/07-ag-minutes.html#t05

So closing this issue.