Captioned media is a component that allows you to provide context to an image or video. Captioned media allows you to display a caption and/or a citation.

Full Sidebar Captioned Media Documentation

Example Sidebar Captioned Media

About Sidebar Components

Sidebar components can be used with custom content or on their own beneath a sidebar menu or in-page navigation.

Usage Guidance

Captions are a great way to add context to a piece of media. Captions can be confused with image descriptions (alt text) or citations. Use these rules of thumb to remember the difference between each:

  • Captions give context to a piece of content. Information in a caption is available to sighted users and screen readers.
  • Image Descriptions / Alt Text describe what you can visually see in an image, and are typically only interacted with by screen readers. Alt text also displays when an image doesn’t load on a page, such as when you have a low internet connection. Alt text is meant to be a textual alternative for people who cannot see (for whatever reason) the image itself.
  • Citations give credit to whoever created a piece of media.

Example

Element Content
Image Texas A&M University mascot Reveille leads the Corps of Cadets marching through campus.
Caption Reveille, the highest ranking member of the Corps of Cadets, leads the Corps’ procession with her handler, Theodor Neal, the 2023-2024 Mascot Corporal.
Image Description / Alt Text Texas A&M University mascot Reveille leads the Corps of Cadets marching through campus.
Citation Texas A&M University Division of Marketing & Communications

Keep Learning

Learn about the Sidebar Card in Aggie UX 101 Module 6 Chapter 4.

Go to Chapter 4