E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: Intra-page links and tab order thru content

Number of posts in this thread: 6 (In chronological order)

From: Wolf, Jan - DWD
Date: Fri, Aug 17 2012 10:39AM
Subject: Intra-page links and tab order thru content
No previous message | Next message →

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

From: Bryan Garaventa
Date: Fri, Aug 17 2012 11:13AM
Subject: Re: Intra-page links and tab order thru content
← Previous message | Next message →

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 ADDRESS REMOVED = >
To: < = EMAIL ADDRESS 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   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
>
>
>
>
>
> > >

From: Wolf, Jan - DWD
Date: Tue, Aug 21 2012 6:42AM
Subject: Re: Intra-page links and tab order thru content (second pass thru)
← Previous message | Next message →

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

From: Jared Smith
Date: Tue, Aug 21 2012 11:50AM
Subject: Re: Intra-page links and tab order thru content (second pass thru)
← Previous message | Next message →

On Tue, Aug 21, 2012 at 6:42 AM, Wolf, Jan - DWD wrote:
> 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.

It's been a while since I tried to tackle this using only CSS and I'm
not sure how well these are supported in newer IE versions. You might
try zoom:1 styles on the link targets and see if that does the trick.
Or you can try a CSS expression to set the tabindex value...
behavior:expression((this.runtimeStyle.behavior="none")&&(this.tabIndex="-1"));

I'm not aware of a CSS-only solution to the Chrome in-page navigation
bugs. I think the likelihood of a keyboard-only user using Chrome is
slim to none due to it's significant keyboard accessibility issues.

JavaScript is really a very good way to address these issues and it's
what we currently do on the WebAIM site. You can see our jQuery
implementation at http://webaim.org/media/scripts/main.js You can see
this in use by activating the "skip" link or Article Contents links at
http://webaim.org/intro. This scripts does a few things:

- sets the tabindex attribute for in-page link targets (we use <div>s
with id or class values).
- uses focus() to set keyboard focus to in-page link targets.
- properly focuses when the user activates in-page links or if the
user comes to a URL that includes an anchor/hash.
- adds a 100ms delay to maintain focus and visual highlighting (which
is not necessary, but a nice accessibility and usability enhancement)
in some browsers.

Jared

From: Wolf, Jan - DWD
Date: Tue, Aug 21 2012 12:46PM
Subject: Re: Intra-page links and tab order thru content (secondpass thru)
← Previous message | Next message →

Thanks Jared! OK I think this is the way we will go. You did a great job of laying it all out for me. Again, thanks!!!

From: Jim Allan
Date: Thu, Aug 23 2012 4:58PM
Subject: Re: Intra-page links and tab order thru content (second pass thru)
← Previous message | No next message

why aren't developers complaining to the browser vendors. This has
been a problem for years. Developers keep having to code around a BUG.
They can create all kinds of tags for HTML5 but not fix in-page links.
Do they not know about the problem?
Jim

On Tue, Aug 21, 2012 at 12:50 PM, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:
> On Tue, Aug 21, 2012 at 6:42 AM, Wolf, Jan - DWD wrote:
>> 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.
>
> It's been a while since I tried to tackle this using only CSS and I'm
> not sure how well these are supported in newer IE versions. You might
> try zoom:1 styles on the link targets and see if that does the trick.
> Or you can try a CSS expression to set the tabindex value...
> behavior:expression((this.runtimeStyle.behavior="none")&&(this.tabIndex="-1"));
>
> I'm not aware of a CSS-only solution to the Chrome in-page navigation
> bugs. I think the likelihood of a keyboard-only user using Chrome is
> slim to none due to it's significant keyboard accessibility issues.
>
> JavaScript is really a very good way to address these issues and it's
> what we currently do on the WebAIM site. You can see our jQuery
> implementation at http://webaim.org/media/scripts/main.js You can see
> this in use by activating the "skip" link or Article Contents links at
> http://webaim.org/intro. This scripts does a few things:
>
> - sets the tabindex attribute for in-page link targets (we use <div>s
> with id or class values).
> - uses focus() to set keyboard focus to in-page link targets.
> - properly focuses when the user activates in-page links or if the
> user comes to a URL that includes an anchor/hash.
> - adds a 100ms delay to maintain focus and visual highlighting (which
> is not necessary, but a nice accessibility and usability enhancement)
> in some browsers.
>
> Jared
> > > --
Jim Allan, Accessibility Coordinator & Webmaster
Texas School for the Blind and Visually Impaired
1100 W. 45th St., Austin, Texas 78756
voice 512.206.9315 fax: 512.206.9264 http://www.tsbvi.edu/
"We shape our tools and thereafter our tools shape us." McLuhan, 1964