Accessibility: Anchor links need a label

Since they just appeared in beta 7, I would like to flag that the links to each sub heading in a long post need an aria-label. The way they are coded, with just the named a tag and probably a background image included via the CSS class .anchor, causes the screen reader to read some number (probably the post ID) and fragments of the heading. Better to be explicit and have something like “Permalink”, or "Permalink to " plus the text of the sub heading. That way, screen reader users opening a list of links on a page, get properly named links.

Also, would it be possible to put the anchor after the heading text inside the h element, not before? Right now, the screen reader, when navigating from heading to heading, will always read the link first, and especially if the heading text is repeated in the label as suggested above, the reading can become quite cumbersome. As screen reader users often get an overview of a page via the heading structure (see various WebAIM screen reader user surveys), it would be better to put the link after the heading text.

Thank you for always improving accessibility in Discourse!

4 Likes

Hmm, seems strange that a number would be picked up from somewhere…

That aside, these suggestions all make sense and shouldn’t be a problem to implement. Thanks again for the advice!

1 Like

In the abscence of any other label on a link, screen readers will read the content of the href attribute, so users at least know the link’s destination or URL.

There’s a great technical deep dive on the topic of accessible anchor links here: Are your Anchor Links Accessible? | Amber Wilson

2 Likes