This is another one of among the series of usable and accessible links. “Skip to Content“, sometimes called “Jump to Content” or “Skip to Navigation” is a tool used to bypass all the top or side links and goes directly to the main content title. This feature is supported by Web Accessibility Initiative of W3C and is one of the recommendations of PWAG Maturity Stage 2.
A blind person or anyone using keyboard to navigate your website must pass through a series of tabs and enter keys first before they can go directly to the content. This is very cumbersome and a waste of time. To do away with this, put a “Skip to content” link on the first line of your site preferably above your website logo. Once you press the enter key, the cursor bypasses other links and goes directly to the content title or the first letter of the main content. You can use an ANCHOR tag to create these links.
How do I put a Skip to Content link to my page?
For example:
- At the topmost part of your website probably below the ‹body› tag, type Skip to Content. Then, add a hyperlink enclosing it.
‹a href=””›Skip to Content‹/a›
- Inside the href, assign a link name that has never been used. In our example, let’s use skiplink. Put a # sign before the name to show that it refers to a link.
‹a href=”#skiplink”›Skip to Content‹/a›
- Now go to the first text of your content. It might be the title of a news item or the heading of the whole content. In our example, let’s use the Latest News: title.
- Now, let us add an a name anchor tag. We must use the exact same name that we used on the href tag that we defined earlier. Otherwise, it will not point to this link. You also need to add an id to uniquely identify this name.
‹h1›‹a name=”skiplink” id=”skiplink1″›‹/a›Latest News:‹/h1›
- Save your work. Open the web page in your browser. Click on the Skip to Content link. Does your screen jump directly to the Latest News content? If it does then it worked. Don’t forget to put them on all of your pages.
- If you are familiar with Cascading Style Sheets, you may also add some enhancements here. If you feel that the Skip to Content link clutter or is unfit to your overall design, then you can simply hide it using CSS. However, you must also consider those sighted people who cannot use a mouse. Hiding it from them is not advisable since they do not know that the link exists.
References:
- PWAG Maturity Stage 2 – https://www.pwag.org/designrecommendations.htm
- W3C WAI Recommendation – http://www.w3.org/TR/WAI-WEBCONTENT/wai-pageauth.html#tech-group-links
- Accessites: Skip Link Pros and Cons – http://accessites.org/site/2006/05/skip-link-pros-and-cons/
- Useful are not always Usable – http://www.bohmann.dk/articles/useful_features_are_not_always_usable.html
