CODEWITHSUNDEEP
javascripthtmlaccessibilitywai-ariascreen-readers
Ashutosh Dumiyan
Ashutosh Dumiyan

Reputation: 67

How to make screen reader focus on an anchor tag which is inside a paragraph

I have the following markup somewhere in my page:-

<p>This is a paragraph which contains a <a href="https://youtube.com">link</a></p>

Basically a link inside a paragraph (can be multiple links).

When I navigate through the page with a screen reader (say NVDA) using the down arrow key, it focuses/highlights the paragraph and when I press the down key again, it goes to the next paragraph in the markup.

What I want it to do is to highlight and focus on the link as well and then move on to the next paragraph. I know that pressing the tab key can do that but I want the arrow keys to be able to do the same.

I noticed that wrapping the anchor tag in a div does what I want but it disturbs the looks since div is a block element and giving it display: inline; just makes the screen reader ignore the link again. So, is there any way to achieve what I want? Maybe a CSS solution to maintain the looks of the paragraph and change the HTML or any aria attribute which might help? I'm new to accessibility and completely clueless here.

Upvotes: 0

Views: 1936

Answers (1)

slugolicious
slugolicious

Reputation: 17563

Different screen readers handle navigating the DOM (*) with the downArrow key differently.

(*) really it's the accessibility tree but it's easier to think of it as the DOM

<p>This is a paragraph which contains a <a href="https://youtube.com">link</a> and more text after</p>

JAWS will behave like you're asking for and will stop at each HTML element. So the first downArrow will navigate to the paragraph up until it hits another HTML element so will only read the paragraph text up to "contains a". The next downArrow will read the link text. If you had more text after the link but still within the same paragraph, JAWS would then read that, "and more text after".

  • "This is a paragraph which contains a"
  • "Link link'
  • "and more text after"

NVDA handles it differently and will read an entire element including all non-block-level element children. So it'll read the paragraph text and the link text and the text after the link that is still within the same paragraph. That's why adding a <div> around your link makes NVDA stop. Because the <div> is a block-level element.

  • "This is a paragraph which contains a link link and more text after"

That's just how those two screen readers behave differently. The users of those respective screen readers know and expect this behavior. You should not try to change this.

Upvotes: 2

Related Questions