CINXE.COM
Understanding Success Criterion 1.3.2 | Understanding 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> Understanding Success Criterion 1.3.2 | Understanding WCAG 2.0 </title><link rel="canonical" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.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/2021/W3C-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/2021/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><!-- 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 Understanding WCAG 2.0"><abbr title="Introduction">Intro</abbr></a></strong></li><li><a title="Understanding SC 1.3.1 [Info and Relationships]" href="content-structure-separation-programmatic.html"><strong>Previous: </strong>SC 1.3.1 [Info and Relationships]</a></li><li><a title="Understanding SC 1.3.3 [Sensory Characteristics]" href="content-structure-separation-understanding.html"><strong>Next: </strong>SC 1.3.3 [Sensory Characteristics]</a></li></ul><div class="navtoc"><p>On this page:</p><ul id="navbar"><li><a href="#content-structure-separation-sequence-intent-head">Intent</a></li><li><a href="#content-structure-separation-sequence-examples-head">Examples</a></li><li><a href="#content-structure-separation-sequence-resources-head">Related Resources</a></li><li><a href="#content-structure-separation-sequence-techniques-head">Techniques & Failures</a></li><li><a href="#key-terms">Key terms</a></li></ul></div> <div class="skiptarget"><a id="maincontent">-</a></div><h1><a name="content-structure-separation-sequence" id="content-structure-separation-sequence"> </a><strong>Meaningful Sequence</strong><span class="screenreader">:</span><br/>Understanding <abbr title="Success Criterion">SC</abbr> 1.3.2</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-sequence">1.3.2</a> Meaningful Sequence:</strong> When the sequence in which content is presented affects its meaning, a <a href="#correct-reading-sequencedef" class="termref">correct reading sequence</a> can be <a href="#programmaticallydetermineddef" class="termref">programmatically determined</a>. (Level A) </p></div></blockquote><div class="intent"><h2 id="content-structure-separation-sequence-intent-head" class="section"> Intent of this Success Criterion </h2><p>The intent of this Success Criterion is to enable a user agent to provide an alternative presentation of content while preserving the reading order needed to understand the meaning. It is important that it be possible to programmatically determine at least one sequence of the content that makes sense. Content that does not meet this Success Criterion may confuse or disorient users when assistive technology reads the content in the wrong order, or when alternate style sheets or other formatting changes are applied. </p><p>A sequence is <em>meaningful</em> if the order of content in the sequence cannot be changed without affecting its meaning. For example, if a page contains two independent articles, the relative order of the articles may not affect their meaning, as long as they are not interleaved. In such a situation, the articles themselves may have meaningful sequence, but the container that contains the articles may not have a meaningful sequence.</p><p>The semantics of some elements define whether or not their content is a meaningful sequence. For instance, in HTML, text is always a meaningful sequence. Tables and ordered lists are meaningful sequences, but unordered lists are not.</p><p>The order of content in a sequence is not always meaningful. For example, the relative order of the main section of a Web page and a navigation section does not affect their meaning. They could occur in either order in the programmatically determined reading sequence. As another example, a magazine article contains several callout sidebars. The order of the article and the sidebars does not affect their meaning. In these cases there are a number of different reading orders for a Web page that can satisfy the Success Criterion. </p><p>For clarity:</p><ol class="enumar"><li><p>Providing a particular linear order is only required where it affects meaning.</p></li><li><p>There may be more than one order that is "correct" (according to the WCAG 2.0 definition).</p></li><li><p>Only one correct order needs to be provided.</p></li></ol><div class="benefits"><h3 id="content-structure-separation-sequence-57-head" class="div3head"> Specific Benefits of Success Criterion 1.3.2: </h3><ul><li><p>This Success Criterion may help people who rely on assistive technologies that read content aloud. The meaning evident in the sequencing of the information in the default presentation will be the same when the content is presented in spoken form. </p></li></ul></div></div><div class="div3"><h2 id="content-structure-separation-sequence-examples-head" class="section"> Examples of Success Criterion 1.3.2</h2><ul><li><p> <strong>Example 1:</strong> In a multi-column document, the linear presentation of the content flows from the top of a column to the bottom of the column, then to the top of the next column.</p></li><li><p> <strong>Example 2:</strong> CSS is used to position a navigation bar, the main story on a page, and a side story. The visual presentation of the sections does not match the programmatically determined order, but the meaning of the page does not depend on the order of the sections.</p></li></ul></div><div class="resources"><h2 id="content-structure-separation-sequence-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-sequence-techniques-head" class="section"> Techniques and Failures for Success Criterion 1.3.2 - Meaningful Sequence</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/2023/NOTE-UNDERSTANDING-WCAG20-20230921/understanding-techniques.html">Understanding Techniques for WCAG Success Criteria</a>, particularly the "Other Techniques" section.</p><div class="boxed"><h3 id="content-structure-separation-sequence-58-head" class="div3head"> Sufficient Techniques </h3><ol class="enumar"><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G57" class="tech-ref">G57: Ordering the content in a meaningful sequence</a> for all the content in the Web page </p></li><li><p>Marking sequences in the content as meaningful using one of the following techniques <strong>AND</strong> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G57" class="tech-ref">G57: Ordering the content in a meaningful sequence</a> for those sequences </p><ul><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H34" class="tech-ref">H34: Using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction inline</a> (HTML) </p></li><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H56" class="tech-ref">H56: Using the dir attribute on an inline element to resolve problems with nested directional runs</a> (HTML) </p></li><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/C6" class="tech-ref">C6: Positioning content based on structural markup</a> (CSS) </p></li><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/C8" class="tech-ref">C8: Using CSS letter-spacing to control spacing within a word</a> (CSS) </p></li></ul></li><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/C27" class="tech-ref">C27: Making the DOM order match the visual order</a> (CSS) </p></li><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/FLASH15" class="tech-ref">FLASH15: Using the tabIndex property to specify a logical reading order and a logical tab order in Flash</a> (Flash) </p></li><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/PDF3" class="tech-ref">PDF3: Ensuring correct tab and reading order in PDF documents</a> (PDF) </p></li><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/SL34" class="tech-ref">SL34: Using the Silverlight Default Tab Sequence and Altering Tab Sequences With Properties</a> (Silverlight) </p></li></ol></div><div class="boxed"><h3 id="content-structure-separation-sequence-59-head" class="div3head"> Additional Techniques (Advisory) for 1.3.2</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 left-justified text for languages that are written left to right and right-justified text for languages that are written right-to-left (future link) </p></li><li><p> Providing a link to linearized rendering (future link) </p></li><li><p> Providing a style switcher between style sheets that affect presentation order (future link) </p></li></ul></div><div class="boxed"><h3 id="content-structure-separation-sequence-60-head" class="div3head"> Common Failures for <abbr title="Success Criterion">SC</abbr> 1.3.2</h3><p>The following are common mistakes that are considered failures of Success Criterion 1.3.2 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/F34" class="tech-ref">F34: Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to format tables in plain text content</a> </p></li><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/F33" class="tech-ref">F33: Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to create multiple columns in plain text content</a> </p></li><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/F32" class="tech-ref">F32: Failure of Success Criterion 1.3.2 due to using white space characters to control spacing within a word</a> </p></li><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/F49" class="tech-ref">F49: Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized </a> </p></li><li><p> <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/F1" class="tech-ref">F1: Failure of Success Criterion 1.3.2 due to changing the meaning of content by positioning information with CSS</a> </p></li></ul></div></div><div class="div3"><h2 id="key-terms" class="terms">Key Terms</h2><dl class="keyterms"><dt class="label"><a name="correct-reading-sequencedef" id="correct-reading-sequencedef"> </a>correct reading sequence</dt><dd><p>any sequence where words and paragraphs are presented in an order that does not change the meaning of the content </p></dd><dt class="label"><a name="programmaticallydetermineddef" id="programmaticallydetermineddef"> </a>programmatically determined (programmatically determinable)</dt><dd><p>determined by software from author-supplied data provided in a way that different <a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#useragentdef" class="termref">user agents</a>, including <a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#atdef" class="termref">assistive technologies</a>, can extract and present this information to users in different modalities </p><div class="example"><p class="prefix"><em>Example 1: </em>Determined in a markup language from elements and attributes that are accessed directly by commonly available assistive technology.</p><p class="prefix"><em>Example 2: </em>Determined from technology-specific data structures in a non-markup language and exposed to assistive technology via an accessibility <acronym title="Application Programming Interface">API</acronym> that is supported by commonly available assistive technology. </p></div></dd></dl></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 Understanding WCAG 2.0"><abbr title="Introduction">Intro</abbr></a></strong></li><li><a title="Understanding SC 1.3.1 [Info and Relationships]" href="content-structure-separation-programmatic.html"><strong>Previous: </strong>SC 1.3.1 [Info and Relationships]</a></li><li><a title="Understanding SC 1.3.3 [Sensory Characteristics]" href="content-structure-separation-understanding.html"><strong>Next: </strong>SC 1.3.3 [Sensory Characteristics]</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-sequence.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> 漏 2023 <a href="https://www.w3.org/">World Wide Web Consortium</a>. <abbr title="World Wide Web Consortium">W3C</abbr><sup>庐</sup> <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>