Media

Media container

A media container is used to display media items (video, audio, image or other data) with a caption.

Anatomy

The navigation list concept relies on an understanding that all "page" content type examples have the possibility of being both a parent and a child page.

The navigation list defines the children that will be shown on the parent page (current page).

Anatomy of media container
  • Mandatory
  • Optional
ElementsMandatoryDescription
MediaYesTitle must describe the downloadable file
CaptionNoUse caption representative of the media content - this allows users to form a mental model of the information available while scanning the page

Do's

  • be descriptive and concise in the caption to communicate the subject of the media file
  • write captions that are short, distinct and indicative and communicate the subject of the media content
  • include ALT tag
  • select appropriate images for video thumbnails, they need to depict what is in the audio or video file

Don'ts

  • don't choose images which are too complex to be distinguished in thumbnail size
  • don't automatically play audio or video files when a user arrives on a page (or scrolls to a media container)
  • don't automatically play next items after an audio or video item finished

When to use

  • Whenever there is a need to display a media file

When not to use

  • Do not use the media container if there are above 5 consecutive items (this would make navigation more difficult) - use an unordered list or a media gallery

Notes

Accessibility

  • Ensure the ALT tag for each media file accurately describes the subject (e.g. for an image: "Undergraduate student looking into microscope to examine specimen in biology laboratory" instead of something generic like "Science image 1").
  • Make a text transcript available, representative of the media content