iFrames

Overview and Guidelines

Often times websites will feature content that is hosted or created by a third party vendor.

That content is frequently embedded to the web page via an iFrame.

Screen reader users rely on a frame title to describe the contents of the frame. Navigating through frame and iframe elements quickly becomes difficult and confusing for users of this technology if the markup does not contain a title attribute.

Screen reader users have the option to pull up a list of titles for all frames on a page. Adding descriptive, unique titles allows users to quickly find the frame they need. If no titles are present, navigating through frames can quickly become difficult and confusing. If no title is listed, screen readers will instead give information like “frame,” “JavaScript,” the filename, or the URL. In most cases, this information won’t be very helpful.

Provide screen reader users with a descriptive iFrame title attribute to indicate what type of information is available within the iFrame. 

Example:

<iframe src="unemployment.htm" title="Interactive data showing unemployment rate in San Francisco">

WCAG Related Guidelines

4.1.2 Name, Role, Value (Level A)