fixing formatting and adding new text

w3c · Jun 27, 2023 · c846cef · c846cef
1 parent 79d0a97
commit c846cef
Showing 1 changed file with 109 additions and 83 deletions.
diff --git a/TaskForces/fxl-a11y/index.html b/TaskForces/fxl-a11y/index.html
@@ -10,11 +10,10 @@
  //<![CDATA[
  var respecConfig = {
  group: "publishingcg",
- specStatus: "ED",
+ specStatus: "CG-DRAFT",
  shortName: "fxl-a11y",
- edDraftURI: "https://w3c.github.io/publishingcg/TaskForces/fxl-a11y/",
+ edDraftURI: null,
  previousPublishDate: "2023-05-02",
- previousMaturity: "NOTE",
  copyrightStart: "2021",
  noRecTrack: true,
  editors:[ {
@@ -27,7 +26,7 @@
  permalinkEdge: true,
  permalinkHide: false,
  github: {
- repoURL: "https:/w3c/epub-specs",
+ repoURL: "https:/w3c/publishingcg",
  branch: "main"
  },
  pluralize: true,
@@ -78,6 +77,25 @@ <h3>The Limits of Fixed Layout Accessibility</h3>
 
  <p>We want to recognize these challenges for content creators, and in this document will outline some techniques for producing more accessible fixed layout content. We encourage content creators to explore the full range of options for accessibility that digital publications present, even when creating fixed layout publications.</p>
  </section>
+
+ <section id="intro-goal">
+ <h3>What does an accessible fixed layout EPUB look like?</h3>
+
+ <p>Accessible fixed layout is challenging to produce, but not impossible. This document will cover the most important considerations content creators need to make.</p>
+
+ <p>Accessible fixed layout content requires the following considerations:</p>
+
+ <ul>
+ <li>All textual content is provided to the user through the XHTML file or as a textual alternative to the page</li>
+ <li>All images, diagrams, and visualizations have textual alternatives where appropriate</li>
+ <li>Tables are coded properly, and provided textual descriptions</li>
+ <li>Multimedia content is accessible, with textual alternatives, subtitles, or descriptions</li>
+ <li>All pages in the book are laid out in the proper reading order, with the visual order matching the non-visual one</li>
+ <li>Images and text have proper colour contrast</li>
+ <li>Accessibility metadata listing the book's features is provided</li>
+ <li>The book is fully tested using assistive technology and reading systems</li>
+ </ul>
+ </section>
  </section>
 
  <section id="reading-order">
@@ -137,17 +155,17 @@ <h3>The Stacking Order Problem</h3>
 
  <div class="example">
  <pre>
- &lt;body style="width:595px;height:842px"&gt;
-  &lt;div style="width:500px;height:200px;top:400px;position:absolute;"&gt;
-  &lt;p …&gt;Bottom object&lt;/p&gt;
-  &lt;/div&gt;
-  &lt;div style="width:500px;height:200px;top:225px;position:absolute;"&gt;
-  &lt;p …&gt;Middle object&lt;/p&gt;
-  &lt;/div&gt;
-  &lt;div style="width:500px;height:200px;top:50px;position:absolute;"&gt;
-  &lt;p …&gt;Top object&lt;/p&gt;
-  &lt;/div&gt;
- &lt;/body&gt;
+&lt;body style="width:595px;height:842px"&gt;
+ &lt;div style="width:500px;height:200px;top:400px;position:absolute;"&gt;
+ &lt;p …&gt;Bottom object&lt;/p&gt;
+ &lt;/div&gt;
+ &lt;div style="width:500px;height:200px;top:225px;position:absolute;"&gt;
+ &lt;p …&gt;Middle object&lt;/p&gt;
+ &lt;/div&gt;
+ &lt;div style="width:500px;height:200px;top:50px;position:absolute;"&gt;
+ &lt;p …&gt;Top object&lt;/p&gt;
+ &lt;/div&gt;
+&lt;/body&gt;
  </pre>
  </div>
  </section>
@@ -172,17 +190,17 @@ <h3>Altering the Reading Order</h3>
 
  <div class="example">
  <pre>
- &lt;body style="width:595px;height:842px"&gt;
-  &lt;div style="z-index:3;width:500px;height:200px;top:50px;position:absolute;"&gt;
-  &lt;p …&gt;Top object&lt;/p&gt;
-  &lt;/div&gt;
-  &lt;div style="z-index:2;width:500px;height:200px;top:225px;position:absolute;"&gt;
-  &lt;p …&gt;Middle object&lt;/p&gt;
-  &lt;/div&gt;
-  &lt;div style="z-index:1;width:500px;height:200px;top:400px;position:absolute;"&gt;
-  &lt;p …&gt;Bottom object&lt;/p&gt;
-  &lt;/div&gt;
- &lt;/body&gt;
+&lt;body style="width:595px;height:842px"&gt;
+ &lt;div style="z-index:3;width:500px;height:200px;top:50px;position:absolute;"&gt;
+ &lt;p …&gt;Top object&lt;/p&gt;
+ &lt;/div&gt;
+ &lt;div style="z-index:2;width:500px;height:200px;top:225px;position:absolute;"&gt;
+ &lt;p …&gt;Middle object&lt;/p&gt;
+ &lt;/div&gt;
+ &lt;div style="z-index:1;width:500px;height:200px;top:400px;position:absolute;"&gt;
+ &lt;p …&gt;Bottom object&lt;/p&gt;
+ &lt;/div&gt;
+&lt;/body&gt;
  </pre>
  </div>
  </section>
@@ -196,9 +214,9 @@ <h3>Removing Items from the Reading Order</h3>
 
  <div class="example">
  <pre>
- &lt;div aria-hidden="true"&gt;
-  &lt;p class="folio"&gt;210&lt;/p&gt;
- &lt;/div&gt;
+&lt;div aria-hidden="true"&gt;
+ &lt;p class="folio"&gt;210&lt;/p&gt;
+&lt;/div&gt;
  </pre>
  </div>
  </section>
@@ -254,13 +272,13 @@ <h3>SVG (Scaleable Vector Graphics)</h3>
 
  <div class="example">
  <pre>
- &lt;body style="width:595px;height:842px"&gt;
-  &lt;svg xmlns="http://www.w3.org/2000/svg" xml:lang="en" role="group" aria-describedby="svgtitle svgdesc"&gt;
-  &lt;title id="svgtitle"&gt;The Hydrologic Cycle&lt;/title&gt;
-  &lt;desc id="svgdesc"&gt;The continuous cycle by which water …&lt;/desc&gt;
-  …
-  &lt;/svg&gt;
- &lt;/body&gt;
+&lt;body style="width:595px;height:842px"&gt;
+ &lt;svg xmlns="http://www.w3.org/2000/svg" xml:lang="en" role="group" aria-describedby="svgtitle svgdesc"&gt;
+ &lt;title id="svgtitle"&gt;The Hydrologic Cycle&lt;/title&gt;
+ &lt;desc id="svgdesc"&gt;The continuous cycle by which water …&lt;/desc&gt;
+ …
+ &lt;/svg&gt;
+&lt;/body&gt;
  </pre>
  </div>
 
@@ -272,12 +290,12 @@ <h3>SVG (Scaleable Vector Graphics)</h3>
 
  <div class="example">
  <pre>
- &lt;body style="width:595px;height:842px"&gt;
-  &lt;g fill="lightgray" stroke="gray" role="img" aria-describedby="gtitle"&gt;
-  &lt;title id="gtitle"&gt;Rain clouds&lt;/title&gt;
-  …
-  &lt;/g&gt;
- &lt;/body&gt;
+&lt;body style="width:595px;height:842px"&gt;
+ &lt;g fill="lightgray" stroke="gray" role="img" aria-describedby="gtitle"&gt;
+ &lt;title id="gtitle"&gt;Rain clouds&lt;/title&gt;
+ …
+ &lt;/g&gt;
+&lt;/body&gt;
  </pre>
  </div>
 
@@ -377,7 +395,7 @@ <h3>XHTML Page Titles</h3>
 
  <div class="example">
  <pre>
- &lt;title&gt;The Technical Basics&lt;/title&gt;
+&lt;title&gt;The Technical Basics&lt;/title&gt;
  </pre>
  </div>
  </section>
@@ -415,11 +433,11 @@ <h3>Structural Hierarchy</h3>
 
  <div class="example">
  <pre>
- &lt;h2 class="Main-Head"&gt;The Technical Basics&lt;/h2&gt;
- &lt;p class="Paragraph"&gt;Photography, in its best form, is a mesh of science and art. You need both. For science, you need to understand the technical elements that affect the image – depth of field, diffraction, exposure, focus, magnification and more. On the artistic side, there are so many considerations from composition, colour, contrast, understanding what “beauty” is perceived as, narratives and storytelling elements and beyond.&lt;/p&gt;
- &lt;p class="Paragraph"&gt;The deeper you can weave the mesh of these two elements, science and art, the more magical your images will become.&lt;/p&gt;
- &lt;h3 class="Subhead"&gt;Understanding Depth of Field&lt;/h3&gt;
- &lt;p class="Paragraph"&gt;There are three primary considerations for how much depth of field – the amount of the scene in focus in the resulting photograph. The size of your aperture, the focal length of your lens, and the distance from your subject all have an impact on how much you’ll get in focus in a single frame.&lt;/p&gt;
+&lt;h2 class="Main-Head"&gt;The Technical Basics&lt;/h2&gt;
+&lt;p class="Paragraph"&gt;Photography, in its best form, is a mesh of science and art. You need both. For science, you need to understand the technical elements that affect the image – depth of field, diffraction, exposure, focus, magnification and more. On the artistic side, there are so many considerations from composition, colour, contrast, understanding what “beauty” is perceived as, narratives and storytelling elements and beyond.&lt;/p&gt;
+&lt;p class="Paragraph"&gt;The deeper you can weave the mesh of these two elements, science and art, the more magical your images will become.&lt;/p&gt;
+&lt;h3 class="Subhead"&gt;Understanding Depth of Field&lt;/h3&gt;
+&lt;p class="Paragraph"&gt;There are three primary considerations for how much depth of field – the amount of the scene in focus in the resulting photograph. The size of your aperture, the focal length of your lens, and the distance from your subject all have an impact on how much you’ll get in focus in a single frame.&lt;/p&gt;
  </pre>
  </div>
  </section>
@@ -562,9 +580,9 @@ <h2>Package Metadata</h2>
  <div class="example" id="metadata-example-1">
  <p>An example of package metadata for a fixed layout publication.</p>
  <pre>
- &lt;meta property="rendition:layout"&gt;pre-paginated&lt;/meta&gt;
- &lt;meta property="rendition:orientation"&gt;auto&lt;/meta&gt;
- &lt;meta property="rendition:spread"&gt;auto&lt;/meta&gt;
+&lt;meta property="rendition:layout"&gt;pre-paginated&lt;/meta&gt;
+&lt;meta property="rendition:orientation"&gt;auto&lt;/meta&gt;
+&lt;meta property="rendition:spread"&gt;auto&lt;/meta&gt;
  </pre>
  </div>
  </section>
@@ -590,12 +608,12 @@ <h3>Accessibility Features</h3>
 
  <div class="example" id="metadata-example-2">
  <pre>
- &lt;meta property="schema:accessibilityFeature"&gt;
-  alternativeText
- &lt;/meta&gt;
- &lt;meta property="schema:accessibilityFeature"&gt;
-  readingOrder
- &lt;/meta&gt;
+&lt;meta property="schema:accessibilityFeature"&gt;
+ alternativeText
+&lt;/meta&gt;
+&lt;meta property="schema:accessibilityFeature"&gt;
+ readingOrder
+&lt;/meta&gt;
  </pre>
  </div>
  </section>
@@ -608,21 +626,22 @@ <h3>Access Mode</h3>
  <p>A picture book would only have an <code>accessMode</code> of <code>visual</code>.</p>
 
  <div class="example" id="metadata-example-3">
- <pre>&lt;meta property="schema:accessMode"&gt;
- visual
- &lt;/meta&gt;</pre>
+ <pre>
+&lt;meta property="schema:accessMode"&gt;
+ visual
+&lt;/meta&gt;</pre>
  </div>
 
  <p>A fixed layout book which contains both text and images would have two separate <code>accessMode</code>s defined.</p>
 
  <div class="example" id="metadata-example-4">
  <pre>
- &lt;meta property="schema:accessMode"&gt;
-  visual
- &lt;/meta&gt;
- &lt;meta property="schema:accessMode"&gt;
-  textual
- &lt;/meta&gt;
+&lt;meta property="schema:accessMode"&gt;
+ visual
+&lt;/meta&gt;
+&lt;meta property="schema:accessMode"&gt;
+ textual
+&lt;/meta&gt;
  </pre>
  </div> 
  </section>
@@ -635,25 +654,31 @@ <h3>Access Mode Sufficient</h3>
  <p>For picture books with no text, or no alternative text, the way one would consume this would be completely visually so having <code>accessModeSufficient</code> of <code>visual</code> would be solely defined.</p>
 
  <div class="example" id="metadata-example-5">
- <pre>&lt;meta property="schema:accessModeSufficient"&gt;
- visual
- &lt;/meta&gt;</pre>
+ <pre>
+&lt;meta property="schema:accessModeSufficient"&gt;
+ visual
+&lt;/meta&gt;
+ </pre>
  </div>
 
  <p>For Fixed Layout books that have both visual and textual elements then having <code>accessModeSufficient</code> of <code>visual,textual</code> would be appropriate. In addition, if the Fixed Layout book is primarily images that are fully described, <code>textual</code> would also apply, as this implies the boook is Screen Reader Friendly and can be fully read by assistive technology.</p>
 
  <div class="example" id="metadata-example-6">
- <pre>&lt;meta property="schema:accessModeSufficient"&gt;
- visual,textual
- &lt;/meta&gt;</pre>
+ <pre>
+&lt;meta property="schema:accessModeSufficient"&gt;
+ visual,textual
+&lt;/meta&gt;
+ </pre>
  </div>
 
  <p>If a Fixed Layout book has all images fully described then having <code>accessModeSufficient</code> of <code>textual</code> would be appropriate which implies this book is Screen Reader Friendly and can be fully read by assistive technology.</p>
 
  <div class="example" id="metadata-example-7">
- <pre>&lt;meta property="schema:accessModeSufficient"&gt;
- textual
- &lt;/meta&gt;</pre>
+ <pre>
+&lt;meta property="schema:accessModeSufficient"&gt;
+ textual
+&lt;/meta&gt;
+ </pre>
  </div>
  </section>
 
@@ -667,9 +692,10 @@ <h3>Accessibility Hazards</h3>
  <p>If there are no hazards within the book one can simply have <code>none</code> or can call out each specific non-hazard explicitly by stating <code>noFlashingHazard</code>, <code>noSoundHazard</code>, and <code>noMotionSimulationHazard</code>.</p>
 
  <div class="example" id="metadata-example-8">
- <pre>&lt;meta property="schema:accessibilityHazard"&gt;
- none
- &lt;/meta&gt;</pre>
+ <pre>
+&lt;meta property="schema:accessibilityHazard"&gt;
+ none
+&lt;/meta&gt;</pre>
  </div>
  </section>
 
@@ -680,11 +706,11 @@ <h3>Accessibility Summary</h3>
 
  <div class="example" id="metadata-example-9">
  <pre>
- &lt;meta property="schema:accessibilitySummary"&gt;
-  This Fixed Layout EPUB contains a lot of visual formatting
-  where images can span over two pages. All images do have
-  a textual description to aid in accessibility.
- &lt;/meta&gt;
+&lt;meta property="schema:accessibilitySummary"&gt;
+ This Fixed Layout EPUB contains a lot of visual formatting
+ where images can span over two pages. All images do have
+ a textual description to aid in accessibility.
+&lt;/meta&gt;
  </pre>
  </div>
  </section>