Adapt Learning Community: Internal anchor link to an article on same page

Hi, looking for some advice on internal anchor links on the same page.

Looking to use the an anchor link to allow a learner to skip past an article.

In the text editor I've set it up my link like this to article: <a href="#/id/6273e5c30887f003f021b19e">Link text</a>.

Which works fine for one click, then subsequent clicks don't work. Is there a better way to do this? Also need to make sure the technique works with screen readers. At the moment focus seems to be above the heading itself, so you need to press the down arrow to hear where you are after it has been selected. Would be good if the focus went to the heading.

I've achieved a similar effect before by using the quickNav/ pageNav component which does work well and focus correctly when linking to an ID, but would be nice if I could link from within text :)

Any tips appreciated.

Ross

Hi Ross,

We did similar, but our links have the following structure with an additional ./ in it

<a href="./#/id/5f76ce6f437c4d17e4079620">Diagnose PCB issues</a>

John

Show parent | Reply

Hi Ross, can you try the adapt-routerLinks extension?

Add the extension to your project.
Go to the project settings to enable it.
By default, the extension uses the a.router-link selector, so you need to add that selector to the anchor in the text editor.

E.g.
<a href="#/id/6273e5c30887f003f021b19e" class="router-link">Link text</a>

or
<a href="#6273e5c30887f003f021b19e" class="router-link">Link text</a>

I hope this helps.

Show parent | Reply

Hi Ignacio,

Thanks very much that works really well. Link works if clicked more than once and focus is put on the article heading which is fantastic.

Thanks for preventing me from having to use a less elegant solution :)

Ross

Show parent | Reply

Excellent. Glad to hear it’s working for you.
Which screen reader are you using?

Show parent | Reply

Hi, I tested using NVDA :)

Show parent | Reply