The Australian Government coat of Arms

Communities of practice

Communities of practice

Anchored links

Hi all,

Just wondering how everyone is indicating anchor links throughout their online content. I’ve read a bit of conflicting information. We’ve realised we don’t currently indicate when the link is on-page and are concerned this may be confusing for some users who expect to be taken to a different page. The other concern is that if we write it like the below, then a screen reader will read out that it’s on this page twice.

For example: “See additional resources (on this page)” - assuming additional resources is the anchor link.

Does anyone have any insight about best practice/ the most accessible way to do this? How is everyone else approaching anchor links?

Thanks,
Carlin

Hi Carlin,

Depending on settings/software, some screen readers will identify if a link is an anchor and use ‘in-page link’ instead of just ‘link’.

We generally identify our in page nav using a heading ‘On this page’ or similar, but if linking to another section in context of a sentence it’s difficult to make the clear without possibly repeating info for someone on a screen reader.

Our process is to link in context and rely on a screen reader to identify it as in-page e.g. “For more information, refer to #additional resources#” but agree that might not be clear to users with cognitive disabilities.

I’d suggest options would be to link after your reference: "For more information, refer to additional resources (Jump to #additional resources#).

or use a standard phrase to indicate anchor links: "For more information, jump down to #additional resources#.

It’s a bit of a catch-22.

Cheers,

Jess.

The Design System will give you guidance here.

You can see that internal and external links are read out the same. I believe at one point it used to include a small icon and read it differently for external links, but that’s since been dropped.

@carlin.garrett’s suggestion is great:

as that’s how the inpage nav component is built. It helps keep all of the links in one location and avoids the need to have anchor links that exist within sentences, which breaks up the screen-reader flow.

Here’s some explanation from GOV.UK about why they dropped the external site icon https://designnotes.blog.gov.uk/2016/11/28/removing-the-external-link-icon-from-gov-uk/

I also find some JavaScript popup warnings about leaving a site misleading when they link to other websites of the same agency or within government.