Flex Module Component

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.

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".

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.

Purely decorative images (that do not convey content or have a function on the page) can instead be set as "This image does not require Alt text" in some components, which also nullifies alt text that was previously entered.

Alt text is required in these contexts:

• If the image is a link. *
  
• If the image is zoomable.
• If the image depicts important information not clearly provided in a caption or nearby text on the page.
  
• If the image has a function; e.g. for navigation -- 'next slide'. *
  
• For the static thumbnail images that are generated by Video and Flex Module components.

* 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.  

Alt text can 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:

• Screen readers automatically announce "image of...", so you do not need to include the word "image" or "graphic" in your alt text.
  
• Add a final period so screen readers will pause before reading the rest of the page.
• Be concise (under 150 characters) but include any significant elements to the image, e.g., "student using microscope in a research lab."
  
• If the image is used for navigation, describe what will happen, e.g. "next page of results". 
• If the image is a link to another page, name or describe the target page (e.g., "School of Nursing.") but do not say it is a link -- screen readers indicate that as well. This also applies to zoomable Photos.
• If the image is a link that starts a video (named ABC), consider "YouTube video entitled ABC." or just "watch ABC."
  
• If the image contains a lot of text (e.g. a chart or table), provide this information in other ways on your page, perhaps as a nearby collapsible container labeled appropriately.
  
• Alt text should be added whenever images are uploaded into Assets.

Alternative text ('Alt text') is a best practice for all your UBCMS images and is often required for accessibility so screen readers can tell visually disabled users what they are not seeing.

Images displayed as teasers in lists require Alt text. Normally this is supplied in the original listed pages, often in shared content, and in some cases, in the metadata of the referenced images in Assets.  

Best practice, Alt text should be added whenever an image is uploaded into Assets.

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.

The user should control carousels, slideshows and video, so they are not confused by unexpected behavior and to provide enough time for them to process each segment.

Best practice:

• Do not auto-start video.
  
• Do not automatically scroll a carousel or slideshow.
  
• Provide tools that allow users to start, stop and resume animations.
  

These recommendations are supported by default in UBCMS carousel, slideshow and video components. Please comply with this best practice if you embed external video or animations.