A block of text.
Last reviewed: November 11, 2022
This component is blank by default.
Select the component then choose between Edit (pencil icon) or Configure (wrench icon) to add or edit the content. (For this component, both avenues provide the same functionality.) A Rich Text Editor supports basic formatting (bold, italics and bullets) as well as hyperlinks.
Pre-formatted text can be pasted in from other sources (e.g. a word processor or a non-UBCMS website). This allows inclusion of special characters, hyperlinks, and simple text formatting (e.g. bold, italics, underlining), while incompatible formatting will be suppressed (e.g. font colors, different font types or sizes, headings, lists, and images) and you will often see extra blank lines or spaces. Expect to do some cleanup before you are done.
Select a word or phrase and click the 'Chain' tool to build a clickable hyperlink.
Add the corresponding URL or use the magnifying glass to browse for a target page within the UBCMS.
Alt Text - This optional setting provides additional labeling for hyperlinks to clarify where the link will take the reader. This text supplies the 'Title' in the embedded HTML <a> tag, which is not a heading, but is instead read by screen readers and is also displayed as a mouse hover tool tip by some browsers. This is especially useful when the URL also serves as the link text, which can get flagged as an accessibility error. See Accessibility Concerns for more details.
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.)
Learn how to use the Rich Text Editor to enhance text with hyperlinks, anchors and more.
Text components with the Rich Text Editor (e.g. Body Text, Intro Text) can hold hyperlinks in the body of their content that are built using the toolbar. These links have an additional setting for 'Alt text', which is intended to provide additional context for screen readers (and also shows as a mouseover tooltip).
Best practice: Use this Alt text setting when there are multiple links on a page that have the same link text but go to different target pages, or when the existing link text is ambiguous taken out of context (e.g. the link text is also the URL).
Best practice: Alt text should always be concise but clear. If you choose to use this setting, the text:
Using this setting text suppresses Siteimprove’s "Link text used for multiple different destinations” warning if it makes the link text unique, but does not suppress the “Link text is too generic” warning when supplementing links like “Click here” or “Read more”.
Link text should describe where the link will take the user in a manner that is appropriate to the context on your page and also the target page. This is also true for images that act as links.
Best practice: Avoid meaningless standalone phrases like "click here", "see all" and "learn more".
Several components are specifically designed to display headings on your page, such as the Title component. Spoofing headings, such as by using bold text in a text component, or through custom CSS, is confusing, inconsistent, and most important, will fail accessibility review.
Best practice: Always create headings using the Title component or the title feature supplied in other components such as the Flex Module. (Do not use bold text formatting to give the visual appearance of headings.)
Best practice: Do not use Title components solely for visual results. They should be used as intentional section headings. Other components, such as the Callout, or the Pull Quote in the Related Content Container are intended to call special attention to short text segments.
Best practice: Do not choose a particular heading level merely because it 'looks better.'
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: