iFrames in Canvas

iFrames in Canvas

An inline frame (iframe) is an HTML element that embeds another webpage inside a page. Increasingly, GenAI built activities and content are being created and embedded into Canvas. This guide explains what to check before you embed learning activities and content into Canvas via iframe whether generated by AI or another external platform.

Policy Alignment

 

Course content must (from Course Design and Management Manual):

The University is committed to fostering a culture of innovation by encouraging experimentation with new GenAI technologies in teaching methodologies (Policy on the use of Generative AI in Teaching, Learning and Assessment).

However, Course Coordinators presenting content and learning activities via iframe, whether these are AI generated or otherwise, must ensure that use aligns with their responsibilities as outlined in the Course Design and Management Manual.

Additional information is available in the Course Site Quality Principles, particularly the sections on Course Materials, Generative Artificial Intelligence, and Accessibility.

What’s happening when you embed

When you paste an embed code into Canvas, you’re usually inserting an iframe which functions as a window inside the Canvas page that loads content from another website. The content isn't copied into Canvas. Every time a student opens the page, Canvas reaches out and pulls the content in. Canvas has no control over what’s inside that window.

Things worth thinking through

An embedded tool has its own interface, navigation and visual style which then sits inside Canvas’ interface, navigation and visual style. Students are working out two systems at once and determining what is interactive and what is not. The seam between systems can quietly add effort that has nothing to do with the learning task. Students regularly feedback via surveys that they value consistency to navigate content within the virtual learning environment. Unnecessary changes in design can interfere with this ease of navigation for students.

It’s worth asking whether a student new to this gets confused about whether they can interact with the content or if the content is static but, in a style, different from the surrounding content.

An iframe pulling in third party tools that are not licensed sits outside of the tools supported. If the activity or content breaks, behaves oddly or a student can't access it there isn't a support team that can help rectify the issue.

It’s worth asking if this tool breaks, can I fix it and how quickly? Is it a set of instructions students may need for an assignment? Or is an optional engagement activity that is not required? Do I have a fallback if the embed fails?

Canvas’ accessibility tools don't generally extend to what’s inside an iframe. The embedded content is a separate site with its own accessibility profile which may or may not be compliant. If creating activities using GenAI you should use a prompt such as:

“Conduct an accessibility review against WCAG 2.2 principles, Universal Design for Learning, screen reader compatibility, cognitive load considerations and mobile device usability. Identify accessibility issues, revise the activity to address them, and then provide the final version with an accessibility rationale.

Highlight any elements that may disadvantage students with visual, hearing, motor, neurodivergent, language or connectivity-related challenges and provide an accessible alternative. “

This prompt won’t guarantee that the content generated by AI is compliant, however, may help.

If you are using other tools, make sure you review the vendor’s accessibility compliance.

Canvas updates its security settings periodically, and an external tool can change their embed code, URL structure, or access rules. An iframe that works perfectly in week 1 can silently stop loading in week 6 with no error message or alert to the creator. Canvas may also change how this content can be used in practice and updates directly to a source file can break any existing iframe embeds throughout the course.

It’s worth asking whether you checked the activity works when students are using it, not just when you first build it.

Ensure you are aware of the security risks of embedding external content into Canvas. Any activity that collects input from students may send that data to an external server. Know what the code does. Avoid use of any external libraries as the way they handle data could change at any time.

Keep files self-contained, ensure the HTML contains no answer keys or sensitive information and consider what external addresses the activity contacts before embedding.

The following are helpful resources when considering data security:

And if in doubt, check.