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.
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.
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:
- The title of your iFrame should be short so that it can be quickly heard and understood. Do not be overly verbose.
- 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. - 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.
- If embedding a web page, the iFrame title should match the title of the page.
- 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).
- For
iframes with no visible content, explicitly identify theiframeas having no information for the user (e.g.title="No content") and hide the iFrame from screen reader users usingaria-hidden="true". Learn more about aria-hidden.
