强制分离屏幕中的元素 reader

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>

当我在页面上使用上面的内容并通过屏幕 reader（在本例中为 NVDA）访问它时，它总是会立即读取 p 标签中的文本，紧接着是描述和 a 标签的文本。我希望它们被单独阅读，更具体地说，我希望用户在阅读之前需要导航到 a 元素。这可能吗？如果可以，我该如何实现？

可能值得注意的是，当 p 未设置为 inline

时，它们总是为我单独阅读

Answer 1

尝试使用 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>

Answer 2

通过将锚点放在它自己的段落中，这将停止将项目作为一个整体阅读（假设您没有将屏幕 reader 设置为连续阅读，在这种情况下它的行为符合预期).

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>

强制分离屏幕中的元素 reader

Forcing separation of elements in screen reader

html

css

accessibility

screen-readers

nvda