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
 

Frame Alternatives

As noted earlier, frames can introduce accessibility problems. Although with iframes there are fewer accessibility issues, like frames, they require additional work and management of multiple pages. Frames and iframes should not typically be used for presentation or display, but for content management (iframes work great for advertising and display of content external to your own Web site). If you want a single Web presentation to display similarly to frames, this can usually be accomplished with Cascading Style Sheets and one web page, rather than dealing with the complexities and inaccessibility of frames.

CSS allows for very complex layouts and display. You can use CSS to add scrolling functionality to nearly any page element, thus achieving the presentation and display that frames and iframes provide. This is done with the overflow CSS attribute.

Example

As noted earlier, frames can introduce accessibility problems. Although with iframes there are fewer accessibility issues, like frames, they require additional work and management of multiple pages. Frames and iframes should not typically be used for presentation or display, but for content management (iframes work great for advertising and display of content external to your own Web site). If you want a single Web presentation to display similarly to frames, this can usually be accomplished with Cascading Style Sheets and one web page, rather than dealing with the complexities and inaccessibility of frames.

The code used to display this content is:

<div style="overflow:auto; width:500px; height:90px;"> As noted earlier... </div>

Notice how the above content looks very similar to the iframe content. (iframe adds a border around elements when scroll bars are displayed, whereas CSS does not). With CSS, this can be done by simply adding the overflow:auto style to nearly any HTML element. When overflow is set to auto, scrollbars will only appear if the content cannot be displayed within the area defined. As with iframe, you can force the display of scrollbars with overflow:scroll or disable scrollbars with overflow:hidden. As mentioned previously, when scrollbars are disabled, some users may not be able to view or access all of the content, especially if the content is enlarged for visibility.

Here is the code for the CSS-driven “iframe”:

<div class="example">

<p> <span class="title"><strong>Example</strong></span> </p>

<div style="overflow:auto; width:500px; height:90px; margin-bottom:5px; background-color:#ffe;">

<p>As noted earlier, frames can introduce accessibility problems. Although with iframes there are fewer accessibility issues, like frames, they require additional work and management of multiple pages. Frames and iframes should not typically be used for presentation or display, but for content management (iframes work great for advertising and display of content external to your own Web site). If you want a single Web presentation to display similarly to frames, this can usually be accomplished with Cascading Style Sheets and one web page, rather than dealing with the complexities and inaccessibility of frames.</p>

<p>The code used to display this content is:</p>

<div class="code_sample">

<code>&lt;div style="overflow:auto; width:500px; height:90px;"&gt; As noted earlier...

&lt;/div&gt;</code>

</div>

</div>

</div>

There are many advantages of using CSS instead of frames to control the display of content. All of the content is on the same page giving the developer fewer files to keep track of. Instead of forcing a screen reader user to navigate between frames, the page is read normally. A screen reader user will likely be unaware that scrolling elements are even present. Using CSS also solves many of the problems caused with linking and navigating within frames and iframes - the address in the address bar is accurate, links to external sites or content will not be embedded within your framed layout, it is easier to bookmark, and it is easier to keep track of the pages visited.

Enabling scrolling content with CSS may, however, cause some usability problems. The user may not be aware that they need to scroll and may not be able to view all of the content. If multiple scrollbars display, it may be confusing for the user to access the content. These problems are also apparent when using frames and iframes, and as such, the advantages of using CSS should cause it to be a first alternative to frames-based layouts.