CINXE.COM

H70: Using frame elements to group blocks of repeated material | Techniques for WCAG 2.0

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US"><head><title>H70: Using frame elements to group blocks of repeated material | Techniques for WCAG 2.0 </title><link rel="canonical" href="https://www.w3.org/TR/WCAG20-TECHS/H70.html" /><link rel="stylesheet" type="text/css" href="https://www.w3.org/StyleSheets/TR/2016/W3C-WG-NOTE.css" /><link rel="stylesheet" type="text/css" href="additional.css"/><link rel="stylesheet" type="text/css" href="slicenav.css"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/></head><body class="slices toc-inline"><div id="masthead"><p class="logo"><a href="https://www.w3.org/"><img width="72" height="48" alt="W3C" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C"/></a></p><p class="collectiontitle"><a href="./">Techniques for WCAG 2.0</a></p></div><div id="skipnav"><p class="skipnav"><a href="#maincontent">Skip to Content (Press Enter)</a></p></div><a name="top"> </a><!-- TOP NAVIGATION BAR --><ul id="navigation"><li><strong><a href="Overview.html#contents" title="Table of Contents">Contents</a></strong></li><li><strong><a href="intro.html" title="Introduction to Techniques for WCAG 2.0"><abbr title="Introduction">Intro</abbr></a></strong></li><li><a title="H69: Providing heading elements at the beginning of each section of content" href="H69.html"><strong>Previous: </strong> Technique H69</a></li><li><a title="H71: Providing a description for groups of form controls using fieldset and legend&#xA; elements " href="H71.html"><strong>Next: </strong> Technique H71</a></li></ul><div class="navtoc"><p>On this page:</p><ul id="navbar"><li><a href="#H70-disclaimer">Important Information about Techniques</a></li><li><a href="#H70-applicability">Applicability</a></li><li><a href="#H70-description">Description</a></li><li><a href="#H70-examples">Examples</a></li><li><a href="#H70-resources">Resources</a></li><li><a href="#H70-related-techs">Related Techniques</a></li><li><a href="#H70-tests">Tests</a></li></ul></div><div class="skiptarget"><a id="maincontent">-</a></div> <h1><a name="H70" id="H70"> </a>H70: Using frame elements to group blocks of repeated material</h1><div id="H70-disclaimer"><h2>Important Information about Techniques</h2><p>See <a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/understanding-techniques.html">Understanding Techniques for WCAG Success Criteria</a> for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.0 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.0.</p></div><div class="applicability"><h2 id="H70-applicability">Applicability</h2><div class="textbody"><p>HTML and XHTML documents that use frames </p></div></div><p class="referenced">This technique relates to:</p><ul><li><a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#navigation-mechanisms-skip"> Success Criterion 2.4.1 (Bypass Blocks)</a><ul><li><a href="https://www.w3.org/WAI/WCAG20/quickref/20160105/#navigation-mechanisms-skip"> How to Meet 2.4.1 (Bypass Blocks) </a></li><li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/navigation-mechanisms-skip.html"> Understanding Success Criterion 2.4.1 (Bypass Blocks) </a></li></ul><div class="note"><p class="prefix"><em>Note:</em> This technique must be combined with other techniques to meet <a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#navigation-mechanisms-skip">SC 2.4.1</a>. See <a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/navigation-mechanisms-skip.html"> Understanding SC 2.4.1</a> for details.</p></div></li></ul><h2 id="H70-description">Description</h2><div class="textbody"><p>The objective of this technique is to demonstrate how framesets can be used to group blocks of repeated material. Since most user agents and assistive technology provide a way to navigate from frame to frame, using frames to organize elements can provide a mechanism for easily bypassing blocks of repeated content. If the site uses framesets, organize the blocks of content into separate frames. Make certain that the repeated blocks of content appear in the same frame within the frameset of each Web page. In addition, each frame element must have a title attribute to describe the content of the frame. When frames are properly titled, users can use frame navigation to easily navigate between blocks of content.</p><p>This technique is appropriate when framesets are already used to organize the content of the page; other techniques are preferred for pages that are not already using framesets, because many people using assistive technology have trouble with frames . An advisory technique about using noframes is available in <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html" class="understanding-ref">Success Criterion 1.1.1</a>. </p><p>In HTML5 the <code>frame</code> element is marked as obsolete.</p></div><h2 class="small-head" id="H70-examples">Examples</h2><h3 class="small-head" id="H70-ex1">Example 1</h3><div class="example"><div class="textbody"><p>The following example shows the use of two frames to organize content. The source of the first frame is the Web page, navigation.html, which contains the HTML for the navigation. This frame has a title attribute which identifies it as a navigation bar. The second frame contains the main content of the site as indicated by the source parameter of main.html and the title attribute, "Main News Content" which identifies its function.</p></div><div class="code"><p><strong>Example Code:</strong></p><pre><code>&lt;frameset cols="20%, *"&gt; &lt;frame src="navigation.html" name="navbar" title="Navigation Bar" /&gt; &lt;frame src="main.html" name="maincontent" title="Main News Content" /&gt; &lt;noframes&gt; &lt;p&gt;View &lt;a href="noframe.html"&gt;no frame version&lt;/a&gt;.&lt;/p&gt; &lt;/noframes&gt; &lt;/frameset&gt; </code></pre></div></div><h2 id="H70-resources">Resources</h2><div class="textbody"><p>Resources are for information purposes only, no endorsement implied.</p><ul><li><p> HTML 4.01 <a href="https://www.w3.org/TR/html4/present/frames.html#h-16.2.1"> The FRAMESET element</a> </p></li><li><p> HTML 4.01 <a href="https://www.w3.org/TR/html4/present/frames.html#h-16.2.2"> The FRAME element</a> </p></li><li><p> <a href="http://www.jimthatcher.com/webcourse4.htm">Accessible Navigation</a> </p></li></ul></div><h2 id="H70-related-techs">Related Techniques</h2><div class="textbody"><ul><li><a href="H64.html">H64: Using the title attribute of the frame and iframe elements</a></li></ul></div><h2 id="H70-tests">Tests</h2><div class="textbody"><h3 class="small-head" id="H70-procedure">Procedure</h3><p>If the Web page uses frames to organize content: </p><ol class="enumar"><li><p>Check if repeated blocks of content are organized into separate frames.</p></li><li><p>Check that the frames with repeated content appear in the same location within each frameset.</p></li></ol><h3 class="small-head" id="H70-results">Expected Results</h3><ul><li><p>Checks #1 and #2 are true.</p></li></ul><p>If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.</p></div><!-- BOTTOM NAVIGATION BAR --><ul id="navigationbottom"><li><strong><a href="#top">Top</a></strong></li><li><strong><a href="Overview.html#contents" title="Table of Contents">Contents</a></strong></li><li><strong><a href="intro.html" title="Introduction to Techniques for WCAG 2.0"><abbr title="Introduction">Intro</abbr></a></strong></li><li><a title="H69: Providing heading elements at the beginning of each section of content" href="H69.html"><strong>Previous: </strong> Technique H69</a></li><li><a title="H71: Providing a description for groups of form controls using fieldset and legend&#xA; elements " href="H71.html"><strong>Next: </strong> Technique H71</a></li></ul><div class="footer"><p class="copyright">This Web page is part of <a href="Overview.html">Techniques and Failures for Web Content Accessibility Guidelines 2.0</a> (see the <a href="https://www.w3.org/TR/WCAG20-TECHS/H70.html">latest version of this document</a>). The entire document is also available as a <a href="complete.html">single HTML file</a>. See the <a href="https://www.w3.org/WAI/intro/wcag20">The WCAG 2.0 Documents</a> for an explanation of how this document fits in with other Web Content Accessibility Guidelines (WCAG) 2.0 documents. To send public comments, please follow the <a href="https://www.w3.org/WAI/WCAG20/comments/">Instructions for Commenting on WCAG 2.0 Documents</a>. </p><p class="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> 漏 2016 <a href="https://www.w3.org/"><acronym title="World Wide Web Consortium">W3C</acronym></a><sup>庐</sup> (<a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.</p></div></body></html>

Pages: 1 2 3 4 5 6 7 8 9 10