Anchors, names & ids;
hasLayout & Keyboard Navigation.

Generic Tester: Tag under test --- <div>

Markup --- <div id='h2' ><a id='header' name='top' ></a>{this text}</div>

to anchor id | to anchor name | to tag id (h2)

anchor containment specification
inline tags only
not necessary for table, td & img tags.

This page is designed to determine the behaviour of Internet Explorer when using the keyboard to navigate within a page. Much of the basis of the design comes from information gleaned from three excellent web pages:

To use the page:

  1. Select a tag and if its an inline tag, choose a containing tag,...
  2. Choose what if any content the anchor tag will contain, ...
  3. Choose your settings for tabindex & hasLayout, ...
  4. Press the submit button

That will generate a page with the three possible intra-page link targets being created to match the HTML format you specified. The HTML is shown at the top of the page and at the destination of the intra-page links (in blue).

Now use the keyboard to move to and activate one of the intra-page links - if successful the browser will shift visual focus to target of the link. From there use the TAB key (or shift+TAB) to move onwards in the document. The correct behaviour is for focus to shift to the nearest element that can receive focus in the appropriate direction. Depending on the settings you have chosen IE may shift focus to the first link in the page. This behaviour presents significant accessibility problems.

There are two known HTML structures which force IE to behave "correctly".

  1. Ensure the target element is near the top (above any elements that can receive keyboard focus) of a containing element of type body, div, span, table, tr, td and which hasLayout or is itself an element of one of those types and hasLayout.
  2. Give the destination element a tabindex. If the element should not be in the actual tab order then give it a tabindex value of -1 (e.g. tabindex='-1'). Be aware that this may cause validation problems. Not all elements may have a tabindex attribute (A, AREA, BUTTON, INPUT, OBJECT, SELECT, TEXTAREA can) and not all doctypes recognise '-1' as a valid value, XHTML1 does, HTML4 doesn't.

I haven't tested all combinations of all elements exhaustively, so feel free to test any combination you like.

<div id='h2' ><a id='header' name='top' ></a>{this text}</div>

What follows is typesetter's latin, used to pad the page out and ensure there is sufficient content to force scrolling of the page when moving between the page link and its destination.

Fusce posuere, purus fermentum placerat scelerisque, tellus lectus fermentum nisl, a rhoncus lacus nunc ac libero. Duis lacinia libero eget velit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ultrices dictum tellus. Fusce non arcu ut libero fringilla congue. Praesent risus. Duis dignissim urna at augue. Maecenas hendrerit urna fringilla dolor. Proin nunc. Fusce at libero. Sed vel turpis. Praesent lectus ligula, malesuada at, feugiat a, suscipit nec, ligula. Aenean in ligula. Pellentesque neque tortor, rutrum sed, ullamcorper nec, varius eu, ipsum. Aliquam erat volutpat. Vivamus sed orci id lectus porttitor auctor. Nulla mauris. Curabitur scelerisque lacus sollicitudin orci.

Phasellus et nisl eu est venenatis blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum at nunc id ante vehicula accumsan. Curabitur ac urna. Duis wisi massa, mattis non, eleifend vitae, convallis non, orci. Fusce non metus at libero interdum sagittis. Sed tincidunt, augue vitae volutpat tincidunt, quam lacus condimentum orci, in varius lectus felis vitae velit. Sed tempus iaculis ante. Sed enim lacus, sodales eu, bibendum ut, auctor eget, urna. Curabitur euismod condimentum lectus. Nulla eget eros. Nam odio elit, suscipit at, bibendum et, adipiscing et, wisi. Sed vestibulum. Maecenas pretium. Maecenas id justo. Nam consequat auctor risus. Nullam auctor pulvinar urna.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec pede dolor, pellentesque non, congue id, malesuada et, tellus. Cras orci nisl, porttitor sed, commodo non, scelerisque quis, dui. Quisque non ipsum ac leo rutrum placerat. In fringilla condimentum urna. Fusce malesuada, turpis vel cursus hendrerit, tortor lectus dictum felis, eu lacinia ipsum odio sed felis. Vivamus est orci, convallis sit amet, mattis at, convallis at, tellus. Nunc gravida leo eu diam. Nunc mauris leo, faucibus vitae, blandit in, sodales quis, nibh. Fusce eget felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam ac turpis vel elit auctor faucibus. Nulla facilisi. Donec semper eleifend justo. Nunc lobortis, purus et aliquet rutrum, purus tortor hendrerit justo, ac pharetra sapien erat non magna. Nulla nibh nulla, tincidunt id, elementum a, vestibulum ut, nunc.

Donec congue arcu vel metus. Proin luctus fringilla nunc. Praesent blandit aliquam odio. Proin egestas dapibus metus. Sed ultricies nisl. Fusce leo urna, hendrerit in, convallis eu, fringilla id, elit. Donec in turpis commodo turpis gravida tempus. Quisque non nulla. Nam eget dolor. Nam sagittis urna. Donec sit amet libero sit amet urna ornare eleifend. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent lectus dui, pretium et, lobortis non, pellentesque tempus, augue. Ut porttitor turpis et arcu.

Etiam condimentum eros id odio. Maecenas nunc wisi, placerat sit amet, euismod ac, dapibus vitae, arcu. Integer nonummy facilisis nibh. Maecenas placerat porta velit. Etiam mollis magna quis erat. Donec pharetra commodo magna. Nam a nunc id purus congue viverra. Vivamus et elit. Duis interdum neque ut ante. Phasellus a elit eu magna rhoncus iaculis. Ut sapien.

to anchor id | to anchor name | to tag id (h2)