Added accessibility note. Put the SVG inside OBJECT instead of IMG,

trying to see if that is what makes Safari crash...

Author: bert-github

css3-layout/Overview.src.html

@@ -19,14 +19,14 @@ <h2 class="no-num no-toc">[LONGSTATUS] [DATE: 3 August 2004]</h2>
 <dl>
   <dt>This version: </dt>
     <dd><a href="[VERSION]">
-	http://www.w3.org/TR/[YEAR]/ED-[SHORTNAME]-[CDATE]/</a>
+	http://www.w3.org/TR/[YEAR]/WD-[SHORTNAME]-[CDATE]/</a>
   <dt>Latest version:</dt>
     <dd><a
       href="[LATEST]">
 	http://www.w3.org/TR/css3-layout/</a>
   <dt>Previous version:</dt>
-    <dd><a href="http://www.w3.org/TR/2010/WD-css3-layout-20111129/">
-	http://www.w3.org/TR/2010/WD-css3-layout-20111129/</a>
+    <dd><a href="http://www.w3.org/TR/2010/WD-css3-layout-20100429/">
+	http://www.w3.org/TR/2010/WD-css3-layout-20100429/</a>
   <dt>Editors:</dt>
     <dd class=vcard><span class=fn>Bert Bos</span>
     (<span class=org>W3C</span>) <a class=email
@@ -96,7 +96,7 @@ <h2 id=dependencies>Dependencies on other modules</h2>
   <li><cite>CSS values and Units module</cite> [[!CSS3VAL]] &ndash; <a
   href="/TR/css3-values#strings">
   <dfn><var>&lt;string&gt;</var></dfn></a> and <a
-  href="/TR/css3-values#ltlengthgt">
+  href="/TR/css3-values#length-value">
   <dfn><var>&lt;length&gt;</var></dfn></a>.
 
   <li><cite>CSS box module</cite> [[!CSS3BOX]] &ndash; properties
@@ -518,6 +518,52 @@ <h2>Introduction</h2>
 to the second H1, etc.)
 </div>
 
+<h2 id=accessibility>A note about accessibility</h2>
+
+<p><em>(This section is not normative.)</em>
+
+<p>The facilities in this specification allow elements from a document
+to be displayed in a visual order that is to a large extent
+independent of the order in the document. That may have both positive
+and negative effects on accessibility. The positive aspect is that it
+allows the content in the document to be kept in logical order, so
+that the document is as functional as possible without the style sheet
+and on media where the style sheet doesn't apply. A negative aspect is
+that a document that has a defined tab order (the order in which
+elements get the focus when the tab-key is pressed) will show on the
+screen with a tab order unrelated to the visual order. It may be
+necessary to use the keyboard control features of the CSS Basic User
+Interface module [[CSS3UI]] to ensure that the tab navigation follows
+the visual order, or to refrain from positioning semantically related
+elements in different parts of a template.
+
+<p>The following two requirements from the Web Content Accessibility
+Guidelines (WCAG) 2.0 [[WCAG20]] are particularly relevant. See that
+specification for more information.
+
+<blockquote>
+<p><a
+href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#content-structure-separation-sequence"
+><strong>1.3.2 Meaningful Sequence:</strong></a> When the sequence in
+which content is presented affects its meaning, a <a
+href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#correct-reading-sequencedef"
+>correct reading sequence</a> can be <a
+href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#programmaticallydetermineddef
+">programmatically determined.</a> (Level A)
+</blockquote>
+
+<blockquote>
+<p><a
+href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#navigation-mechanisms-focus-order"
+><strong>2.4.3 Focus Order:</strong></a> If a <a
+href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#webpagedef" >Web
+page</a> can be <a
+href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#nav-seqdef"
+>navigated sequentially</a> and the navigation sequences affect
+meaning or operation, focusable components receive focus in an order
+that preserves meaning and operability. (Level A)
+</blockquote>
+
 <h2>Features out of scope</h2>
 
 <p>A number of features that are related to grid layouts are not
@@ -2099,9 +2145,15 @@ <h2 id=history>History</h2>
 (see <a href="#intrusion">figure</a>).
 
 <div class=figure id=intrusion>
+  <!--
   <p><img src="cutout.svg" alt="An image that partially overlaps two
   columns makes the text wrap around it on both sides."
   longdesc="cutout.desc">
+  -->
+  <p><object width=149 height=170 data="cutout.svg"><img
+  src=cutout.png alt="An image that partially overlaps two columns
+makes the text wrap around it on both sides." 
+  longdesc="cutout.desc"></object>
 
   <p class=caption>An image (or a “pull quote”) is placed centered
   on the page and intrudes on two areas.