diff --git a/TaskForces/fxl-a11y/index.html b/TaskForces/fxl-a11y/index.html index 08bd2cf..a252fe5 100644 --- a/TaskForces/fxl-a11y/index.html +++ b/TaskForces/fxl-a11y/index.html @@ -10,11 +10,10 @@ //The Limits of Fixed Layout Accessibility

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.

+ +
+

What does an accessible fixed layout EPUB look like?

+ +

Accessible fixed layout is challenging to produce, but not impossible. This document will cover the most important considerations content creators need to make.

+ +

Accessible fixed layout content requires the following considerations:

+ + +
@@ -137,17 +155,17 @@

The Stacking Order Problem

-                        <body style="width:595px;height:842px">
-                            <div style="width:500px;height:200px;top:400px;position:absolute;">
-                                <p …>Bottom object</p>
-                            </div>
-                            <div style="width:500px;height:200px;top:225px;position:absolute;">
-                                <p …>Middle object</p>
-                            </div>
-                            <div style="width:500px;height:200px;top:50px;position:absolute;">
-                                <p …>Top object</p>
-                            </div>
-                        </body>
+<body style="width:595px;height:842px">
+    <div style="width:500px;height:200px;top:400px;position:absolute;">
+        <p …>Bottom object</p>
+    </div>
+    <div style="width:500px;height:200px;top:225px;position:absolute;">
+        <p …>Middle object</p>
+    </div>
+    <div style="width:500px;height:200px;top:50px;position:absolute;">
+        <p …>Top object</p>
+    </div>
+</body>
                     
@@ -172,17 +190,17 @@

Altering the Reading Order

-                        <body style="width:595px;height:842px">
-                            <div style="z-index:3;width:500px;height:200px;top:50px;position:absolute;">
-                                <p …>Top object</p>
-                            </div>
-                            <div style="z-index:2;width:500px;height:200px;top:225px;position:absolute;">
-                                <p …>Middle object</p>
-                            </div>
-                            <div style="z-index:1;width:500px;height:200px;top:400px;position:absolute;">
-                                <p …>Bottom object</p>
-                            </div>
-                        </body>
+<body style="width:595px;height:842px">
+    <div style="z-index:3;width:500px;height:200px;top:50px;position:absolute;">
+        <p …>Top object</p>
+    </div>
+    <div style="z-index:2;width:500px;height:200px;top:225px;position:absolute;">
+        <p …>Middle object</p>
+    </div>
+    <div style="z-index:1;width:500px;height:200px;top:400px;position:absolute;">
+        <p …>Bottom object</p>
+    </div>
+</body>
                     
@@ -196,9 +214,9 @@

Removing Items from the Reading Order

-                        <div aria-hidden="true">
-                            <p class="folio">210</p>
-                        </div>
+<div aria-hidden="true">
+    <p class="folio">210</p>
+</div>
                     
@@ -254,13 +272,13 @@

SVG (Scaleable Vector Graphics)

-                        <body style="width:595px;height:842px">
-                            <svg xmlns="http://www.w3.org/2000/svg" xml:lang="en" role="group" aria-describedby="svgtitle svgdesc">
-                                <title id="svgtitle">The Hydrologic Cycle</title>
-                                <desc id="svgdesc">The continuous cycle by which water …</desc>
-                                    …
-                            </svg>
-                        </body>
+<body style="width:595px;height:842px">
+    <svg xmlns="http://www.w3.org/2000/svg" xml:lang="en" role="group" aria-describedby="svgtitle svgdesc">
+        <title id="svgtitle">The Hydrologic Cycle</title>
+        <desc id="svgdesc">The continuous cycle by which water …</desc>
+            …
+    </svg>
+</body>
                     
@@ -272,12 +290,12 @@

SVG (Scaleable Vector Graphics)

-                        <body style="width:595px;height:842px">
-                            <g fill="lightgray" stroke="gray" role="img" aria-describedby="gtitle">
-                                <title id="gtitle">Rain clouds</title>
-                            …
-                            </g>
-                        </body>
+<body style="width:595px;height:842px">
+    <g fill="lightgray" stroke="gray" role="img" aria-describedby="gtitle">
+    <title id="gtitle">Rain clouds</title>
+        …
+    </g>
+</body>
                     
@@ -377,7 +395,7 @@

XHTML Page Titles

-                        <title>The Technical Basics</title>
+<title>The Technical Basics</title>
                     
@@ -415,11 +433,11 @@

Structural Hierarchy

-                        <h2 class="Main-Head">The Technical Basics</h2>
-                        <p class="Paragraph">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.</p>
-                        <p class="Paragraph">The deeper you can weave the mesh of these two elements, science and art, the more magical your images will become.</p>
-                        <h3 class="Subhead">Understanding Depth of Field</h3>
-                        <p class="Paragraph">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.</p>
+<h2 class="Main-Head">The Technical Basics</h2>
+<p class="Paragraph">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.</p>
+<p class="Paragraph">The deeper you can weave the mesh of these two elements, science and art, the more magical your images will become.</p>
+<h3 class="Subhead">Understanding Depth of Field</h3>
+<p class="Paragraph">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.</p>
                     
@@ -562,9 +580,9 @@

Package Metadata

An example of package metadata for a fixed layout publication.

-                    <meta property="rendition:layout">pre-paginated</meta>
-                    <meta property="rendition:orientation">auto</meta>
-                    <meta property="rendition:spread">auto</meta>
+<meta property="rendition:layout">pre-paginated</meta>
+<meta property="rendition:orientation">auto</meta>
+<meta property="rendition:spread">auto</meta>
                 
@@ -590,12 +608,12 @@

Accessibility Features

-                    <meta property="schema:accessibilityFeature">
-                        alternativeText
-                    </meta>
-                    <meta property="schema:accessibilityFeature">
-                        readingOrder
-                    </meta>
+<meta property="schema:accessibilityFeature">
+    alternativeText
+</meta>
+<meta property="schema:accessibilityFeature">
+    readingOrder
+</meta>
                     
@@ -608,21 +626,22 @@

Access Mode

A picture book would only have an accessMode of visual.

-
<meta property="schema:accessMode">
-                        visual
-                    </meta>
+
+<meta property="schema:accessMode">
+    visual
+</meta>

A fixed layout book which contains both text and images would have two separate accessModes defined.

-                    <meta property="schema:accessMode">
-                        visual
-                    </meta>
-                    <meta property="schema:accessMode">
-                        textual
-                    </meta>
+<meta property="schema:accessMode">
+    visual
+</meta>
+<meta property="schema:accessMode">
+    textual
+</meta>
                     
@@ -635,25 +654,31 @@

Access Mode Sufficient

For picture books with no text, or no alternative text, the way one would consume this would be completely visually so having accessModeSufficient of visual would be solely defined.

-
<meta property="schema:accessModeSufficient">
-                        visual
-                    </meta>
+
+<meta property="schema:accessModeSufficient">
+    visual
+</meta>
+                    

For Fixed Layout books that have both visual and textual elements then having accessModeSufficient of visual,textual would be appropriate. In addition, if the Fixed Layout book is primarily images that are fully described, textual would also apply, as this implies the boook is Screen Reader Friendly and can be fully read by assistive technology.

-
<meta property="schema:accessModeSufficient">
-                        visual,textual
-                    </meta>
+
+<meta property="schema:accessModeSufficient">
+    visual,textual
+</meta>
+                    

If a Fixed Layout book has all images fully described then having accessModeSufficient of textual would be appropriate which implies this book is Screen Reader Friendly and can be fully read by assistive technology.

-
<meta property="schema:accessModeSufficient">
-                        textual
-                    </meta>
+
+<meta property="schema:accessModeSufficient">
+    textual
+</meta>
+                    
@@ -667,9 +692,10 @@

Accessibility Hazards

If there are no hazards within the book one can simply have none or can call out each specific non-hazard explicitly by stating noFlashingHazard, noSoundHazard, and noMotionSimulationHazard.

-
<meta property="schema:accessibilityHazard">
-                        none
-                    </meta>
+
+<meta property="schema:accessibilityHazard">
+    none
+</meta>
@@ -680,11 +706,11 @@

Accessibility Summary

-                        <meta property="schema:accessibilitySummary">
-                        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.
-                    </meta>
+<meta property="schema:accessibilitySummary">
+    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.
+</meta>