Is my approach correct for displaying an anchor link next to the headline?

HTML & CSS
1

Hello,
I have a simple HTML heading, and I want to display an anchor link next to it, similar to what is often found in wikis on the web. This way, users can easily get access to the anchor if they want to link or share it.

Here’s an example: The # sign shows up when you hover your mouse over the headline.

I set the visibility of the # character to hidden and then displayed it when the link is hovered. I want to know if there’s anything wrong with this approach. I need this to work for all headlines between h3 and h6. Also, could this be an issue on mobile? I think most users won’t select the headline on mobile anyway, but I’d like to know if adding it could cause any problems.

2

The hash sign # is for developers only. Just use a link icon instead IMO.

1 Like
3

As long as you’re consistent, it shouldnt matter too much; though i’ve seen some sites use # for in-page links and the link icon for off-page ones. Just depends on use case really.

4

The FreeBSD Handbook uses the hash sign. I know their website isn’t an authority and they might be doing it wrong, but I chose the # sign because it’s easier to insert.

I find it strange to have an empty anchor element in my example when it comes to the HTML. I’m not sure if that is proper HTML considering today’s accesibility. I’m also not sure about mobile.

5

I mean, if you’re making it visibility: hidden anyway, it’s not going to make a huge amount of difference unless the spacings on your headers are remarkably tight. You could do it just by saying

<a href="#link" class="anchor">#</a>

and

.anchor {
  visibility: hidden;
  margin-left: .3em;
}

h3:hover > .anchor,
h4:hover > .anchor,
h5:hover > .anchor,
h6:hover > .anchor {
  visibility: visible;
}

(The only difference, i believe, is how screen readers would interact with it? I’m not 100% versed on how screen readers handle visibility.)

6

Thank you. Maybe someone can clarify this. I might need to add an ARIA hidden attribute to it so that screen readers don’t pick it up.

7

Presumably you’ll want to put an ID of “link” on the heading, as otherwise that link won’t do anything. There are ways of automating this so that you don’t have to manually do this for every heading. I’m also not sure why you’d want to hide this from screen readers, as their users might also want a link to the heading. It’s also a good idea to make the link visible on focus too, rather than just hover.

1 Like
8

Yes the target area will be too small and difficult to hit with a fat thumb on mobile.

Surely the whole heading should be the link and then pop up the hash when hovered? Otherwise you have an empty anchor that just says # and someone on a screen reader will have no idea where it goes?

I’m not sure what you were trying to achieve but I would do this instead,

<h3 id="item1"><a href="#item1" class="anchor">Article one</a></h3>

.anchor{
  color:#000;
  text-decoration:none;
}
.anchor::after {
  content: "#";
  color:blue;
  visibility: hidden;
  margin-left: .3em;
}

:where(h3:hover,h4:hover,h5:hover,h6:hover)  > .anchor::after {
  visibility: visible;
}

No need for aria roles just let html do its job :slight_smile:

2 Likes
9

Thank you, Paul, as always your answers are very helpful and top-notch. I really appreciate your help. Meanwhile, I came across something pre-built. I’ll see if I can make it work, it might even be better since it’s already made for this purpose: https://www.bryanbraun.com/anchorjs