CODEWITHSUNDEEP
htmlaccessibilitywai-ariawcag
Rywek
Rywek

Reputation: 151

WCAG Anchor link

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>

Upvotes: 3

Views: 2408

Answers (2)

user764357
user764357

Reputation:

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.

Upvotes: 4

Alohci
Alohci

Reputation: 82976

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.

Upvotes: 2

Related Questions