Skip to content

Commit 87ea4d8

Browse files
fantasaifantasai
committed
Fix some broken links, clarify that flex-flow doesn't affect ordering, and add a subsection title mentioning a11y to make this paragraph and the ensuing example stand out a bit more.
1 parent c47f93a commit 87ea4d8

2 files changed

Lines changed: 43 additions & 6 deletions

File tree

‎css3-flexbox/Overview.html‎

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -412,6 +412,10 @@ <h2 class="no-num no-toc" id=table>Table of contents</h2>
412412

413413
<li><a href="#order-property"><span class=secno>5.4. </span> Display
414414
Order: the ‘<code class=property>order</code>’ property</a>
415+
<ul class=toc>
416+
<li><a href="#order-accessibility"><span class=secno>5.4.1.
417+
</span>Reordering and Accessibility</a>
418+
</ul>
415419
</ul>
416420

417421
<li><a href="#flex-lines"><span class=secno>6. </span> Flex Lines</a>
@@ -1343,6 +1347,13 @@ <h3 id=flex-direction-property><span class=secno>5.1. </span> Flex Flow
13431347
href="#main-end"><i>main-end</i></a> directions are swapped.
13441348
</dl>
13451349

1350+
<p class=note> The reverse values do not reverse box ordering; like
1351+
‘<code class=property>writing-mode</code>’ and ‘<code
1352+
class=property>direction</code>’ <a href="#CSS3-WRITING-MODES"
1353+
rel=biblioentry>[CSS3-WRITING-MODES]<!--{{CSS3-WRITING-MODES}}--></a>,
1354+
they only change the direction of flow. Painting order, speech order, and
1355+
sequential navigation orders are not be affected.
1356+
13461357
<h3 id=flex-wrap-property><span class=secno>5.2. </span> Flex Line
13471358
Wrapping: the ‘<a href="#flex-wrap"><code
13481359
class=property>flex-wrap</code></a>’ property</h3>
@@ -1651,12 +1662,19 @@ <h3 id=order-property><span class=secno>5.4. </span> Display Order: the
16511662
}</pre>
16521663
</div>
16531664

1665+
<h4 id=order-accessibility><span class=secno>5.4.1. </span>Reordering and
1666+
Accessibility</h4>
1667+
16541668
<p> The ‘<a href="#order"><code class=property>order</code></a>’
16551669
property <em>must not</em> affect ordering in non-visual media (such as <a
16561670
href="http://www.w3.org/TR/css3-speech/">speech</a>). Similarly, ‘<a
16571671
href="#order"><code class=property>order</code></a>’ does not affect the
1658-
default traversal order of linear navigation modes (such as tabbing
1659-
through links). Authors <em>must</em> use ‘<a href="#order"><code
1672+
default traversal order of sequential navigation modes (such as cycling
1673+
through links, see e.g. ‘<code class=property>nav-index</code>’ <a
1674+
href="#CSS3UI" rel=biblioentry>[CSS3UI]<!--{{CSS3UI}}--></a> or <a
1675+
href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#sequential-focus-navigation-and-the-tabindex-attribute"><code>tabindex</code></a>
1676+
<a href="#HTML40" rel=biblioentry>[HTML40]<!--{{HTML40}}--></a>). Authors
1677+
<em>must</em> use ‘<a href="#order"><code
16601678
class=property>order</code></a>’ only for visual, not logical,
16611679
reordering of content; style sheets that use ‘<a href="#order"><code
16621680
class=property>order</code></a>’ to perform logical reordering are
@@ -3813,6 +3831,15 @@ <h3 class=no-num id=informative>Other references</h3>
38133831
href="http://www.w3.org/TR/2012/WD-css3-values-20120308/">http://www.w3.org/TR/2012/WD-css3-values-20120308/</a>
38143832
</dd>
38153833
<!---->
3834+
3835+
<dt id=HTML40>[HTML40]
3836+
3837+
<dd>Ian Jacobs; David Raggett; Arnaud Le Hors. <a
3838+
href="http://www.w3.org/TR/1998/REC-html40-19980424"><cite>HTML 4.0
3839+
Specification.</cite></a> 24 April 1998. W3C Recommendation. URL: <a
3840+
href="http://www.w3.org/TR/1998/REC-html40-19980424">http://www.w3.org/TR/1998/REC-html40-19980424</a>
3841+
</dd>
3842+
<!---->
38163843
</dl>
38173844
<!--end-informative-->
38183845

@@ -3837,9 +3864,9 @@ <h2 class=no-num id=changes>Changes</h2>
38373864

38383865
<li>Defined interaction of ‘<a href="#order"><code
38393866
class=property>order</code></a>’ and <a
3840-
href="http://www.w3.org/TR/css3-speec/">speech</a>, <a
3867+
href="http://www.w3.org/TR/css3-speech/">speech</a>, <a
38413868
href="http://www.w3.org/TR/css3-ui/#nav-index">‘<code
3842-
class=property>tab-index</code>’</a>.
3869+
class=property>nav-index</code>’</a>.
38433870

38443871
<li>Corrected errors in the <a href="#layout-algorithm">flex layout
38453872
algorithm</a>.

‎css3-flexbox/Overview.src.html‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -967,6 +967,13 @@ <h3 id='flex-direction-property'>
967967
except the <i>main-start</i> and <i>main-end</i> directions are swapped.
968968
</dl>
969969

970+
<p class="note">
971+
The reverse values do not reverse box ordering;
972+
like 'writing-mode' and 'direction' [[CSS3-WRITING-MODES]],
973+
they only change the direction of flow.
974+
Painting order, speech order, and sequential navigation orders
975+
are not be affected.
976+
970977
<h3 id='flex-wrap-property'>
971978
Flex Line Wrapping: the 'flex-wrap' property</h3>
972979

@@ -1182,11 +1189,14 @@ <h3 id='order-property'>
11821189

11831190
</div>
11841191

1192+
<h4 id="order-accessibility">Reordering and Accessibility</h4>
1193+
11851194
<p>
11861195
The 'order' property <em>must not</em> affect ordering in non-visual media
11871196
(such as <a href="http://www.w3.org/TR/css3-speech/">speech</a>).
11881197
Similarly, 'order' does not affect
1189-
the default traversal order of linear navigation modes (such as tabbing through links).
1198+
the default traversal order of sequential navigation modes
1199+
(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]]).
11901200
Authors <em>must</em> use 'order' only for visual, not logical, reordering of content;
11911201
style sheets that use 'order' to perform logical reordering are non-conforming.
11921202
<p class='note'>
@@ -3154,7 +3164,7 @@ <h2 class="no-num" id="changes">Changes</h2>
31543164
<li>Defined which properties affect placeholders.
31553165
<li>Defined which properties apply to the table wrapper box vs. the table box of a table element.
31563166
-->
3157-
<li>Defined interaction of 'order' and <a href="http://www.w3.org/TR/css3-speec/">speech</a>, <a href="http://www.w3.org/TR/css3-ui/#nav-index">'tab-index'</a>.
3167+
<li>Defined interaction of 'order' and <a href="http://www.w3.org/TR/css3-speech/">speech</a>, <a href="http://www.w3.org/TR/css3-ui/#nav-index">'nav-index'</a>.
31583168
<li>Corrected errors in the <a href="#layout-algorithm">flex layout algorithm</a>.
31593169
<li>Added or rewrote many examples to make them more realistic and more interesting.
31603170
<li>Various clarifications to the

0 commit comments

Comments
 (0)