How to fix the error "Iframe must have accessible name"

Overview: Screen Recording 2022-09-26 at 03.31.53 PM

Key Takeaways:
All IFrames should have an aria-label attribute, with text that describes the content of the frame

What to check:

• Does the page contain any Iframes

• Does each Iframe have an aria-label attribute 

• Does the aria-label attribute describe the functionality or content of the Iframe 

<!-- ? Incorrect, does not contain aria-label attribute -->
<iframe

        width="853"
        height="480"
        src="https://www.youtube.com/embed/CD-2cOqhUJI"
        frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen>
</iframe>
<!-- ✅ Correct implementation contains aria-label with a detailed description fo the content-->
<iframe
        aria-label="YouTube video describing the TruWest Card manager app" 
        width="853"
        height="480"
        src="https://www.youtube.com/embed/CD-2cOqhUJI"
        frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen>
</iframe>