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

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

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

Answer 1

通过将 anchor 放在它自己的段落中，这将停止将元素作为一个整体阅读(假设您没有将屏幕阅读器设置为连续阅读，在这种情况下它的行为符合预期)。

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>