Excellent write-up by Amber on making accessible anchor links (those little floating chains/hash symbols next to headlines).
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
hrefvalue (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-labelis 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>