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: Jared Smith
Date: Sep 15, 2011 2:42PM

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