Skip to Local Navigation
Skip to Content
California State University, Long Beach
Web Comm, California State University, Long Beach
Print this pageAdd this page to your favoritesSelect a font sizeSelect a small fontSelect a medium fontSelect a large font
 

Inline Frame Accessibility

Inline frames are increasing in popularity. They allow the inclusion of distinct web documents (and even entire web sites) within a subwindow of a parent web page without the hassle of defining a frameset document.

<iframe src="webpage.htm">

<p>Content within the iframe tags will be viewed on browsers that do not support iframes and ignored by those that do support iframes.</p>

</iframe>

Most up-to-date browsers support inline frames. If a browser does not support inline frames or if the user chooses to disable them, then alternative content can be provided between the iframe tags.

Code for this iframe:

<iframe src="http://www.csulb.edu/committees/webcomm/index.php?section=accessibilityTutorials-frames-iframe-inline" width="600" height="200">

<p>If you can see this text, your browser does not support iframes. <a href="http://www.csulb.edu/committees/webcomm/index.php?section=accessibilityTutorials/frames/iframe/inline.htm">View the content of this inline frame</a> within your browser.</p>

</iframe>

When using iframes, you should ensure that the alternative content (the content between the iframe tags) is useful. In most cases, you should provide a link to the content that is presented within the iframe so that the user can access it directly. The iframe tag can be given the title and longdesc attributes (though longdesc is not yet supported) to provide additional descriptions and details of the iframe contents.

Links within the iframe element are accessible via the keyboard as if the content were within the web page containing the iframe. Links within the iframe will, by default, open within the defined iframe area. This may pose a problem if there are links to external web sites as the content will be displayed within your parent web page.

There are three options for controlling scrolling within the iframe element, auto, yes, and no. When scrolling="auto" is added (this is the default), vertical and/or horizontal scroll bars will only display if the content cannot adequately display within the specified size dimensions of the iframe. If you set scrolling="yes", both vertical and horizontal scroll bars will appear regardless of whether they are needed. Setting scrolling="no" will disable the display of scroll bars, even if all of the content will not display within the iframe area. Because many users enlarge fonts and other page elements to increase visibility and accessibility, you should not disable scrolling for iframes (or frames, for that matter). The default option (auto) is usually the best option. You should also, when possible, design the iframe with relative sizes so the iframe element itself will scale as the page and it's contents are resized.

Next Section: Frame Alternatives