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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

When I use the above on a page, and access it via a screen reader (in this case NVDA) it will always read the text in the p tag immediately followed by the description and text for the a tag. I'd like them to be read separately, more specifically I'd like the user to need to navigate to the a element before it is read. Is this possible, and, if so, how can I achieve it?

May be worth noting that they are always read separately for me when the p is not set to inline

CodePudding user response：

By putting the anchor within it's own paragraph this will stop the items being read as one (assuming that you don't have the screen reader set to continuous reading, in which case it is behaving as expected).

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Try using 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>