[css-grid-3][masonry] Add accessibility section w3c#5675 w3c#8195

Author: fantasai

css-grid-3/Overview.bs

@@ -232,6 +232,89 @@ Masonry Layout Model</h2>
 					     placing each item in the then-shortest row.">
 	</table>
 
+<h3 id="order-accessibility">
+Reordering and Accessibility</h3>
+
+	Although [=masonry layout=] generally progresses in a forwards fashion
+	(placing the next item down or endward of the current item,
+	matching the natural "reading order"),
+	it can switch between these two in a seemingly arbitrary manner.
+	In simple cases, the 'masonry-slack' property can help reduce
+	the feeling of backtracking due to small sizing differences in the [=block axis=]
+	when laying out auto-placed items.
+	But when [[#masonry-layout-algorithm|auto-placement]] is mixed with [=definite position|explicit placement=] or spanning items,
+	some amount of backtracking may occur.
+
+	<div class=example>
+		For example, in the following markup sample,
+		the fourth item is a spanner that doesn't fit
+		in the remaining empty column on the first line.
+		It ends up positioned into the into the first column,
+		which is the highest available space into which it will fit.
+		The next few items, which have a span of 1,
+		end up laying out “above” it in the empty column,
+		violating the natural reading order.
+
+		<xmp highlight=html>
+			<section class=masonry>
+			  <div class=item>1</div>
+			  <div class=item>2</div>
+			  <div class="item tall">3</div>
+			  <div class="item wide">4</div>
+			  <div class=item>5</div>
+			  <div class=item>6/div>
+			  <div class=item>7</div>
+			</section>
+			<style>
+			.masonry {
+			  display: masonry;
+			  masonry-tracks: repeat(5, auto);
+			}
+			.item { height: 50px; }
+			.item.wide { masonry-track: span 3; }
+			.item.tall { height: 90px; }
+			</style>
+		</xmp>
+
+		<figure>
+			<img src="images/masonry-reorder-span.png"
+			     alt="In this example, the first row is items 1, 2, 3, 5, 6,
+			          with item 3 slightly taller than the others.
+			          Item 4 spans the first three columns, and is placed
+			          just below item 3, while item 7 is tucked under item 5.">
+			<figcaption>Auto-placed masonry layout with mixed-height items and mixed span sizes</figure>
+		</figure>
+		Similarly, items explicitly placed into specific tracks can leave gaps behind them,
+		into which subsequent auto-placed items can be placed visually out-of-order.
+	</div>
+
+	Authors should be aware of these possibilities
+	and design layouts where such backtracking is minimized
+	so that focus and reading order can be more easily followed.
+	Alternatively, if the items do not have an inherent order,
+	use the 'reading-flow' property to allow the UA to re-order the items
+	for reading and linear navigation.
+
+	ISSUE: Or should reordering be the default behavior for auto-placed items here?
+
+	<div class=note>
+		Techniques for reducing backtracking include:
+		* Using appropriate values for 'masonry-slack',
+			i.e. values large enough to avoid gratuitous differentiation among similarly-sized tracks,
+			but not so large that meaningful differences get ignored.
+		* Using explicit placement in ways that help group related items together,
+			rather than ways that disrupt the natural order of items
+		* Avoiding the combination of mixed span sizes in the [=grid axis=]
+			and disparate item sizes in the [=stacking axis=],
+			which can cause items to get pulled out of order (see example above).
+	</div>
+
+	As with [=grid layout=] and [=flex layout=]
+	authors can use the 'order' property to re-order items;
+	the same caveats apply.
+	See [[css-grid-2#order-accessibility]]
+	and [[css-flexbox-1#order-accessibility]].
+
 <section class="option grid">
 <h3 id="masonry-model-grid-option">
 <span class="option grid">Grid-integrated Option:</span> Establishing Masonry Layout</h3>