E-mail List Archives

Search E-mail List Archives for

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

From: Birkir R. Gunnarsson
Date: Thu, Sep 15 2011 1:15PM
Subject: "Skip to content" links, vissibility and keyboard users without screen readers, to hide or not to hide?
No previous message | Next message →

Yea wise people.

I am glancing through the excellent Jim Thatcher course (though it
hasnot been updated in 5 years, vast majority of it is still relevant,
fortunately).
One thing it highlights, and ihave seen discussed here as well, is use
of skip navigation links.
The specific page i am reading is
http://www.jimthatcher.com/webcourse4.htm

I understand the discussion of position a navigation link off-screen,
and it only receiving focus when the tab key is used. But later on,
the page seem to indicate that vissible skip to content links should
be provided for those using a headmouse or other keyboard simulation
methods to navigate a webpage. Unfortunately browsers other than
Opera, do not allow navigating by headings or other html elements.
So, what is the right thing to recommend here:
a. For skip links to be invissible, a keyboard simulation users will
have to tab through each and every link on the page, so the first time
he/she uses the tab key the otherwise invissible link will become
vissible or
b. To have a vissible "skip to content" link at the top of the page,
to make navigation of the pge easier for any keyboard users?

The page also discusses IE6 and IE7 bugs that cause samepage links not
to work, unless they are configured specifically. (see page for exact
description, as it is somewhat lengthy, discussion is towards the end
of the page).
Hs this issue been fixed in IE8/IE9? If someone knows off the top of
their head it'd be good to know. If not, I'll simply construct a test
case myself to find out.
Thanks very much
-Birkir

From: Jared Smith
Date: Thu, Sep 15 2011 1:39PM
Subject: Re: "Skip to content" links, vissibility and keyboard users without screen readers, to hide or not to hide?
← Previous message | Next message →

There isn't really a 'right' answer regarding the presentation of
'skip' links. Because such links provide very limited utility to
non-keyboard users, intrude quite significantly on the visual design
(they must be at the top of and one of the first links on the page),
and can be a confusing to most users, I have little concern over
hiding them off-screen, so long as they become visible (and optimally
very apparently so) when they receive keyboard focus. They become less
necessary for many users if headings, ARIA landmarks, etc. are also
utilized.

On a recent project, I implemented a 'hidden' skip link, but used CSS3
transitions to make the link appear quite prominently when it received
focus, and then would fade out slowly after focus was lost. This made
it so that users who 'tab' quickly through the page could see the
"skip" link for more than just a fraction of a second.

So long as the assistive technology (head wand, eye tracking, voice
control, etc.) provide or emulate the standard browser 'tab'
functionality, there are no additional concerns. Such technologies
often allow users to navigate directly to page areas, so the absence
of the "skip" link doesn't really matter in this case.

The issues regarding IE and the hasLayout bug have *mostly* been
addressed in more modern versions. There are still some bugs that can
render in-page links useless to keyboard users. Testing is necessary.
Additionally, in-page links still don't change keyboard focus in
Safari or Chrome (as such, it's quite unlikely keyboard-only users
would be using these browsers).

Jared

From: Birkir R. Gunnarsson
Date: Thu, Sep 15 2011 1:45PM
Subject: Re: "Skip to content" links, vissibility and keyboard users without screen readers, to hide or not to hide?
← Previous message | Next message →

Jared

Could I/we be privvy to seeing the CSS3 implementation you did for a
skip link (for demoing purposes in my lecture)?
Thanks for all the pointers.
-Birkir

On 9/15/11, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:
> There isn't really a 'right' answer regarding the presentation of
> 'skip' links. Because such links provide very limited utility to
> non-keyboard users, intrude quite significantly on the visual design
> (they must be at the top of and one of the first links on the page),
> and can be a confusing to most users, I have little concern over
> hiding them off-screen, so long as they become visible (and optimally
> very apparently so) when they receive keyboard focus. They become less
> necessary for many users if headings, ARIA landmarks, etc. are also
> utilized.
>
> On a recent project, I implemented a 'hidden' skip link, but used CSS3
> transitions to make the link appear quite prominently when it received
> focus, and then would fade out slowly after focus was lost. This made
> it so that users who 'tab' quickly through the page could see the
> "skip" link for more than just a fraction of a second.
>
> So long as the assistive technology (head wand, eye tracking, voice
> control, etc.) provide or emulate the standard browser 'tab'
> functionality, there are no additional concerns. Such technologies
> often allow users to navigate directly to page areas, so the absence
> of the "skip" link doesn't really matter in this case.
>
> The issues regarding IE and the hasLayout bug have *mostly* been
> addressed in more modern versions. There are still some bugs that can
> render in-page links useless to keyboard users. Testing is necessary.
> Additionally, in-page links still don't change keyboard focus in
> Safari or Chrome (as such, it's quite unlikely keyboard-only users
> would be using these browsers).
>
> Jared
>

From: Will Grignon
Date: Thu, Sep 15 2011 2:24PM
Subject: Re: "Skip to content" links, visibility and keyboard users without screen readers, to hide or not to hide?
← Previous message | Next message →

I use JAWS 12, and one of the most infuriating things about a Skip to
Content link is that it can put you anywhere on the page - not necessarily
where you might think the content focus should be, so I still have to arrow
around to first find out where I am, then do some more arrowing around to
find out what I can/should do once I'm there.

For many sites, headers can let the screen-reader user traverse the page
with relative ease, getting a good overview of how the page is laid out and
what actions can be taken on the page.

Relatedly, www.amazon.com has one of the best hidden screen-reader-user
links I've come across. Evidently, sighted users cannot see it, but when I
TAB down once from the top line title, JAWS reads the link and clicking on
it brings the cursor to a very clean array - with all the essential
functions, minus the dozens of menus and hundreds of links which populate
the normal Amazon home page.

From: David Ashleydale
Date: Thu, Sep 15 2011 2:30PM
Subject: Re: "Skip to content" links, vissibility and keyboard users without screen readers, to hide or not to hide?
← Previous message | Next message →

This is really nice, but in both Chrome 13 and IE 8 on a PC (XP), when I
pressed Enter on the skip link it took me to the main content, but then
hitting Tab again took me back up to the top of the page instead of the "I
am another link.", which I think is where it should go.

Thanks,
David

From: Bourne, Sarah (ITD)
Date: Thu, Sep 15 2011 2:36PM
Subject: Re: "Skip to content" links, vissibility and keyboard users without screen readers, to hide or not to hide?
← Previous message | Next message →

We're working on a design refresh for Mass.Gov. Although we are (of course!) using headings and landmarks, we decided to also include a visible "skip to main content link" because sighted mobile device users like it. This wasn't a huge factor: it was just enough to tip the scales that way. If it's a requirement, a good designer can make sure it looks good.

sb

Sarah E. Bourne
Director of Assistive Technology &
Mass.Gov Chief Technology Strategist
Information Technology Division
Commonwealth of Massachusetts
1 Ashburton Pl. rm 1601 Boston MA 02108
617-626-4502  fax 617-626-4516
http://twitter.com/sarahebourne
= EMAIL ADDRESS REMOVED =
http://www.mass.gov/itd

From: Jared Smith
Date: Thu, Sep 15 2011 2:42PM
Subject: Re: "Skip to content" links, vissibility and keyboard users without screen readers, to hide or not to hide?
← Previous message | Next message →

On Thu, Sep 15, 2011 at 1:41 PM, Birkir R. Gunnarsson wrote:

> Could I/we be privvy to seeing the CSS3 implementation you did for a
> skip link (for demoing purposes in my lecture)?

I put together a very basic demo at http://webaim.org/temp/skipcss3.htm

You can view the source code to see the styling. It positions the
"skip" link 40 pixels above the top of the page at the left margin.
When it receives focus, the styles position it at the top left of the
page, with the CSS3 transitions animating it into place. I threw in a
background fade in transition just for kicks. When the user presses
tab again, the position reverts back to above the top of the page,
with the CSS3 animating it there, along with a background found out,
over the course of 1 second.

Again, this is all CSS, no JavaScript required.

Jared

From: Jared Smith
Date: Thu, Sep 15 2011 3:21PM
Subject: Re: "Skip to content" links, vissibility and keyboard users without screen readers, to hide or not to hide?
← Previous message | Next message →

On Thu, Sep 15, 2011 at 2:32 PM, David Ashleydale < = EMAIL ADDRESS REMOVED = > wrote:
> This is really nice, but in both Chrome 13 and IE 8 on a PC (XP), when I
> pressed Enter on the skip link it took me to the main content, but then
> hitting Tab again took me back up to the top of the page instead of the "I
> am another link.", which I think is where it should go.

As I noted, Chrome and Safari do not properly support in-page links.
It visually scrolls the page to the target element, but keyboard tab
focus remains on the "skip" link. Hitting Tab again reverts you back
to the top of the page. Hopefully these long-standing issues will be
resolved soon.

For IE8, this fits into my "*mostly* been addressed" disclaimer. IE8
still has cases where it does not change the keyboard tab focus for
in-page links. This can usually be resolved by using a named anchor
(<a id="maincontent" name="maincontent">), placing the target for the
link in an element that triggers hasLayout (a small book couldn't
adequately explain this, so suffice this to mean a table or certain
elements with a defined height), or by adding tabindex="-1" to the
target element.

I have updated the example to add tabindex="-1" to the target <div>
element so that it will work in that silly thing called IE8. Also of
note is that IE8 doesn't fully support the CSS3 stuff, but it is still
fully functional, just without the nifty animations, rounded corners,
etc.

Jared

From: Angela French
Date: Thu, Sep 15 2011 4:51PM
Subject: Re: "Skip to content" links, vissibility and keyboard users without screen readers, to hide or not to hide?
← Previous message | Next message →

This was not my experience with IE8 (Windows 7). It behaved as expected for me.

>This is really nice, but in both Chrome 13 and IE 8 on a PC (XP), when I pressed
>Enter on the skip link it took me to the main content, but then hitting Tab
>again took me back up to the top of the page instead of the "I am another
>link.", which I think is where it should go.
>
>Thanks,
>David
>

From: Paul J. Adam
Date: Fri, Sep 16 2011 9:42AM
Subject: Re: "Skip to content" links, vissibility and keyboard users without screen readers, to hide or not to hide?
← Previous message | Next message →

On the topic of skip links, I'm having to re-find the JS I used in a past a11y competition for my new job. I think I found the original source of the code I used here @ http://www.communis.co.uk/blog/2009-06-02-skip-links-chrome-safari-and-added-wai-aria

It works great for all browsers including iPhone/iPad! Woo Hoo!

Jared what do you think about adding that code to your awesome example? Does require JS though.

-Paul J. Adam
www.pauljadam.com
@pauljadam on twitter

On Sep 15, 2011, at 6:52 PM, Angela French wrote:

> This was not my experience with IE8 (Windows 7). It behaved as expected for me.
>
>> This is really nice, but in both Chrome 13 and IE 8 on a PC (XP), when I pressed
>> Enter on the skip link it took me to the main content, but then hitting Tab
>> again took me back up to the top of the page instead of the "I am another
>> link.", which I think is where it should go.
>>
>> Thanks,
>> David
>>

From: Jared Smith
Date: Fri, Sep 16 2011 11:00AM
Subject: Re: "Skip to content" links, vissibility and keyboard users without screen readers, to hide or not to hide?
← Previous message | Next message →

On Fri, Sep 16, 2011 at 9:41 AM, Paul J. Adam wrote:

> Jared what do you think about adding that code to your awesome example? Does require JS though.

I added a link to this example and to this thread so as not to muddy
the CSS3 example.

Because of poor keyboard support, keyboard-only users would rarely use
Webkit browsers, the exception now being VoiceOver users who are still
stuck with this long-standing bug.

This JavaScript hack works very well. For those that are wondering, it
sets the tabindex value of the main content to 0 (this should probably
be -1) and when the "skip" link is activated, it sets focus using
JavaScript focus() to the target. This does adequately trigger the
keyboard focus change.

I just added this to the focus scripting to the WebAIM site. You can
check out the scripting at http://webaim.org/media/scripts/main.js or
try it out at http://webaim.org/intro/. Of note is that this requires
jQuery. We also do yellow fade highlighting for in-page links, error
messages, etc., so our implementation is a bit more complex.

Jared

From: Paul J. Adam
Date: Fri, Sep 16 2011 11:18AM
Subject: Re: "Skip to content" links, vissibility and keyboard users without screen readers, to hide or not to hide?
← Previous message | No next message

Awesome! WebAIM's skip links now work on the Mac. Glad I could add to the discussion :)

Paul J. Adam
Deque Systems
= EMAIL ADDRESS REMOVED =
www.PaulJAdam.com
@pauljadam on Twitter

On Sep 16, 2011, at 1:00 PM, Jared Smith wrote:

> On Fri, Sep 16, 2011 at 9:41 AM, Paul J. Adam wrote:
>
>> Jared what do you think about adding that code to your awesome example? Does require JS though.
>
> I added a link to this example and to this thread so as not to muddy
> the CSS3 example.
>
> Because of poor keyboard support, keyboard-only users would rarely use
> Webkit browsers, the exception now being VoiceOver users who are still
> stuck with this long-standing bug.
>
> This JavaScript hack works very well. For those that are wondering, it
> sets the tabindex value of the main content to 0 (this should probably
> be -1) and when the "skip" link is activated, it sets focus using
> JavaScript focus() to the target. This does adequately trigger the
> keyboard focus change.
>
> I just added this to the focus scripting to the WebAIM site. You can
> check out the scripting at http://webaim.org/media/scripts/main.js or
> try it out at http://webaim.org/intro/. Of note is that this requires
> jQuery. We also do yellow fade highlighting for in-page links, error
> messages, etc., so our implementation is a bit more complex.
>
> Jared
>