Anchors Away!

In the EPUB accessibility guidelines, we’ve noted the use of span and div tags for representing page breaks/numbers, but another common question is why not the good old a tag?

The simple answer is that HTML5 does not define named anchor points any more, so it’s no longer kosher to (ab)use a tags as a place to jump people to (a la <a name="page32"/>). If you want a jump destination, put an id attribute on an element, which is not coincidentally how span and div are defined in the guidelines for page breaks (and in the content documents specification, for that matter).

But if you’re thinking why not just <a id="page32">32</a> instead, I have more for you!

If you have a look at the definition for the a element in the HTML5 specification, you’ll find these two uses noted now:

If the a element has an href attribute, then it represents a hyperlink (a hypertext anchor) labeled by its contents.

If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element’s contents.

An <a> tag without an href attribute is a placeholder link. That’s the key to take away. It could be an active link in some other context or after some user interaction. Page breaks are not links and are never expected to be activated as links. Ipso facto, using <a> tags for page breaks is semantically incorrect.

I have to admit that this is another of the changes in HTML5 that I like. The dual nature of a for both the link and destination was always cumbersome, as was the overlapping nature of id and name.

(Note: the HTML5 changes document has this somewhat ambiguous recommendation: “The name attribute on <a>. Authors can use the id attribute instead.” But as seen in specification wording, don’t read that literally as use id in place of name on <a> tags, but use id attributes on content elements to replace the use of named anchors.)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.