Working with Links

Create meaningful links

• Most users visually scan links on a page, keyboard users use the tab key to jump from link to link and screen readers can get a list of links on a page.

  • In each of these cases, it is important that the link’s destination not be mysterious. Clearly and uniquely describe where the link goes

• Create links with meaningful text that makes sense out of context and allow users to identify the purpose of each link from the link text alone

• Give users an indication when a link is not a website e.g. Link Text [PDF]

Examples of ineffective and effective links:

Linking to a page on swarthmore.edu

1. Highlight the text you want as your link text.

2. From the Editor Toolbar, use the Link icon (looks like a chain) to begin the process. 

3. A pop-up window will appear. Begin typing the title of the swarthmore.edu page that you'd like to link to.

4. The pop-up will attempt to suggest relevant pages to you. Select the appropriate page.

5. Click the green OK button.

Linking to external content and documents

1. Highlight the text you want as your link text.

   1. If linking to a document be sure to include they type of document as part of the link, e.g. 2014-15 Swarthmore Financial Aid Request form [pdf]

2. From the Editor Toolbar, use the Link icon (looks like a chain) to begin the process. 

3. A pop-up window will appear.

4. Locate the dropdown menu labeled Link Type. Choose the URL or link to document option.

Link to External Content/URL

1. Highlight the text you want as your link text.

2. From the Editor Toolbar, use the Link icon (looks like a chain) to begin the process. 

3. A pop-up window will appear.

4. Locate the dropdown menu labeled Link Type. Choose the URL or link to document option.

5. Paste the URL in the field labeled URL.

6. Click the green OK button.

Link to a document

1. Highlight the text you want as your link text.

2. From the Editor Toolbar, use the Link icon (looks like a chain) to begin the process. 

3. A pop-up window will appear. Choose the URL or link to document option.

4. Click the Browse Documents button.

5. A new window will appear which allows you to:

   1. upload new documents

   2. view existing documents associated with your site 

   3. navigate to another swarthmore.edu site's document directory

6. Use the Upload button in the upper left corner to upload new documents, or select and existing document in the right menu. 

7. Click the Insert button.

Anchor Links - Linking to content within the current page

From time to time it may be useful to link from one location of your page to another. For example your page may contain multiple section, which refer to one another. an "Anchor" link can be used to "jump to" the referenced section without leaving the page.

Create the Anchor

1. Place your cursor in the location you'd like the link to "jump to".

2. From the Editor Toolbar, use the Flag icon to begin the process.

3. A pop-up will appear prompting you to provide an Anchor Name. Observe the following practices when creating the anchor link:

   1. Make sure there are no spaces

   2. If the anchor name contains multiple words, they should be separated by dashes or underscores (alternately, one could use "camelCase")  

   3. Although text can be upper or lower case or a mixture of the two, lower case is optimal

4. Click the green OK button.

Link to the Anchor

1. Highlight the text you want as your link text.

2. From the Editor Toolbar, use the Link icon (looks like a chain) to begin the process. 

3. A pop-up window will appear.

4. Locate the dropdown menu labeled Link Type. Choose the Link to anchor in the text option.

5. A new set of options will appear. 

6. Locate the dropdown menu labeled By Anchor Name option. From the dropdown, select the anchor name created in the previous steps.

7. Click the green OK button.

Removing a link

1. Highlight the link that should be removed.

2. From the Editor Toolbar, click the Unlink icon (looks like a broken chain).

Resources to learn more about creating meaningful links

• WebAIM’s Introduction to Links and Hypertext

• WCAG’s guidance on link text