見出し要素のセルフリンクのマークアップ

<h3 id="eg"><a href="#eg">Sub-Heading</a></h3>

有名どころだと MDN のドキュメントページで採用されているマークアップです。

見出し要素の中に複数の子孫要素があるとスクリーンリーダーでは気が散る(mastodon.social)という意見もあり、シンプルさを好むユーザーには気に入られているようです。

一方で現行のブラウザはリンク内のテキストを選択しにくい現状があります。見出しはとくにコピペの需要が高いでしょうから、デメリットも大きいと考えています。昔の Presto Opera のようにリンク内テキストを簡単に選択できれば良いのですけど。

<h3 id="eg">Sub-Heading <a href="#eg">🔗</a></h3>

HTML Living Standard 仕様書や W3C の各仕様書でお馴染みのマークアップです。

しかしこれは見出し要素の中に見出しそのものではない記号文字が含まれることになりますし、実際の挙動としてもトリプルクリック等での文字列選択時に困る欠点があります。

そのような問題への対策なのか、WHATWG と W3C の仕様書では <a> 要素の中身を空にしたうえで CSS の ::before 疑似要素と content プロパティを組み合わせて記号を表現しているのですが、それはそれでどうなのでしょうね。メリデメを考えたうえでの折衷案なのでしょうが、<a> 要素にアクセシブルネームがないのは個人的には受け入れられません。

見出しとセルフリンクを分ける(mastodon.social)という意見。

<h3 id="eg">Sub-Heading</h3>
<a href="#eg">🔗</a>

本ブログではこれに近いマークアップを採用しています。ほかにも Github Gist で Markdown 文書を作成するとこんなマークアップが出力されます。

見出し要素にはあくまで見出しのテキストのみを入れるべきですから、見出しとセルフリンクを分離するのは理に適っているでしょう。トリプルクリック等での文字列選択も問題ありません。

一方で CSS が適用されない環境では見出しの下に単独でセルフリンクの記号文字が表示されることになります。RSS/Atom フィードで読むようなケースではちょっと微妙なのですよね……。

またこのマークアップはいわゆる here 症候群と同じ問題を内包しています。以前にも同じ話を書いたのですが、WCAG 2.2 の達成基準 2.4.4 的には

<p>○○については<a href="...">こちら</a></p>

は OK な一方で

<p>○○について</p>
<p><a href="...">続きを読む</a></p>

は NG となります。本マークアップはこの事例に当てはまっており、この点は欠点であると言えるでしょう。

見出しにセルフリンクなど不要である(mastodon.social)という意見。

<h3 id="eg">Sub-Heading</h3>

まったくそのとおりで、本来マークアップ上は適切な ID を設定しておけば良く、それをどのように活用するか（セリフリンクにするか否かを含む）はユーザーの意志に任せるべきでしょう。セリフリンクで URL 共有したいケースに対してはブラウザが機能を持つべきとの理屈(mastodon.social)です。

しかしながらそのような機能を持つブラウザが長らく現れていない現状を考えるとこれは理想論であるとも思えます。いずれこのマークアップで済む未来が来ると良いですね。