Any ARIA rules for headings that link to themselves?

Question

I have "self-linked" headings, like this:

<h2 id="A00"><a href="#A00">Heading</a></h2>

I would assume that the people who develop accessibility software would be aware of this common pattern, and already have some rule to interpret it how they want.

(If I used screen readers, I imagine I'd prefer them to skip announcing this link at all.)

Should I do something with ARIA or is it fine like that?

What if I instead put the link after the heading like this? That's also a common pattern.

<h2 id="A00">Heading <a href="#A00">#</a></h2>

Answer 1

I believe simply putting a link on the heading would fail WCAG’s Link Purpose Criterion, as the purpose to jump there and have an URL that you can share is not communicated.

Separating the link from the heading might help understanding that it’s an action, and provides an opportunity to explain that.

Based on the online WCAG documentation itself I recommend the following pattern:

hgroup {
  display: flex;
  flex-direction: row-reverse;
  justify-items: start;
  gap: 1em;
}
hgroup h3 {
  margin: 0;
  flex: 1;
}

<section aria-labelledby="supporting-documents-title">
  <hgroup id="supporting-documents">
    <h3 id="supporting-documents-title">Supporting Documents</h3>
    <a href="#supporting-documents" aria-label="§ Permalink for this Section">§</a>
  </hgroup>
  …
</section>

I added the aria-labelledby because a <section> without an accessible name is not satisfying ARIA.

The advantage here is that the link is not only a dedicated element, it’s also not part of the heading text. If it was, it would be repeated each time the user reads