HTML 锚点应该包裹标题还是独立存在？

Question

我们看到人们通过两种方式在页面上制作锚点：

<h2>Heading associated with the anchor</h2><a id="anchor"></a>

锚点位于关联元素之外，在本例中我们跳转到一个标题，而锚点本身没有文本。

或者...

<a id="anchor"><h2>Heading associated with the anchor</h2></a>

锚点也包裹了我们 linking 部分的元素。

两者都有效。 link 到 https://examplepage.com/page#anchor 两者都适用。

这些是否与 HTML 编码标准冲突？

这些是否会破坏辅助技术？

Answer 1

它会破坏辅助技术。在您的示例中，当屏幕 reader 导航到锚点时，它无法确定是否应该大声朗读前面的段落。

此外，当您打开 URL 到 http://somedomain.com/somepath#anchor 时，浏览器会自动滚动到具有 id=anchor 的元素，因此将锚点放在使感觉。

任何元素都可以有锚定 id，不需要是 <a/>。

Answer 2

锚点（不带 href）no longer exist in HTML5 这样的标签现在用于表示占位符超链接

If the href attribute is not specified, the element represents a placeholder hyperlink.

如果您希望键盘顺序保持一致，您可以直接在标题上设置 id 属性，并为旧版浏览器设置 tabindex 属性。

<h2 id="anchor" tabindex="-1">Heading associated with the anchor</h2>