University at Buffalo (UB)
Transforming UB’s digital communications.
Caption Component
A description below a component (e.g. an image).
On this page:
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.
Last reviewed: October 12, 2023
Using This Component
This component has one tab. Click the wrench icon to configure these settings.
Tip: Place shorter captions directly into the Photo component and reserve this component for longer captions or those that require more formatting, such as line breaks or font styles that may need to style independently of other components.
Technical Restrictions
This component cannot be floated to the left or right of other content. If that is desired -- perhaps it accompanies an image -- use the Caption setting in the Photo component.
Configure - Main Settings
The component opened for editing.
Enter your desired text. Apply any formatting or links using the Rich Text Editor.
By default, the text is displayed in italics. However, authors can now remove that style. Select the text and click the "I" tool. This will now REMOVE the italics from that part of your caption.
For hyperlinks, the option is provided to open in new page. When that is selected, an additional icon will follow the linked text, to alert visitors that they will be taken to a new browser window, or even leave the current website. If the hyperlink goes to a downloadable file, an document icon will instead be shown as well as the file size if the file is on the same server. (Read more about link labels.)
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.