Accessible anchor links | Amber Wilson

Excellent write-up by Amber on making accessible anchor links (those little floating chains/hash symbols next to headlines).

Relatedly, Stephanie Eckles has recently published a SmolCSS tutorial on the same pattern with some interesting variations (CodePen).

On the preferred HTML order for anchor links, specifically to prevent screen reader confusion:

I realised the <a> element should exist as a sibling of the heading element, rather than a child of it.

On providing some kind of text label with a link:

When there is no information about a link available, the screen reader falls back to the href value (e.g. https://example.com/blog/nice-post/). This makes the purpose of the link hard to decipher.

On the problematic use of aria-label and hiding purely aesthetic/visual text with aria-hidden:

First, aria-label is not actually brilliant for accessibility, as some translation services can have trouble accessing its value. So, it's best to add text content to the <a> element, and make sure to visually hide it.

Second, the # can be left in and hidden from screen readers using aria-hidden, while still being visible on the page.

Code snippet for the final solution:

<h2 id="introduction">Introduction</h2>
<a href="#introduction">
  <span aria-hidden="true">#</span>
  <span class="hidden">Section titled introduction</span>
</a>

Code snippet for an accessible header link (can use ::before to add icons or #):

<h2 id="introduction">
  <a href="#introduction">
    Introduction
  </a>
</h2>