WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Intra-page links and tab order thru content

for

From: Bryan Garaventa
Date: Aug 17, 2012 11:13AM

Scripting would probably work best.

E.G

Dynamically add tabindex="-1" to each named anchor tag, then program each
intrapage link to set focus to the relevant named anchor using its ID, then
return false so that the page doesn't refresh.

This will set focus programmatically, and then you can tab forward from
there.

----- Original Message -----
From: "Wolf, Jan - DWD" < <EMAIL REMOVED> >
To: < <EMAIL REMOVED> >
Sent: Friday, August 17, 2012 9:39 AM
Subject: [WebAIM] Intra-page links and tab order thru content


>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 &nbsp; 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
>
>
>
>
>
> > >