Back to Info and Examples for Accessibility Insights for Web

frame-title

A <frame> or <iframe> element must have an accessible name.

Why it matters

A <frame> or <iframe> is used to embed one HTML document within another. An accessible name is a word or phrase coded in a way that assistive technologies can associate it with a specific user interface object. Assistive technologies can then refer to the object by name, not just by type.

People with good vision can glance at a <frame> or <iframe> element to get a good idea of its content. People who use assistive technologies rely on the frame’s accessible name to determine whether it contains information relevant to their current needs.

How to fix

For each <frame> or <iframe> element, provide an accessible name using ONE of the following methods.

Good

title attribute

Better

aria-label attribute

Best

aria-labelledby attribute

Example

Fail

This <iframe> element doesn't have an accessible name. Assistive technology users won't have any idea what information the frame contains unless they navigate into its content.

<iframe src="//articles/2019-11-14_new_characters.htm" frameborder="0" width="100%" height="32px" scrolling="no" allowtransparency="true">
…
</iframe>

Pass

The <iframe> has a title attribute that gives it an accessible name. Assistive technology users can judge from the name whether the frame is likely to have useful content.

<iframe src="//articles/2019-11-14_new_characters.htm" title="Introducing our new characters" frameborder="0" width="100%" height="32px" scrolling="no" allowtransparency="true">
…
</iframe>

About this rule

This rule passes if ANY of the following is true:

Element has a non-empty aria-label attribute
Element has an aria-labelledby attribute that references elements that are visible to screen readers
Element has a non-empty title attribute
Element’s default semantics were overridden with role="presentation" or role="none"

Use caution when applying role="presentation" or role="none" to a <frame> or <iframe> element. These roles instruct assistive technologies to disregard the element’s implicit role without hiding its content from users. If a <frame> or <iframe> has inner text, adding a role of presentation or none will cause it to be reported to users as a text string with no semantic context. For more information, see Using ARIA: Use of Role=presentation or Role=none.

More examples

Understanding Success Criterion 4.1.2: Name, Role, Value