Transforming UB’s digital communications.
Call to Action Component
Prompt visitors to click a link.
On this page:
Accessibility
- Additional Label Text Setting
- Link text should be meaningful
- Use the Open in New Window setting sparingly.
Last reviewed: November 11, 2022
Using This Component
This component has only one tab. It loads with the default 'Learn more' text displayed. Click the wrench icon to configure these settings.
Technical Restrictions
- This component requires a hyperlink.
- If the URL is outside the UBCMS, a prefix like http:// or https:// must be included.
Configure - Main Settings
Call to Action tab
The component opened for editing.
The default text "Learn more" is preloaded with a medium bullet.
This component requires a link (that field is highlighted in red).
Title - Enter your desired link text. Best practice is to use language that compels action.
- The default text "Learn more" is preloaded.
Additional Label Text - Allows for a longer description to assist screen readers to give more context for repetitive buttons on the same page.
Link - Add the corresponding URL or use the magnifying glass to browse for a target page within the UBCMS.
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.)
Display Size: Three style options are provided
- Large (default) - largest font and bullet
- Medium - mid-sized font and bullet
- Small - smallest font and bullet, same as default List Builder link
- Module "See All" style - Title is capitalized and right-aligned *
* The Module "see all" style mimics the 'see all' link in the Flex Module, Carousel (or Lists). In cases where a module component (e.g. flex module or carousel) does not meet your needs, this new option allows authors to create the look of a module using other components with the combination still matching other modules on the page.
Accessibility Concerns
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.
Additional Reference:
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:
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.