Transforming UB’s digital communications.
Body Text Component
A block of text.
On this page:
Last reviewed: November 11, 2022
Accessibility
- Alt text setting for hyperlinks in text components.
- Link text should be meaningful.
- Create headings with the Title component.
- Use the Open in New Window setting sparingly.
Using This Component
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.
The component opened for editing a hyperlink, using the Rich Text Editor.
Hyperlinks
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:
- Same Tab - The link will load in the current browser tab or within the current frame/iframe if one exists. This is the default setting.
- New Tab - The link will load in a new browser tab.
- Parent Frame – The link will load within the parent iframe if one exists, otherwise it will load in the current browser tab.
- Top Frame – The link will ignore all frames/iframes and load in the current browser tab.
'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.)
Enhancing Your Text
Learn how to use the Rich Text Editor to enhance text with hyperlinks, anchors and more.
Technical Restrictions
- When pasting in pre-formatted text from another program, incompatibly formatted text will be suppressed, while other details (e.g. font color, different fonts, text styled as a heading, list items, images) will just be ignored.
- Do not link to DAM assets using a relative path (/content/dam/...) -- for these you must use a separate File Download component. > read more about this Known Issue
Accessibility Concerns
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:
- should be able to stand on its own (in a mouseover 'tooltip');
- should make sense if read after the main link text (many screen readers will read it this way);
- should not be essential (most users will not see it);
- should not simply repeat the actual link 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".
Additional Reference:
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.'
Additional Reference:
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:
- Use the 'open in new window' setting if loading a new page in the current window would disrupt their current activity (e.g. moving them to a new page while they are in the middle of completing a form).
- Use the 'open in new window' setting if loading a new page in the current window will break them out of a secure environment.
Additional Reference:
See an Example
Watch a Training Video
Training opportunities are available