whatwg.org icon indicating copy to clipboard operation
whatwg.org copied to clipboard

Definitions in headings are visually unrecognizable

Open not-my-profile opened this issue 1 year ago • 7 comments

For example the heading of section 13.2.6.5 of the HTML spec is rendered as:

image

what you cannot see is that "foreign content" is hyperlinked clickable.

not-my-profile avatar Sep 29 '23 06:09 not-my-profile

That's a definition, but valid point.

I wonder if we should solve the styling issue or instead attempt to move definitions out of headings as generally that seems like bad practice to me.

annevk avatar Sep 29 '23 07:09 annevk

I think definitions in headings is fine, and the fact that it's not obvious that they're definitions is also fine? The point of definitions is to have something to link to; they don't need to be visually obvious, IMO.

domenic avatar Sep 29 '23 07:09 domenic

The point is that html-dfn.js turns these definitions into interactive elements and interactive elements should be visually recognizable.

Moving these definitions out of the headings could be one possible way of addressing this, and could probably also address whatwg/html#9811.

not-my-profile avatar Sep 29 '23 08:09 not-my-profile

Yes, there are a number of interactable elements in HTML which are not properly marked up. It'd be nice to add some stuff to our build tools to emulate what Bikeshed (the other major spec build tool) does to them, which is add a little floating # permalink indicator.

domenic avatar Sep 29 '23 08:09 domenic

I don't know what you mean by "little floating # permalink indicator.". The bikeshed whatwg specs use the same styling as the HTML spec.

not-my-profile avatar Sep 29 '23 09:09 not-my-profile

They have different markup which sometimes helps (and sometimes does not), but for this they appear to have the same problem: https://fetch.spec.whatwg.org/#should-response-to-request-be-blocked-due-to-mime-type?

annevk avatar Sep 29 '23 14:09 annevk

A quick PoC adding subtle 30% grey dotted underline:

body.dfnEnabled dfn { text-decoration: underline dotted var(--a-underline); }

Screen Shot 2024-07-22 at 18 34 51

doesn't make it too busy, but admittedly the dfns are a plenty, so it may seem like a noise somewhat.

janbrasna avatar Jul 22 '24 16:07 janbrasna