强制屏幕阅读器中元素分离

Question

p {
  display: inline;
}

<div>
  <p>You may need to etc. etc.</p>
  <a href="https://www.google.co.uk" aria-label="View cooie policy (opens in a new tab)">View cooie policy</a>
</div>

当我在网页上使用以上代码并通过屏幕阅读器（如NVDA）访问时，它会立刻读取p标签中的文本，然后紧接着读取a标签的描述和文本。我希望它们能够分开阅读，具体来说，我希望用户需要先导航到a元素才能读取它。是否可能实现这一点，如果可以，我该如何实现？

值得注意的是，在p未设置为inline时，它们总是被单独阅读。

- OliverRadini

---

你需要使用tabindex。 - Vikas Jadhav

这取决于您如何使用屏幕阅读器进行导航。您是否使用TAB键导航到锚点？您是否使用NVDA的向下箭头按顺序导航DOM元素？您是否使用K键导航到链接？ - slugolicious

@slugolicious 我在使用NVDA的向下箭头 - 退出NVDA的视觉阅读模式似乎解决了这个问题。 - OliverRadini

然后没问题。不要试图强迫NVDA用户采用与他们习惯不同的行为。当使用箭头键进行导航时，NVDA通常会读取容器的全部内容。 - slugolicious

@slugolicious 确实，我将保留正确的标记，因为我意识到这是 nvda 配置的结果。 - OliverRadini

Answer 1

将锚点放在自己的段落中，可以防止项目被读取为一个整体（假设您没有将屏幕阅读器设置为连续阅读，否则它会按预期行事）。

p{
   display: inline;
}

<div>
  <p>You may need to etc. etc.</p>
  <p><a href="https://www.google.co.uk" aria-label="View cookie policy (opens in a new tab)">View cookie policy</a></p>
</div>

- GrahamTheDevRel

---

我对这个非常乐观 :D 但是尝试了一下后，它似乎仍然存在相同的问题。 - OliverRadini

我唯一想到的不会对可访问性产生负面影响的想法是在段落上使用inline-block或甚至float: left。其他任何想法都是不好的。还要记住，虽然您可能希望它们被单独阅读，但没有可访问性原因要求这样做，您的原始示例是完全可访问的（尽管将链接移动到段落内部是最佳标记）。我理解您希望它们被单独阅读，但屏幕阅读器不会有任何问题，而且这些项目是相关的，所以实际上并不重要。 - GrahamTheDevRel

这非常有道理 - 感谢您的反馈和帮助。 - OliverRadini

完全没有问题，祝你的项目好运！ - GrahamTheDevRel

Answer 2

尝试使用 tabindex。

 <div>
      <p tabindex="0">You may need to etc. etc.</p>
      <a tabindex="1" href="https://www.google.co.uk" aria-label="View cooie policy (opens in a new tab)">View cooie policy</a>
    </div>

- Vikas Jadhav

---

不幸的是，从可访问性的角度来看，将tabindex添加到任何非交互式项目都是大忌。此外，在您的示例中，您不需要在锚点上使用tabindex，因为它已经可以聚焦。最后，添加正数的tabindex意味着该锚点将在页面上的所有其他项目之前获得焦点。因此，您的选项卡顺序将是链接文本，然后是段落。如果您希望发生这种情况，则应交换DOM顺序，使锚点首先出现，因此再次不需要在<a>上使用tabindex。希望这有意义，如果不明白，请随时提问。 - GrahamTheDevRel