Give every meaningful iframe a useful title
An iframe creates its own browsing context, but that does not tell a screen-reader user what is inside it. Add a short, specific title to every iframe with meaningful content:
<iframe title="Cat dancing video" src="catdancingvideo.html"></iframe>
Avoid vague titles such as “iframe” or “embedded content”. The title should identify the content or task.
If an iframe contains content that is genuinely not useful to assistive technology, hide it with aria-hidden="true". A title may still be useful for automated checks and for documenting its purpose:
<iframe title="Non-readable content" src="non-readable-content.com" aria-hidden="true"></iframe>
Hiding a meaningful video, form, or document is not a shortcut for making it accessible. Use this only for content the reader does not need.
Enjoyed reading this?
If you found this article helpful, consider supporting my writing. Every little bit helps keep this blog going.
Related articles
- HTML Features That Can Save You Some JavaScript
Use native disclosures, dialogs, popovers, form attributes, and responsive images before rebuilding their basic behaviour.
- The HTML Details That Make Forms More Accessible
Build clearer forms with visible labels, autocomplete, connected help and errors, fieldsets, and visible focus.
- When a Control Needs aria-label
Use aria-label for genuinely unlabelled controls while keeping visible text and native elements as the first choice.