Iframes need meaningful titles
Applicable Role(s): Content Creator, Developer
Overview
Embedded content like videos, maps, social media widgets or job feeds are typically placed in an iframe. The title attribute provides an accessible name that tells the user what kind of content is embedded, and how to interact with it.
Best Practices and Tips
- An iframe gets its name from
titleattribute. - If the user is expected to interact with the iframe, the iframe title should tell the user the platform it is in and the title of the content.
- If the user will not interact with an iframe like a tracking pixel, the iframe should either be hidden with display: none/ visibility: hidden, or include an aria-hidden="true" attribute.
Examples/Patterns
YouTube example:
<iframe title="YouTube, A statement of solidarity and action" src="//urm.wwu.edu/...">
Maps example:
<iframe title="WWU Maps, directions to old Main" src="//urm.wwu.edu/...">
Analytics Tag
Users shouldn't interact with analytics tags, so it is hidden by default.
<iframe src="https://www.googletagmanager.com/..." height="0" width="0" style="display:none;visibility:hidden"></iframe>