About
When you embed a video using an iframe or other method, screen readers may not announce anything about the video before it plays. That’s because the player is loaded separately, and screen readers can’t automatically tell what the video is or why it’s there.
To help with this, you need to add a short description near the embed, such as a heading, a sentence on the page, or a title in the embed code. This gives screen reader users the context they need before clicking ‘play’. The text you add should be meaningful in the context of the page, so users understand what the video is and why it’s there.
The way you add this description depends on how the video is embedded. Here are some tips for each embed type.
To learn more about embed types, visit our article Share and embed media in KMC.
Accessibility tips by embed type
Iframe embed
Screen readers rely on the iframe’s title to understand what the video is. Without it, they may just announce “frame” or skip it.
- Add a short, descriptive title to the <iframe> code, for example, title="Product demo video". This helps screen readers identify the embedded video, instead of announcing it as just a “frame.”
- (Optional) Wrap the iframe in an ARIA region (aria-label, aria-labelledby) or a labeled <section> to convey additional context.
Dynamic embed
Because the player is loaded into a container on the page, screen readers need help identifying what’s inside.
- Add a heading or visible label near the embed to describe the video.
- Ensure the container element has a meaningful accessible name or context (e.g., aria-label="Introductory course video").
Auto embed
This embed type replaces a placeholder element (like an image or <div>) with the video after the page loads, but screen readers may not notice the change.
- If your video replaces another element (like an image), make sure the original element includes a descriptive alt text or aria-label.
- Consider placing a heading nearby to give users context before the video loads.
- Make sure keyboard users can still navigate to and play the video easily after it loads.
Thumbnail embed
This method loads a thumbnail with a play button. When clicked, the video opens in a new layer, but screen readers need help identifying both the button and the new content.
- Use a clearly labeled play button (e.g., aria-label="Play onboarding video").
- Make sure users can navigate into the popup with a keyboard.
- Include a heading in the popup and return focus to the button when it's closed.
