Designing for accessibility

OK to hide "Skip navigation bar"?

[NickH]

I'm working on improving the accessibility of my site. I'm looking ways of providing a "skip navigation bar" link so that aural browsers to not have to read through the navigation at the top of each page. Ideally, I'd like this special link to be invisible on standard browsers. This can be done by posting the following link before the navigation bar:

<a href="#content" title="Accessibility: bypass navigation bar" name="top" class="nd">Bypass navigation bar</a>

and in the CSS:

.nd {display:none}

My concern is: will hiding a link in this manner, though done for an honorable purpose, be penalized by Google, or other search engines?

[papabaer]

I don't believe you need to worry about a Google penalty. I've seen a number of "hidden" skip-nav links and have yet to hear of any problems other than perhaps, accessibility issues for users who deploy pointing devices to navigate links.

In a number of instances a "visible" skip-nav link serves those who have full visual capabilities but difficulty with mobility. Consider the person who must navigate by single keystroke/tabbing. While a screen reader will "catch" the hidden skip-nav, the visually capable, but mobility restricted user might be forced to needlessly tab through a large menu before arriving at the actual content.

You can overcome the "hidden" skip-nav issues by incorporating "tab-index" and other methods. Just be certain that if you DO hide your skip-nav, you allow for the above mentioned scenario.

I leave my skip-nav visible for numerous reasons... including the one just mentioned. One other reason is rooted in Accessbiilty Evangelism: I WANT people to "see" the skip-nav menu so they might become AWARE of the purpose. It never hurts to provide subtle (and not so subtle!) hints.
Best of luck!

- papabaer

[NickH]

papabaer, thanks for your reply.

I must admit I still have two concerns.

1) Leaving such a link visible is potentially a major usability issue. Many users may not even be familiar with the meaning of the term "navigation" in this context. The link does nothing discernible for sighted users. I don't have a solution, but, I assure you, in user tests anything that appears to do nothing always causes loss of confidence. Users will assume the site is "broken", and this will be a major setback for them.

2) GoogleGuy, if you see this post, can you confirm that Google does not (and does not plan to) penalize links, in this context?

[papabaer]

Leaving such a link visible is potentially a major usability issue.

First, I understand your sincerity, but seriously: a visible "bypass-nav" link is in no way a major usability obstacle. Quite the contrary.

You are already deploying the title attribute, why not elaborate a bit? It really should not be a problem. The explanation provided by the title attribute should be sufficient for all.

Even if you still choose to hide your "bypass-nav" link, it is not like a hidden link that leads "off-site" or to clandestine content. You are only linking to a location on the same page. I use my skip-nav to bypass both the top navigation bar and the left-navbar. Since my skip-nav is visible, I take it a step further and assign an access key for even more accessiblity options----AND, enhanced USABILITY! The visible accesskey-enabled skip-nav adds keyboard functionality AND a quick means for navigation. "Keyboard-philes" will love it!

Last, I sincerely doubt if Google would penalize anything that is geared towards accessibility. However you choose, you will be fine.

Best of luck!

[NickH]

Thanks for that, papabaer. (Cool site, by the way.)

I downloaded the trial version of IBM's Home Page Reader to test some ideas. (I wonder how representative it is of aural browsers?) I had a few surprises.

1) Setting CSS display:none hides a link from HPR! So that particular method of hiding "Skip navigation" goes out of the window. I haven't yet tested the transparent gif method, but I don't like that approach. So I may go with the two links...

[Skip navigation ¦ Accessibility]

... as the first text on the page.

2) Having said that, it's quite wasy to bypass the <div>navigation bar</div> on my site by simply hitting the right arrow key. (In the default reading mode.) So having no link would be quite usable, at least on HPR V3.02. However, older versions, or other products, may not be quite so friendly.

3) As far as I can determine, HPR does not make use of the title attribute. If there's a way to configure that feature, I've not found it yet.

4) Ditto for accesskey support, which I can find no mention of in the help text. (Most available accesskeys are taken up by the very extensive set of functions.)