A general introduction to building links and references in the UBCMS.
> Read more.
Last reviewed: October 10, 2023
Writing good link text is an art as well as a science.
Links can be added to your UBCMS pages using the settings within many UBCMS components, including text components, Titles, Photos, Buttons, Calls to Action, and lists.
Some of these components have a specific 'Link to' field for the URL, while text components (Body Text, Caption, Intro Text) rely on in-text 'Hyperlinks' set using the Rich Text Editor.
Digital Assets should ONLY be provided using a File Download component.
On pages that are long or provide very detailed content (such as FAQs), it may prove useful to provide an easy way for your readers to quickly navigate back to the top of the page.
Anywhere you can add a link, such as in text, a Call to Action component, Title, etc., if you type in "#skip-to-content" for the link, it will scroll back to the top of the center column.
Click the 'Call to Action' link below—the browser will shift to the top of the page. (This will not be as obvious as it would on a long page.)
Mailto's (links that load an email message) are just like any other link.
Select your text and add a link, but in this case, the link prefix will be "mailto:" (or "mailto://") plus whatever email you wish to use; e.g. "mailto:someone@yoursite.com".
To add a subject line, include an extra parameter of "?subject="; e.g. "mailto:someone@yoursite.com?subject=Mail from Our Site".
The displayed part of the link can of course be anything you prefer.
When a visitor clicks that link, their computer will attempt to load their email client.
Many smart phones will automagically recognize phone numbers and try to call the displayed number, but to make a phone number fully clickable, try tel:+ plus the full phone number. Generally we suggest not to include any hyphens or parentheses. E.g. tel:+7166456969 is University Communication's main number. When a visitor clicks that link, their computer will attempt to load their phone client. The displayed part of the link can of course be anything you prefer.
Most 'link to' and hyperlink settings in UBCMS components have an optional companion setting that specifies where the linked page will load. Sometimes this is a 'Target' dropdown and for other components it is a simple 'Open in new window' checkbox.
'Target' supports several settings:
'Open in new window' means to open in a new tab of the current browser.
When 'open in new tab' or 'window' is selected, an additional icon will follow the linked text on your published page, to alert visitors they are about to be taken to a new browser tab, and possibly leave the current website.
Note: For accessibility reasons, be careful about sending your visitor to a new tab. This behavior may be unexpected and disortienting. (> Learn more about link accessibility.)
For links to other UBCMS pags, use a relative URL, without the http:// prefix. These URLs will normally begin '/content/www/your-site/...' or '/content/your-school/...' for decanal areas). We suggest you always use the magnifying glass picker tool to ensure you choose the correct page and capture the URL correctly.
Except for lists and slide decks, links to unpublished or nonexistant UBCMS pages will be broken on your live site and will generate a 404 error ('no such page'). > Read more about this Known Issue: Links to Unpublished Pages Can Be Broken on Live Sites
It is possible to link to a specific section within a Web page, using an 'anchor', basically a named target within a compnent on that page. If you examine the URL, you will see it is immediately followed by a hash plus a keyword; e.g. 'http://www.buffalo.edu/president.html#abcde' (where 'abcde' is the anchor).
When a page is linked in this manner, the browser should automatically load the page down to that section.
A number of UBCMS components can hold anchors. Titles can be designated as anchors using the 'Id' field, while text components (Body Text, Caption, Intro Text) use the 'Anchor' tool in the Rich Text Editor. Tabs and the Collapsible Content Container can also hold anchors, and will then load with their content displayed.
You can link directly to any of the slides in a Collapsible Grid, so that the page loads with that slide's content displayed. The slides are numbered, 1, 2, 3, etc. and these become the anchors for your link. Add a hashtag (#) + the slide number to the end of the URL.
For example, this would load the page with the third slide revealed on this Demo Site page:
To link to a tab in a Tabs component, click the tab in question and copy the URL that is displayed in the browser location bar. The main tab always loads by default, and shares the same URL as the actual page, but the other tabs insert their name into the page name of the URL.
For example, the tabs of the example on the demo site example will display as follows:
For links to external websites (pages on other websites, even if they are also within the UBCMS), always include the prefix (usually http:// or https:// for secure pages).
The UBCMS provides some built-in link checking for automated components (e.g. Lists) that have relative links to other UBCMS pages, but not for external links, and does not do validation for links for links in text components (Body Text, Caption, Title, etc). Links to unpublished or nonexistent UBCMS pages will generate a 404 error ('no such page').
For Lists with broken UBCMS links, the UBCMS will flag a bad internal UBCMS link with a red error message that only shows in Author. This warning will not appear on your published page.
We strongly encourage you to be very careful when building out your links, and when moving or deleteing pages to ensure you do not accidentally create broken links.
The Outbound Link Report can also help you to manage your links in general. This displays everything your UBCMS pages link to, including other UBCMS pages, downloads, images, lists and external links.
Also, SiteImprove provides link checking as one of its services.
This setting (e.g. in Call to Action and Button components) assists screen readers by giving more context for links with repetitive occurrence on the page. That is, if you have a page with several identically labeled links (e.g. ‘email’ links in a series of employee profiles, where brevity and repetition are desirable), the screen reader will apply the additional text to clarify the difference between these otherwise identically labelled links.
Best practice: decide on a consistent pattern that is easy for multiple people to reproduce and curate over time.
To avoid confusion, every unique link on a page must have unique link text. It is not hard to compose comprehensive text for manually coded links, but links that are generated automatically by lists and carousels must also be different, which takes more planning.
Also consider Call to Action, Button, and Tabs components, as well as the pagination and "see all" links in the Event and News List components which may have the same labels and appear more than once on a page. (Some of these have additional label settings that can help prevent this redundancy.)
Best practice: when creating shared content pages that will be used in lists, use distinct titles, or set the Navigation Title in the page Properties so none of your pages have the same title if they are displayed together. Also take advantage of additional label settings in other components when you will have several on a page.
Alternative text ('alt text') is a short, written description that describes the appearance, content and/or function of an image on a webpage. Adding alt text is a best practice for all your UBCMS images and is required for accessibility so users will understand what they are not seeing.
Alt text is required in these contexts:
* When the image is a link, starts an animation or video, or is a navigational element, alt text should indicate its function, not the image's content (i.e., "watch video ABC" and not "screenshot from video ABC"). Screen readers will treat this image as a standard link.
Purely decorative images (those that do not convey content or have a function on the page as listed above) can instead be set as "This image does not require Alt text" in some components. If the component does not have that setting, you will still need to supply Alt text.
Alt text should be added to images in Assets. This is required for images that are then used in the Photo Gallery component, while it can also be used as an alternate source for Alt text in some components (e.g. the Photo setting 'Get Alt text from Assets').
Best practice:
Text Over Photo provides an accessible alternative to using images that have embedded text.
> Learn more about the Text Over Photo component.
Links in many components can be set to open in a new browser window (or tab). The user can thus explore the new page, while preserving the source page (and your website) in the original tab. However, this can be confusing if the user does not realize a new tab has opened. They may become lost, confused how they arrived on that new page and unable to return to your site.
Best practice: let the user control their experience and stay in the same tab, with two notable exceptions: