[css-grid] First cut, a11y warnings on grid placement.

Author: fantasai

css-grid/Overview.bs

@@ -285,6 +285,16 @@ Source-Order Independence</h3>
 		</pre>
 	</div>
 
+	Note: The reordering capabilities of grid 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 and optimized for non-CSS UAs
+	and for linear models such as speech and sequential navigation.
+
+	Advisement: Grid item placement and reordering must not be used
+	as a substitute for correct source ordering,
+	as that can ruin the accessibility of the document.
 
 <h3 id='grid-layering'>
 Grid Layering of Elements</h3>
@@ -2354,6 +2364,33 @@ Auto Sizing Subgrids</h4>
 	The above example would auto-place the <code>.adverts</code> block,
 	if no further rules specified its position.
 
+<h3 id="placement-a11y">
+Grid Item Placement vs. Source Order</h3>
+
+	<blockquote>
+		<p>“With great power comes great responsibility.”
+	</blockquote>
+
+	The abilities of the <a>grid-placement properties</a>
+	allow content to be freely arranged and reordered within the <a>grid</a>,
+	such that the visual presentation can be largely disjoint
+	from the underlying source order.
+	These abilities allow the author great freedom
+	in tailoring the rendering to different devices
+	and modes of presentation
+	e.g. using <a>media queries</a>.
+	However <strong>they are not a substitute for correct source ordering</strong>.
+
+	Correct source order is important for speech,
+	for sequential navigation (such as keyboard navigation),
+	and non-CSS UAs such as search engines, tactile browsers, etc.
+	Grid placement <em>only</em> affects the visual presentation!
+	This allows authors to optimize the document source for
+	non-CSS/non-visual interaction modes,
+	and use grid placement techniques to further manipulate the visual presentation
+	so as to leave that source order intact.
+
+
 <!--
  ██████   ████████  ████ ████████          ████████   ███████  ██      ██          ██████  ████████    ███    ████████  ████████
 ██    ██  ██     ██  ██  ██     ██         ██     ██ ██     ██ ██  ██  ██         ██    ██    ██      ██ ██   ██     ██    ██