3

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>

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

OliverRadini
  • 6,238
  • 1
  • 21
  • 46
  • You need to use tabindex – Vikas Jadhav Nov 23 '21 at 11:55
  • It depends how you navigate with the screen reader. Did you TAB to the anchor? Did you use the down arrow with NVDA to navigate the DOM elements sequentially? Did you use K to navigate to the link? – slugolicious Nov 23 '21 at 22:32
  • @slugolicious I was using the down arrow in NVDA for it - switching out of the visual mode of reading in NVDA seems to fixed the issue – OliverRadini Nov 24 '21 at 11:20
  • Then it’s ok. Don’t try to force a different behavior than what NVDA users are used to. NVDA will often read the entire contents of a container when navigating with the arrow key. – slugolicious Nov 24 '21 at 18:19
  • @slugolicious indeed, I'm leaving it with correct markup since realising it's a result of nvda config – OliverRadini Nov 25 '21 at 00:18

2 Answers2

2

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>
GrahamTheDev
  • 22,724
  • 2
  • 32
  • 64
  • I was very optimistic about this one :D but having given it a go, it still seems to have the same problem. – OliverRadini Nov 23 '21 at 12:11
  • 1
    The only other thought I have that wouldn't negatively impact accessibility would be to use `inline-block` or even `float: left` on the paragraphs. Anything else would be a bad idea. Also bear in mind that while you may want them to be read separately there isn't an accessibility reason why they should be and your original example is perfectly accessible (although moving the link within the paragraph would be the best markup). I understand the desire for them to be read separately but a screen reader will not have any issues and the items are related so it doesn't actually matter. – GrahamTheDev Nov 23 '21 at 12:31
  • 1
    That makes a lot of sense - thanks for the input and help – OliverRadini Nov 23 '21 at 13:27
  • 1
    Not a problem at all, good luck with the project! – GrahamTheDev Nov 23 '21 at 13:50
0

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>
Vikas Jadhav
  • 4,597
  • 2
  • 19
  • 37
  • Unfortunately adding `tabindex` to any item that is not interactive is a big no no from an accessibility perspective. Also in your example you do not need the `tabindex` on the anchor as it is already focusable. Finally adding a positive `tabindex` would mean that the anchor would be focused before all other items on the page. So your tab order would be link text and then the paragraph. If you wanted this to happen you would swap the DOM order so the anchor comes first so yet again, you wouldn't use a `tabindex` on the ``. Hope that makes sense, if not just ask. – GrahamTheDev Nov 23 '21 at 12:01