Links (a.k.a, Hyperlinks) take users from their current page to another page, site or file (PDF, Word, Excel, etc.).
Adding Links in Sections
Links in sections are added within the content form and include two fields: Link URL and Link Text. See the documentation for a specific section for detailed instructions.
Adding Links in Body 1 - General Content
- Highlight the text you wish to link
- Select the Link icon in the WYSIWYG toolbar
- In the Link field start typing to link to another page on your site or paste in a URL or node number
- NOTE: Do not paste in the full URL of a page on your site
- If you wish to link to an email enter an email address
- If you wish to link to a PDF or document select the Open IMCE file browser link. See IMCE File Browser for information and instructions.
- Leave the ID field blank unless you are setting up an anchor link
- Leave the Relationship field blank
- Only if linking to a URL outside of KU select the Open in new window checkbox (see Accessibility below)
- Enter a title if you want the link to display a title when a user hovers over the link
- Links should make sense out of context. Phrases such as "Click here," "More," "Click for details," and so on are ambiguous when read out of context.
- Users must be able to navigate to and select each link using the keyboard alone.
- Most screen readers say "link" before each link so links do not need to include "link" in the link text, because all users already know that the link is a link.
- Do not say "link" or "link to" in alt text.
- Place the distinguishing information of links at the beginning of a link.
- Links should never be empty. An empty link can be navigated to, but if it does not present any content it can be very confusing for keyboard and screen reader users.
Linking to Inaccessible Content on KU Sites
All KU CMS sites will be required to address all inaccessible content (PDFs/documents, videos, etc.) during the migration to KU Sunflower. If you discover you are providing a link to inaccessible content on a KU website, including Drupal 7 sites, please reach out to the site owner and kindly request they remediate the document or webpage. Doing so will help the site owner prioritize inaccessible documents and pages that others in the KU community are pointing to.
KU CMS Sunflower sites will not be allowed to launch if they provide links to inaccessible content on other KU CMS Sunflower sites. Links to inaccessible content on Drupal 7 sites will not prevent your KU CMS Sunflower site from launching.
Linking to Inaccessible Content on External Sites
KU CMS sites are responsible for the journeys they provide their users. That includes linking to inaccessible PDFs/documents and webpage content on external websites (i.e., outside the ku.edu domain). As a site admin, you should do your due diligence to review any PDFs/documents or webpages you are linking out to for accessibility issues that could impact your users.
If you discover you are linking to inaccessible content on a KU website, see “Linking to Inaccessible Content on KU Sites” above.
If you discover you are linking to inaccessible content on an external site (i.e., not in the ku.edu domain), here are our recommendations:
- Unless the linked content is mission-critical, remove all links to inaccessible PDFs/websites. See CMS Guide: Documents for instructions on how to check the accessibility of PDFs.
- If the linked content is mission-critical, we strongly recommend working to find accessible alternative materials that serve the same purposes and link to those instead.
- If you have no other options and must continue to host the links to inaccessible PDFs/websites, we strongly encourage you to reach out to the external content owner and ask that they update their PDFs/websites for accessibility.
Do Not Use Absolute URLs for Internal Pages
When creating links on your KU CMS site, be sure to use relative URLs for your internal pages (e.g., /yourpagename or /node/#). Do not use absolute URLs or those links will break automatically when your new site goes live.
What is a relative URL?
- A relative URL assumes that the page you are linking to is on the site and provides only the specific page path or the node (e.g., “/yourpagename” or “/node/427”).
What is an absolute URL?
- An absolute URL is when you provide the full path: yoursitename.cms-dev.ku.edu/yourpagename
- Absolute URLs are necessary for external links, but should be avoided for internal links.
Why are absolute URLs a problem on internal pages?
When a new KU CMS site is launched, the development site [yoursitename.cms-dev.ku.edu] ceases to exist. So, any link on your site that has [yoursitename.cms-dev.ku.edu] will break immediately when the new site goes live.
What’s the best way to create relative URLs?
Drupal makes creating relative URLs easy.
- Once a page has been created, you can type the page title in any link field and the page will appear in a dropdown menu. Once you select the page from the dropdown menu, Drupal puts in the relative path for you.
- If you know the specific path (e.g., /yourpagename) or node number (e.g., /node/427) for your page, you can type either of those in manually.
Guidelines and Best Practices
- Link titles should describe succinctly the resource that viewers will find if they follow the link.
- Use of non-descriptive link titles like “Click here” and “Learn more” are forbidden on KU websites for accessibility compliance.
- Do no use the URL as the link title
- Links to documents or audio/video files explicitly state in the title what users will find if they select the link (e.g., My Document (pdf), Video - My Video (.mp4)).
- All links open in the same window – unless the link destination is outside the KU domain.
- Title links so users can scan link text quickly to navigate to the page they're looking for
- Link titles should allow users accessing your site via a screen reader to navigate your site effectively.
- Begin links with the information-carrying word, because users often scan through the first word or two of links to compare them.
- Effective link titles allow search engines to index links and their landing pages correctly, thus improving search engine results (a.k.a., your SEO).
Descriptive Link Titles
Link titles must be descriptive and tell the user succinctly what resource they will find if they follow the link.
Why? Because links titles may be read aloud by screen readers independent of the contextual information near the link. Imagine hearing a list of link options without context that said, “Link: click here, Link: website, Link: learn more.” Now imagine the same list with descriptive text: “Link: KU CMS Guide, Link: KU Admissions, Link: Our Research.”
Examples of common non-descriptive links include “Click here,” “here,” “website,” and “learn more.” Here are some example pairs showing incorrect and correct link titles:
How Do I Know if My Link Titles Are Descriptive?
To assess your link titles to see if they are descriptive, read all the links on your page aloud as a list. If your link titles provide enough information for a user to make an informed decision, you are good to proceed. But, if the link title is too vague, add the necessary detail so they can make an informed choice.
Common Examples of Non-descriptive Links Titles
- Click here
- Read more
- More info
- Learn more
- Visit website
- Watch on YouTube
Document Link Titles
All links to documents and audio/video files on KU CMS site must state explicitly in the link title what the user will find – instead of a webpage - if they select the link. Why? Because link titles need to tell users if they will be taken to a destination other than a webpage. This is important for all users, but especially for those who are experiencing your site via screen reader.
URLs as Link Titles
Link titles must be descriptive and tell the user succinctly what resource they will find if they follow the link. Although URLs tell users literally where they will go, they do not always provide the context. For example, if you already know what CMS means, the URL https://cms.ku.edu might be meaningful to you. But, if you do not know what that means, the descriptive link title KU CMS Guide would provide the context you need to decide if you want to select that link.
Additionally, screen readers read the entire URL letter-by-letter. URLs are often quite long and contain information that may be confusing or irrelevant to the user, which is both unpleasant and time consuming.
Exception: Bibliographic Citations
When used in properly formatted bibliographic citations, a URL as link title may be present (e.g., selected publications in Person Profiles).
Opening in New Windows and Tabs
Links should open in the same window. It is a standard user experience (UX) best practice for links to open in the same window to ensure that the user is not confused by unexpected browser behavior.
The only reason to set links to open in a new window/tab is if the link takes viewers to an site outside of the ku.edu domain. Opening links to a site outside of the KU domain in a new tab is an optional choice. The most important aspect is to be consistent with link behavior across your site.
All Links Work
Check your site frequently for broken links. See Broken Links below for more information, including link checking resources.
No Links to Your Drupal 7 CMS Site
Be certain there are no links on your new site to content (e.g., images, documents, etc.) on your previous Drupal 7 site. Any links to content on your Drupal 7 site will break when your new site goes live.
Links to Email
- When used in paragraphs, email links should be the email address, not the person or department's name.
In Buttons and Button-Style Links
When used in a button-style link, the link title must tell users what behavior to expect. Email link paths (e.g., mailto:firstname.lastname@example.org) trigger a separate email application to open automatically. It is important for all users – but especially for visually-impaired users – to understand before they select what will happen if they select the link.
Recommended link titles for emails in buttons and button-style links:
- Email Us
- Email [dept/org name] – Example: Email CMS Guide
- Email [individual name] – Example: Email Big Jay
- Email [dept/org title] – Example: Email Program Director
- Email [individual name, title] – Example: Email Big Jay, Program Director
Document and Audio/Video Links
If a link does anything other than go to another web page, such as linking to a PDF file or launching an audio or video player, email message, or another application, make sure the link explicitly indicates what will happen.
- Example PDF document title (pdf)
- Example PowerPoint document title (.ppt)
- Example Word document title (.docx)
- Video - Example video file title (.mov)
- Audio - Example audio file title (.mp3)
Specified Non-Descriptive Link Titles Allowed on Select Sections
A feature has been added that makes it possible to use a specified list of approved non-descriptive link titles on select KU Sunflower sections. See Specified Non-Descriptive Link Titles Allowed on Select Sections for details.
All phone numbers on KU CMS - Sunflower sites should be links for direct call formatted as <a href="tel:xxxxxxxxx">xxx-xxx-xxxx</a>
Add Phone Number Links
- Highlight the phone number
- Copy the phone number to your clipboard
- Select the link icon in the WYSIWYG options
- Type "tel:"
- Paste the number so your link URL reads: "tel:xxx-xxx-xxxx"
- Remove the dashes between the numbers so there are only numbers in the URL path: "tel:xxxxxxxxxx"
Your site’s credibility relies on all the information on your site being accurate and up-to-date. Just like outdated or inaccurate text, broken links damage the user experience and tell users that the information on your site may not be reliable.
Link Checking Resources
Because of the large number of links found on most sites, it is time consuming to check them page-by-page. Here are some online tools to help you check the status of links across your website:
Link Checkers for Live Sites
Link Checkers for Sites in Development
- Google Chrome Extension: Broken Link Checker (web-based, you need to add the extension to your Chrome browser - Recommend checking one page at a time with this extension)