Embed a YouTube Video

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.

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 other text on the page.
  
• If the image has a function; e.g. for navigation -- 'next slide'. *
  
• For a static thumbnail image 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.

Purely decorative images (those that do not convey content or have a function on the page as listed above) can instead be set as "This image does not require Alt text" in some components. If the component does not have that setting, you will still need to supply Alt text.

Alt text should 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 do not include that 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.
  
• Avoid technical language, jargon, and abbreviations.
• Only mention personal identity when relevant to the page (name, age, race, ethnicity, gender, religion, or cultural identifiers).
• 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, in case the image is later used in a way you did not originally expect.

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.

Videos that automatically popup, autoplay, or loop can be confusing for some users, and will probably annoy everyone in general. It is always best to let the user decide how to interact with your website.

Video must also have controls to start/stop and replay, which are standard for YouTube, which is why we recommend its use.

Best practice: keep the default settings when using the Video component.

All videos on UBCMS websites must have synchronized captions. An additional transcript is optional, but if provided, should be closely associated with the video player. Captions (and transcripts) support those who cannot see or hear your video.

Best practice: captions are most easily added using the automated tools on YouTube, even if the final placement is not in that platform.