WebAIM - Web Accessibility In Mind

E-mail List Archives

Intra-page links and tab order thru content

for

From: Wolf, Jan - DWD
Date: Aug 17, 2012 10:39AM

I like to use intra-page links as an "on this page" setup, where a box has a list of the major sections that appear within the page content and uses intra-page links to allow navigation to these content sections.

However, in IE intra-page links have been a problem as far back as I can remember and they still are in IE8. When I tab to an intra-page link, activate the link by hitting enter on it and thus jump to that section of the page, I should be able to continue tabbing FROM THAT POINT on down thru the page. However, in IE my next tab takes back to the first link at the top of the page.

The intra-page link also does not work correctly in Chrome either, but the incorrect action is different. In Chrome I tab to the intrapage links, activate the intra-page link, am taken to the correct section and if I try to tab from there I am taken back to the first link that comes after the intra-page link, and resume tabbing from there, not from within the content section as it should be.

FireFox handles the intra-page link properly, where I activate the intrapage link, am taken to the appropriate content section and if I choose to continue tabbing I start from that section and continue to the next link in the content.

Does anybody have a CSS solution to this problem so that I don't have to touch every intra-page link TARGET? I have used a solution in the past, where I can add height or width to a div tag that is acting as an intrapage link target, or wrap the intrapage link anchor within a span tag and adding CSS position:absolute plus putting a   in between the intra-page link anchor opening and closing tag. But I don't want to touch every single link in a manual I am working on.

The existing HTML manual I am working on is a huge manual that makes use of intra-page links and they are setup normally (meaning an anchor tag with an id), and I need to make them work in the tab order without touching every single one. As mentioned, the target syntax is the usual, from back in the day, where targets had to be an anchor tag with an ID/name added to it. Thanks for any help that can be provided.

Jan Wolf