Skip to content

Commit

Permalink
Merge pull request #63 from w3c/fxl-a11y-what-is-fxl
Browse files Browse the repository at this point in the history 
[FXLA11Y] What is an accessible FXL EPUB?
  • Loading branch information
@Jeffxz
Jeffxz authored Jun 27, 2023
2 parents 79d0a97 + c846cef commit 85610b5
Showing 1 changed file with 109 additions and 83 deletions.
192 changes: 109 additions & 83 deletions TaskForces/fxl-a11y/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:[ {
Expand All @@ -27,7 +26,7 @@
permalinkEdge: true,
permalinkHide: false,
github: {
repoURL: "https://github.com/w3c/epub-specs",
repoURL: "https://github.com/w3c/publishingcg",
branch: "main"
},
pluralize: true,
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>

Expand All @@ -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>

Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>

Expand All @@ -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>

Expand All @@ -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>
Expand Down

0 comments on commit 85610b5

Please sign in to comment.