merge

Author: vhardy

css3-flexbox/Overview.html

@@ -102,7 +102,7 @@ <h2 id="intro">
 &lt;/style></pre>
 
 		<div class='figure'>
-			<img src="images/toolbar-example.svg" width=400 height=140>
+			<img src="images/toolbar-example.svg" width=400 height=140 alt>
 			<p class='caption'>Example rendering of the above code snippet, at two different flexbox widths.</p>
 		</div>
 	</div>
@@ -127,7 +127,7 @@ <h2 id='box-model'>
 	<p>Unlike block layout, which is normally biased towards laying things out vertically, and inline layout, which is normally biased toward laying things out horizontally, the flexbox layout algorithm is agnostic as to the direction the flexbox happens to be laid out in.  To make it easier to talk about flexbox layout in a general way, we will define several direction-agnostic terms here to make the rest of the spec easier to read and understand.</p>
 
 	<div class='figure'>
-		<img src='images/flex-direction-terms.svg' width=510 height=300>
+		<img src='images/flex-direction-terms.svg' width=510 height=300 alt>
 		<p class='caption'>An illustration of the various directions and sizing terms used in this specification, respectively for ''row'' and ''column'' flexboxes.</p>
 	</div>
 
@@ -219,7 +219,7 @@ <h2 id='flex-items'>
     &lt;/span>
 
     &lt;!-- flexbox item: block-level replaced element -->
-    &lt;iframe id="item7"></iframe>
+    &lt;iframe id="item7">&lt;/iframe>
 
     &lt;!-- flexbox item: inline-level replaced element -->
     &lt;img id="item7" style="display:inline">
@@ -449,22 +449,22 @@ <h3 id='flex-flow'>
 div { flex-flow: row; }
 /* Initial value. Main axis is 
    inline, no wrap. */</pre>
-				<td><img src='images/flex-flow1.svg' width=240 height=80>
+				<td><img src='images/flex-flow1.svg' width=240 height=80 alt>
 			<tr>
 				<td><pre>
 div { flex-flow: column wrap; }
 /* Main axis is block-direction and lines
    wrap in the inline direction.  For an 
    English page, the main axis is top-to-bottom
    and lines wrap to the right. */</pre>
-				<td><img src='images/flex-flow2.svg' width=170 height=200>
+				<td><img src='images/flex-flow2.svg' width=170 height=200 alt>
 			<tr>
 				<td><pre>
 div { writing-mode: vertical-rl;
       flex-flow: column wrap-reverse; }
 /* Main axis is block direction (right to 
    left). New lines wrap upwards. */</pre>
-				<td><img src='images/flex-flow3.svg' width=200 height=170>
+				<td><img src='images/flex-flow3.svg' width=200 height=170 alt>
 		</table>
 	</div>
 
@@ -508,7 +508,7 @@ <h3 id='flex-order'>
 	<div class='example'>
 		<p>The following figure shows a simple tabbed interface, where the tab for the active pane is always in front:</p>
 
-		<div class='figure'><img src="images/flex-order-example.png"></div>
+		<div class='figure'><img src="images/flex-order-example.png" alt></div>
 
 		<p>This could be implemented with the following CSS (showing only the flexbox-relevant code):</p>
 
@@ -535,7 +535,7 @@ <h3 id='flex-order'>
    &lt;aside>...&lt;/aside>
 &lt;/div>
 &lt;footer>...&lt;/footer></pre></div>
-			<div><img src="images/flex-order-page.svg" width=400 height=360></div>
+			<div><img src="images/flex-order-page.svg" width=400 height=360 alt="In this page the header is at the top and the footer at the bottom, but the article is in the center, flanked by the nav on the right and the aside on the left."></div>
 		</div>
 
 		<p>This layout can be easily achieved with Flexbox:</p>
@@ -688,7 +688,7 @@ <h3 id='flex-pack'>
 	</dl>
 
 	<div class="figure">
-		<img src="images/flex-pack.svg" width=504 height=270>
+		<img src="images/flex-pack.svg" width=504 height=270 alt>
 		<p class='caption'>An illustration of the five 'flex-pack' keywords and their effects on a flexbox with three colored items.</p>
 	</div>
 
@@ -780,7 +780,7 @@ <h3 id='flex-align'>
 	</dl>
 
 	<div class='figure'>
-		<img src="images/flex-align.svg" width=508 height=377>
+		<img src="images/flex-align.svg" width=508 height=377 alt>
 		<p class='caption'>An illustration of the five 'flex-align' keywords and their effects on a flexbox with four colored items.</p>
 	</div>
 
@@ -901,7 +901,7 @@ <h3 id='flex-line-pack'>
 	<p class='note'>Note: Only <i>multi-line</i> flexboxes ever have free space in the <i>cross axis</i> for lines to be aligned in, because in a <i>single-line</i> flexbox the sole line automatically stretches to fill the space.</p>
 
 	<div class="figure">
-		<img src="images/flex-line-pack-example.png" width=585 height=514>
+		<img src="images/flex-line-pack-example.png" width=585 height=514 alt>
 		<p class='caption'>An illustration of the 'flex-line-pack' keywords and their effects on a multi-line flexbox.</p>
 	</div>
 
@@ -1242,9 +1242,9 @@ <h2 id="pagination">
 
 							<p class="note">After the break, continuation of overflow items may overlap with other items and/or content after the flexbox. It is undesirable but there is no good resolution for this spacial conflict and this outcome is similar to effect of "overflow:visible" elsewhere.</p>
 						</li>
-						</li>
 					</ol>
 				</li>
+				
 				<li>Breaks inside items (forced or unforced) are not allowed</li>
 			</ol>
 		</li>