WCAG 锚链接答案

【问题标题】：WCAG Anchor linkWCAG 锚链接
【发布时间】：2014-06-11 10:52:12
【问题描述】：

我一直试图在 WCAG 或 WAI 指南中找到创建链接锚点的适当方法。

我目前的网站有这样的锚点：

<h2><a name="blah" id="blah">Blah H2 Content</a></h2>

但由于我不想添加不必要的 CSS 来取消任何锚点（不，它们并不都在标题中），我想知道这是否可以访问，或者它是否违反了 WCAG 或 WAI-ARIA 准则：

<h2><a name="blah" id="blah"></a>Blah H2 Content</h2>

【问题讨论】：

按照这些准则，仅使用<h2 id="blah">Blah H2 Content</h2> 有什么问题吗？毕竟，在 HTML 4.01 中已经指定了任意元素上的 id 可以用作锚点。其他一切，使用额外的a 元素，我认为只是不必要的膨胀，除非有非常具体的原因使用它们。
我不是网站上唯一工作的用户，因此出于一致性原因，<a> 标签选择了name 和id 属性（是的，我知道name 已弃用）在标题和跨度标签上使用简单的 id。我想知道的是这个限制，实现它的最佳方式是什么。

【解决方案1】：

我不知道有什么具体的建议，但是在 WCAG 2.0 HTML 和 XHTML 技术中，有一个使用空 <a> 元素的示例。请参阅H86，位于 ASCII 蝴蝶下方。

所以你应该没事。

【讨论】：

【解决方案2】：

我建议有两种可能的选择，但首先我不建议使用空锚标记 - <a name="blah" id="blah"></a>。有了这个锚点什么都没有，所以如果屏幕阅读器试图提取一个 tgas 的范围，它可以确定页面中的内容，这将毫无意义。

选项 1. 对标题使用 `id`。

<h2 id="blah">Blah H2 Content</h2>

如果您想在标题上设置一个锚点，请将其指向该标题。有了这个效果，您仍然可以使用example.html/mypage.html#blah 降落在正确的位置。

<h2><a name="blah" id="blah" href="#blah">Blah H2 Content</a></h2>

如果锚点对用户有用，请制作它，以便他们可以轻松使用它。通过添加href 属性，用户可以右键单击并获取指向文档中该点的链接，单击中键将新选项卡聚焦在该点上并与其他人共享指向文档特定部分的链接。

【讨论】：