# Media components

Source: https://govform.com/resources/documentation/article/23-20-component-media
Topic: Component Settings

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.

## Related guidance

-   [Information components](<https://govform.com/resources/documentation/article/23-01-component-info>)
-   [Design accessible services](<https://govform.com/resources/documentation/article/14-design-accessible-services>)