-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
719 lines (535 loc) · 49.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
<meta charset="utf-8" />
<title>EPUB Fixed Layout Accessibility</title>
<script src="https://www.w3.org/Tools/respec/respec-w3c" class="remove"></script>
<script src="../common/js/css-inline.js" class="remove"></script>
<script src="../common/js/copyright.js" class="remove"></script>
<script class="remove">
//<![CDATA[
var respecConfig = {
group: "publishingcg",
specStatus: "CG-DRAFT",
shortName: "fxl-a11y",
edDraftURI: null,
previousPublishDate: "2023-05-02",
copyrightStart: "2021",
noRecTrack: true,
editors:[ {
name: "Wendy Reid",
company: "Rakuten Kobo",
companyURL: "https://www.kobo.com",
w3cid: 102009
}],
includePermalinks: true,
permalinkEdge: true,
permalinkHide: false,
github: {
repoURL: "https://github.com/w3c/publishingcg",
branch: "main"
},
pluralize: true,
localBiblio: {
"wcag2": {
"title": "Web Content Accessibility Guidelines (WCAG) 2",
"href": "https://www.w3.org/TR/WCAG2/",
"publisher": "W3C"
}
},
preProcess:[inlineCustomCSS]
};//]]>
</script>
<style> /*prevent examples from horizontal scrolling*/
pre {
white-space: break-spaces !important;
}
</style>
</head>
<body>
<section id="abstract">
<p>This document, EPUB Fixed Layout Accessibility, outlines techniques and best practices for producing more accessible EPUB® fixed layout publications.</p>
</section>
<section id="sotd"></section>
<section id="toc"></section>
<section id="introduction">
<h2>Introduction</h2>
<section id="intro-overview">
<h3>Overview</h3>
<p>Fixed Layout publications, or publications where the print layout is preserved in the digital edition, have been around since before EPUB 3.0.1. These publications span a number of genres and types, from comic books, cook books, children's books, and more.</p>
<p>The main motivation behind creating fixed layout publications is the need to preserve the print layout of the book, either because of it's importance to the text (i.e. complex diagrams) or it's artistic purpose (i.e. illustrated text). However, these publications are often partially or completely inaccessible to people with print disabilities.</p>
<p>This note serves to help content authors and publishers try to address some of the common accessibility issues found in fixed layout content, including navigation, reading order, and text alternatives. This document is a companion to [[epub-a11y-11]], specifically for fixed layout publications. All recommendations made in [[epub-a11y-11]], [[epub-33]], and [[epub-rs-33]] are applied and extended here.</p>
</section>
<section id="intro-limits">
<h3>The Limits of Fixed Layout Accessibility</h3>
<p>Fixed Layout publications present some unique challenges for accessibility. The requirements laid out in [[epub-a11y-11]] recommend [[wcag2]] AA, but for many use cases in fixed layout, that might not be possible without fundamental changes to the content.</p>
<p>In particular, the needs of people with low vision or learning disabilities that rely on the transformation of text are still almost impossible to accommodate in fixed layout content. Content creators concerned about this may choose not to use fixed layout.</p>
<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">
<h2>Reading Order</h2>
<blockquote>A key concept of EPUB is that an EPUB publication consists of multiple resources that can be completely navigated and consumed by a person or program in some specific order. - 1.2.1 Reading Order [[epub-overview-33]]</blockquote>
<p>Whereas many reflowable publications have an obvious reading order, or logical progression through their content, fixed-layout publications are often more complex in their design and layout and may consist of multiple readable objects on the same page.</p>
<p>For viewers of the visual page, the reading order can be inferred by various visual triggers including:</p>
<ul>
<li>Size and styles of font used</li>
<li>Design features such as imagery and colored backgrounds</li>
<li>Position on the page top to bottom, left to right (when using left to right page progression)</li>
</ul>
<p>In addition, there may be additional text and image objects on the fixed-layout page which are not required to be included in reading order, such as:</p>
<ul>
<li>Page numbers</li>
<li>Section or chapter headings</li>
<li>Other purely decorative objects</li>
</ul>
<section id="reading-order-position">
<h3>The Page Position Problem</h3>
<p>For complex designs, the position of objects on the fixed-layout page is not a reliable indicator of their reading order.</p>
<figure>
<img src="images/reading_order_ex1.png" alt="A two-page spread featuring a layout with a prominent heading followed by paragraphs of text on the left-hand page, and a series of images with descriptive captions on the right-hand page."/>
<figcaption>In the example page above, the top level heading is inferred by its styling rather than its position. The step-by-step are reading across left to right but in two rows.</figcaption>
</figure>
<figure>
<img src="images/reading_order_ex2.png" alt="The same two-page spread, with outlined green boxes surrounding the text elements, each one labelled with a reading order number." />
<figcaption>The correct reading order indicated with overlaid regions.</figcaption>
</figure>
<p>In a multi-column document, the linear presentation of the content flows from the top of a column to the bottom of the column, then to the top of the next column.</p>
<a href="https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence">Example from Understanding Success Criteria 1.3.2: Meaningful Sequence.</a>
</section>
<section id="reading-order-stacking">
<h3>The Stacking Order Problem</h3>
<p>The default reading order for Text to Speech (TTS) is determined by the order of the elements in the XHTML page (DOM). Popular page layout programs like Adobe InDesign and Apple Pages export the page content in the order of the stacking order of objects on the page rather than their page position. The topmost objects sits above other objects and so is written last in the HTML.</p>
<figure>
<img src="images/reading_order_ex3" alt="Screenshot from Adobe InDesign demonstrating how the order of layers in a publication dictates the reading order, with the top-most object being the highest layer in the order." />
<figcaption>The stacking order is commonly used by layout applications to dictate the reading order.</figcaption>
</figure>
<p>In HTML, the design above would be rendered in reverse reading order.</p>
<div class="example">
<pre>
<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>
</pre>
</div>
</section>
<section id="reading-order-altering">
<h3>Altering the Reading Order</h3>
<blockquote>If a blind user, who reads the page with a screen reader that follows the source order, is working with a sighted user who reads the page in visual order, they may be confused when they encounter information in different orders. A user with low vision who uses a screen magnifier in combination with a screen reader may be confused when the reading order appears to skip around on the screen. A keyboard user may have trouble predicting where focus will go next when the source order does not match the visual order. - <a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C27">Making the DOM order match the visual order</a></blockquote>
<p>Automatic exports can derive their reading order either by analysing the position of the page and / or the stacking order in order to influence the reading order. Neither is suitable. Altering the stacking order to dictate the reading order has the potential to alter and disrupt the design of the page.</p>
<figure>
<img src="images/reeading_order_ex4.png" alt="Screenshot from Adobe InDesign demonstrating how altering the layer order to fix the reading order in export alters the visual design, causing the bottom-most layer to appear over top the other ones." />
<figcaption>Altering the stacking order will the alter reading order but may also disrupt the design of the page.</figcaption>
</figure>
<aside class="note">
The Adobe InDesign articles panel, which can be used to define the reading order of reflowable EPUB and PDF exports, has no effect on fixed-layout EPUB from Adobe InDesign.
</aside>
<p>The recommended best practice solution is to adjust the order of the elements in the XHTML page and to preserve the design using CSS <code>z-index</code>.</p>
<div class="example">
<pre>
<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>
</pre>
</div>
</section>
<section id="reading-order-removing">
<h3>Removing Items from the Reading Order</h3>
<p>There may be cases when text appears on the page but is unnecessary, duplicated or otherwise confusing for it to be added to the reading order. e.g. page numbers, section or chapter headings which are already part of the publication’s structure or text used for visual effects.</p>
<blockquote>Adding aria-hidden="true" will remove the entire element from the accessibility API. - <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute">Using the aria-hidden attribute</a></blockquote>
<div class="example">
<pre>
<div aria-hidden="true">
<p class="folio">210</p>
</div>
</pre>
</div>
</section>
<section id="reading-order-spreads">
<h3>Reading Order across the 'Fold'</h3>
<p>Fixed-layout documents can be presented as synthetic spreads when a left and right page are presented together as a spread. As each page of the fixed-layout document is a separate XHTML document it is expected that reading order moves through there document from left to right (when using left to right page progression) but is not possible for the reading order to move from the left to the right and then back to the left page again.</p>
<p>If the text must be read in this way, the only solution to maintain the correct reading order is to convert the double page spread in to a single landscape page that contains the entire content of the spread and for the EPUB to be rendered as single pages.</p>
</section>
</section>
<section id="images">
<h2>Images in Fixed Layout</h2>
<section id="images-overview">
<h3>Overview</h3>
<p>Images are often an integral part of fixed layout publications. Fixed layout publications sometimes consist entirely of images, in the case of comics, or images may be used as backgrounds to a story, as in children's books. Fixed layout content where images serve as both the content and the layout pose a particular challenge for content creators interested in accessibility.</p>
<p>Ensuring that the information conveyed in the images is available to users who may not be able to perceive the image or may have difficulty processing it, is consequently of high priority in making fixed layouts as accessible as possible.</p>
<p>The <a href="http://kb.daisy.org/publishing/docs/html/images.html">basic requirements for all images</a> are to provide alternative text and extended descriptions when they contain information necessary to understanding the publication, which applies to fixed layouts. For example, while a reader may be able to follow the dialogue of a story when it is overlaid as text, only the placement on image might give context to what character is saying what.</p>
<p>One challenge with fixed layouts is finding ways to describe the image and provide context given that there is no extra area on the page users can access in which to place a description. The other challenge is for content where the text is rasterized as part of the image, which can be unavoidable for content where the text is hand-drawn or part of the image. As much as possible, we recommend making the text on the page its own layer, using technologies such as SVG and CSS to achieve the desired styling and placement, while also making the text more accessible to the user. When text is rasterized into the image, it is recommended to use the alternative text and image description recommendations described in this section.</p>
<p>Image descriptions and alternative text do have limits in their ability to translate image content to text, those limitations include the ability to adequately map the flow of action on a page to text, or translation of visual effects to textual equivalents. Work continues in this area to improve this experience, and we will note gaps in the sections below.</p>
</section>
<section id="images-alt-text">
<h3>Alternative Text and Image Descriptions</h3>
<p>Describing images within a fixed layout book will somewhat depend on the type of book these images are within. For example describing a childrens picture book will be quite different than if this is a fixed layout graphic novel such as a comic book.</p>
<aside class="ednote">
For the latest best practices regarding image descriptions it is recommended to visit the <a href="http://kb.daisy.org/publishing/docs/fxl/img.html">DAISY Knowledge Base</a> as sections from their fixed layout image descriptions has been copied here.
</aside>
</section>
<section id="images-svg">
<h3>SVG (Scaleable Vector Graphics)</h3>
<p>SVG provides two elements for describing images:</p>
<ul>
<li><code>title</code> - the equivalent of the HTML <code>alt</code> attribute; it is used to provide alternative text for an entire SVG image and individual components within it.</li>
<li><code>desc</code> - used to provide an extended description for the entire SVG image and individual components within it.</li>
</ul>
<p>When a publication is made of <a href="http://kb.daisy.org/publishing/docs/fxl/svg.html">fixed-layout SVG pages</a> these two elements can be used to describe the content. Note that ARIA attributes (<code>role</code> and <code>aria-describedby</code>) are added to improve support in assistive technologies as SVG is still not well supported.</p>
<div class="example">
<pre>
<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>
</pre>
</div>
<aside class="note">
The role `group` is given to the image because it contains additional text content (not shown) that the user will interact with. If the image were entirely graphical, the role `img` would be used instead.
</aside>
<p>The <code>title</code> and <code>desc</code> SVG elements can also be used to annotate components of a larger image.</p>
<div class="example">
<pre>
<body style="width:595px;height:842px">
<g fill="lightgray" stroke="gray" role="img" aria-describedby="gtitle">
<title id="gtitle">Rain clouds</title>
…
</g>
</body>
</pre>
</div>
<p>The one problem with using these elements to annotate SVG images is that their content is typically only made available to users of assistive technologies.</p>
<p>A more advanced approach would be to add a link or button to view the description using script or animations (e.g., open the description like a pop-out). EPUB reading system support for such approaches is likely to be limited and testing is encouraged.</p>
</section>
<section id="image-html">
<h3>HTML</h3>
<p>When an image is embedded in an HTML fixed layout page, there are more options available for including accessible descriptions. As with SVG fixed layouts, the primary consideration is once again the limitation of having only limited screen space in which to include the description.</p>
<p>For this reason, descriptions are typically hidden from view using a variety of HTML, ARIA and CSS techniques. Descriptions can be hidden, clipped, made opaque, layered under an image, etc. The <a href="http://kb.daisy.org/publishing/docs/html/hidden.html">knowledge base page on hidden content</a> delves into these possibilities in more detail.</p>
<aside class="note">
Hiding content as described in the DAISY Knowledge Base should be considered carefully. Hidden content is only available to users of assistive technologies, which could prevent others who may benefit from the same information from accessing it.
</aside>
<p>Support for scripting in XHTML content documents in EPUB is generally much better than is available for SVG, so there are more reliable techniques that can be used to make the descriptions viewable by a wider range of users. Clicking or tapping on an image can be used to show its description, for example. The <a href="http://idpf.github.io/epub3-samples/30/samples.html#the-voyage-of-life-tol">Voyage of Life sample EPUB</a> contains an experimental example of this technique.</p>
<p>Unlike reflowable publications, the CSS <code>background-image</code> property can be used with fixed layouts to set the background image for a page. It is best to limit this practice to backgrounds that are purely presentational as much as possible, however, as it complicates the ability to provide a description that any user will be able to reach (i.e., it often involves hiding the description only for assistive technologies).</p>
</section>
<section id="images-complex-desc">
<h3>Complex Image Descriptions</h3>
<p>Depending on the complexity of the image this may require complex description with one of the following formats:</p>
<ul>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G74">WCAG Technique: Providing a long description in text near the non-text content, with a reference to the location of the long description in the short description</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G73">WCAG Technique: Providing a long description in another location with a link to it that is immediately adjacent to the non-text content</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G92">WCAG Technique: Providing long description for non-text content that serves the same purpose and presents the same information</a></li>
<li><a href="http://kb.daisy.org/publishing/docs/html/images-desc.html#ex-02">DAISY's Example 2: Extended description in details</a></li>
<li><a href="http://kb.daisy.org/publishing/docs/html/images-desc.html#ex-04">DAISY's Example 4: Hidden description</a></li>
</ul>
<p>If an image splits over two pages, put the full image description of both images in the first image and in the second image reference back to the first. See <a href="http://kb.daisy.org/publishing/docs/fxl/spreads.html">Multiple Page Spreads</a>.</p>
<p>If there are a group of images in sequence, you only have to describe details in the first image. In the proceeding images only mention what has changed.</p>
<p>Not all details are needed in writing alternative text for images, and what you do describe relies heavily on context. For example, if the image is described in the surrounding text, you only need to briefly describe it in the alternative text. For more information on when, and how to describe you can go to the DIAGRAM centre, or <a href="https://accessiblepublishing.ca">AccessiblePublishing.ca</a>.</p>
<h3>Useful Resources for Image Descriptions</h3>
<ul>
<li><a href="https://www.w3.org/WAI/alt/">W3C - Resources on Alternative Text for Images</a></li>
<li><a href="http://diagramcenter.org/table-of-contents-2.html">DIAGRAM Center - Image Description Guidelines</a></li>
<li><a href="https://poet.diagramcenter.org">POET - Image Description Training Tool</a></li>
<li><a href="https://github.com/benetech/AccessibleImageSampleBook">DIAGRAM - Accessible Image Sample Book</a></li>
<li><a href="https://youtu.be/oSdz6KZpLjs">NCAM YouTube - How to Describe Complex Images for Accessibility</a></li>
<li><a href="https://www.accessiblepublishing.ca/a-guide-to-image-description/">Accessible Publishing Canada - Guide to Image Descriptions</a></li>
</ul>
</section>
</section>
<section id="navigation">
<h2>Navigation</h2>
<p>Effective navigation of fixed layout EPUB can be as important for accessibility as it is for reflowable EPUB. Many of the EPUB accessibility features found in reflowable EPUB can still be used in fixed layout.</p>
<section id="navigation-epub">
<h3>EPUB Navigation Document</h3>
<blockquote>The EPUB navigation document is a mandatory component of an EPUB Package. It allows EPUB authors to include a human- and machine-readable global navigation layer, thereby ensuring increased usability and accessibility for the user. - <a href="https://www.w3.org/TR/epub/#sec-nav-intro">EPUB 3.3 Section 7.1</a></blockquote>
<section id="navigation-epub-toc">
<h4>Table of Contents</h4>
<p>Longer and more complex visual publications often have a table of contents spanning several EPUB pages, and must have an additional table of contents for the navigation.</p>
<p>A navigation document is a requirement of EPUB; it is recommended to add additional levels of content and structure to the table of contents for accessibility. See <a href="https://www.w3.org/TR/epub/#sec-nav-toc">EPUB 3.3 Section 7.4.2 The toc nav element</a></p>
</section>
<section id="navigation-epub-pagelist">
<h4>Page Lists</h4>
<p>Because each page of a fixed layout EPUB is a separate HTML document, a page list can be generated relatively easily and will be created automatically from commonly used fixed layout creation applications. See <a href="https://www.w3.org/TR/epub/#sec-nav-pagelist">EPUB 3.3 Section 7.4.3 The page-list nav element</a>.</p>
<aside class="ednote">
There was previously an accessibility requirement in DAISY ACE for a dc:source to be present for any EPUBs that have a page list added. As fixed-layout EPUBS can be created as original works, they have a page list but no other source which caused a serious EPUB violation error in ACE. This has been resolved.
</aside>
</section>
<section id="navigation-epub-landmarks">
<h4>Landmarks</h4>
<p>The navigation of fixed layout EPUB can be further increased by adding section markers and landmarks to identify major sections of the publication. e.g. cover image, table of contents, and the start of the main body matter. See <a href="https://www.w3.org/TR/epub/#sec-nav-landmarks">EPUB 3.3 Section 7.4.4 The landmarks nav element</a>.</p>
</section>
</section>
<section id="navigation-xhtml-titles">
<h3>XHTML Page Titles</h3>
<p>The title of each XHTML page may be displayed to the end reader. As such it should be a meaningful description of the page contents or a page number.</p>
<div class="example">
<pre>
<title>The Technical Basics</title>
</pre>
</div>
</section>
<section id="navigation-ncx">
<h3>No NCX Requirement</h3>
<p>As the fixed layout EPUB standard did not exist before EPUB 3 there is no requirement for the older and superseded NCX document, the earlier method to indicate navigation in EPUB 2.</p>
</section>
<section id="navigation-epub-package">
<h3>EPUB Package Document</h3>
<blockquote>The package document is an XML document that consists of a set of elements that each encapsulate information about a particular aspect of an EPUB publication. These elements serve to centralize metadata, detail the individual resources, and provide the reading order and other information necessary for its rendering. - <a href="https://www.w3.org/TR/epub/#sec-package-intro">EPUB 3.3 Section 5.1</a></blockquote>
</section>
<section id="navigation-reading-order">
<h3>Publication Reading Order</h3>
<p>Each page of a fixed layout EPUB is an individual XHTML page. Pages are presented sequentially in the order that they are listed in the <code>spine</code> element of the package document.</p>
<p>The reading order within the page can be complex. See the <a href="#reading-order">reading order</a> section for more information on pages.</p>
</section>
<section id="navigation-hiding-content">
<h3>Hiding Content</h3>
<p>Alongside the main content of the publication, auxiliary content that enhances or augments the primary content and can be accessed out of sequence. Examples of auxiliary content include: notes, descriptions and answers to quizzes. See <a href="https://www.w3.org/TR/epub/#sec-itemref-elem">EPUB 3.3 Section 5.7.2</a>.</p>
</section>
<section id="navigation-structure">
<h3>Structural Hierarchy</h3>
<p>The use of heading tags ensures users do not have to rely on visual styling to understand and navigate the document outline. The structural hierarchy is already being considered at the design stage of visual page layout. By adding this information into the styles on the page and the tags used on export, we pull can this structure into EPUB. For example:</p>
<div class="example">
<pre>
<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>
</pre>
</div>
</section>
<section id="navigation-regionbased">
<h3>Region-based Navigation</h3>
<p>Within a page it may be possible to add the navigation to regions of interest within that page. Especially useful for splitting up a larger visual element or creating a layout for reading on smaller screens.</p>
<p>The <a href="http://idpf.org/epub/renditions/region-nav/epub-region-nav-20150826.html">EPUB Region-Based Navigation</a> specification introduces conventions for navigation through a publication based on regions of interest.</p>
<aside class="note">
EPUB Region-Based Navigation is currently only supported by a few reading systems. Content creators are advised to test any EPUBs that use this feature.
</aside>
</section>
</section>
<section id="legibility">
<h2>Legibility</h2>
<p>The legibility, or readability, of fixed layout content is an important contributing factor to its accessibility, particularly for users with low vision, cognitive, or learning disabilities. As text in a fixed layout document is unalterable, it is important to consider best practices in putting together clear, legible documents. Content creators are reminded that ebooks can be read on a number of different screen sizes and devices, many that will be smaller than the printed version of the page. Designs for fixed layout content should take into account these smaller screen sizes and their impact on legibility and layout. This section will focus on what to consider when constructing more legible fixed layout publications.</p>
<section id="legibility-fonts">
<h3>Font Selection</h3>
<p>There is no single font that meets the legibility needs of all users, but considering certain font characteristics to increase legibility is possible. When planning font selections in fixed layout publications, consider the following:</p>
<ul>
<li>Font sizing</li>
<li>Font weight</li>
<li>Font face or style</li>
</ul>
<section id="legibility-fonts-sizing">
<h4>Font Sizing</h4>
<p>There is no font size guideline in [[wcag2]], however the standard default font size in most desktop and mobile browsers is 16pt for body text (I.e. in a <code>p</code> element). This size is sufficient for most content, and headings should be based off of it by using <code>em</code> or <code>rem</code> sizing in [[css]]. If content contains a great deal of text, it is also recommended to consider a larger body font size like 18pt to ensure readability.</p>
<p>Content creators should also ensure font size patterns are consistent throughout the content, to assist users in differentiating and contextualizing the content.</p>
</section>
<section id="legibility-fonts-weight">
<h4>Font Weight</h4>
<p>Depending on the chosen font, it might be necessary to consider the weight of the font to make it more legible. A font weight of 400 is considered normal or regular, but depending on the font face, may be too light. A font that is too light can disappear into the background of a page, especially if factors like clarity or contrast are not considered. A font weight of 700 is considered bold, and would be more readable, but overusing a bold typeface can present its own issues for legibility.</p>
</section>
<section id="legibility-fonts-face">
<h4>Font Face</h4>
<p>Selecting a font face for your content can depend on a number of factors. When choosing a font for fixed layout content it is important for content creators to consider readability because a user will not be able to alter the font face to suit their needs or preferences. </p>
<p>One of the most important factors for the readability of fonts relates to character differentiation. Character differentiation in a font is a strong indicator of readability, specifically for characters that have similar shapes in a font face. In the Latin alphabet, letters like <strong>I</strong> and <strong>l</strong>, <strong>b</strong> and <strong>d</strong>, or <strong>a</strong> <strong>o</strong> and <strong>e</strong> can look very similar to one another depending on the style of the font. The same issue is possible in fonts for other alphabets, particularly when glyphs are similar in appearance or use similar elements. </p>
</section>
</section>
<section id="legibility-color">
<h3>Color Contrast</h3>
<p>[[wcag2]] specifies that the color contrast should meet certain ratios depending on its size and weight.</p>
<p>Body text, or text that is less than 18pt (or 14pt bold) in size must have a contrast of at least 4.5:1 to the background.</p>
<p>Large scale text, text that is over 18pt (or 14pt bold) must have a contrast of at least 3:1 to the background.</p>
<p>It is recommended text be placed on a solid background or one that is significantly muted in order to increase the legibility of the text.</p>
</section>
<section id="legibility-layout">
<h3>Text Layout</h3>
<p>The layout of text in a fixed-layout publication is also important when considering legibility. As outlined in the <a href="#reading-order">Reading Order</a> section, the order of content on the page, and the order in code should match. When laying out a page in a fixed layout document, consider the order the reader should follow, how to indicate that order visually, and any complications to the order (i.e. asides, definitions, images, etc). </p>
<p>When constructing a page or chapter, consider the following:</p>
<ul>
<li>Use headings to indicate hierarchy and flow of information (i.e. start a page with a <code>h2</code>, with subsequent sections as <code>h3</code> or other levels as appropriate)</li>
<li>Place related content in close proximity on the page, if an image illustrates a point made in the text, place that image in proximity to the text, or point to where it might be (i.e. “a picture of Emperor Penguins in their natural habitat can be found on the next page”)</li>
<li>Use consistent design patterns for supplemental content on the page so a reader will know its purpose or be able to contextualize it (i.e. definitions or questions)</li>
<li>Consider the spacing of sections of text and associated elements, ensure that pages are not too cramped to allow readers to process the contents of the page, but not so spaced out that someone using zoom or magnification may miss adjacent elements</li>
</ul>
</section>
</section>
<section id="media-overlays">
<h2>Media Overlays</h2>
<p>TBD</p>
</section>
<section id="tables">
<h2>Tables</h2>
<p>The best way to create an accessible table is to present it as tabular data. This is already documented in the DAISY Knowledge Base with directions on creating <a href="http://kb.daisy.org/publishing/docs/html/tables.html">semantic tagging for tables</a>.</p>
<p>If the table needs to remain an image, another option is to use alternative text and caption or ARIA roles to describe the data in logical reading order. The caption could be used as a summary of the table, and the alternative text would dive deeper. You would start with describing what the header row is followed by what is presented in each row. You could then dive deeper and list all the data as it appears in reading order.</p>
<p>Depending on the complexity of the image this may require complex description with one of the following formats:</p>
<ul>
<li>Providing a long description in text near the non-text content, with a reference to the location of the long description in the short description</li>
<li>Providing a long description in another location with a link to it that is immediately adjacent to the non-text content</li>
<li>Providing long description for non-text content that serves the same purpose and presents the same information</li>
<li>Extended description in details</li>
<li>Using hidden description</li>
</ul>
<aside class="note">
Using hidden descriptions should be considered very carefully, as hiding the description as demonstrated in example 4 will hide it from everything except assistive technologies. People with learning or cognitive disabilities would not benefit from this technique.
</aside>
<section id="tables-aria">
<h3>ARIA Roles for Tables</h3>
<p>Provide an extended description for a table using either <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA15">aria-describedby</a> or <code>aria-details</code>.</p>
<p>The advantage of <code>aria-details</code> over <code>aria-describedby</code> is that it allows users access to the markup of the linked description (which could be the table markup if you put it, for example, inside a details element to collapse it). The current drawback, however, is that there isn't great support yet for the attribute. And expanding details element within a fixed layout page is also likely to wreak a bit of havoc when users click on it (unless you find a way to reliably position it offscreen, but then that limits who can access it).</p>
<p>The aria-describedby attribute's big drawback is that it turns the description into one long text string that users have to listen to. There's no way to navigate the columns and rows or have headers read out, so it's likely going to be very difficult for users to make sense of except for very simple and very small tables.</p>
</section>
</section>
<section id="package-metadata">
<h2>Package Metadata</h2>
<p>The <a href="https://www.w3.org/TR/epub-33/#sec-fxl-package">package metadata</a> used in the EPUB is the primary method for a reading system to determine whether content is fixed layout or reflowable. In addition to identifying the pagination mode with <code>rendition:layout</code>, package metadata can also allow the content creator to have some control over other display characteristics.</p>
<p>These display characteristics include:</p>
<ul>
<li><code>rendition:orientation</code> - the orientation of the book, can be <code>landscape</code>, <code>portrait</code>, or <code>auto</code></li>
<li><code>rendition:spread</code> - the spread settings of the book, can be <code>none</code>, <code>landscape</code>, <code>both</code>, or <code>auto</code></li>
<li><code>rendition:page-spread-*</code> - spread settings for individual spine items, can be <code>left</code>, <code>right</code>, and <code>center</code></li>
</ul>
<p>The default value for the <code>orientation</code> and <code>spread</code> properties is <code>auto</code>, which means that the reading system settings or defaults take effect.</p>
<p>It is recommended that content creators do not set a specific <code>orientation</code> property, as this can interfere with user device preferences. It is especially important for users who may be unable to change the orientation of their device to match the content settings.</p>
<div class="example" id="metadata-example-1">
<p>An example of package metadata for a fixed layout publication.</p>
<pre>
<meta property="rendition:layout">pre-paginated</meta>
<meta property="rendition:orientation">auto</meta>
<meta property="rendition:spread">auto</meta>
</pre>
</div>
</section>
<section id="a11y-metadata">
<h2>Accessibility Metadata</h2>
<p>Books with accessible elements require metadata to indicate how they are accessible, and if they present and hazards to the reader.</p>
<section id="a11y-metadata-features">
<h3>Accessibility Features</h3>
<p>The schema.org property <code>accessibilityFeature</code> is used to define all accessibility features within the book.</p>
<p>A few values that could apply to a Fixed Layout book might be:</p>
<ul>
<li><code>alternativeText</code> - Images are described with alternative text</li>
<li><code>longDescriptions</code> - Complex images are described in detail</li>
<li><code>displayTransformability</code> - Text and or layout elements can be enlarged or adjusted, this does not apply to most fixed layout books</li>
<li><code>readingOrder</code> - Reading order of elements is the same between visual presentation and non-visual</li>
</ul>
<div class="example" id="metadata-example-2">
<pre>
<meta property="schema:accessibilityFeature">
alternativeText
</meta>
<meta property="schema:accessibilityFeature">
readingOrder
</meta>
</pre>
</div>
</section>
<section id="a11y-metadata-accessmode">
<h3>Access Mode</h3>
<p>The schema.org property <code>accessMode</code> is used to define the ways in which this book can be consumed be that <code>visual</code>, <code>textual</code>, <code>auditory</code>, or <code>tactile</code>.</p>
<p>A picture book would only have an <code>accessMode</code> of <code>visual</code>.</p>
<div class="example" id="metadata-example-3">
<pre>
<meta property="schema:accessMode">
visual
</meta></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>
<meta property="schema:accessMode">
visual
</meta>
<meta property="schema:accessMode">
textual
</meta>
</pre>
</div>
</section>
<section id="a11y-metadata-sufficient">
<h3>Access Mode Sufficient</h3>
<p>The schema.org property <code>accessModeSufficient</code> is used to define the combinations in which this book can be consumed be that <code>visual</code>, <code>textual</code>, <code>auditory</code>, or <code>tactile</code>.</p>
<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>
<meta property="schema:accessModeSufficient">
visual
</meta>
</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>
<meta property="schema:accessModeSufficient">
visual,textual
</meta>
</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>
<meta property="schema:accessModeSufficient">
textual
</meta>
</pre>
</div>
</section>
<section id="a11y-metadata-hazards">
<h3>Accessibility Hazards</h3>
<p>The schema.org property <code>accessibilityHazard</code> defines any hazards within the book.</p>
<p>Currently there are only three possible hazards defined: <code>flashing</code>, <code>sound</code>, and <code>motionSimulation</code>. All of which refer to embedded sound, video, or motion images such as GIFs within the book.</p>
<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>
<meta property="schema:accessibilityHazard">
none
</meta></pre>
</div>
</section>
<section id="a11y-metadata-summary">
<h3>Accessibility Summary</h3>
<p>The schema.org property <code>accessibilitySummary</code> is a human readable statement on how accessible or inaccessible the book is.</p>
<div class="example" id="metadata-example-9">
<pre>
<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>
</pre>
</div>
</section>
</section>
</body>
</html>