Web design training video: Skip links

Making your web pages accessible, by introducing skip links, provides a greater number of people with the ability to discover your content. A transcript is available for this video.

Skip links

This video will look at creating skip links on a web page. When you create a web page, frequently you will have an interface where you will have a banner at the top, some links just below the banner, some links below the banner to the home page, about us, contact us.

You will have a Navigation panel to the left, and the main part of the content where all the information reside are location in the main content div.

Screen reader users accessing a web page will firstly be met with the banner, they might use the tab key to get to the next link, the tab key to the next link and so on, use the tab key to approach the navigation panel, and after a while they will arrive at the main content that they actually wish to read. You can help screen reader users and provide them with a positive experience by providing an early link called skip links, that when activated will jump straight to the main content meaning that they user doesn't have to tab though every link within a page.

This video will look at utilising the skip links function on the web page, allowing the user to access the main content easier. The first thing to do is to place an Anchor (like an empty bookmark) at the beginning of the main content area. To enter a bookmark, here I'm using Dreamweaver, we can go to the common tab, and click on Named anchor. Name it maincontent. It has provided us with an empty link with an Id of maincontent.

Next, highlight the text to be used for the skip links, enter # followed by the name of the anchor you have just created (#maincontent).

Screen reader users can now quickly access skip links, click on the skip links to arrive at the main content of the page. That allows them to read the information quicker and not have to navigate every element on the page.