Can you use an IFRAME on a Section 508-compliant site?

Yes, if you do it carefully, and mitigate the potential problems it can cause for some disabled users. The 508 Standards, Section 1194.22 (a), say that

A text equivalent for every non-text element shall be provided (e.g., via “alt”, “longdesc”, or in element content).

IFRAME components fall under this Section under Rule 1.1.6:

“All IFRAME elements are required to contain element content.”

Since the contents of an IFRAME could be anything, the mitigation approach will depend on the contents. For example, just as you must provide a text description of the contents of a picture, you may need to provide a text description of the content of an IFRAME. You can also mitigate the problem and increase accessibility by providing the same content in alternate forms that may be easier for some users to consume. For example, if you are presenting a graph, consider describing the graph as well, using plain text that can be read by a text reading device. You could also convey the graph information in other ways, such as providing access to the raw data as a text file, .csv file, or other format that a user could examine directly. Perhaps a Section 508-compliant PDF version would be helpful.

Don’t let these issues scare you off from using IFRAMES entirely. Many U.S. government web sites that are subject to Section 508 compliance use IFRAMES. Here is an example of IFRAME use on the home page for fema.gov: [All screenshots shown were taken 20 September 2012. Source code displays were done using Chrome.]

Picture of the source code for the FEMA.gov home page

FEMA.gov IFRAME code (click to enlarge)

The Foodsafety.gov website promotes the use of IFRAMES for embedding its Food Safety Recall Widget:

foodsafety.gov example

Foodsafety.gov IFRAME use (click to enlarge)

The FDA promotes the use of iframes for embedding their Drug Information Widget:
[page source: http://www.fda.gov/Drugs/ucm153379.htm]

Code to insert FDA widget via IFRAME

Code to insert FDA widget via IFRAME (click to enlarge)

They also use IFRAMES within the source code for their own pages:

Source code sample showing IFRAME use on fda.gov

Source code sample showing IFRAME use on fda.gov (click to enlarge)

Let’s not forget the Department of Defense, which encourages the use of IFRAMES to display their own Defense News Widget, and uses an IFRAME to run the widget on their own site:
[Page source: view-source:http://www.defense.gov/home/features/widgets/]

Department of Defense example use of IFRAMES

Department of Defense example use of IFRAMES (click to enlarge)

Unfortunately, using an IFRAME without any mitigating features may cause a page to fail validation on automated Section 508 checkers. The DOD page gets a “Failed Automated Verification” report when checked via cynthiasays.com:

Cynthasays.com report showing a Department of Defense page using an IFRAME failing Section 508 validation

DOD fails automatic 508 validation (click to enlarge)

Here is the detailed failure report showing that the DOD page is using IFRAMES more than once. Keep in mind that automated checkers can’t always tell if mitigating factors are present in the site design that make IFRAME use acceptable. Sometimes you just need to fall back on human intelligence to determine if a site is actually complaint or not.

Cynthiasays.com report showing IFRAME compliance problems

Cynthiasays.com report showing IFRAME compliance problems (click to enlarge)

Print Friendly

Leave a Reply

Your email address will not be published. Required fields are marked *