About

When you embed a video on a page, screen readers need enough information to identify the video and understand its purpose before playback begins.

Make sure the embedded video has a meaningful accessible name or description. Depending on the embed type, you can provide this information through the iframe title, a visible heading or label, or accessible attributes on the relevant page elements.

The text should identify the video in the context of the page so users know what they're about to play.

Accessibility tips by embed type

Iframe embed

Use the iframe title to provide an accessible name for the embedded video.

• Add a short, descriptive title to the <iframe> element, for example, title="Product demo video".
• If additional context is needed, place the iframe in a labeled <section> or other appropriately labeled container.

Dynamic embed

With a dynamic embed, the player loads into a container on the page. Provide context that identifies the video for screen reader users.

• Add a heading or visible label near the embed that describes the video.
• Give the container an accessible name when needed, for example, aria-label="Introductory course video".

Auto embed

With an auto embed, a placeholder element, such as an image or <div>, is replaced by the player after the page loads.

• If the player replaces an image, provide descriptive alt text for the image. If it replaces another type of element, make sure the placeholder provides appropriate context for the video.
• Add a heading or visible label near the embed to provide context before the player loads.
• Make sure keyboard users can navigate to the player controls after the player loads.

Thumbnail embed

With a thumbnail embed, the viewer clicks a thumbnail or play button to open the player in a new layer.

• Give the play button a descriptive accessible name, for example, aria-label="Play onboarding video".
• Make sure keyboard users can open the player and navigate to its controls.
• Provide a descriptive heading for the player layer.
• When the player layer closes, return keyboard focus to the control that opened it.