Question

When we use the tab key to cycle through the <a>, <input>, <select> elements across the page the NVDA reader will call out the inner text. Is there a way to markup the code so that it picks up and reads headers 1-6?

It seems a bit of a hack to wrap the headers around an <a>, is there any other solution?

I tried to add a aria-label attribute but that was just shooting in the dark.

Was it helpful?

Solution

I would say this is not a good idea. People with mobility disabilities will find the page combersome to use, maybe even annoying, since you are adding more things to tab through.

NVDA and other screen readers have built in hot keys to allow users to jump to or cycle through the headings. A user can press H to jump to whatever the next heading is, or they can press 1-6, to jump to a specific heading level.

If you still want to do this, you can do:

<h1 tabindex="0">This is a header</h1>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top