A media container is used to display media items (video, audio, image or other data) with a caption.
Anatomy
- Mandatory
- Optional
| Elements | Mandatory | Description |
|---|---|---|
| Media thumbnail | Yes | Thumbnail representative of the linked media |
| Caption | No | Use caption representative of the media content - this allows users to form a mental model of the information available while scanning the page |
Do's
- always include thumbnails
- 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