Web Accessibility Criteria - Embedded Content

• Introduction
• Best Practices
• Examples
• Testing Methods
• WCAG 2.1 and References 

 Introduction

For multimedia content that is embedded via the <embed> element, an additional element called the <no embed> is required. This element is used to direct a user to alternative content when their browsers cannot support the embed content.  Modern coding practices and video players, however, should prevent users from having to use this alternative. For instance, the <object> element, is the more modern method to embed multimedia files into a webpage.  

Frames are an HTML tag used to separate a webpage into different sections with each section being its own window. Frames can either be a regular frame (<frame>)or an iframe (<Iframe>. An iframe is an inline frame that allows web documents or websites to be embedded within the frame.  Although they are used separate information in a webpage, when it comes to accessibility, frames and iframes may not be the recommended approach because they can present accessibility barriers for active technology and keyboard users. Instead, modern coding methods should be used to separate information.

However, if frames or iframes are used, the following must be considered:

• Frames and iframes must have a descriptive title attribute to notify users what content is within the frame. Adding a title to a frame or iframe allows assistive technology users the ability to distinguish them.
• When frames are present, there should also be a noframes element. When the user disables frames in their web browser, or the browser does not support frames, the noframes element will provide a link or instructions to an alternative view of the content outside of the page. Including the NOFRAMES and/or the text alternative for an iframe will help all users who cannot access the information within the frame because their browser does not support it.
• When iframes are present, it is recommended to place a text or alternate link between the opening <iframe> tag and closing </iframe> tag for browsers that do not support iframe.

Back To Top 

 Best Practices

• The <object> element is used to embed multimedia such as videos, audio, PDF, Flash, and Java applets in a webpage. Content within the element can contain images or non-text content such as links. When applying applets, it is recommended to use the <object> element because the <applet> element is no longer used.
• It is recommended not to use frames or iframes. Instead, use modern coding methods to separate sections. 
• All frames and iframes must have a descriptive title attribute
• Do not disable scrolling for iframes and frames.
• Avoid keyboard traps within a frame or iframe
• Iframes should also be designed with distinct sizes, so when the page is resized, it also resizes with the page.

Back To Top 

 Examples

Below is an example of the Universal Design Center homepage within an iframe. The iframe's title attribute is title="Universal Design Center Homepage". The title allows users to know what content is presented within the iframe. The name of the iframe is name="UDC" this name differentiates the iframe from other iframes that may be present within the page. In addition, the frame has the noframes attribute with a link to the website that is contained in the frame.  

Using noembed element: (resource: Using noembed with embed)

 "noembed" is provided inside an embed

<embed src="../movies/history_of_rome.mov"
height="60" width="144" autostart="false">
<noembed>
<a href="../transcripts/transcript_history_rome.htm">Transcript of "The history of Rome"</a>
</noembed>
</embed>

Back To Top 

 Testing Methods 

1. Verify if embedded content is accessible to all users including assistive technology users. If the content is not accessible, it is recommended to use different embedding methods or multimedia file types. However, if no other alternative is possible, the <noembed> tag must be incorporated. 
2. Review the web pages' source code to view the frame’s title and verify if the title is descriptive. For example, a non-descriptive title for a frame is “Frame 1”. A descriptive frame title would be “Go Matadors Facebook Feed” 

Back To Top 

 WCAG 2.1 and References