<frame> or <iframe> elements do not have a title Pinterest Pin

Hi, today I was running the Google PageSpeed test and I see that on the pages where I have an embedded pin it says the following: <frame> or <iframe> elements do not have a title. Example:

<p style="text-align:center;"><iframe src="MY PIN URL" height="618" width="345" frameborder="0" scrolling="no" ></iframe></p>

Google then recommends this article: https://dequeuniversity.com/rules/axe/4.7/frame-title

So, to fix it, what would be the correct code?

See "you need to add a title attribute", but I've faced this issue with textless linking through icons... Let me know if you find a fix please bro? It's half the issue with my own front-end!

Like all I can suggest is editing the hard code to;

<p style="text-align:center;">
<iframe title="Embedded Pinterest Pin" src="MY PIN URL" height="618" width="345" frameborder="0" scrolling="no"></iframe>
</p>

but it would've worked for me too!

Let me know so I can try again, thanks.

The warning you're seeing from the Google PageSpeed test is indicating that your <iframe> elements are missing a title attribute, which is important for accessibility. The title attribute provides a label for the <iframe> which can be used by screen readers to provide context to users who are visually impaired.

According to the article you were referred to from Deque University, you should add a title attribute to your <iframe> or <frame> elements to provide a descriptive label. Here's how you might modify your existing code to include a title attribute:


Replace "Descriptive title here" with a brief, descriptive title that indicates the content or functionality that the <iframe> provides. This will improve the accessibility of your web page and should resolve the warning you're seeing in the Google PageSpeed test.

Thanks for the answer I will try it right now.

Alf85 said:

Thanks for the answer I will try it right now.

Click to expand...

Let us know