28

In the Web Content Accessibility Guidelines is states that you should supply a "skip" link that jumps you (for example) over a navigation block and straight into the content. This is particularly useful for impaired users who use a screen-reader to describe a page audibly.

6.2 Grouping and bypassing links WCAG Guidelines

However, this technique relies on using the name attribute on an anchor tag:

<h2><a name="content">Content</a></h2>

Along with the skip-to link:

<a href="#content">Skip to content</a>

The problem is, the "name" attribute of the anchor tag is obsolete in HTML5. HTML Obsolete Features

Is there any other way to achieve this "skip to" functionality without using the name attribute?

Footnote: The status of the HTML5 specification in still in draft and it is possible that the name attribute will actually continue to be allowed in this scenario - although it will probably still generate a "warning". It has currently been marked as "obsolete but conforming", which means you COULD still use it - however, I would like to know of other ways to perform the "skip to" to see if there is a way to do it that doesn't rely on an obsolete attribute.

Deduplicator
  • 41,806
  • 6
  • 61
  • 104
Fenton
  • 206,497
  • 63
  • 356
  • 369
  • 1
    No offense meant, but you *did* look at that Obsolete Features page? It contains a section about the [name attribute](http://www.w3.org/TR/html5/obsolete.html#attr-a-name): “Use the `id` attribute instead.” – Marcel Korpel Jun 14 '10 at 10:21
  • @Marcel - I did read that, in fact all of the obsolete attributes are obsolete because there is a better alternative - I actually wasn't aware that the id attribute allowed the element to be targeted with this type of link, which is the specific question. – Fenton Jun 14 '10 at 11:10

1 Answers1

37

Instead of using <a> tags, you can use any element with the id attribute:

<h2 id="content">Content</h2>

<a href="#content">Skip to content</a>

EDIT, found you a source (albeit it's Wikipedia ;-)):

Alternatively (and sometimes concurrently), with the name or id attributes set, the element becomes a target. A Uniform Resource Locator can link to this target via a fragment identifier. Any element can now be made into an anchor by using the id attribute,[2] so using <a name="foo"> is not necessary.

http://en.wikipedia.org/wiki/HTML_element#Anchor

Andy E
  • 311,406
  • 78
  • 462
  • 440
  • 5
    Or just put the `id` directly on the `h2`. – RoToRa Jun 14 '10 at 10:05
  • 1
    I've never known why people use the name attribute in the first place, when most elements that need to be jumped to can include an idea. This gives you styling options as well. – Jonny Haynes Jun 14 '10 at 10:13
  • 2
    @Jonny Haynes: A few years ago I didn't know that I could use `id` either. Back then it was due to a lack of proper tutelage, my college tutors told me to use `name`, Internet tutorials did the same thing. It's a good thing that `name` is now deprecated, being that it's pretty much pointless anyway. – Andy E Jun 14 '10 at 10:17
  • 2
    @Jonny: You mean `id` instead of ‘idea’? ;-) Though elements can contain ideas, of course. – Marcel Korpel Jun 14 '10 at 10:18
  • @Jonny Haynes - Using "name" on an "a" element was the pre-HTML4 way of specifying an anchor target. – Alohci Jun 14 '10 at 11:59