WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Intra-page links and tab order thru content (second pass thru)

for

From: Wolf, Jan - DWD
Date: Aug 21, 2012 6:42AM

What is everybody else doing to fix the intra-page link bug in IE still (thru 9) and Chrome? I would like to say up front that I prefer not to use a JavaScript solution if possible. In the past, there has been a CSS inline style solution used. What I am trying to do is use a CSS solution that I can apply to the intra-page link targets via the external CSS (versus inline style).

Below is a detailed description of what I am dealing with. Thanks in advanced to anybody who can tell me what they are doing to address the issue.

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 IE9. 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. So intial focus remains in the location where I am taken from the intra-page link.

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