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>
Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.