Navigation for blind people: "Skip to main"
public
group: Accessibility
njivy@drupal.org - Tue, 2007-01-02 18:32
Blind people, when using screen readers or refreshable braille displays, must read web pages sequentially. Typically this means plowing through the page navigation before reaching the main content.
We can provide helpful links, links which are noticeable only to people using non-visual browsers, which allow them to skip over the navigation. It's really easy.
<a class="accessible" href="#bmain" name="btop"><img src="/files/spacer.gif" width="1" height="1" alt="Skip to main" /></a>
See a live example of a blog I designed for my friends, the Kyles. The blog is temporarily installed at
http://usenik.com/timgineer/
What are your thoughts? Would this addition to the Garland theme be generally useful?
Nic
Sitewide tags: accessibility
I'm not sure how non-visual
I'm not sure how non-visual browsers read alt tags and such but, to be safe I like labeling it clearly with normal text and use css to hide it. Then with the "focus" pseudo class, make it visible for people who can see the screen while using input devices other than a mouse. This would help more than the visually impaired.
<a class="accessible" href="#bmain" name="btop">Skip to main</a>a.accessible {margin-top: -9999px;
}
a.accessible:focus {
margin-top: 0;
}
Tabbing to the link would trigger ":focus".
-joon
Good idea
Have you tried it out? Do you have a live example?
My site does something
My site does something similar but with different styles. It uses fixed positioning so it defeats the point somewhat.
http://www.dvessel.com/
-joon
Nice
I like how that works.
Don't hide skip link...
Skip to content links are also handy for keyboard navigation - I tend to have them as the first, visible, menu item.
Another approach, which I have used in my blog, is to have the navigation at the end of the document (styled to appear in a right-hand sidebar for visual layouts), and provide a link to skip TO it. I also provide a link/rel in the document header, for those browsers (like Opera) that actually understand it.
Garland looks to me like the theme easiest to make accessible - I'm still trying to work out the best way to make the skip links appear.