Skip to main content Skip to secondary navigation

Create Links

Main content start

You have many options for adding links to your site. You can link to an internal page, an another website, you can create email links and link to internal documents or files on a service like Google Drive.

This guide covers how to add links in a text area, like the Text Area Paragraph or a Body field, and best practices for naming links.

Automatic links

Anything that has the format of a URL (https://....) or an email address (with an @ symbol) will be automatically linked by the text editor. For all other cases, see below.

Here's how to add the text to a link:

  1. Select the text you would like included in the link.
  2. Click on the Link button in the Text Area toolbar to open the Add Link tool.
  3. In the URL field you can:
    • To link to a page on your site or a file you have uploaded, start typing the name of page or file. Then select from the list.
    • To link to an another website, enter the entire URL, starting with "https://"
  4. Press tab to the green check mark and then enter or click the green check mark to save
  5. Verify your link works as expected.

To link to an existing page on the site, type the name of the page into the "Link URL" field. A list of suggestions will display below the input field. Click on the page you wish to link to and then click the green check mark.

text area create link ui displaying a list of suggested pages

Update a link

If you need to change the destination for a link, click on the link in the text editor. This will bring up the link toolbar. Click on the pencil icon. 

You can then start to type a new page title or enter an external URL. When you are done click the green checkmark.

As mentioned earlier, anything that looks like an email address will automatically become a mailto: link.

Email (mailto:) and telephone (tel:) links can be added to text within text areas, as well as other paragraphs. Email links will be displayed with an email icon that is added automatically. For example:

Create an email link

Report phishing

  1. Highlight the text area you would like included in the email link.
  2. Click on the Link button in the Text Area toolbar to open the Add Link modal.
  3. In the URL field, add "mailto:" followed by the email you would like to link to. For example: mailto:spam@stanford.edu
  4.  Save.

Create a telephone link

  1. Highlight the text area you would like included in the telephone link.
  2. Click on the Link button in the Text Area toolbar to open the Add Link modal.
  3. In the URL field, add "tel:" followed by the telephone you would like to link to. 
    For example: tel:(555)555-555
  4.  Save.

Explain where your link is going

It's been a common practice to introduce something, such as a news item, and provide a link to the full story with generic link text that says "Read more." However, with multiple links on a page that all say "Read More", it becomes problematic for people using assistive technology. Links are used to guide people through your website or to content hosted elsewhere, and encourage your users to take specific actions.

For example, when using cards to direct readers to related content, you might be tempted to use "Read more" on each card. 

Example link one

Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. 

Read more

Example link two

Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. 

Read more

Example link three

Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. 

Read more

Depending on the context, this will cause Siteimprove to flag the following issues:

When a screen reader encounters these links, they read the same. The image below displays the information VoiceOver provides for those links. It will sound to the listener like this: "Link, Read more. Link, Read more, Link, Read more." 

Rules of writing accessible link text

When writing link text:

  • Make it a call to action by starting with a verb. People are far less likely to click on a link that is a noun, they want to be led through your site. Rather than “About us,” try “Read about our team.”
  • If the links go to different pages, for each link, the link text is different.
  • If the links go to the same page, the link text must be the same for each page.

Here are some examples of how you might fix the link text:

Related resources

From Stanford's Office of Digital Accessibility

 

This allows you to keep the "Read more" text but makes the links accessible to screen readers and other assistive technology by modifying the underlying HTML. In this approach, you will differentiate links using the aria-label attribute. The title attribute is optional; it allows mouse users access to the same content. Note that the content is not available on a touch screen, which means mobile users will not see this content

To do this you'll need to modify the source code directly. For example:

<a href="/home" 
  title="The Target. This uniquely describes the target" 
  aria-label="The Target. This uniquely describes the target"> 
  The Target 
</a>

Here is the link in action:

The Target 

For cards

When creating a "Read more" link in a card, you will need to:

  1. Move the link from the link field to the description text field instead.
  2. Modify the source code in the description text field to add the necessary aria-label and title attributes.

Here's an example of the underlying HTML for a "Read more" link:

<a href="https://sitesuserguide.stanford.edu/home" 
  aria-label="Read more about example link one" 
  title="Read more about example link one"> 
  Read more
</a>

Resources for creating accessible links

Accessible contextual link patterns from Smashing Magazine

 

 

Example link one

Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. 

Read more

Example link two

Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. 

Read more

Example link three

Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. 

Read more

For publications

Industry standard for publications often dictates how inline link references display. The problem is that with this standard, the link text to two different locations on the same site will look the same. This violates WCAG 2.1: Understanding Success Criterion 2.4.4: Link Purpose (In Context)

Here's how this might be used for publications:

Etiam ultricies nisi vel augue. (NCES, 2020). Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. (NCES, 2020).

Tips

Adding a link to the homepage (front page) of your site

In the WYSIWYG editor, to link to the home page just use a forward slash, i.e., /

Adding a link using shortcuts

Keyboard shortcuts can also be used to add a link. For Mac, the shortcut is "command" plus "K", and for PC, the shortcut is "Ctrl" plus "K" (Chrome recommended). Using these shortcuts will open up a link modal. This keyboard shortcut can also be used to modify existing links.

  1. Highlight the text area you would like included in the link.
  2. Type the keyboard shortcut (Mac: "command" plus "K", PC: "Ctrl" "K") to open the Link modal.
  3. Add the URL
  4. Click Save.

Troubleshooting 

In a few use cases, an email link (with mail icon) may unintentionally appear on non-linked text after the page is saved. For example, this can occur for some code snippets or examples that include the @ sign. In these situations, you can remove the email link and icon by wrapping the text in a <code> tag.

  1. Within the Text Area WYSIWYG toolbar, Click Source to display your Text Area as HTML.
  2. Find the text that is unintentionally displaying the email link, and wrap it with an opening <code> tag and a closing </code> tag.

The link i'm looking for is not showing up when I type out the page title on a teaser?

Edit the desired page you want to set up the link for and write down the node ID number (###in /node/###/edit ). 
It can be found in the URL when on the edit page, /node/###/edit. In the teaser paragraph you can use that node as a way to find the page you desire. Simply type something like profile (###) into the field. Don't select any suggestions and save it. 

Related content

Jump links using ID tags

Jump links can direct visitors to a specific part of a page, rather than the top of the page. This is good for footnotes and FAQs.