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

  • An iframe gets its name from title attribute.
  • 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.

Pattern Examples

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>