How to prevent NVDA from announcing the whole content of a link?

Question

I have a section of code that is contained in a link, the problem is that when I focus the element with NVDA the content of the link is read all at once.

For example I have this code:

   <a href="example.html" title="description link">
     <h2>Heading H2</h2>
     <span>More Text</span>
     <p>More text</p>
   </a>

And when I focus the link with NVDA and Firefox the screen reader mention all the content of the h2, span and p tags without press the arrow down key.

Ideally, when focusing on the link just read the title of the link and when you press the down arrow key the rest of the content is read

This is the behaviour I would expect, given your markup: When a screenreader focuses on an interactive element (e.g. an <a>) it announces the contents as a 'label' (or 'accessible name') for that element. The behaviour you are calling for is more for non-interactive content (so-called "browse mode"). Do you really want/need all of that content inside the link? The 'link' semantics of <a> will override the heading and paragraph semantics of the elements inside, so the h2 and p markup is redundant! What is the actual use case? — brennanyoung
I don't understand why you think this is a problem. NVDA users can stop the screen reader from reading with Ctrl or pause it with Shift. But if something is too long and not interesting to people, they would most likely just navigate to the next thing which would interrupt the reader to read the next thing. — selfthinker
Thanks so much for your answers at the end I changed the html (the link for an article) and added onClick function with javascript, now semantically make more sense. — Jessy Tylor

Taylor N Taylor N · Accepted Answer · 2019-08-09T13:19:40

@brennanyoung is correct. Whatever is inside the anchor tag will be read by a screen reader.

If you wish to have the h2 span and p still clickable as if it were a link, but not read when an NVDA user places focus on it, you could use CSS to expand the clickable area to include the text below. You'd likely need something in the anchor tag though. With more context I can provide a better example, but here's the idea

a {
    position: relative
}
.bigger:after{
    content:"";
    padding: 250px;  
    position: absolute;
    left: -25px;
    top: -25px;
}

How to prevent NVDA from announcing the whole content of a link?

1 Answers