Media components
Use a media component to add an image, video, linked image card or approved video embed where it directly helps a person complete the task. Media is supporting content, not a replacement for clear text instructions.
Choose media only when it adds value
Use an image to show a physical item, illustrate a location, or clarify a step that would otherwise be difficult to describe. Use video only when motion or demonstration is essential and the same information is also available in text.
flowchart TD
A[Does media help someone complete a task?] --> B{Can clear text explain it just as well?}
B -- Yes --> C[Use text]
B -- No --> D[Add concise supporting media]
D --> E[Provide meaningful alternative text or transcript]Avoid decorative media that slows a task, and do not put critical information only in an image or video.
Write useful alternative text
Alternative text should communicate the purpose of an image in its context. Describe the meaningful information, not every visual detail.
For example, use Photo showing the label on the underside of the device rather than Image of device. If the image is decorative, use an empty alternative rather than repeating nearby text.
For video, provide a transcript or equivalent written instructions. Check captions, audio, controls and keyboard access before publishing.
Image cards and layout
An image card can contain a title, short description and link. Make the title describe the destination and ensure the linked page is relevant to the task. Do not make a card’s image the only indication that it can be selected.
Select a display width that preserves readability and does not push form content below the fold unnecessarily. Test full-width and narrow layouts, long alternative text and a small display.
Embedded video
Use an approved video embed only where hosting and privacy requirements are understood. Keep the embed focused, test it in the service environment, and offer a non-video route to the same instruction.