• Skip to main content
  • Skip to primary sidebar
  • Skip to footer
Equalize Digital

Equalize Digital

Website Accessibility Consulting, Training, and Development

  • My Account
  • Checkout
  • Services
    • Bespoke Websites
    • Accessibility Audits
    • User Testing
    • Accessibility Remediation
    • Accessibility Monitoring
    • Web Accessibility Training
    • Accessibility for Agencies
  • Accessibility Checker
    • Overview
    • Features
    • Pricing
    • Documentation
    • Support
    • Priority Support Packages
    • Buy Now
  • Company
    • About Us
    • Certified B Corporation
    • Industry Expertise
    • Blog
    • WordPress Accessibility Meetup
    • Accessibility Statement
    • Contact
    • Become An Affiliate
  • Events
  • How can we help?
  • My Account
  • Checkout
Home / Accessibility Checker / iFrame Missing Title

iFrame Missing Title

Notice Type: Error
Relevant WCAG Conformance Levels: A

Did an “iFrame Missing Title” error appear in an Accessibility Checker audit of one of your WordPress posts or pages? Read on below for an explanation of this error, how it impacts your website’s accessibility, and how to fix it.

Table of Contents

  • About the iFrame Missing Title Error
    • What is an iFrame?
    • What is an iFrame title?
    • What does the iFrame Missing Title error mean?
    • How does Accessibility Checker test for missing iFrame titles?
  • Impact on Accessibility
    • Why are iFrame titles important?
    • iFrame titles are not interchangeable with the name attribute
    • Relevant WCAG 2.1 Success Criteria
      • 2.4.1 Bypass Blocks – Level A
      • 4.1.2 Name, Role, Value – Level A
  • How to Fix a Missing Frame Title Error
    • What to do (in short)
    • How to find and fix iFrame Missing Title errors in WordPress
    • Tips for writing good iFrame titles

About the iFrame Missing Title Error

What is an iFrame?

An iFrame an HTML component that allows you to embed content from other web pages or URLs into your web page. Common examples of content that may be embedded into a web page using an iFrame are videos, documents, charts or widgets, and forms. You can actually embed an entire web page into another web page using an iFrame!

iFrames can look distinct from the page on which they’re embedded where it is obvious that something is embedded on the page from another source, or they can be styled to look seamless so it is not obvious that the embedded element is coming from a different URL rather than being added directly on the page.

iFrames have HTML structure, at their simplest, containing <iframe> tags like this:

<iframe src="https://website.com"></iframe>

The iFrame src attribute (source) tells the iFrame where to get its content from. iFrames can include a number of other attributes including dimensions like height and width. Here is an example of an iFrame that loads the home page of our website:

And here is the code that is used to load the iFrame shown above:

<iframe src="https://equalizedigital.com" title="example iFrame Equalize Digital Home Page" width="100%" height="400"></iframe>

What is an iFrame title?

An iFrame title is an attribute that can be added to the <iframe> tag to describe the contents of the frame to people using assistive technology. In the code above, the title attribute is title="Equalize Digital Home Page iframe example".

In lieu of using the title attribute, it is also possible to add an accessible title to an iFrame using the aria-label attribute, which is explained further down the page in the fixes section.

What does the iFrame Missing Title error mean?

An iFrame Missing title error means that one or more of the iFrames on your post or page does not have an accessible title describing the contents of the iFrame.

How does Accessibility Checker test for missing iFrame titles?

While auditing your page or post content, Accessibility Checker will look for <iframe> tags and for each iFrame found, will check to see if a title attribute or aria-label attribute is present and not empty. If there is no title and no aria-label, then Accessibility Checker will flag an iFrame Missing Title error.

Note: This error checks to see if a title is present, it does not, however, test to see if the present title accurately describes the content of the iFrame as that cannot be done without manual testing by a human.

Impact on Accessibility

Why are iFrame titles important?

Sighted users can see iFrames and quickly decide if they want to engage with the content inside the frame or not. On this page, for example, many people don’t bother to scroll the iFrame that displays our home page. They don’t click the navigation or submit the form that is contained within the frame – because they can tell at a glance that the iFrame is provided as an example and doesn’t contain content important to understanding this page.

A blind or visually impaired user, on the other hand, does not have the ability to quickly glance at an iFrame and decide whether they want to engage with it. iFrame titles are important because they allow screen reader users to learn the purpose of each frame and then choose whether they want to go into the frame to hear the content inside it or whether they want to skip the iFrame and continue down the page.

Different screen readers react to untitled frames differently, but if an iFrame does not have a title listed, blind and visually impaired users will hear “frame,” “JavaScript,” the filename, or the URL when they reach the frame on the page. Obviously, it’s not very helpful to know that an frame but not know what is contained in it.

iFrame titles allow visually impaired users to navigate the web page more quickly and, in the case of an iFrame that includes crucial information or forms, will ensure that it is not missed by users of assistive technology.

iFrame titles are not interchangeable with the name attribute

It’s important to note that the title attribute is not interchangeable with the name attribute, and that you still need to have a title on all iFrames, even if they include a name.

The title labels the frame for users; the name labels it for scripting and window targeting. Screen readers and other assistive devices do not read an iFrame’s name to the user, only the title.

Relevant WCAG 2.1 Success Criteria

2.4.1 Bypass Blocks – Level A

A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.

4.1.2 Name, Role, Value – Level A

For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

How to Fix a Missing Frame Title Error

What to do (in short)

To fix a missing iFrame title, you will need to add a title or an aria-label attribute to the <iframe> tag. The attribute should accurately describe the contents of the iFrame.

How to find and fix iFrame Missing Title errors in WordPress

First, install the free Accessibility Checker WordPress plugin.

For any pages or posts that have an iFrame Missing Title error in the WordPress editor, you can open the details tab in the Accessibility Checker meta box, then expand the applicable error to see the code that caused the error to appear.

example of an iframe without a title attribute flagged in Accessibility Checker

In the example above, the following code, which is a YouTube video embed, was flagged as causing an iFrame Missing Title error:

<iframe src="https://www.youtube.com/embed/SvzPxtaQKgw" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" width="1280" height="720" frameborder="0"></iframe>

If this was your website, you would need to edit the iframe code to add in a title attribute that describes the video: title="Asian Tuna Soba Noodle Salad video". You can add the title attribute anywhere within the opening <iframe> tag so long as you don’t insert it inside any of the other attributes.

Here’s the corrected code:

<iframe src="https://www.youtube.com/embed/SvzPxtaQKgw" title="Asian Tuna Soba Noodle Salad video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" width="1280" height="720" frameborder="0"></iframe>

Alternately you can use the aria-label attribute.

Generally, you will have added iFrame code to your website by either pasting it into an HTML block or widget, or (in the classic editor) by flipping over to the text editor view. It should be relatively easy to find the iFrames on your page or post and add titles to them.

Tips for writing good iFrame titles

As you’re adding titles to iFrames, keep the following in mind:

  1. The title of your iFrame should be short so that it can be quickly heard and understood. Do not be overly verbose.
  2. The title should accurately describe the contents of the <iframe> element in a way that will help users decide whether or not they want to navigate to the iFrame.
  3. If there are multiple iFrames on the same page, each frame should have a unique title. For example, don’t write “YouTube video” three times, instead, write the name of the video in each iFrame.
  4. If embedding a web page, the iFrame title should match the title of the page.
  5. Put unique information first and leave out or put at the end any information that might repeat between iFrames (such as company name after web page name or “video” after the title of the video).
  6. For iframes with no visible content, explicitly identify the iframe as having no information for the user (e.g. title="No content") and hide the iFrame from screen reader users using aria-hidden="true". Learn more about aria-hidden.

Primary Sidebar

Frequently Asked Questions

  • How to Install & Activate Accessibility Checker
  • Getting Started Quick Guide
  • Why Do We Say 100% Passed Tests, Not 100% Accessible?
  • How to Manually Check Your Website for Accessibility
  • When and How to Ignore Accessibility Errors or Warnings
  • What to do if There are Accessibility Errors in Your Theme
  • What to do if a Plugin You’re Using has Accessibility Errors
  • How to Get Support for Accessibility Checker
  • Can I Hire Equalize Digital to Fix Accessibility Issues on My Website?
  • Additional Resources for Learning About Accessibility
  • How to Test Accessibility Checker for Conflicts with Themes or Plugins
  • What Does “Unlimited Dev Sites” mean?
  • Is there an Accessibility Conformance Report (ACR) or VPAT available for Accessibility Checker?

Rule Documentation

  • A Slider is Present
  • A Video is Present
  • Ambiguous Anchor Text
  • ARIA Hidden
  • Blinking or Scrolling Content
  • Broken ARIA Reference
  • Broken Skip or Anchor Link
  • Duplicate Alternative Text
  • Duplicate Form Label
  • Empty Button
  • Empty Heading Tag
  • Empty Link
  • Empty or Missing Form Label
  • Empty or Missing Table Header
  • iFrame Missing Title
  • Image Animated GIF
  • Image Empty Alternative Text
  • Image Long Alternative Text
  • Image Map Missing Alternative Text
  • Image Missing Alternative Text
  • Improper Use of Link
  • Incorrect Heading Order
  • Insufficient Color Contrast
  • Link Opens New Window or Tab
  • Link to MS Office File
  • Link to Non-HTML File
  • Link to PDF
  • Linked Image Missing or Empty Alternative Text
  • Long Description Invalid
  • Low-quality Alternative Text
  • Missing Language Declaration
  • Missing Subheadings
  • Missing Title
  • Missing Transcript
  • Possible Heading
  • Readability & Simplified Summary
  • Tab Order Modified
  • Text Justified
  • Text Too Small
  • Underlined Text

Free Accessibility Help

Join our WordPress Accessibility Facebook group to connect with a community of web professionals and website owners using WordPress to build a more accessible web. Get answers to accessibility questions and join virtual WP accessibility meetups.

Join the Community

Footer

Equalize Digital Websites for Everyone

Your WordPress accessibility team. Accessibility plugins, rapid audits, and consulting to help you make your website usable by people of all abilities.

  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Company

  • About Equalize Digital
  • WordPress Accessibility Meetup
  • Certified B Corporation
  • Accessibility Statement
  • Blog
  • Events
  • Contact Us

Services

  • Website Development
  • Accessibility Audits
  • User Testing
  • Remediation
  • Ongoing Monitoring
  • Accessibility Training
  • For Agencies

Accessibility Checker

  • Features
  • Pricing
  • Documentation
  • How to Get Support
  • My Account
  • Affiliate Dashboard
  • Become an Affiliate

© 2023 Equalize Digital · Privacy Policy · Terms of Service · Plugin Terms & Refund Policy

WordPress VIP Silver Agency Partnercertified B corporation logo International Association of Accessibility Professionals member