Creating Web Links
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 accessibility and usability. The following guidelines will help you create clear,
informative, and accessible links.
Best Practices
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.
Avoid linking URLs
URLs should generally not be used as link text. Assistive technology, such as screen readers, reads out URLs character by character, creating a poor user experience.
Bad example:
A linked URL, like the one above, is read as: “link, h-t-t-p-s, colon, forward-slash, forward-slash, teachpsych.org, forward-slash, page, dash, 1-7-8-4…” Not only does this create a bad user experience for assistive technology users, using non-meaningful text creates confusion about where the link leads or what the link is about.
Good example:
Six principles that guide my teaching
The link above will be read as: “link, Six principles that guide my teaching.” Linking the title of the article gives context to where it leads and creates an all around better user experience for everyone.
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.
Linking to non-HTML resources
When linking to files such as PDFs, indicate the file type within the link text:
Example: Internship Policy (PDF)
Link Targets
When linking to webpages or documents, whether internal or external, always use the default option: Open Link in Current Window.
Previously, we recommended opening external links and documents in a new window/tab.
However, this has been revised to improve accessibility and navigation.
How to create web links in the CMS
Dependency IDs
When linking to other pages in the CMS or on www.goucher.edu, use the file chooser in the link options window. This assigns a dependency ID, preventing broken links if the target page or file is renamed, moved, or deleted in the future.
When linking to external sites (any webpages that don't reside on www.goucher.edu), you will need to copy and paste the full website address into the URL field in the link options window.
For details, see the video tutorial below.
Tutorial on Creating Links
Watch the video below 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:
- 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.