Add note about accessibility as requested by WAI-PF. Improve wording on existing note about a11y and 'order'.

--HG--
extra : rebase_source : 975cedfe5c0825d167568373a4cca2a48322bc21

Author: fantasai

css3-flexbox/Overview.html

@@ -206,11 +206,11 @@
 
    <h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1>
 
-   <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 7 August 2012</h2>
+   <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 8 August 2012</h2>
 
    <dl>
     <dt>This version:
-     <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120807/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120807/</a>-->
+     <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120808/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120808/</a>-->
 
 
     <dd><a
@@ -1301,6 +1301,19 @@ <h2 id=ordering-and-orientation><span class=secno>5. </span> Ordering and
    class=property>flex-wrap</code></a>’, and ‘<a href="#order"><code
    class=property>order</code></a>’ properties.
 
+  <p class=note> The reordering capabilities of flex layout intentionally
+   affect <em>only the visual rendering</em>, leaving speech order and
+   navigation based on the source order. This allows authors to manipulate
+   the visual presentation while leaving the source order intact for non-CSS
+   UAs and for linear models such as speech and sequential navigation. See <a
+   href="#order-accessibility">Reordering and Accessibility</a> and the <a
+   href="#overview">Flex Layout Overview</a> for examples that use this
+   dichotomy to improve accessibility.
+
+  <p> Authors <em>must not</em> use these techniques as a substitute for
+   correct source ordering, as that can ruin the accessibility of the
+   document.
+
   <h3 id=flex-direction-property><span class=secno>5.1. </span> Flex Flow
    Direction: the ‘<a href="#flex-direction"><code
    class=property>flex-direction</code></a>’ property</h3>
@@ -1723,8 +1736,8 @@ <h4 id=order-accessibility><span class=secno>5.4.1. </span>Reordering and
    Accessibility</h4>
 
   <p> The ‘<a href="#order"><code class=property>order</code></a>’
-   property <em>must not</em> affect ordering in non-visual media (such as <a
-   href="http://www.w3.org/TR/css3-speech/">speech</a>). Similarly, ‘<a
+   property <em>does not</em> affect ordering in non-visual media (such as <a
+   href="http://www.w3.org/TR/css3-speech/">speech</a>). Likewise, ‘<a
    href="#order"><code class=property>order</code></a>’ does not affect the
    default traversal order of sequential navigation modes (such as cycling
    through links, see e.g. ‘<code class=property>nav-index</code>’ <a
@@ -1737,10 +1750,11 @@ <h4 id=order-accessibility><span class=secno>5.4.1. </span>Reordering and
    class=property>order</code></a>’ to perform logical reordering are
    non-conforming.
 
-  <p class=note> This is so non-visual media and non-CSS UAs, which typically
-   present content linearly, can be catered to with a logical source order,
+  <p class=note> This is so that non-visual media and non-CSS UAs, which
+   typically present content linearly, can rely on a logical source order,
    while ‘<a href="#order"><code class=property>order</code></a>’ is used
-   to rearrange the visual order.
+   to tailor the visual order. (Since visual perception is two-dimensional
+   and non-linear, the desired visual order is not always logical.)
 
   <div class=example>
    <p> Many web pages have a similar shape in the markup, with a header on
@@ -4000,7 +4014,7 @@ <h2 class=no-num id=property>Property index</h2>
 
      <td>no
 
-     <td>specified value
+     <td>
 
      <td>visual
 
@@ -4015,7 +4029,7 @@ <h2 class=no-num id=property>Property index</h2>
 
      <td>no
 
-     <td>specified value
+     <td>
 
      <td>visual
 
@@ -4030,31 +4044,24 @@ <h2 class=no-num id=property>Property index</h2>
 
      <td>no
 
-     <td>‘auto’ computes to parent's ‘align-items’; otherwise as
-      specified
+     <td>
 
      <td>visual
 
     <tr>
      <th><span class=property>display</span>
 
-     <td>flex | inline-flex
-
-    <tr>
-     <th><a class=property href="#flex">flex</a>
-
-     <td>none | [ &lt;&apos;flex-grow&apos;> &lt;&apos;flex-shrink&apos;>? ||
-      &lt;&apos;flex-basis&apos;> ]
+     <td>
 
-     <td>see individual properties
+     <td>
 
-     <td>flex items
+     <td>
 
-     <td>see individual properties
+     <td>
 
-     <td>see individual properties
+     <td>
 
-     <td>visual
+     <td>
 
     <tr>
      <th><a class=property href="#flex-basis-propdef">flex-basis</a>
@@ -4067,10 +4074,10 @@ <h2 class=no-num id=property>Property index</h2>
 
      <td>no
 
-     <td>as specified, with lengths made absolute
-
      <td>relative to the flex container's inner main size
 
+     <td>visual
+
     <tr>
      <th><a class=property href="#flex-direction">flex-direction</a>
 
@@ -4082,7 +4089,7 @@ <h2 class=no-num id=property>Property index</h2>
 
      <td>no
 
-     <td>specified value
+     <td>
 
      <td>visual
 
@@ -4097,7 +4104,7 @@ <h2 class=no-num id=property>Property index</h2>
 
      <td>see individual properties
 
-     <td>see individual properties
+     <td>
 
      <td>visual
 
@@ -4112,7 +4119,7 @@ <h2 class=no-num id=property>Property index</h2>
 
      <td>no
 
-     <td>specified value
+     <td>
 
      <td>visual
 
@@ -4127,7 +4134,23 @@ <h2 class=no-num id=property>Property index</h2>
 
      <td>no
 
-     <td>specified value
+     <td>
+
+     <td>visual
+
+    <tr>
+     <th><a class=property href="#flex">flex</a>
+
+     <td>none | [ &lt;&apos;flex-grow&apos;> &lt;&apos;flex-shrink&apos;>? ||
+      &lt;&apos;flex-basis&apos;> ]
+
+     <td>see individual properties
+
+     <td>flex items
+
+     <td>see individual properties
+
+     <td>
 
      <td>visual
 
@@ -4142,7 +4165,7 @@ <h2 class=no-num id=property>Property index</h2>
 
      <td>no
 
-     <td>specified value
+     <td>
 
      <td>visual
 
@@ -4157,19 +4180,25 @@ <h2 class=no-num id=property>Property index</h2>
 
      <td>no
 
-     <td>specified value
+     <td>
 
      <td>visual
 
     <tr>
      <th><span class=property>min-width</span>, <span
       class=property>min-height</span>
 
-     <td>auto
+     <td>
 
-     <td>auto
+     <td>
 
-     <td>the percentage as specified or the absolute length or a keyword
+     <td>
+
+     <td>
+
+     <td>
+
+     <td>
 
     <tr>
      <th><a class=property href="#order">order</a>
@@ -4182,7 +4211,7 @@ <h2 class=no-num id=property>Property index</h2>
 
      <td>no
 
-     <td>specified value
+     <td>
 
      <td>visual
   </table>

css3-flexbox/Overview.src.html

@@ -940,6 +940,21 @@ <h2>
 		such as hacks using the 'float' and 'clear' properties.
 		This functionality is exposed through the 'flex-direction', 'flex-wrap', and 'order' properties.
 
+	<p class="note">
+		The reordering capabilities of flex layout intentionally affect
+		<em>only the visual rendering</em>,
+		leaving speech order and navigation based on the source order.
+		This allows authors to manipulate the visual presentation
+		while leaving the source order intact for non-CSS UAs and for
+		linear models such as speech and sequential navigation.
+		See <a href="#order-accessibility">Reordering and Accessibility</a>
+		and the <a href="#overview">Flex Layout Overview</a> for examples
+		that use this dichotomy to improve accessibility.
+
+	<p>
+		Authors <em>must not</em> use these techniques as a substitute for correct source ordering,
+		as that can ruin the accessibility of the document.
+
 <h3 id='flex-direction-property'>
 Flex Flow Direction: the 'flex-direction' property</h3>
 
@@ -1235,18 +1250,20 @@ <h3 id='order-property'>
 	<h4 id="order-accessibility">Reordering and Accessibility</h4>
 
 	<p>
-		The 'order' property <em>must not</em> affect ordering in non-visual media 
+		The 'order' property <em>does not</em> affect ordering in non-visual media 
 		(such as <a href="http://www.w3.org/TR/css3-speech/">speech</a>).
-		Similarly, 'order' does not affect
+		Likewise, 'order' does not affect
 		the default traversal order of sequential navigation modes
 		(such as cycling through links, see e.g. 'nav-index' [[CSS3UI]] or <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#sequential-focus-navigation-and-the-tabindex-attribute"><code>tabindex</code></a> [[HTML40]]).
 		Authors <em>must</em> use 'order' only for visual, not logical, reordering of content;
 		style sheets that use 'order' to perform logical reordering are non-conforming.
 	<p class='note'>
-		This is so non-visual media and non-CSS UAs,
+		This is so that non-visual media and non-CSS UAs,
 		which typically present content linearly,
-		can be catered to with a logical source order,
-		while 'order' is used to rearrange the visual order.
+		can rely on a logical source order,
+		while 'order' is used to tailor the visual order.
+		(Since visual perception is two-dimensional and non-linear,
+		the desired visual order is not always logical.)
 
 	<div class='example'>
 		<p>