Skip links to improve your accessibility

At the last Fronteers meeting we (about 35 front-end developers) e-discussed with Eric Velleman (Accessibility.nl) about the Government Web Accessibility Guidelines. Are the guidelines realistic? I said e-discussed, since by a communication error Eric was on a holiday in France (we don’t exactly know what went wrong). However, using a web cam and an internet connection we were able to discuss the guidelines.

One thing we discussed were (large) menu structures. Should the menu in the markup be placed before of after the content? Screen reader users seem to expect the menu be before the content. If the content is placed before the menu, they are distracted and don’t understand what is going on. It is an habituation you can’t control, so putting a menu at the bottom of your mark-up looks like an unreasonable option (to me).

It also seems to be a myth that frames are bad for accessibility for screen readers. With a keyboard shortcut they can switch between frames, so a menu and the content are separated quite well. Some blind people prefer framed web sites over ‘normal’ web sites. This may sound like an recommendation of frames by me, but it isn’t. By the way, the iframe element will probably be back in HTML5.

The guidelines state that large menus must have an option to skip the menu and go straight to the content. These skip links are put on top (and sometimes also at the bottom) of an web page, and hidden via CSS for visual browsers. Some more about skip links can be found at Juicy Studio.

I thought it would be better to always use skip links. If more and more people use them, screen reader users may get used to them. Also, if you want the menu at the bottom then, it will be no problem to do that. Since the user gets the skip link first, they can decide to go to the content or the navigation. If you use more than one skip link, it is important to always put the skip links in the order the content and menu appear in the markup.

From now on I’ll provide skip links in the web sites I build, how about you?

Posted on Monday, October 29th, 2007 in HTML, Accessibility, Meetings
Comments and trackbacks are welcome.

7 responses to Skip links to improve your accessibility

I would say: place the content on top in the source code and the navigation at the bottom, so that the most important of the page (the content) will be accessed at first. Doing this you can also easily create a good heading structure: h1 at the top (title of your article) and other headings below that.

To make the navigation reachable you can place a ’skip content’ link to go to the navigation.

I this way you have both a good site/code structure for SEO and accessibility.
Arjan Snaterse said on October 29th, 2007.
I also prefer to make these skip links visible on :onfocus
Tough one shouldn’t provide skip links solely for having them in a webpage.
Benjamin said on October 29th, 2007.
@ Arjan.

You can actually ask: is the content really the most important thing? Many times the answer is yes. But the answer is no when the visitor is browsing through your web site.

As said in my post, the screen reader user kind of expects the navigation to become first. I’d like to change that into a skip link (or skip links).

@ Benjamin.

You mean like the WaSP-website does?
Arjan Eising said on October 29th, 2007.
Indeed :)
Benjamin said on October 31st, 2007.
@Arjan
Ofcourse is content always the most important on a page, otherwise you shouldn’t have made that page.

But on the other hand: when the user wants to search/navigate for other content he needs to have a navigation and therefore he can use the ’skip content’ button to go to the navigation.

But in my opinion content is more important for the value of a webpage then the navigation.
Arjan Snaterse said on November 2nd, 2007.
@ Arjan.
You are right the content is more important. However, as you can read in my article people using screen reader software expect the navigation to be on top. That’s why I mentioned to put the skip links always on a page, so these people expect skip links.
Arjan Eising said on November 4th, 2007.

Respond

Wordpress and Akismet powered
Syndication feeds: RSS & Atom
Contact information

Pages

Feeds

Categories

Archives

Skip links to improve your accessibility

7 responses to Skip links to improve your accessibility

Respond