title for frame or iframe

(Referring UWEM Test: 12.1_HTML_01)

Test info

Failure cause

Found a frame without title attribute.

The inspected frame or iframe element does not have a title attribute.

Why this may be a barrier

Frames break a web page into different pieces, each containing a different HTML file.
Users who can not visually scan the page to determine the relationship of the page elements have troubles navigating frames. Use meaningful short titles for frames to facilitate frame identification and navigation.

Good Example

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 //EN">
<html>
<head><title>Sample: Page with iframe WITH TITLE-ATTRIBUTE</title></head>
<body>

<h1>The following iframe element has a title</h1>
<iframe width="80%" title="The eGovMon web site" src="http://www.egovmon.no"></iframe>

</body>
</html>

Solution

Do not use frames purely for presentation purposes and when using frames, use the title attribute to name them.

References

Related WCAG 1.0 Checkpoint

12.1

"Title each frame to facilitate frame identification and navigation." [Priority 1]
WCAG 1.0 Checkpoint 12.1

Referring UWEM Test

12.1_HTML_01

This test is targeted to find frames without description.

Related DIFI/norge.no requirements

1.5

Are frames used in such a way that their usage does not create any disadvantages?
norge.no requirement description 1.5

Examples

  • XHTML 1.0 Frameset

    The following example shows a XHTML 1.0 frameset document.
    In the bad example, the title attribute of the frames are missing.

    Bad example:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Frames without titles are not identifiable</title>
    </head>

    <frameset cols="20%, *">
     
    <frame src="navi.html"   />
    <frame src="main.html"   />
     
    <noframes>
    <body>
    Alternative information for accessibility purposes.
    </body>
    </noframes>
    </frameset>
    </html>
    Good example:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Frames with titles are identifiable</title>
    </head>

    <frameset cols="20%, *">
     
    <frame src="navi.html" title="Navigation" />
    <frame src="main.html" title="Main Content" />
     
    <noframes>
    <body>
    Alternative information for accessibility purposes.
    </body>
    </noframes>
    </frameset>
    </html>
    Questions, suggestions, objections? Give us feedback!
  • Definition of an iframe

    In the following bad example, the title of the iframe is missing.

    Bad example:
    <body>
    <iframe src="http://maps.google.com/map?1234" width="100%" height="300"   >
    <p>Alternative information for accessibility purposes.</p>
    </iframe>
    </body>
    Good example:
    <body>
    <iframe src="http://maps.google.com/map?1234" width="100%" height="300" title="Google Map showing X">
    <p>Alternative information for accessibility purposes.</p>
    </iframe>
    </body>
    Questions, suggestions, objections? Give us feedback!
Questions, suggestions, objections? Give us feedback!
show exampleshow
hide examplehide