WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: "Skip to content" links, vissibility and keyboard users without screen readers, to hide or not to hide?

for

From: Birkir R. Gunnarsson
Date: Sep 15, 2011 1:45PM


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 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
>