Skip to content

Heading anchor links aren't announced correctly by screen reader

Problem

Heading anchor links (the icon that appears to the left of a heading when hovering or when moving keyboard focus through the page) are announced as "link" plus whatever the item ID is. For example, "link, #874 (closed)." Video attached that demonstrates this behavior in Safari + VoiceOver.

Expected result

The accessible link text should match the corresponding heading text.

Question

Should the link be in the focus order to begin with, or it is potentially confusing since activating it wouldn't go anywhere?

Here's an example where the word "anchor" is used and it's placed after the heading text instead of before. This is from the website https://adrianroselli.com/2024/05/level-setting-heading-levels.html.

<h2 id="SRs">Screen Readers
  <a href="#SRs" class="noprint">
    <span aria-hidden="true">#</span>
    <span>anchor</span>
  </a>
</h2>

Safari + VoiceOver heading link experience

Edited by Jeremy Elder