CINXE.COM

<?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> Understanding Success Criterion 1.3.3 | Understanding WCAG 2.0 </title><link rel="canonical" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-understanding.html" /><link media="print" type="text/css" rel="stylesheet" href="print.css"/><link rel="stylesheet" type="text/css" href="additional.css"/><link rel="stylesheet" type="text/css" href="https://www.w3.org/StyleSheets/TR/2016/W3C-WG-NOTE" /><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="Overview.html">Understanding WCAG 2.0</a></p></div><div id="skipnav"><p class="skipnav"><a href="#maincontent">Skip to Content (Press Enter)</a></p></div><div class="mainbody"><a name="top"> </a><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 Understanding WCAG 2.0"><abbr title="Introduction">Intro</abbr></a></strong></li><li><a title="Understanding SC 1.3.2 [Meaningful Sequence]" href="content-structure-separation-sequence.html"><strong>Previous: </strong>SC 1.3.2 [Meaningful Sequence]</a></li><li><a title="Understanding Guideline 1.4 [Distinguishable]" href="visual-audio-contrast.html"><strong>Next: </strong>Guideline 1.4 [Distinguishable]</a></li></ul><div class="navtoc"><p>On this page:</p><ul id="navbar"><li><a href="#content-structure-separation-understanding-intent-head">Intent</a></li><li><a href="#content-structure-separation-understanding-examples-head">Examples</a></li><li><a href="#content-structure-separation-understanding-resources-head">Related Resources</a></li><li><a href="#content-structure-separation-understanding-techniques-head">Techniques & Failures</a></li></ul></div> <div class="skiptarget"><a id="maincontent">-</a></div><h1><a name="content-structure-separation-understanding" id="content-structure-separation-understanding"> </a><strong>Sensory Characteristics</strong><span class="screenreader">:</span><br/>Understanding <abbr title="Success Criterion">SC</abbr> 1.3.3</h1><blockquote class="scquote"><div> <p class="sctxt"><strong class="sc-handle"><a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#content-structure-separation-understanding">1.3.3</a> Sensory Characteristics:</strong> Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound. (Level A) </p><div class="note"><p class="prefix"><em>Note: </em>For requirements related to color, refer to <em><a href="visual-audio-contrast.html">Guideline 1.4</a></em>.</p></div></div></blockquote><div class="intent"><h2 id="content-structure-separation-understanding-intent-head" class="section"> Intent of this Success Criterion </h2><p>The intent of this Success Criterion is to ensure that all users can access instructions for using the content, even when they cannot perceive shape or size or use information about spatial location or orientation. Some content relies on knowledge of the shape or position of objects that are not available from the structure of the content (for example, "round button" or "button to the right"). Some users with disabilities are not able to perceive shape or position due to the nature of the assistive technologies they use. This Success Criterion requires that additional information be provided to clarify anything that is dependent on this kind of information. </p><p>Providing information using shape and/or location, however, is an effective method for many users including those with cognitive limitations. This provision should not discourage those types of cues as long as the information is also provided in other ways. </p><p>In some languages, it is commonly understood that "above" refers to the content previous to that point in the content and "below" refers to the content after that point. In such languages, if the content being referenced is in the appropriate place in the reading order and the references are unambiguous, statements such as "choose one of the links below" or "all of the above" would conform to this Success Criterion. </p><p>WCAG was designed to apply only to controls that were displayed on a web page. The intent was to avoid describing controls solely via references to visual or auditory cues. When applying this to instructions for operating physical hardware controls (e.g. a web kiosk with dedicated content), tactile cues on the hardware might be described (e.g. the arrow shaped key, the round key on the right side). This success criterion is not intended to prevent the use of tactile cues in instructions.</p><div class="benefits"><h3 id="content-structure-separation-understanding-61-head" class="div3head"> Specific Benefits of Success Criterion 1.3.3: </h3><ul><li><p>People who are blind and people who have low vision may not be able to understand information if it is conveyed by shape and/or location. Providing additional information other than shape and/or location will allow them to understand the information conveyed by shape and/or alone. </p></li></ul></div></div><div class="div3"><h2 id="content-structure-separation-understanding-examples-head" class="section"> Examples of Success Criterion 1.3.3</h2><ul><li><p> <strong> Example 1: A schedule of competitive events uses color and shape to distinguish the time of each event </strong> </p><p> A table presents a list of times across the top row and a list of events in the first vertical column. The cell corresponding to the time of a particular event has a specific background color and diamond shaped glyph so it can be identified by color and shape. </p></li><li><p> <strong> Example 2: An on-line multi-page survey </strong> </p><p> An on-line multi-page survey uses a link implemented as a green arrow icon placed in the lower right hand corner of the content to move from one survey page to the next. The arrow is clearly labeled with "Next" and the instructions state, "To move to the next section of the survey, select the green arrow icon labeled 'Next' in the lower right corner below the last survey question." This example uses both positioning, color and labeling to help identify the icon. </p></li></ul></div><div class="resources"><h2 id="content-structure-separation-understanding-resources-head" class="section"> Related Resources </h2><p>Resources are for information purposes only, no endorsement implied.</p><p>(none currently documented)</p></div><div class="div3"><h2 id="content-structure-separation-understanding-techniques-head" class="section"> Techniques and Failures for Success Criterion 1.3.3 - Sensory Characteristics</h2><p>Each numbered item in this section represents a technique or combination of techniques that the <acronym title="Web Content Accessibility Guidelines">WCAG</acronym> Working Group deems sufficient for meeting this Success Criterion. However, it is not necessary to use these particular techniques. For information on using other techniques, see <a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/understanding-techniques.html">Understanding Techniques for WCAG Success Criteria</a>, particularly the "Other Techniques" section.</p><div class="boxed"><h3 id="content-structure-separation-understanding-62-head" class="div3head"> Sufficient Techniques </h3><ol class="enumar"><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G96" class="tech-ref">G96: Providing textual identification of items that otherwise rely only on sensory information to be understood</a> </p></li></ol></div><div class="boxed"><h3 id="content-structure-separation-understanding-63-head" class="div3head"> Additional Techniques (Advisory) for 1.3.3</h3><p>Although not required for conformance, the following additional techniques should be considered in order to make content more accessible. Not all techniques can be used or would be effective in all situations.</p><ul><li><p>Using an image with a text alternative for graphical symbols instead of a Unicode font glyph with the desired graphical appearance but different meaning (future link) </p></li></ul></div><div class="boxed"><h3 id="content-structure-separation-understanding-64-head" class="div3head"> Common Failures for <abbr title="Success Criterion">SC</abbr> 1.3.3</h3><p>The following are common mistakes that are considered failures of Success Criterion 1.3.3 by the <acronym title="Web Content Accessibility Guidelines">WCAG</acronym> Working Group.</p><ul><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/F14" class="tech-ref">F14: Failure of Success Criterion 1.3.3 due to identifying content only by its shape or location</a> </p></li><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/F26" class="tech-ref">F26: Failure of Success Criterion 1.3.3 due to using a graphical symbol alone to convey information</a> </p></li></ul></div></div><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 Understanding WCAG 2.0"><abbr title="Introduction">Intro</abbr></a></strong></li><li><a title="Understanding SC 1.3.2 [Meaningful Sequence]" href="content-structure-separation-sequence.html"><strong>Previous: </strong>SC 1.3.2 [Meaningful Sequence]</a></li><li><a title="Understanding Guideline 1.4 [Distinguishable]" href="visual-audio-contrast.html"><strong>Next: </strong>Guideline 1.4 [Distinguishable]</a></li></ul></div><div class="footer"><p class="copyright">This Web page is part of <a href="Overview.html">Understanding WCAG 2.0: A guide to understanding and implementing WCAG 2.0</a> (see the <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-understanding.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>