universal-design-center

  • frames and iframes

Web Accessibility Criteria - Frames

  Description

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.
  • 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.
  • 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.

  Why are frames important?

Accessible frames and iframes are important for assistive technology users who require a screen reader to navigate a page. A screen reader will scan through the page and will announce that frames are present in the page. Adding a titles to a frames or iframes allows assistive technology users the ability to distinguish them. Moreover, including the 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. 

508/WCAG 2.0 Summary of Requirement

Frames shall be titled with text that facilitates frame identification and navigation. (WCAG 2.0 Guideline: H64)

Best Practices

The best practices for accessible frames are the following: 

  • 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.

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.  

Source Code:

<iframe title= "Universal Design Center Homepage" name= "UDC" src= "https://www.csun.edu/universal-design-center" height="500" width="100%" > <a href="https://www.csun.edu/universal-design-center"> Go to Universal Design Center Homepage </a> </iframe>

back to top

How to Test

Manual Testing

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” 

Automated Testing Tools

Web Developer Toolbar

Using the Web Accessibility Toolbar, navigate to the website on your web browser. Select Outline menu and select Outline Frames, this will then highlight all frames present on the webpage.

Web Developer Toolbar- Outline Frames

WebAim WAVE Toolbar

Activate the WAVE toolbar and navigate to the Styles page. In the Details section, navigate to Structural Elements then verify if any frames are present in the page. 

The following are accessibility errors and Structural & Semantic elements found by WAVE: 

Frame missing title errorA frame does not have a "title" attribute or value.

Inline FrameAn inline frame (iframe) is present.

Chrome Ad-on

To remove iframes in a page use the chrome ad-on: Remove iFrame

Compliance Sheriff

To test for frames and iframes in Compliance Sheriff the checkpoint is Section I. For more information regarding the checkpoints visit the CSU ATI Accessibility Requirements page. 

back to top

Resources