Accessible Anchor Links

Anchor links are used to create a links to anchors within the same page or to anchors within other pages of your site. We want to ensure they are accessible to everyone. So follow these best practices.

An important consideration before using anchor links on a really long page, is to consider if the content could be grouped into different pages. We’ve seen users scan the page then select anchor links, thinking it will take them to a different page. Sometimes they don’t realize they are just moving up and down the page they have already scanned. And remember: if it’s an issue for the general user it will be a serious problem for a person with a disability. Screen readers do usually identify whether a link is an anchor by adding the phrase “in- page link”, so visitors using a screen reader at least have some feedback when activating an anchor link. But visual users, people who use magnifiers and people with cognitive disabilities may not realize they are activating an anchor link at all.

We recommend you create anchor links for an entire page using the anchor/jump links shortcode, based on heading structure.

1

Anchor Placement

  1. Correct Placement: Place your cursor in the page where you would like to take your visitor with your anchor link. Typically this is slightly above the content you are linking to.
  2. Incorrect placement: Do not place an anchor link inline with a heading, visually it looks like a link and it can be confusing. Screen readers also read the heading as a link.

example of anchor link placement