Yesterday I talked about Web Accessibility 101 - Images, and today I will be talking about skip navigation.
If you have a repetitive navigation on your website, then you should supply a method to your users to skip these navigation links. First let’s try to understand why the people using assistive technology needs a skip navigation.
Let’s assume your user is a visually impaired person, and he uses a screen reader. Your website has probably either an upper menu, left menu or right menu. The first time visually impaired person visit the page, he listens the pages (screen reader reads the page), including the navigation section of your page. He clicks or selects one the links on the menu, and new page has the navigation of course, and the user listens the navigation again before he gets a chance to listen the content. So every time the user selects a link on the site, he has to listen the same navigation again and again.
You have 2 options to help your user to reach the content without listening the navigation all the time. One method is the old method which is putting a skip navigation link on your page as the first item. This link could be 1 pixel image link on the top-left of your screen that takes the user to the body part of the page. This also helps the people that visits your page with their mobile phones as they can skip everything to the content.
You don’t have to put only 1 skip navigation link on your site, you can put as many as you want. Actually in one of my projects, I had to use 3 skip navigations. The first one was to jump from the upper company menu to the department site content, the second link is to skip the department site navigation, and the third one is to skip the filter options on the page.
An example code for the skip navigation could be like this:
<a href="#mainContent"><img src="/images/skipNav.jpg"
alt="Skip to Main Content" ></a>
and at the beginning of the your content part:
Another solution is using header on your page which will a topic of another blog post as there is more than skipping the navigation with headers, however a small tip is : if you use h1,h2..h6 in your pages, users can easily navigate on your page using these headers.
Have fun making your site accessible :)