WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: skip-nav tabindex setfocus etc.

for

From: Patrick H. Lauke
Date: Mar 14, 2006 6:40PM

Jared Smith wrote:

> Just be sure that the CSS does not hide/display it in a
> way that screen readers will not read it (e.g., don't use display:none
> or visibility:hidden). Changing the position, adding a background color,
> or similar will provide this functionality without interfering much with
> site design or layout for the majority of users that do not need, use,
> or even notice this feature.

Yup, on the Salford site I basically have this markup directly after the
logo in the header

<div><a href="#content" id="skipper">Skip to the content</a></div>

(disregarding the controversial accesskey I also included in the live site)

and the following style rules

#skipper {
position: absolute;
top: 0; left: 0;
margin: 0; padding: 0;
text-indent: -600em;
color: #000;
}

#skipper:focus, #skipper:hover, #skipper:active {
display: block;
width: 100%;
text-indent: 1em;
background: #ced318;
font-weight: bold;
}

P
--
Patrick H. Lauke
___________
re