Skip links – What, why and how?
What are Skip links?
Skip links is something we don’t see in most of the websites. “Skip links” helps users (especially the keyboard users) to jump directly to a block of content or to an unique area of the page. “Skip links” are used for:
- Skip to main content
- Skip to navigation
- Skip to secondary navigation
- Skip to Search
These links are nothing but book marks on a web page. “Skip links” are expected to be placed at the top of web page and should be the first available link.
Why is Skip links important?
Now, let’s discuss the rational for having skip links. Let’s visit Cleartrip – a travel website in India. Layout of this portal is:
- Cleartrip logo on the top left
- There are a few links on the top right such as My trips, sign in etc
- Site navigation links such as Flights, Trains, Hotels etc
- A form to search international and domestic flights
- Aside to the search form, there is a module that shows offers and deals
- And there are some footer links
In this page, mostly users will prefer to use the Search flights module. OK keep this in mind for now and let’s understand keyboard and screen reader users.
Keyboard only user will use “Tab” key that moves focus from one element to another and they can use “space” key or “return” key to activate an element. Now, let’s understand how the screen readers on personal computers (PC) such as Non Visual Desktop Access (NVDA) works on a webpage. Usually a screen reader reads content from left to right and top to bottom and there are designated keyboard commands that provides flexibility for users to browse the page by elements such as H for Headings, F for Forms etc. and screen reader users too use “space” or “return” key to activate an element.
Let’s get back to our Cleartrip example! As we agreed above, the most used feature of this page is Search form and a screen reader user can can use hot key F to directly jump to From input field but a keyboard only user have to press Tab key for several times to reach From input field. When a user is much familier with the page layout, he or she wouldn’t bbe interested to see the repeated block of elements each time. In this scenario, having a Skip to main content would be helpful so that keyboard only user or a screen reader user who may not be aware of hot keys can quickly jump to the search form. Another advantage I would think of is that Skip links would be handy when browsing a website on a device that has tiny screen.
Providing Skip links will also meet the Success Criteria 2.4.1 – Bypass blocks
A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)
of Web Content Accessibility Guidelines (WCAG) 2.0
How to implement?
It’s pretty simple. Create an hyper link at the top of the page with screen text “Skip to main content” or Wherever you feel the important feature on your page. For our above Cleartrip example, it would be appropriate to create a Skip to main content link. The code will be something like:
<a href="#maincontent">Skip to main content</a>
Now, let’s come to the main content area and create an anchor name using:
<a name="maincontent"></a>
We can apply the styles as needed using the CSS. Now, the argument would be whether Skip links should be visible or hidden. I believe, these links should be visible because, they cater to the needs of not just screen reader users but also the keyboard only users and mobile users.
To conclude, Skip links are helpful to several users including those who use keyboard only or view web pages on tiny devices. Let’s advocate Skip links and make best use of them!
[…] you remember our post on Skip links – what, why and how?. In that article, we have seen how skip links would benefit users who uses screen readers or […]