对于链接到自身的标题有任何 ARIA 规则吗？

Question

我有“自链接”标题，如下所示：

<h2 id="A00"><a href="#A00">Heading</a></h2>

我认为开发辅助功能软件的人会意识到这种常见模式，并且已经有了一些规则来按照他们想要的方式解释它。

（如果我使用屏幕阅读器，我想我更希望他们完全跳过宣布此链接。）

我应该用 ARIA 做点什么吗？这样就可以了吗？

如果我像这样将链接放在标题后面会怎样？这也是常见的模式。

<h2 id="A00">Heading <a href="#A00">#</a></h2>

Answer 1

我相信简单地在标题上放置一个链接会失败WCAG 的链接目的标准，因为跳转到那里并拥有可以共享的 URL 的目的并未传达。

将链接与标题分开可能有助于理解这是一个动作，并提供了解释这一点的机会。

基于 在线 WCAG 文档本身我推荐以下模式：

hgroup {
  display: flex;
  flex-direction: row-reverse;
  justify-items: start;
  gap: 1em;
}
hgroup h3 {
  margin: 0;
  flex: 1;
}

<section aria-labelledby="supporting-documents-title">
  <hgroup id="supporting-documents">
    <h3 id="supporting-documents-title">Supporting Documents</h3>
    <a href="#supporting-documents" aria-label="§ Permalink for this Section">§</a>
  </hgroup>
  …
</section>

我添加了

aria-labelledby

，因为没有可访问名称的

<section>

不满足 ARIA。

这里的优点是链接不仅是一个专用元素，它也不是标题文本的一部分。如果是的话，每次用户阅读时都会重复