Introduction

Skip links are same page links that allow users to skip over content to certain sections of your web page. Think about how some users with disabilities interact with your website, they user screen reader software and/or keyboard navigation instead of a mouse. Mouse users can easily scan to a certain element on a page, and interact with it. Users using screen readers and keyboards must navigate through the entire site every time to get to the content they are interested in. Skip links provide these users with the ability to skip over content that they might already know, or want to avoid every time, usually navigation menus.

WCAG 2.0 States

2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)

Implementing Skip Links

The first item to note is that skip links should be the first item on a page, so they are the first thing found. Skip links implemented in other places often do not serve purpose as the point is to help someone skip unwanted or already known information - to get to the core content of a page.

An easy way for you to see skip links in action is to visit the Disability Access Services website. When the page loads, simply hit the TAB key (Mac users - learn how to adjust TAB settings), and you will see a skip link "skip to navigation content" appear. if you activate the link with the ENTER key and TAB again, you will notice you are at a different section of the web page, your focus skipped right over all of the content before it. This can be a very useful tool for some. Try using your mouse and hover over the same section and you'll notice that the skip link does not appear.

There are at least four different techniques available to create skip links; normal in line text, using an image with alt text, hide the skip link, or using CSS to create and/or expose the link when it receives focus.

This page doesn't go into all of the details since they are already well described in the articles listed below in Resources & Tools, but it is important to note that visible skip links are always preferred because they can benefit everyone, not just screen reader users or those who are visually impaired. Hidden skip links are still read by screen reader software if implemented correctly because a screen reader just uses the HTML code to read the page, not the visual design of the page, so anything hidden is still read. This is similar to how alt text works on images.

Drupal

Since skip links are most important as the first item on the page, Drupal users should just make sure the template they are using has a skip link, but you can not implement a skip link in the best way since you do not have access to the top hat header section of OSU websites.

Same Page Links

Drupal users can provide useful same page links, similar to skip links, very useful if your page has a lot of content. Many of the pages on this site have same page links to help with navigation, the Alternative Text page also has a small page table of contents since there is so much content.

The anchor icon in the Drupal menu provides the way to create same page links, in addition to just using HTML. You set certain text as an anchor, where you want the link to go to, and then anything you link to that anchor becomes a link.

drupal menu showing anchor icon locationSelect the text you want to turn into an anchor and click the anchor icon in the Drupal menu.

drupal screenshot of anchor creation window and form field

 

In this case "Drupal" has been highlighted, it is also a heading. Type something simple into the "anchor name" box and click "insert." The text will now have a small anchor icon next to it, similar to "Resources & Tools" as seen in the picture.

Drupal screenshot showing how to insert a link through the Drupal menu

 

Next, find the text you want to make a link to your new anchor and select it. Then click on the "Insert/Edit Link" icon in the Drupal menu, it looks similar to a chain link and is only clickable when text is selected. In the pop-up window that appears, find the "Anchor" field and you will see a list of the anchors you have created on the page. Click on the appropriate anchor and "Insert." This will create the link.

Same page links are great for accessibility because they provide in page mechanisms for skipping content or finding sections that might be of interest. Most screen readers even announce that a link is a "same page link."