Links are an essential part of any webpage, providing navigation within the site and connecting users to resources. Poorly structured or unclear links can create barriers to access and poor usability for people using assistive technology. The following guidelines will help you create clear, informative, and accessible links.

Use meaningful text

Avoid these non-informative phrases:

• read more
• click here
• here
• link to (some destination)

Instead, link text should make sense out of context and describe something about the destination:

• Discover careers for M.A.C.S. graduates.
• Submit your updates using our Project Request Form.    
• Read our Diversity Statement on the Equity and Identity homepage.
• Additional questions? Email the web team, (webmaster@goucher.edu). 
  
  

Avoid linking URLs

URLs should generally not be used as link text. Assistive technology will read out URLs character by character, creating a poor user experience.

Bad example (do not do this):

Research your preferred program and country at https://us.fulbrightonline.org/applicants/getting-started.

Good example:

Research your preferred program and country using the US Fullbright Getting Started page. 

To see a live demonstration of how screen readers present link text, watch this short Screen Reader Demo for Digital Accessibility from Mark Sutton, web services director at the University of California, San Francisco.

Announce non-default behavior

The default behavior of a link is that it opens a webpage in the current browser tab. Therefore, linking to a document or opening a link in a new browser tab is considered non-default behavior and must be announced to the user.

Linking to a document

When linking to documents, indicate the file type within the link text to alert the user the link opens a document with the specified file type and not a webpage.

For example:

• Internship Policy (PDF)

 

Opening a link in a new browser tab

We recommend avoiding opening a link in a new browser tab. Doing so can cause confusion for people who can't see that it's opened a new tab. However, if you must open a link in a new tab, adding "opens in a new tab" to the link text will announce the non-standard behavior.

For example:

• Submit your nominations using the Public Service Award nomination form (opens in a new tab).

 

How to create web links in the CMS

When creating a link in the CMS, always use the file explorer in the "Insert/Edit Link" window. This assigns a dependency ID that the CMS uses to track the page or document in case it's ever renamed, moved, or deleted. This is a built in feature of the CMS that helps prevent broken links. 

When linking to external sites (any pages that don't reside on goucher.edu), copy and paste the full website address into the URL field in the link options window.

 

Video tutorial on creating links

Watch the video for instructions and best practices when creating links in the CMS.

 

Link styles

In-line text links

Example:
Stay up to date with the latest from the Pilates Center—sign up for our monthly newsletter.

• This default style is most commonly used.
• Use when linking to internal or external webpages and other documentation (PDFs).
• Never bold an in-line text link.
• Never underline text that is not linked.

Button links

Example:

BOOK A GROUP CLASS

• Use to highlight an action you want a user to take.
• Typically point to another page where the user will input information or perform an task (filling out a form). 

Chevron links

Example:

Learn More about Anatomy of Living Color

• Used when linking to internal webpages that contain additional or related information.
• For further examples see the Rosenberg Gallery Exhibits page.
  
  

Additional Resources

Need more guidance? Find related tutorials on the CMS Tutorials page or contact the web team.