As discussed in this blog post: https://www.leereamsnyder.com/blog/making-headings-with-links-show-up-in-safari-reader
And demonstrated in this demo page: https://www.tunetheweb.com/experiments/heading-links/
Safari Reader Mode (MacOS BigSur 11.3.1 and iOS 14.5.1) has started hiding headers using the following pattern:
<a href="heading3"><h2 id="heading3">Heading 3</h2></a>
This is a popular pattern used by the links of MDN and the Web Almanac, and when I initially implemented this in in the Web Almanac two years ago I tested this and it did show them (I have a screenshot if you link, but only for Apple Watch, which seems to follow the same heuristics as reader mode and is also broken now).
Weirdly, when there is no paragraph above it, it sometimes leaves the heading in place (but removes the link), but mostly it just removes the heading completely.
The reverse works - and even retains the fact it's a link (though only in MacOS and not in Safari Technology Preview):
<h2 id="heading3"><a href="heading3">Heading 3</a></h2>
Adding a pointless span, returns the heading (though not as a link):
<a href="heading3"><h2 id="heading3"><span>Heading 3</span></h2></a>
Removing a heading completely ruins the reading flow of a document.
Safari Reader Mode is a Safari feature. Could you please report this via https://feedbackassistant.apple.com for Apple engineers to take a look? I could move it myself too, but then you wouldn't be notified of updates or questions that Safari developers might have.
Thanks for pointing me in the right direction.
Raised: FB9101668 (Safari Reader is removing some headers)
Though presume that's personal to me rather than a public bug tracker like this one.
Thank you, the ID is helpful.
Looks like it reproduces with older releases too, can you confirm if this indeed only started happening with the latest releases for you?
I've done some more digging and I don't think this ever worked properly :-(
First some version info:
The blog post in my initial comment says it's broker for them in /Safari 14.0.3 on MacOS 11.2.3.
I'm on 14.1 on 11.3.1.
I dug up an old iPad which is stuck on iOS 12 (12.5.2 to be precise running Safari 12.1) and oddly it's broken there too?!?
So I went back and dug through my code and looks like I only added the heading links 1 year ago to my site, and my example of it "working" was from before then, so it must have been a plain header :-(
So apologies for that bad information. However I still think this should be fixed.