WCAG Anchor link

Question

I've been trying to find in the WCAG or WAI guidelines the appropriate way to create a link anchor.

I currently have a site that has anchors like these:

<h2><a name="blah" id="blah">Blah H2 Content</a></h2>

but since I don't want to add unnecessary CSS just to cancel any anchor (no, they're not all in titles), I was wondering if this is accessible or if it violates WCAG or WAI-ARIA guidelines:

<h2><a name="blah" id="blah"></a>Blah H2 Content</h2>

By those guidelines, is there anything wrong with just using `
Blah H2 Content
`? After all, that ids on arbitrary elements can be used as anchor points was specified in HTML 4.01 already. And everything else, using additional `a` elements, I’d consider just unnecessary bloat-y, unless there was a very specific reason to use them. — CBroe, Apr 25 '14 at 17:12
I'm not the only user working on the site, so for conformity reasons `` tags were chosen with `name` and `id` attributes (yes, I know `name` is deprecated) over using simply ids on titles and span tags. What I'm wondering is with this restriction, what is the best way to implement it. — Rywek, Apr 28 '14 at 13:25

score 4 · Answer 1 · edited Jun 20 '20 at 09:12

There are two possible options I'd suggest, but first what I wouldn't recommend is having the empty anchor tag - <a name="blah" id="blah"></a>. With this the anchor points to nothing, so if a screen reader attempts to extract a range of a tgas to it can determine what is in the page, this will be meaningless.

Option 1. Use the `id` against a heading.

<h2 id="blah">Blah H2 Content</h2>

If you want to have an anchor point against a heading, point it to that heading. Whith this in effect, you can stil use example.html/mypage.html#blah to land at the correct point.

Option 2. Add a `href` so the anchor is useful.

<h2><a name="blah" id="blah" href="#blah">Blah H2 Content</a></h2>

If the anchor is useful to have for users, make it so they can get to it easily. By adding the href attribute, a user can right click and get a link to that point in the document, middle click to focus a new tab on the point and share a link to that specific part of the document with another person.

score 2 · Answer 2 · answered Apr 25 '14 at 16:33

2

I don't know there's any specific advice, but in WCAG 2.0 HTML and XHTML Techniques, there's an example of the use of an empty <a> element for this purpose. See H86, beneath the ASCII butterfly.

So you should be fine.

answered Apr 25 '14 at 16:33

Alohci

78,296
16
112
156

1

That entire subsection is awesome. "H86: Providing text alternatives for ASCII art, emoticons, and leetspeak" – BoltClock Apr 25 '14 at 16:37

WCAG Anchor link

Blah H2 Content

2 Answers2

Option 1. Use the id against a heading.

Option 2. Add a href so the anchor is useful.

Option 1. Use the `id` against a heading.

Option 2. Add a `href` so the anchor is useful.