How to add the "title" attribute to the iFrame code?

  • Profile Image
    raybanfrisco
    Asked on August 22, 2019 at 05:32 PM

    Hello,

    This is an AMP page. I'm using the iframe method for the Jotform. I have the following code...

    <amp-iframe id="JotFormIFrame-83594354508162" width="200" height="360" sandbox="allow-scripts allow-same-origin allow-popups allow-forms" layout="responsive" src="https://form.jotform.com/83594354508162" title="Contact Us!"></amp-iframe>

    I'm getting dinged in Chrome Lighthouse about my iframe not having a title attribute. I've attached screenshots.

    The url is https://www.texasveteranshomeloans.com/amp/

    The contact form is in the sidebar so it is on every page in the website.

    AMP TVHL Sidebar Contact Form

    Any help would be appreciated so the the page passes the Accessibility criteria.

    Ray Moore

    Screenshot
  • Profile Image
    Kevin_G
    Answered on August 22, 2019 at 06:20 PM

    I have checked the iFrame code provided by the publish wizard and it includes the title attribute: 

    15665120492019-08-22_16h06_58.png

    Guide: https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code 

    Is the issue that the title attribute is there on the code you add, but does not appear when you check the source code of your page? 

    If so, I would recommend you to instead double check on your site builder or editor you're using and make sure the code is not being stripped from there. 

  • Profile Image
    raybanfrisco
    Answered on August 22, 2019 at 07:16 PM

    It is not being stripped. See screenshot.

    1566515778chrome-lighthouse-audit-3.jpg

  • Profile Image
    EltonCris
    Answered on August 22, 2019 at 08:12 PM

    I think it's the way how your embed method works. The title is clearly defined but it does not carry the iframe title attribute when it generates a second frame. You can see this in the following screenshot.

    Our embed codes don't have this problem. It always carries the Title attribute so we suggest using the default embed code if that's possible. Or, you could review how your <amp-iframe embed method works and ensure that it would also carry the title attribute.