-
Notifications
You must be signed in to change notification settings - Fork 1
/
ED-epub-fxl-a11y-20211214.html
1110 lines (982 loc) · 82.8 KB
/
ED-epub-fxl-a11y-20211214.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
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US"><head>
<meta charset="utf-8">
<meta name="generator" content="ReSpec 28.0.7">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
span.example-title{text-transform:none}
:is(aside,div).example,div.illegal-example{padding:.5em;margin:1em 0;position:relative;clear:both}
div.illegal-example{color:red}
div.illegal-example p{color:#000}
:is(aside,div).example{border-left-width:.5em;border-left-style:solid;border-color:#e0cb52;background:#fcfaee}
aside.example div.example{border-left-width:.1em;border-color:#999;background:#fff}
.example pre{background-color:rgba(0,0,0,.03)}
</style>
<style>
.issue-label{text-transform:initial}
.warning>p:first-child{margin-top:0}
.warning{padding:.5em;border-left-width:.5em;border-left-style:solid}
span.warning{padding:.1em .5em .15em}
.issue.closed span.issue-number{text-decoration:line-through}
.warning{border-color:#f11;border-width:.2em;border-style:solid;background:#fbe9e9}
.warning-title:before{content:"⚠";font-size:1.3em;float:left;padding-right:.3em;margin-top:-.3em}
li.task-list-item{list-style:none}
input.task-list-item-checkbox{margin:0 .35em .25em -1.6em;vertical-align:middle}
.issue a.respec-gh-label{padding:5px;margin:0 2px 0 2px;font-size:10px;text-transform:none;text-decoration:none;font-weight:700;border-radius:4px;position:relative;bottom:2px;border:none;display:inline-block}
</style>
<style>
dfn{cursor:pointer}
.dfn-panel{position:absolute;z-index:35;min-width:300px;max-width:500px;padding:.5em .75em;margin-top:.6em;font:small Helvetica Neue,sans-serif,Droid Sans Fallback;background:#fff;color:#000;box-shadow:0 1em 3em -.4em rgba(0,0,0,.3),0 0 1px 1px rgba(0,0,0,.05);border-radius:2px}
.dfn-panel:not(.docked)>.caret{position:absolute;top:-9px}
.dfn-panel:not(.docked)>.caret::after,.dfn-panel:not(.docked)>.caret::before{content:"";position:absolute;border:10px solid transparent;border-top:0;border-bottom:10px solid #fff;top:0}
.dfn-panel:not(.docked)>.caret::before{border-bottom:9px solid #a2a9b1}
.dfn-panel *{margin:0}
.dfn-panel b{display:block;color:#000;margin-top:.25em}
.dfn-panel ul a[href]{color:#333}
.dfn-panel>div{display:flex}
.dfn-panel a.self-link{font-weight:700;margin-right:auto}
.dfn-panel .marker{padding:.1em;margin-left:.5em;border-radius:.2em;text-align:center;white-space:nowrap;font-size:90%;color:#040b1c}
.dfn-panel .marker.dfn-exported{background:#d1edfd;box-shadow:0 0 0 .125em #1ca5f940}
.dfn-panel .marker.idl-block{background:#8ccbf2;box-shadow:0 0 0 .125em #0670b161}
.dfn-panel a:not(:hover){text-decoration:none!important;border-bottom:none!important}
.dfn-panel a[href]:hover{border-bottom-width:1px}
.dfn-panel ul{padding:0}
.dfn-panel li{margin-left:1em}
.dfn-panel.docked{position:fixed;left:.5em;top:unset;bottom:2em;margin:0 auto;max-width:calc(100vw - .75em * 2 - .5em - .2em * 2);max-height:30vh;overflow:auto}
em {
font-style: normal;
font-family: "KaiTi TC", "BiauKai", serif;
}
.rfc2119 {
font-weight: bold;
font-family: sans-serif;
}
</style>
<title>EPUB Fixed Layout Accessibility</title>
<style id="respec-mainstyle">
@keyframes pop{
0%{transform:scale(1,1)}
25%{transform:scale(1.25,1.25);opacity:.75}
100%{transform:scale(1,1)}
}
.hljs{background:0 0!important}
:is(h1,h2,h3,h4,h5,h6,a) abbr{border:none}
dfn{font-weight:700}
a.internalDFN{color:inherit;border-bottom:1px solid #99c;text-decoration:none}
a.externalDFN{color:inherit;border-bottom:1px dotted #ccc;text-decoration:none}
a.bibref{text-decoration:none}
.respec-offending-element:target{animation:pop .25s ease-in-out 0s 1}
.respec-offending-element,a[href].respec-offending-element{text-decoration:red wavy underline}
@supports not (text-decoration:red wavy underline){
.respec-offending-element:not(pre){display:inline-block}
.respec-offending-element{background:url(data:image/gif;base64,R0lGODdhBAADAPEAANv///8AAP///wAAACwAAAAABAADAEACBZQjmIAFADs=) bottom repeat-x}
}
#references :target{background:#eaf3ff;animation:pop .4s ease-in-out 0s 1}
cite .bibref{font-style:normal}
code{color:#c63501}
th code{color:inherit}
a[href].orcid{padding-left:4px;padding-right:4px}
a[href].orcid>svg{margin-bottom:-2px}
.toc a,.tof a{text-decoration:none}
a .figno,a .secno{color:#000}
ol.tof,ul.tof{list-style:none outside none}
.caption{margin-top:.5em;font-style:italic}
table.simple{border-spacing:0;border-collapse:collapse;border-bottom:3px solid #005a9c}
.simple th{background:#005a9c;color:#fff;padding:3px 5px;text-align:left}
.simple th a{color:#fff;padding:3px 5px;text-align:left}
.simple th[scope=row]{background:inherit;color:inherit;border-top:1px solid #ddd}
.simple td{padding:3px 10px;border-top:1px solid #ddd}
.simple tr:nth-child(even){background:#f0f6ff}
.section dd>p:first-child{margin-top:0}
.section dd>p:last-child{margin-bottom:0}
.section dd{margin-bottom:1em}
.section dl.attrs dd,.section dl.eldef dd{margin-bottom:0}
#issue-summary>ul{column-count:2}
#issue-summary li{list-style:none;display:inline-block}
details.respec-tests-details{margin-left:1em;display:inline-block;vertical-align:top}
details.respec-tests-details>*{padding-right:2em}
details.respec-tests-details[open]{z-index:999999;position:absolute;border:thin solid #cad3e2;border-radius:.3em;background-color:#fff;padding-bottom:.5em}
details.respec-tests-details[open]>summary{border-bottom:thin solid #cad3e2;padding-left:1em;margin-bottom:1em;line-height:2em}
details.respec-tests-details>ul{width:100%;margin-top:-.3em}
details.respec-tests-details>li{padding-left:1em}
a[href].self-link:hover{opacity:1;text-decoration:none;background-color:transparent}
h2,h3,h4,h5,h6{position:relative}
aside.example .marker>a.self-link{color:inherit}
:is(h2,h3,h4,h5,h6)>a.self-link{border:none;color:inherit;font-size:83%;height:2em;left:-1.6em;opacity:.5;position:absolute;text-align:center;text-decoration:none;top:0;transition:opacity .2s;width:2em}
:is(h2,h3,h4,h5,h6)>a.self-link::before{content:"§";display:block}
@media (max-width:767px){
dd{margin-left:0}
:is(h2,h3,h4,h5,h6)>a.self-link{left:auto;top:auto}
}
@media print{
.removeOnSave{display:none}
}
</style>
<style>
/*prevent examples from horizontal scrolling*/
pre,
code {
white-space: break-spaces !important;
}
</style>
<style>
ul.nomark,
ol.nomark {
list-style-type: none;
}
ol.cmt,
ul.flat {
list-style-type: none;
padding-left: 0;
}
ol.cmt {
margin: 0;
}
dl.elemdef {
border-left: 0.5em solid rgb(145,200,255);
background-color: rgb(236,246,255);
padding: 0.5em 1em;
margin-bottom: 2em;
}
dl.elemdef ul.nomark {
padding-left: 1em;
}
dl.elemdef > dd > ul.nomark:first-child {
padding-left: 0 !important;
}
dl.conformance-list > dd {
margin-top: 0.7em;
}
/* styles for conformance list links */
a.hidden-reveal {
color: #005A9C !important;
}
a.hidden-reveal::before {
content: "›" !important;
}
a.hidden-reveal:link {
text-decoration: none !important;
color: #005A9C !important;
border-bottom: none !important;
}
a.hidden-reveal:visited {
text-decoration: none !important;
color: #005A9C !important;
}
a.hidden-reveal:hover {
background-color: rgb(255,255,0) !important;
}
a.hidden-reveal:active {
text-decoration: none !important;
color: #005A9C !important;
}
/* styles for prefix mapping tables */
table.mapping {
border-collapse: collapse;
}
table.mapping th,
table.mapping td {
padding: 0.5em;
border-bottom: 1px solid rgb(0,90,156);
}
table.mapping tr > td:first-child {
border-right: 1px solid rgb(220,220,220);
}
/* EBNF tables */
table.productionset {
border: none;
border-left: 5px solid rgb(145,200,255);
background-color: rgb(236,246,255);
}
table.productionset caption {
text-align: left;
font-size: 80%;
font-style: normal;
}
table.productionset tbody tr {
border: none;
}
table.productionset tbody tr td {
border: none;
padding: 0.5em;
border-bottom: 1px solid #ddd;
}
table.productionset tbody tr td a {
text-decoration: none;
border-bottom: 1px dotted #000090;
}
table.productionset tbody tr td a:hover {
text-decoration: underline;
}
table.productionset tbody tr td a:visited,
table.productionset tbody tr td a:active,
table.productionset tbody tr td a:hover {
color: #000090;
}
a.deprecated,
a.legacy {
font-size: 85%;
text-transform: uppercase;
}
/* styles for core media types */
table#tbl-core-media-types {
border-spacing: 0px;
padding: 1em;
margin-top: 1.5em;
margin-bottom: 2em;
}
table#tbl-core-media-types th {
border-bottom: 1px solid #005A9C;
font-weight: bold;
padding: 0.5em;
font-weight: bold;
color: #000090;
font-size: 90%
}
table#tbl-core-media-types td {
border-bottom: 1px solid #005A9C;
border-right: 1px solid #efefef;
padding: 0.5em;
text-align: left
}
table#tbl-core-media-types tr td:last-child {
border-right: none;
}
table#tbl-core-media-types td *, table#tbl-core-media-types td > * {
text-align: left;
}
table#tbl-core-media-types, table#tbl-core-media-types tbody {
padding: 0;
}
table#tbl-core-media-types caption {
text-align: left;
font-size: 90%
}
.tbl-group {
text-align: left;
border-bottom: none;
color: rgb(0, 0, 0);
background-color: rgb(240, 248, 255);
}
table#tbl-core-media-types > thead > tr > th {
background-color: rgb(240,240,240);
text-align: left;
white-space:nowrap;
}
table#tbl-core-media-types > tbody > tr > th {
text-align: left;
font-weight: normal;
font-style: italic;
padding: 3px;
}
table#tbl-core-media-types td, table#tbl-core-media-types th, table#tbl-core-media-types tr {
border-color: #005A9C;
margin: 0em;
}
table#tbl-core-media-types td code, table#tbl-core-media-types td a {
white-space:nowrap;
}
td[headers="tbl-cmt-appl"] {
font-size: .9em;
}
/****************************************************/
/* property tables */
/****************************************************/
/* ensure confomity of width for property tables */
section.vocab table {
border-spacing: 0px;
border: none;
font-size: 1em;
width: 100%
}
section.vocab table td, table th {
border: none;
background-color: rgb(236,246,255);
color: rgb(0,0,0);
padding: 0.3em;
vertical-align: top;
}
section.vocab table th {
text-align: left;
vertical-align: top;
width: 8em;
border-right: 1px solid rgb(145,200,255);
}
section.vocab table th {
border-left: 5px solid rgb(145,200,255);
}
section.vocab td {
padding: 3px 3px 3px 10px;
}
section.vocab td > p:first-child {
padding: 0em;
margin: 0em
}
/* Reserved prefix tables */
table.prefix {
border-spacing: 0px;
padding: 1em;
margin-top: 1.5em;
margin-bottom: 2em;
}
table.prefix th {
border-bottom: 1px solid #005A9C;
font-weight: bold;
padding: 0.5em;
font-weight: bold;
color: #000090;
font-size: 90%
}
table.prefix td {
border-bottom: 1px solid #005A9C;
border-right: 1px solid #efefef;
padding: 0.5em;
text-align: left
}
table.prefix tr td:last-child {
border-right: none;
}
table.prefix td *, table.prefix td > * {
text-align: left;
}
table.prefix, table.prefix tbody {
padding: 0;
}
table.prefix caption {
text-align: left;
font-size: 90%
}
/* Table zebra style... */
table.zebra {
font-size:inherit;
font:90%;
margin:1em;
}
table.zebra td {
padding-left: 0.3em;
}
table.zebra th {
font-weight: bold;
text-align: center;
background-color: rgb(0,0,128) !important;
font-size: 110%;
background: hsl(180, 30%, 50%);
color: #fff;
}
table.zebra th a:link {
color: #fff;
}
table.zebra th a:visited {
color: #aaa;
}
table.zebra tr:nth-child(even) {
background-color: hsl(180, 30%, 93%) !important;
}
table.zebra th{border-bottom:1px solid #bbb;padding:.2em 1em;}
table.zebra td{border-bottom:1px solid #ddd;padding:.2em 1em;}
/* structure defs */
section#structure-vocab dd > p:first-child {
margin-top: 1rem !important;
}
section#structure-vocab dd + dd {
font-size: 90%;
}
.subproplabel {
font-style: italic;
}
p.support {
border-left: 0.4rem solid rgb(255,255,0);
background-color: rgb(255,255,230);
padding: 0.7rem;
}
p.caution, div.caution {
padding: 0.5rem;
border-left: 0.5rem solid rgb(255,140,0);
background-color: rgb(254,236,207);
}
div.caution-title > span {
color: rgb(140,40,0);
text-transform: uppercase;
}
details.desc {
margin-top: -2.5rem !important;
margin-left: 3rem !important;
}
details.desc > summary {
text-align: left;
font-weight: normal !important;
font-style: italic;
}
</style>
<meta name="description" content="This document, EPUB Fixed Layout Accessibility, outlines techniques and best practices for producing more accessible EPUB® fixed layout publications.">
<link rel="canonical" href="https://www.w3.org/TR/epub-fxl-a11y/">
<style>
.hljs{display:block;overflow-x:auto;padding:.5em;color:#383a42;background:#fafafa}
.hljs-comment,.hljs-quote{color:#717277;font-style:italic}
.hljs-doctag,.hljs-formula,.hljs-keyword{color:#a626a4}
.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#ca4706;font-weight:700}
.hljs-literal{color:#0b76c5}
.hljs-addition,.hljs-attribute,.hljs-meta-string,.hljs-regexp,.hljs-string{color:#42803c}
.hljs-built_in,.hljs-class .hljs-title{color:#9a6a01}
.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#986801}
.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#336ae3}
.hljs-emphasis{font-style:italic}
.hljs-strong{font-weight:700}
.hljs-link{text-decoration:underline}
</style>
<style>
var{position:relative;cursor:pointer}
var[data-type]::after,var[data-type]::before{position:absolute;left:50%;top:-6px;opacity:0;transition:opacity .4s;pointer-events:none}
var[data-type]::before{content:"";transform:translateX(-50%);border-width:4px 6px 0 6px;border-style:solid;border-color:transparent;border-top-color:#000}
var[data-type]::after{content:attr(data-type);transform:translateX(-50%) translateY(-100%);background:#000;text-align:center;font-family:"Dank Mono","Fira Code",monospace;font-style:normal;padding:6px;border-radius:3px;color:#daca88;text-indent:0;font-weight:400}
var[data-type]:hover::after,var[data-type]:hover::before{opacity:1}
</style>
<script id="initialUserConfig" type="application/json">{
"format": "markdown",
"group": "epub",
"wgPublicList": "public-epub-wg",
"specStatus": "ED",
"shortName": "epub-fxl-a11y",
"edDraftURI": "https://w3c.github.io/epub-specs/epub33/fxl-a11y/",
"previousPublishDate": "2021-04-27",
"previousMaturity": "NOTE",
"copyrightStart": "2021",
"noRecTrack": true,
"editors": [
{
"name": "Wendy Reid",
"company": "Rakuten Kobo",
"companyURL": "https://www.kobo.com",
"w3cid": 102009
}
],
"includePermalinks": true,
"permalinkEdge": true,
"permalinkHide": false,
"diffTool": "http://www.aptest.com/standards/htmldiff/htmldiff.pl",
"github": {
"repoURL": "https://github.com/w3c/epub-specs",
"branch": "main"
},
"pluralize": true,
"localBiblio": {
"WCAG2": {
"title": "Web Content Accessibility Guidelines (WCAG) 2",
"href": "https://www.w3.org/TR/WCAG2/",
"publisher": "W3C",
"id": "wcag2"
}
},
"preProcess": [
null,
null
],
"publishISODate": "2021-12-14T00:00:00.000Z",
"generatedSubtitle": "Editor's Draft 14 December 2021"
}</script>
<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2021/W3C-ED"></head>
<body data-include-format="markdown" style="width:595px;height:842px" class="h-entry informative"><div class="head">
<a class="logo" href="https://www.w3.org/"><img crossorigin="" alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2021/logos/W3C" width="72">
</a> <h1 id="title" class="title">EPUB固定版面無障礙輔助性</h1>
<p id="w3c-state"><a href="https://www.w3.org/standards/types#ED">W3C編輯草稿</a> <time class="dt-published" datetime="2021-12-14">2021年12月14日</time></p>
<details open="">
<summary>更多關於本文件的細節</summary>
<dl>
<dt>本版本：</dt><dd>
<a class="u-url" href="https://w3c.github.io/epub-specs/epub33/fxl-a11y/">https://w3c.github.io/epub-specs/epub33/fxl-a11y/</a>
</dd><dt>最新發佈版本：</dt><dd>
<a href="https://www.w3.org/TR/epub-fxl-a11y/">https://www.w3.org/TR/epub-fxl-a11y/</a>
</dd>
<dt>最新編輯草稿：</dt><dd><a href="https://w3c.github.io/epub-specs/epub33/fxl-a11y/">https://w3c.github.io/epub-specs/epub33/fxl-a11y/</a></dd>
<dt>歷史：</dt><dd>
<a href="https://github.com/w3c/epub-specs/commits/main">更新歷程</a>
</dd>
<dt>編輯者：</dt>
<dd class="editor p-author h-card vcard" data-editor-id="102009">
<span class="p-name fn">Wendy Reid</span> (<a class="p-org org h-org" href="https://www.kobo.com">Rakuten Kobo</a>)
</dd>
<dt>提出回饋：</dt><dd>
<a href="https://github.com/w3c/epub-specs/">GitHub w3c/epub-specs</a>
(<a href="https://github.com/w3c/epub-specs/pulls/">pull requests</a>,
<a href="https://github.com/w3c/epub-specs/issues/new/choose">new issue</a>,
<a href="https://github.com/w3c/epub-specs/issues/">open issues</a>)
</dd><dd>以郵件主旨<em>…訊息主題…</em><kbd>[epub-fxl-a11y]</kbd>寄送到<a href="mailto:public-epub-wg@w3.org?subject=%5Bepub-fxl-a11y%5D%20YOUR%20TOPIC%20HERE">public-epub-wg@w3.org</a>(<a rel="discussion" href="https://lists.w3.org/Archives/Public/public-epub-wg">存檔</a>)</dd>
</dl>
</details>
<p class="copyright">
<a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a>
©
2021
<a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>,
<a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>,
<a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C
<a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
<a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and
<a rel="license" href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document" title="W3C Software and Document Notice and License">permissive document license</a> rules apply.
</p>
<hr title="Separator for header">
</div><section id="abstract" class="introductory"><h2 id="abstract-0">摘要<a class="self-link" href="#abstract" aria-label="Permalink for Section"></a></h2><p>本文件，EPUB固定版面無障礙輔助性，匡列了製作更具無障礙輔助性EPUB®固定版面出版品的技巧和最佳實踐。</p></section><section id="sotd" class="introductory"><h2 id="status-of-this-document">本文件狀態<a class="self-link" href="#sotd" aria-label="Permalink for Section"></a></h2><p><em>本章節解釋了本文件在其發表時的狀態。其他文件可能取代本文件。<abbr title="World Wide Web Consortium">W3C</abbr>的當前出版品清單以及本技術報告的最新版本可於位在 https://www.w3.org/TR/之<a href="https://www.w3.org/TR/"><abbr title="World Wide Web Consortium">W3C</abbr>技術報告索引</a></em></p>
<p>本文件由<a href="https://www.w3.org/groups/wg/epub">EPUB 3工作小組</a>發布為編輯草稿。
</p>
<p>作為編輯草稿發表不代表受<abbr title="World Wide Web Consortium">W3C</abbr>及其會員支持。</p>
<p>本文件為草稿，而且可能會隨時會被其他文件更新、取代、淘汰。編輯作業尚未完成前，不適宜引用本文件。</p>
<p>本文件由基於<a href="https://www.w3.org/Consortium/Patent-Policy/"><abbr title="World Wide Web Consortium">W3C</abbr>專利政策</a>下運作的一個小組所製作。<abbr title="World Wide Web Consortium">W3C</abbr>維護了一份與該小組交付成果有關的 <a rel="disclosure" href="https://www.w3.org/groups/wg/epub/ipr">任何專利披露公開清單</a>，該頁面也包含了專利披露的說明。任何人若實際擁有某項專利知識並相信其包含該專利之 <a href="https://www.w3.org/Consortium/Patent-Policy/#def-essential">主要申請範圍</a>，則必需依照<abbr title="World Wide Web Consortium">W3C</abbr>專利政策第六節之規定揭露該訊息。</p>
<p>本文件受<a id="w3c_process_revision" href="https://www.w3.org/2021/Process-20211102/">2021年11月2日<abbr title="World Wide Web Consortium">W3C</abbr>流程文件</a>所規範。</p></section><nav id="toc"><h2 class="introductory" id="table-of-contents-0">目錄</h2><ol class="toc">
<li class="tocline"><a class="tocxref" href="#abstract">摘要</a></li>
<li class="tocline"><a class="tocxref" href="#sotd">本文件狀態</a></li>
<li class="tocline"><a class="tocxref" href="#intro"><bdi class="secno">1. </bdi>導論</a><ol class="toc">
<li class="tocline"><a class="tocxref" href="#overview"><bdi class="secno">1.1 </bdi>概要</a></li>
<li class="tocline"><a class="tocxref" href="#limits"><bdi class="secno">1.2 </bdi>固定版面無障礙輔助性的限制</a></li></ol></li>
<li class="tocline"><a class="tocxref" href="#reading-order"><bdi class="secno">2. </bdi>閱讀順序</a><ol class="toc">
<li class="tocline"><a class="tocxref" href="#reading-order-position"><bdi class="secno">2.1 </bdi>頁面位置問題</a></li>
<li class="tocline"><a class="tocxref" href="#reading-order-stacking"><bdi class="secno">2.2 </bdi>堆疊順序問題</a></li>
<li class="tocline"><a class="tocxref" href="#reading-order-changing"><bdi class="secno">2.3 </bdi>調整閱讀順序</a></li>
<li class="tocline"><a class="tocxref" href="#reading-order-removing"><bdi class="secno">2.4 </bdi>從閱讀順序中移除項目</a></li>
<li class="tocline"><a class="tocxref" href="#reading-order-spreads"><bdi class="secno">2.5 </bdi>跨「摺」的閱讀順序</a></li></ol></li>
<li class="tocline"><a class="tocxref" href="#alt-text"><bdi class="secno">3. </bdi>替代文字</a><ol class="toc">
<li class="tocline"><a class="tocxref" href="#overview-1"><bdi class="secno">3.1 </bdi>概要</a></li>
<li class="tocline"><a class="tocxref" href="#svg"><bdi class="secno">3.2 </bdi>SVG</a></li>
<li class="tocline"><a class="tocxref" href="#html"><bdi class="secno">3.3 </bdi>HTML</a></li>
<li class="tocline"><a class="tocxref" href="#complex-image-descriptions"><bdi class="secno">3.4 </bdi>複雜影像的描述</a></li>
<li class="tocline"><a class="tocxref" href="#useful-resources-for-describing-images"><bdi class="secno">3.5 </bdi>描述影像的有用資源</a></li></ol></li>
<li class="tocline"><a class="tocxref" href="#navigation"><bdi class="secno">4. </bdi>導覽</a><ol class="toc">
<li class="tocline"><a class="tocxref" href="#epub-nav"><bdi class="secno">4.1 </bdi>EPUB導覽文件</a><ol class="toc">
<li class="tocline"><a class="tocxref" href="#epub-toc"><bdi class="secno">4.1.1 </bdi>目錄</a></li>
<li class="tocline"><a class="tocxref" href="#epub-pagelist"><bdi class="secno">4.1.2 </bdi>頁面列表</a></li>
<li class="tocline"><a class="tocxref" href="#epub-landmarks"><bdi class="secno">4.1.3 </bdi>地標 - the landmarks nav元素</a></li></ol></li>
<li class="tocline"><a class="tocxref" href="#xhtml-titles"><bdi class="secno">4.2 </bdi>XHTML頁面標題</a></li>
<li class="tocline"><a class="tocxref" href="#ncx"><bdi class="secno">4.3 </bdi>無NCX規定</a></li>
<li class="tocline"><a class="tocxref" href="#epub-package"><bdi class="secno">4.4 </bdi>EPUB包裝文件</a></li>
<li class="tocline"><a class="tocxref" href="#reading-order-1"><bdi class="secno">4.5 </bdi>閱讀順序</a></li>
<li class="tocline"><a class="tocxref" href="#hiding-content"><bdi class="secno">4.6 </bdi>隱藏內容</a></li>
<li class="tocline"><a class="tocxref" href="#structural-hierarchy"><bdi class="secno">4.7 </bdi>結構樹狀</a></li>
<li class="tocline"><a class="tocxref" href="#region-based-navigation"><bdi class="secno">4.8 </bdi>基於區域的導覽</a></li></ol></li>
<li class="tocline"><a class="tocxref" href="#legibility"><bdi class="secno">5. </bdi>易讀性</a><ol class="toc">
<li class="tocline"><a class="tocxref" href="#font-selection"><bdi class="secno">5.1 </bdi>選擇字型</a><ol class="toc">
<li class="tocline"><a class="tocxref" href="#font-sizing"><bdi class="secno">5.1.1 </bdi>字級</a></li>
<li class="tocline"><a class="tocxref" href="#font-weight"><bdi class="secno">5.1.2 </bdi>字重</a></li>
<li class="tocline"><a class="tocxref" href="#font-face"><bdi class="secno">5.1.3 </bdi>字體</a></li></ol></li>
<li class="tocline"><a class="tocxref" href="#color-contrast"><bdi class="secno">5.2 </bdi>色彩對比</a></li>
<li class="tocline"><a class="tocxref" href="#text-layout"><bdi class="secno">5.3 </bdi>文字排版</a></li></ol></li>
<li class="tocline"><a class="tocxref" href="#media-overlays"><bdi class="secno">6. </bdi>媒體覆蓋</a></li>
<li class="tocline"><a class="tocxref" href="#tables"><bdi class="secno">7. </bdi>表格</a><ol class="toc">
<li class="tocline"><a class="tocxref" href="#tables-aria"><bdi class="secno">7.1 </bdi>供表格使用的ARIA Roles</a></li></ol></li>
<li class="tocline"><a class="tocxref" href="#a11y-metadata"><bdi class="secno">8. </bdi>無障礙輔助詮釋資料</a><ol class="toc">
<li class="tocline"><a class="tocxref" href="#a11y-metadata-features"><bdi class="secno">8.1 </bdi>無障礙輔助性功能</a></li>
<li class="tocline"><a class="tocxref" href="#a11y-metadata-access-mode"><bdi class="secno">8.2 </bdi>存取模式</a></li>
<li class="tocline"><a class="tocxref" href="#a11y-metadata-access-mode-sufficient"><bdi class="secno">8.3 </bdi>充要存取模式</a></li>
<li class="tocline"><a class="tocxref" href="#a11y-metadata-hazards"><bdi class="secno">8.4 </bdi>無障礙輔助性危害</a></li>
<li class="tocline"><a class="tocxref" href="#a11y-metadata-accessibility-summary"><bdi class="secno">8.5 </bdi>無障礙輔助性摘要</a></li></ol></li>
<li class="tocline"><a class="tocxref" href="#references"><bdi class="secno">A. </bdi>參考資料</a><ol class="toc">
<li class="tocline"><a class="tocxref" href="#informative-references"><bdi class="secno">A.1 </bdi>參考性文件</a></li></ol></li></ol></nav><section id="introduction"><h2 id="intro"><bdi class="secno">1. </bdi>導論<a class="self-link" href="#intro" aria-label="Permalink for Section 1."></a></h2><section id="overview-0"><h3 id="overview"><bdi class="secno">1.1 </bdi>概要<a class="self-link" href="#overview" aria-label="Permalink for Section 1.1"></a></h3><p>固定版面出版品，或者在數位版本中保存其印刷版面的出版品，在EPUB 3.0.1之前就廣受周知。這樣的出版品跨相當多的種類以及類型，包含漫畫書、食譜、童書以及其他。</p>
<p>創建固定版面出版品背後的主要動機是需要保存該書的印刷版面，可能是相較文字而言，版面相當重要（例如具有複雜的圖表），或者因為藝術上的目的（例如具有插畫文字）。然而，這些出版品通常部分或者整體，都讓無法閱讀印刷書的障礙者無法閱讀。</p>
<p>本備忘用以協助內容作者與出版者，嘗試描述一些在固定版面內容中常見的無障礙輔助性問題，包括導覽、閱讀順序、以及替代文字。本文件為[EPUB-A11Y-11]的隨伴，為了固定版面出版品特化。所有在[<cite><a class="bibref" data-link-type="biblio" href="#bib-epub-a11y-11" title="EPUB Accessibility 1.1">EPUB-A11Y-11</a></cite>]、[<cite><a class="bibref" data-link-type="biblio" href="#bib-epub-33" title="EPUB 3.3">EPUB-33</a></cite>]，以及[<cite><a class="bibref" data-link-type="biblio" href="#bib-epub-rs-33" title="EPUB Reading Systems 3.3">EPUB-RS-33</a></cite>]中的推薦都可適用並在此延伸。</p></section><section id="the-limits-of-fixed-layout-accessibility"><h3 id="limits"><bdi class="secno">1.2 </bdi>固定版面無障礙輔助性的限制<a class="self-link" href="#limits" aria-label="Permalink for Section 1.2"></a></h3><p>固定版面出版品呈現了許多固有的無障礙輔助性挑戰。在[<cite><a class="bibref" data-link-type="biblio" href="#bib-epub-a11y-11" title="EPUB Accessibility 1.1">EPUB-A11Y-11</a></cite>]提出規定，推薦符合[<cite><a class="bibref" data-link-type="biblio" href="#bib-wcag2" title="Web Content Accessibility Guidelines (WCAG) 2">WCAG2</a></cite>]AA等級，但在許多固定版面的使用案例中，在不根本性地改變內容之下，實在不可能滿足。</p>
<p>我們想要認識這些對內容製作者的挑戰，並且在此份文件中匡列許多技巧來管理這些挑戰。我們鼓勵內容製作者發覺數位出版品所呈現的可能性，儘管在製作固定版面出版品時亦然。</p></section></section><section id="reading-order-0"><h2 id="reading-order"><bdi class="secno">2. </bdi>閱讀順序<a class="self-link" href="#reading-order" aria-label="Permalink for Section 2."></a></h2><blockquote>
<p>EPUB的關鍵概念為：EPUB出版品中包含了多種資源，而能被人以及程式，按照某些指定順序來完整導覽及閱讀。 1.2.1閱讀順序 [<cite><a class="bibref" data-link-type="biblio" href="#bib-epub-overview-33" title="EPUB 3 Overview">EPUB-OVERVIEW-33</a></cite>]</p>
</blockquote><p>當許多重排的出版品擁有明確的閱讀順序，或者其內容有著邏輯進程，固定版面出版品通常在設計上更為複雜，其版面通常在同一頁上包含了多個可閱讀的物件。</p>
<p>對視覺頁面的觀看者來說，閱讀順序可透過多種視覺要素推斷，包含：</p><ul>
<li>使用的文字尺寸與樣式</li>
<li>設計特徵像是圖像以及彩色背景</li>
<li>頁面上的位置，由上到下，由左到右（當使用由左到右翻頁時）</li>
</ul><p>此外在固定版面頁面上，可能還有一些文字與圖片物件不需要被包含在閱讀順序內，包括：</p><ul>
<li>頁碼</li>
<li>章節標題</li>
<li>其他純裝飾性的物件</li>
</ul><section id="the-page-position-problem"><h3 id="reading-order-position"><bdi class="secno">2.1 </bdi>頁面位置問題<a class="self-link" href="#reading-order-position" aria-label="Permalink for Section 2.1"></a></h3><p>對複雜的設計而言，在固定版面頁面上物件的位置並非其閱讀順序可靠的指引。</p>
<p><img src="https://paper-attachments.dropbox.com/s_0AAB5B58D7ED490A2ECD81A9EF48D7CA8161EC26CC0E062275C355EA1B8AAB1F_1620130508735_image.png" alt="在上面的頁面範例中，最上層的標題可由其樣式推斷而位置則為其次，逐步教學閱讀順序由左到右，但卻以兩列呈現。"></p>
<p><img src="https://paper-attachments.dropbox.com/s_0AAB5B58D7ED490A2ECD81A9EF48D7CA8161EC26CC0E062275C355EA1B8AAB1F_1620131709989_image.png" alt="正確的閱讀順序由覆蓋的區域所指示。"></p>
<p>在多欄文件中，內容流的線性呈現順序由一欄的頂端開始到一欄的底部，然後再由下一蘭的頂端開始。</p>
<p><a href="https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence">來自成功標準1.3.2：有意義的序列的範例</a></p></section><section id="the-stacking-order-problem"><h3 id="reading-order-stacking"><bdi class="secno">2.2 </bdi>堆疊順序問題<a class="self-link" href="#reading-order-stacking" aria-label="Permalink for Section 2.2"></a></h3><p>文字轉換語音（Text to Speech, TTS）的預設閱讀順序由元素在XHMTL頁面（DOM）中的順序所決定。熱門的頁面排版程式，像是Adobe InDesign以及Apple Pages在輸出頁面內容時按照物件在頁面上的堆疊順序，而並非其在頁面上的位置。在最上層的物件位於其他的物件之上，所以被寫在HTML的最末尾。</p>
<p><img src="https://paper-attachments.dropbox.com/s_0AAB5B58D7ED490A2ECD81A9EF48D7CA8161EC26CC0E062275C355EA1B8AAB1F_1620137557760_InDesign_stack.png" alt="層疊順序通常被排版應用程式用來辨識閱讀順序。"></p>
<p>以上設計可能會被以相反的閱讀順序處理。
</p><pre><code class="html hljs" aria-busy="false">
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:500px;height:200px;top:400px;position:absolute; … "</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span> …=<span class="hljs-string">""</span>></span>Bottom object<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:500px;height:200px;top:225px;position:absolute; … "</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span> …=<span class="hljs-string">""</span>></span>Middle object<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:500px;height:200px;top:50px;position:absolute; … "</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span> …=<span class="hljs-string">""</span>></span>Top object<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</code></pre></section><section id="altering-the-reading-order"><h3 id="reading-order-changing"><bdi class="secno">2.3 </bdi>調整閱讀順序<a class="self-link" href="#reading-order-changing" aria-label="Permalink for Section 2.3"></a></h3><blockquote>
<p>如果有一位盲人使用者，他可以透過遵循來源順序的螢幕閱讀器來讀該網頁，就可以和看得到的使用者一樣，按照視覺順序閱讀該頁面。他們也許會在遇到資訊以不同順序呈現時感到困擾。弱視的使用者將螢幕放大鏡與螢幕閱讀器並用，當閱讀順序在螢幕上中斷時，也會感到困惑。鍵盤使用者在來源的順序與視覺順序不符合時，也會無法預設下一個要前往的焦點而產生問題。</p>
</blockquote><p><a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C27">讓DOM順序符合視覺順序</a></p>
<p>自動輸出所得到的閱讀順序，是透過對頁面位置的分析，及/或層疊順序而來，而會影響到閱讀順序。兩者都不合適，變更層疊順序以供預測閱讀順序的做法，可能會潛在地變更或者破壞頁面的設計。</p>
<p><img src="https://paper-attachments.dropbox.com/s_0AAB5B58D7ED490A2ECD81A9EF48D7CA8161EC26CC0E062275C355EA1B8AAB1F_1620136528766_Screenshot+2021-05-04+at+14.55.18.png" alt="自動輸出所得到的閱讀順序，是透過對頁面位置的分析，及/或層疊順序而來，而會影響到閱讀順序。兩者都不合適，變更層疊順序以供預測閱讀順序的做法，可能會潛在地變更或者破壞頁面的設計。"></p><div class="note" role="note" id="issue-container-generatedID"><div role="heading" class="note-title marker" id="h-note" aria-level="4"><span>注意事項</span></div><aside class="">
<p>Adobe InDesign的articles面板可以用來定義輸出文字重排EPUB以及PDF的閱讀順序，而不會影響到由Adobe InDesign輸出的固定版面EPUB。</p>
</aside></div><p>推薦的最佳實踐解決方案是調整XHTML頁面中的元素順序，以及使用CSS的<code>z-index</code>語法來保持其設計。</p><pre><code class="html hljs" aria-busy="false">
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"z-index:3;width:500px;height:200px;top:50px;position:absolute; … "</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span> …=<span class="hljs-string">""</span>></span>Top object<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"z-index:2;width:500px;height:200px;top:225px;position:absolute; … "</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span> …=<span class="hljs-string">""</span>></span>Middle object<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"z-index:1;width:500px;height:200px;top:400px;position:absolute; … "</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span> …=<span class="hljs-string">""</span>></span>Bottom object<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</code></pre></section><section id="removing-items-from-the-reading-order"><h3 id="reading-order-removing"><bdi class="secno">2.4 </bdi>從閱讀順序中移除項目<a class="self-link" href="#reading-order-removing" aria-label="Permalink for Section 2.4"></a></h3><p>在一些狀況中，文字會出現在頁面上，但卻非必要、重複，還有其他加到閱讀順序中會造成困擾的狀況。例如，頁碼、章節標題，這些出版品結構中的一部分以及用於視覺效果的文字。</p><blockquote>
<p>添加aria-hidden="true"可以將整個元素從無障礙輔助API中移除。</p>
</blockquote><p><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute">使用aria-hidden屬性</a></p><pre><code class="html hljs" aria-busy="false"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"folio"</span>></span>210<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</code></pre></section><section id="reading-order-across-the-fold"><h3 id="reading-order-spreads"><bdi class="secno">2.5 </bdi>跨「摺」的閱讀順序<a class="self-link" href="#reading-order-spreads" aria-label="Permalink for Section 2.5"></a></h3><p>固定版面文件可以透過「同步跨頁」的方式呈現，讓左頁與右頁一起以跨頁的方式顯示。因為在固定版面文件中的每一頁都是獨立的XHTML文件，所以該文件的閱讀順序是由左而右（當使用由左而右翻頁設定時）但實際上閱讀順序由左而右又由又回到左頁，並非不會出現。</p>
<p>如果文字一定要以這種方式被讀到，唯一維持正確的閱讀順序的解決方式就是將跨兩頁的內容結合成單一的橫向頁面包含所有褲頁中的內容，在EPUB中被排列為單一頁面。</p></section></section><section id="alternative-text"><h2 id="alt-text"><bdi class="secno">3. </bdi>替代文字<a class="self-link" href="#alt-text" aria-label="Permalink for Section 3."></a></h2><p>在固定版面的書中描述圖片的方式多少依存於這些圖片所在書的類型。例如描述兒童的圖畫書，就會和描述漫畫這種固定版面的圖像小說有所不同。</p><div class="note" id="issue-container-generatedID-0"><div role="heading" class="ednote-title marker" id="h-ednote" aria-level="3"><span>編輯註解</span></div><aside class="">
<p>若要取得最新的圖片描述最佳實踐，建議前往<a href="http://kb.daisy.org/publishing/docs/fxl/img.html">DAISY的知識庫</a>，本章節的固定版面文字描述複製於該處。</p>
</aside></div><section id="overview-1"><h3 id="x3-1-overview"><bdi class="secno">3.1 </bdi>概要<a class="self-link" href="#overview-1" aria-label="Permalink for Section 3.1"></a></h3><p>圖片通常是固定版面出版品整合的一部分。固定版面出版品有時完全由圖片所構成，像是漫畫，或者圖片被用於作為故事背景，像是童書。</p>
<p>確保圖片中所傳達的資訊，可被無法感知其背景、或者難以處理的使用者獲得。在使固定版面盡可能地具備無障礙輔助性中，具有高優先度。</p>
<p>最<a href="http://kb.daisy.org/publishing/docs/html/images.html">基本的規定</a>就是當圖片包含理解該出版品所必需的資訊時，都需提供替代文字以及延伸敘述。</p>
<p>應用在固定版面時，例如，當故事的對話以文字層存在時，使用者可能可以跟隨。但放在圖片上的位置可能提供哪個角色正在說些什麼的脈絡。</p></section><section id="svg"><h3 id="x3-2-svg"><bdi class="secno">3.2 </bdi>SVG<a class="self-link" href="#svg" aria-label="Permalink for Section 3.2"></a></h3><p>SVG提供了兩個元素來描述圖片：
</p>
<p><code>title</code> — 等同於HTML的alt屬性；其用於提供整個SVG圖片以及其中獨立元件的替代文字。</p>
<p><code>desc</code> — 用於提供整個SVG圖片以及其中獨立元件的延伸敘述。</p>
<p>當一份出版品由<a href="http://kb.daisy.org/publishing/docs/fxl/svg.html">固定版面SVG頁面</a>所構成時，這兩個元素可以被用於描述其內容。請注意ARIA屬性 (<code>role</code>及<code>aria-describedby</code>) 用於增進對輔助科技的支援，但在SVG上依然未完整支援。</p><pre><code class="html hljs" aria-busy="false">
<span class="hljs-tag"><<span class="hljs-name">svg</span> <span class="hljs-attr">xmlns</span>=<span class="hljs-string">"http://www.w3.org/2000/svg"</span> <span class="hljs-attr">xml:lang</span>=<span class="hljs-string">"en"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"group"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"svgtitle svgdesc"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">title</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"svgtitle"</span>></span>The Hydrologic Cycle<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
<span class="hljs-tag"><<span class="hljs-name">desc</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"svgdesc"</span>></span>The continuous cycle by which water …<span class="hljs-tag"></<span class="hljs-name">desc</span>></span>
…
<span class="hljs-tag"></<span class="hljs-name">svg</span>></span>
</code></pre><div class="note" role="note" id="issue-container-generatedID-1"><div role="heading" class="note-title marker" id="h-note-0" aria-level="4"><span>注意事項</span></div><aside class="">
<p>這裡於圖片中將role指定為<code>group</code>，是因爲其包含了額外的文字內容（並未顯示）讓使用者能夠與其互動。如果圖片完全為圖像，role則可替代為img。</p>
</aside></div><p>SVG元素中<code>title</code>與<code>desc</code>也可以用於註解大幅圖片中的部件。</p><pre><code class="html hljs" aria-busy="false">
<span class="hljs-tag"><<span class="hljs-name">g</span> <span class="hljs-attr">fill</span>=<span class="hljs-string">"lightgray"</span> <span class="hljs-attr">stroke</span>=<span class="hljs-string">"gray"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"img"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"gtitle"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">title</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"gtitle"</span>></span>Rain clouds<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
…
<span class="hljs-tag"></<span class="hljs-name">g</span>></span>
</code></pre><p>使用這些元素來對SVG進行著解的問題在於，這些內容一般僅能透過輔助科技讓使用者取得。</p>
<p>更先進的做法是添加一個連結或者按鍵，使用動畫或者腳本來檢視描述（例如以跳出方式開啟描述）。EPUB閱讀系統對這種手段的支援可能有所限制，但鼓勵多加嘗試。</p></section><section id="html"><h3 id="x3-3-html"><bdi class="secno">3.3 </bdi>HTML<a class="self-link" href="#html" aria-label="Permalink for Section 3.3"></a></h3><p>當一則圖片嵌入於HTML固定版面頁面時就有更多可用的方式來包含無障礙輔助用描述。就像SVG固定版面一樣，主要的限制考量一樣是僅有有限的螢幕空間能夠包含描述。</p>
<p>因此，描述通常使用各種HTML、ARIA以及CSS技巧在視覺上進行隱藏。描述可以被隱藏、省略一部分、改為透明、變成圖片下的圖層等。<a href="http://kb.daisy.org/publishing/docs/html/hidden.html">知識庫上的隱藏內容頁面</a>提供更近一步對可能性的探索。</p>
<p>對EPUB的XHTML內容文件中的腳本支援，目前比起對SVG文件的支援來得好，所以有更多可靠的技巧捨已使用，讓描述被更廣範圍使用者所觀看到。透過點擊或者觸摸圖片來呈現其描述，例如。<a href="http://idpf.github.io/epub3-samples/30/samples.html#the-voyage-of-life-tol">範本生命之旅EPUB</a>為本技巧實驗性的範例。</p>
<p>不像重排性質的出版品，CSS <code>background-image</code>特性在固定版面中可以用來設定頁面的背景圖片。但最好盡可能地限制使用者種方法來呈現純表現性的背景，因為這會讓提供描述給任何使用者能夠接觸的能力變得複雜（例如，通常涉及隱藏僅為輔助科技提供的描述）。</p></section><section id="complex-image-descriptions"><h3 id="x3-4-complex-image-descriptions"><bdi class="secno">3.4 </bdi>複雜影像的描述<a class="self-link" href="#complex-image-descriptions" aria-label="Permalink for Section 3.4"></a></h3><p>按照圖片的複雜性，可能會需要以以下格式提供更複雜的描述：</p><ul>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G74">WCAG技巧：在非文字內容附近以文字提供長的描述，並且在短描述中加上對長描述所在位置的參照。</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G73">WCAG技巧：在另一個位置提供長描述，並且在非文字內容的鄰接處立即提供連結。</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G92">WCAG技巧：為非文字內容提供長的描述，提供相同目的與相同資訊的表現。
</a></li>
<li><a href="http://kb.daisy.org/publishing/docs/html/images-desc.html#ex-02">(DAISY的範例2：延伸敘述的細節)</a></li>
<li><a href="http://kb.daisy.org/publishing/docs/html/images-desc.html#ex-04">(DAISY的範例4：隱藏敘述)</a></li>
</ul><p>如果一則圖片跨到兩頁上，請將完整的的圖片描述放在第一則影像，並且在第二則影像提供參照到第一則。請見<a href="http://kb.daisy.org/publishing/docs/fxl/spreads.html">多重頁面跨頁</a>。</p>
<p>如果有一組序列中的圖片，你僅需要在第一則圖片中敘述細節。在處理圖片時僅需要描述何處改變了。W3對圖片群組的教程。</p>
<p>不需要將所有細節都寫在圖片的替代文字中，你需要描述的部分相當重的比例取決於脈絡。例如，如果有一張描述由圍繞的文字所描述，你僅需要在替代文字中簡單敘述。更多對於何時以及如何描述的資訊，可以到DIAGRAM中心或者AccessibilePublishing.ca。請從參考資料中獲得連結。</p></section><section id="useful-resources-for-describing-images"><h3 id="x3-5-useful-resources-for-describing-images"><bdi class="secno">3.5 </bdi>描述影像的有用資源<a class="self-link" href="#useful-resources-for-describing-images" aria-label="Permalink for Section 3.5"></a></h3><ul>
<li><a href="https://www.w3.org/WAI/alt/"><abbr title="World Wide Web Consortium">W3C</abbr> - 圖片替代文字的資源</a></li>
<li><a href="http://diagramcenter.org/table-of-contents-2.html">圖片描述指引</a></li>
<li><a href="https://poet.diagramcenter.org">POET - 圖片描述訓練工具</a></li>
<li><a href="https://github.com/benetech/AccessibleImageSampleBook">DIAGRAM - 無障礙輔助圖片範本書</a></li>
<li><a href="https://youtu.be/oSdz6KZpLjs">如何對複雜圖片做描述以增進無障礙輔助性 - NCAM YouTube Video</a></li>
<li><a href="https://www.accessiblepublishing.ca/a-guide-to-image-description/">AccessibilePublishing.ca提供的圖片描述指引</a></li>
</ul></section></section><section id="navigation-0"><h2 id="navigation"><bdi class="secno">4. </bdi>導覽<a class="self-link" href="#navigation" aria-label="Permalink for Section 4."></a></h2><p>固定版面EPUB的有效導覽在無障礙輔助性上，與重排EPUB相同重要。許多在重排EPUB中可用的EPUB無障礙輔助功能也可以用在固定版面中。</p><section id="epub-navigation-document"><h3 id="epub-nav"><bdi class="secno">4.1 </bdi>EPUB導覽文件<a class="self-link" href="#epub-nav" aria-label="Permalink for Section 4.1"></a></h3><blockquote>
<p>EPUB導覽文件是EPUB包裝的必要元件。其讓作者包含一份可供人類閱讀以及機器讀取的全域導覽層，以確保能為使用者增加可用性與無障礙輔助性。</p>
</blockquote><p><a href="https://www.w3.org/publishing/epub3/epub-packages.html#sec-package-nav">EPUB包裝3.2 - 5 EPUB導覽文件</a></p><section id="table-of-contents"><h4 id="epub-toc"><bdi class="secno">4.1.1 </bdi>目錄<a class="self-link" href="#epub-toc" aria-label="Permalink for Section 4.1.1"></a></h4><p>長而且複雜的視覺出版品通常會有一份跨多個EPUB頁面的目錄，同時必須包含一份額外的目錄供導覽使用。</p>
<p>EPUB規定要有一份導覽文件；其推薦在目錄中為內容以及結構增添額外的層級來提供無障礙輔助性。<a href="https://www.w3.org/publishing/epub3/epub-packages.html#sec-nav-toc">請見EPUB導覽文件定義5.4-5.4.22 toc nav元素</a></p></section><section id="page-lists"><h4 id="epub-pagelist"><bdi class="secno">4.1.2 </bdi>頁面列表<a class="self-link" href="#epub-pagelist" aria-label="Permalink for Section 4.1.2"></a></h4><p>由於固定版面EPUB的每一頁都是獨立的HTML文件，因此可以相對簡單地產生頁面列表，像是透過常用的固定版面製作應用程式自動創建。</p>
<p>請見<a href="https://www.w3.org/publishing/epub3/epub-packages.html#sec-nav-toc">EPUB導覽文件定義5.4-5.4.2.3 EPUB page-list nav元素</a></p><div class="note" id="issue-container-generatedID-2"><div role="heading" class="ednote-title marker" id="h-ednote-0" aria-level="5"><span>編輯註解</span></div><aside class="">
<p>在DAISY ACE中原先有一項無障礙輔助性規定：在所有具備頁面列表的EPUB中都一定要有一個dc:source。由於固定版面EPUB檔案可能是原創作品，所以擁有的頁面列表沒有其他來源可參照，這在ACE中會造成嚴重的錯誤，這問題已經解決。</p>
</aside></div></section><section id="landmarks-the-landmarks-nav-element"><h4 id="epub-landmarks"><bdi class="secno">4.1.3 </bdi>地標 - landmarks nav元素<a class="self-link" href="#epub-landmarks" aria-label="Permalink for Section 4.1.3"></a></h4><p>固定版面EPUB的導覽可以更近一步的提升，只要增添章節標記和地標來辨識出版品的主要部分。例如：封面圖片、目錄，以及主要內容（bodymatter）的開始位置。</p>
<p>請見<a href="https://www.w3.org/publishing/epub3/epub-packages.html#sec-nav-landmarks">EPUB導覽文件定義5.4-5.4.2.4 landmarks nav元素</a></p></section></section><section id="xhtml-page-titles"><h3 id="xhtml-titles"><bdi class="secno">4.2 </bdi>XHTML頁面標題<a class="self-link" href="#xhtml-titles" aria-label="Permalink for Section 4.2"></a></h3><p>每一份XHTML頁面的title都可能會在終端閱讀程式上顯示。所以應該要為頁面內容有意義的描述或者為頁碼。</p><pre><code class="html hljs" aria-busy="false"><span class="hljs-tag"><<span class="hljs-name">title</span>></span>The Technical Basics<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
</code></pre></section><section id="no-ncx-requirement"><h3 id="ncx"><bdi class="secno">4.3 </bdi>無NCX規定<a class="self-link" href="#ncx" aria-label="Permalink for Section 4.3"></a></h3><p>由於固定版面EPUB標準在EPUB 3前並不存在，所以沒有對舊而且已經被取代的NCX文件的規定，其為用於在EPUB 2中指示導覽的手段。</p></section><section id="epub-package-document"><h3 id="epub-package"><bdi class="secno">4.4 </bdi>EPUB包裝文件<a class="self-link" href="#epub-package" aria-label="Permalink for Section 4.4"></a></h3><blockquote>
<p>包裝文件是一份包含一組元素的XML文件，各元素分別包含EPUB包裝各特殊用途的資訊。這些元素提供了集中的詮釋資料，組成包裝之個別資源的細節，並且提供閱讀順序以及其他必要的資訊來處理內容釋義。</p>
</blockquote><p>來自<a href="https://www.w3.org/publishing/epub3/epub-packages.html#sec-package-content-conf">包裝文件定義3.4</a></p></section><section id="reading-order-1"><h3 id="x4-5-reading-order"><bdi class="secno">4.5 </bdi>閱讀順序<a class="self-link" href="#reading-order-1" aria-label="Permalink for Section 4.5"></a></h3><p>固定版面EPUB的每一頁都是一份獨立的XHTML頁面。頁面以序列，按照列於包裝文件中書脊元素的順序呈現。</p>
<p>頁面中的閱讀順序可能複雜。請見<a href="#reading-order">閱讀順序</a>章節以了解更多關於頁面的資訊。</p></section><section id="hiding-content"><h3 id="x4-6-hiding-content"><bdi class="secno">4.6 </bdi>隱藏內容<a class="self-link" href="#hiding-content" aria-label="Permalink for Section 4.6"></a></h3><p>伴隨著出版品的主要內容，輔助內容可以提升、補助主要內容，並且能在序列外存取。輔助內容的範例包括：註解、描述以及問題的答案。請見：<a href="https://www.w3.org/publishing/epub3/epub-packages.html#attrdef-itemref-linear">https://www.w3.org/publishing/epub3/epub-packages.html#attrdef-itemref-linear</a></p></section><section id="structural-hierarchy"><h3 id="x4-7-structural-hierarchy"><bdi class="secno">4.7 </bdi>結構樹狀<a class="self-link" href="#structural-hierarchy" aria-label="Permalink for Section 4.7"></a></h3><p>使用標題標籤可以確保使用者不需要依賴視覺樣式才能對文件概況有所瞭解以及進行導覽。結構樹狀在視覺頁面版型的設計階段就已經被納入考慮。在頁面的樣式中添加這項資訊並且輸出時使用標籤，我們可將該結構拉到EPUB中。範例：</p><pre><code class="html hljs" aria-busy="false"><span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"Main-Head"</span>></span>The Technical Basics<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"Paragraph"</span>></span>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.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"Paragraph"</span>></span>The deeper you can weave the mesh of these two elements, science and art, the more magical your images will become.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"Subhead"</span>></span>Understanding Depth of Field<span class="hljs-tag"></<span class="hljs-name">h3</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"Paragraph"</span>></span>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.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
</code></pre></section><section id="region-based-navigation"><h3 id="x4-8-region-based-navigation"><bdi class="secno">4.8 </bdi>基於區域的導覽<a class="self-link" href="#region-based-navigation" aria-label="Permalink for Section 4.8"></a></h3><p>在一個頁面中可能有機會加入導覽作為「關注區域（regions of interest）」。對於在較小的螢幕上，讓大型視覺設計或者版面分隔閱讀特別有用。</p><blockquote>
<p><a href="http://idpf.org/epub/renditions/region-nav/epub-region-nav-20150826.html">EPUB基於區域的導覽</a>，介紹了一套基於關注區域，為一本出版品的視覺內容釋義進行分區導覽的規定。</p>
</blockquote><div class="note" role="note" id="issue-container-generatedID-3"><div role="heading" class="note-title marker" id="h-note-1" aria-level="4"><span>注意事項</span></div><aside class="">
<p>EPUB基於區域的導覽目前僅由少數閱讀系統支援。內容製作者建議在使用這項功能時進行測試。</p>
</aside></div></section></section><section id="legibility-0"><h2 id="legibility"><bdi class="secno">5. </bdi>易讀性<a class="self-link" href="#legibility" aria-label="Permalink for Section 5."></a></h2><p>易讀性或者可讀性，對於固定版面內容而言是一項重要的有用特性以提升無障礙輔助性，尤其對弱視、認知或者學習障礙的使用者而言。因為固定版面文件中的文字無法改變。所以考量最佳實踐，使其成為清晰易讀的文件格外重要。提醒內容製作者，電子書會在相當大量不同的螢幕尺寸與設備上被閱讀，其中許多小於該頁面的印刷尺寸。設計固定版面內容應該考量到小螢幕尺寸對易讀性與版面的影響。本章節將會聚焦在建構更具易讀性的固定版面出版品，該考量些什麼上頭。</p><section id="font-selection"><h3 id="x5-1-font-selection"><bdi class="secno">5.1 </bdi>選擇字型<a class="self-link" href="#font-selection" aria-label="Permalink for Section 5.1"></a></h3><p>沒有任何單一字型可以滿足所有使用者的易讀性需求，但可以考量特定的字型特徵以提升易讀性。當在固定版面出版品中規劃字型選擇時，考量到以下要素：</p><ul>
<li>字級</li>
<li>字重</li>
<li>字體</li>
</ul><section id="font-sizing"><h4 id="x5-1-1-font-sizing"><bdi class="secno">5.1.1 </bdi>字級<a class="self-link" href="#font-sizing" aria-label="Permalink for Section 5.1.1"></a></h4><p>在[<cite><a class="bibref" data-link-type="biblio" href="#bib-wcag2" title="Web Content Accessibility Guidelines (WCAG) 2">WCAG2</a></cite>]中沒有字級指引，然而多數桌面以及行動瀏覽器的預設字級，內文為16pt（也就是在<code><p></code>元素中的內容）。該尺寸對多數內容來說夠大，而標題應該以其為基礎，使用[<cite><a class="bibref" data-link-type="biblio" href="#bib-css">CSS</a></cite>]的<code>em</code>或者<code>rem</code>來調整尺寸。如果內容包含很多文字，推薦採用更大的內文字像是18pt來確保易讀性。</p>
<p>內容製作者也應該確保整份內容中的字型模組保持一致，可協助使用者區分並且理解內容脈絡。</p></section><section id="font-weight"><h4 id="x5-1-2-font-weight"><bdi class="secno">5.1.2 </bdi>字重<a class="self-link" href="#font-weight" aria-label="Permalink for Section 5.1.2"></a></h4><p>取決於所選的字體，可能需要考量字體的粗細來讓其更易讀。<code>400</code>的字重一般被視為標準（<code>normal</code>或<code>regular</code>），但按照字體不同，可能會太細。太細的字型可能會埋在該頁面的背景中，尤其在沒有考量到清晰度或者對比的狀況下。<code>700</code>的字重被視為粗體（<code>bold</code>)
，而且更容易閱讀，但過度使用粗體字體，對於易讀性而言自身就是個問題。</p></section><section id="font-face"><h4 id="x5-1-3-font-face"><bdi class="secno">5.1.3 </bdi>字體<a class="self-link" href="#font-face" aria-label="Permalink for Section 5.1.3"></a></h4><p>對內容挑選字體取決於相當多的要素。當為固定版面內容挑選字體時，內容製作者需要考量到易讀性，因為使用者可能無法更改字體以適應其需求或者偏好。</p>
<p>字型易讀性的一項重要特性與字母區分有關。字型的字母區分是一項重要的易讀性指標，特別是在一種字體中有著許多類似型的狀況。在拉丁字母表中，字母像是<code>I</code>與<code>l</code>、<code>b</code>與<code>d</code>、或者<code>a</code> <code>o</code>與 <code>e</code>，按照字型的樣式，看起來可能會很相似。同樣的問題也會發生在其他字母表的字型上，尤其是字形在外觀上使用相同的元素造成近似時。</p></section></section><section id="color-contrast"><h3 id="x5-2-color-contrast"><bdi class="secno">5.2 </bdi>色彩對比<a class="self-link" href="#color-contrast" aria-label="Permalink for Section 5.2"></a></h3><p>[<cite><a class="bibref" data-link-type="biblio" href="#bib-wcag2" title="Web Content Accessibility Guidelines (WCAG) 2">WCAG2</a></cite>]指定了色彩對比應該符合特定比例，取決於其尺寸與粗細。</p>
<p>內文字或者在尺寸上小於18pt的文字（或者粗體14pt）對背景必須要有至少4.5:1的對比。</p>
<p>大尺寸文字，尺寸大於18pt（或者粗體14pt）對背景必須要有至少3:1的對比。</p>
<p>推薦文字被置放在實心或者較為柔和的背景，以提升文字的易讀性。</p></section><section id="text-layout"><h3 id="x5-3-text-layout"><bdi class="secno">5.3 </bdi>文字排版<a class="self-link" href="#text-layout" aria-label="Permalink for Section 5.3"></a></h3><p>固定版面出版品的文字排版，在易讀性考量上也很重要。如同在<a href="#reading-order">閱讀順序</a>章節中所提及，頁面上內容的順序以及代碼中的順序需要一致。當在固定版面文件中配置版面時，請考量讀者應該遵從的順序，如何才能在視覺上指引該順序，以及是否有會打亂順序的元素（例如邊欄、定義、圖片等）。</p>
<p>當建構一頁或一章時，請考量以下各點：</p><ul>
<li>使用標題以指出其結構以及資訊流（例如一頁以<code>h2</code>開始，其子章節就應該採用<code>h3</code>或者其他適合的層級）。</li>
<li>將相關的內容放在頁面鄰接位置，如果一張圖片用於展示文字中提及的重點，請將該圖片置放在接近文字的位置，或者重點可能在的位置（例如「下一頁可以看到一張國王企鵝在其自然棲息地的照片」）。</li>
<li>為頁面上輔助性的內容使用恆定的設計模式，如此一來讀者可以知道其目的，或者能夠產生認識脈絡（例如定義或者問題）。</li>
<li>考量文字與相關元素章節的空間，確保頁面不會太過於難懂，讓讀者無法處理頁面上的內容。但也不要留太多空白，這樣會讓使用縮放或者放大功能的人錯過接近的元素。</li>
</ul></section></section><section id="media-overlays-0"><h2 id="media-overlays"><bdi class="secno">6. </bdi>媒體覆蓋<a class="self-link" href="#media-overlays" aria-label="Permalink for Section 6."></a></h2><p>待寫</p></section><section id="tables-0"><h2 id="tables"><bdi class="secno">7. </bdi>表格<a class="self-link" href="#tables" aria-label="Permalink for Section 7."></a></h2><p>文字做成圖片，或者圖片中的文字，都不具無障礙輔助性。所以無論如何避免把文字做成圖片相當重要，對固定版面來說尤其是挑戰。</p>
<p>製作具無障礙輔助表格最好的方式就是以表狀資料呈現。這已經在DAISY知識庫中記載為文件，並且提供為<a href="http://kb.daisy.org/publishing/docs/html/tables.html">表格製作語意標籤</a>的指示。</p>
<p>如果該表格需要維持圖片狀態，另一個選項是使用替代文字以及說明，或者ARIA roles來以邏輯閱讀順序描述資料。該說明可以用於表格的摘要，而替代文字可以更為深入。你可以由描述標題列有些什麼，以及每一列有些什麼內容開始。然後可以更為深入地列出所有資料，如依閱讀順序顯示。</p>
<p>基於圖片的複雜性不同，可能會需要以以下格式之一來提供複雜描述：</p><ul>
<li>在非文字內容附近以文字提供長的描述，並且在短描述中加上對長描述所在位置的參照。</li>
<li>在另一個位置提供長描述，並且在非文字內容的鄰接處立即提供連結。</li>
<li>為非文字內容提供長的描述，提供相同目的與相同資訊的表現。</li>
<li>延伸敘述的細節</li>
<li>使用隱藏敘述（請見範例 4）</li>
</ul><section id="aria-roles-for-tables"><h3 id="tables-aria"><bdi class="secno">7.1 </bdi>供表格使用的ARIA Roles<a class="self-link" href="#tables-aria" aria-label="Permalink for Section 7.1"></a></h3><p>為表格提供延伸敘述，可以使用<a href="https://www.w3.org/TR/WCAG20-TECHS/ARIA15.html">aria-describedby或者aria-details</a>。</p>
<p>aria-details比aria-describedby好的地方在於其讓使用者能夠存取到連結描述的標記（可以為表格標記，如果你放在其中，例如在一個詳細元素中供展開）。當下的缺點，則是該屬性並未受到很好的支援。同時當使用者在固定版面頁面中透過點擊展開詳細元素就像是打開一場災難（除非找到在螢幕外穩定的位置展開，但還是限制了能存取的對象）。</p>
<p>aria-describedby的大缺點則是，它會把描述展開為一個長的文字字串，使用者必須用聽的。且沒有辦法在行與列之間進行導覽，或者唸出其標題，所以很難讓使用者理解內容，除非表格很簡單並且內容很少。</p></section></section><section id="accessibility-metadata"><h2 id="a11y-metadata"><bdi class="secno">8. </bdi>無障礙輔助詮釋資料<a class="self-link" href="#a11y-metadata" aria-label="Permalink for Section 8."></a></h2><p>有無障礙元素的書必需要以詮釋資料來只是所能提供的無障礙輔助性，以及可能對讀者產生的危害。</p><section id="accessibility-features"><h3 id="a11y-metadata-features"><bdi class="secno">8.1 </bdi>無障礙輔助性功能<a class="self-link" href="#a11y-metadata-features" aria-label="Permalink for Section 8.1"></a></h3><p>schema.org特性<code>accessibilityFeature</code>用於定義書中所有無障礙輔助功能。</p>
<p>固定版面書可以套用一些值：</p><ul>
<li>alternativeText - (以替代文字描述圖片)</li>
<li>longDescriptions - (詳細描述複雜的圖片)</li>
<li>displayTransformability - 請注意把文字做成圖片無法通過本項</li>
<li>readingOrder - 請注意須確保視覺元素正確的閱讀順序</li>
</ul><p></p><aside class="example" id="metadata-example-1"><div class="marker">
<a class="self-link" href="#metadata-example-1">範例<bdi> 1</bdi></a>
</div>
<pre><code aria-busy="false" class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">property</span>=<span class="hljs-string">"schema:accessibilityFeature"</span>></span>
alternativeText
<span class="hljs-tag"></<span class="hljs-name">meta</span>></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">property</span>=<span class="hljs-string">"schema:accessibilityFeature"</span>></span>
readingOrder
<span class="hljs-tag"></<span class="hljs-name">meta</span>></span></code></pre>
</aside></section><section id="access-mode"><h3 id="a11y-metadata-access-mode"><bdi class="secno">8.2 </bdi>存取模式<a class="self-link" href="#a11y-metadata-access-mode" aria-label="Permalink for Section 8.2"></a></h3><p>schema.org特性<code>accessMode</code>用於定義本書可以透過<code>visual</code>、<code>textual</code>、<code>auditory</code>或者<code>tactile</code>等方式消費。</p>
<p>圖片書可能僅具備<code>visual</code> <code>accessMode</code>。</p><aside class="example" id="metadata-example-2"><div class="marker">
<a class="self-link" href="#metadata-example-2">範例<bdi> 2</bdi></a>
</div>
<pre><code aria-busy="false" class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">property</span>=<span class="hljs-string">"schema:accessMode"</span>></span>
visual
<span class="hljs-tag"></<span class="hljs-name">meta</span>></span></code></pre>
</aside><p>一本固定版面的書包含文字與圖片可能定義兩種不同的<code>accessMode</code>。</p><aside class="example" id="metadata-example-3"><div class="marker">
<a class="self-link" href="#metadata-example-3">範例<bdi> 3</bdi></a>
</div>
<pre><code aria-busy="false" class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">property</span>=<span class="hljs-string">"schema:accessMode"</span>></span>
visual
<span class="hljs-tag"></<span class="hljs-name">meta</span>></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">property</span>=<span class="hljs-string">"schema:accessMode"</span>></span>
textual
<span class="hljs-tag"></<span class="hljs-name">meta</span>></span></code></pre>
</aside></section><section id="access-mode-sufficient"><h3 id="a11y-metadata-access-mode-sufficient"><bdi class="secno">8.3 </bdi>充要存取模式<a class="self-link" href="#a11y-metadata-access-mode-sufficient" aria-label="Permalink for Section 8.3"></a></h3><p>schema.org特性<code>accessModeSufficient</code>用於定義本書可以被<code>visual</code>、<code>textual</code>、 <code>auditory</code>或者<code>tactile</code>等方式消費的組合。</p>
<p>圖片書可能被完全由視覺消費，所以可以單獨指定<code>visual</code>為其<code>accessModeSufficient</code>。</p><aside class="example" id="metadata-example-4"><div class="marker">
<a class="self-link" href="#metadata-example-4">範例<bdi> 4</bdi></a>
</div>
<pre><code aria-busy="false" class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">property</span>=<span class="hljs-string">"schema:accessModeSufficient"</span>></span>
visual
<span class="hljs-tag"></<span class="hljs-name">meta</span>></span></code></pre>
</aside><p>同時擁有visual與textual元素的固定版面書籍則把<code>accessModeSufficient</code>定義為<code>visual,textual</code>較為合適。</p><aside class="example" id="metadata-example-5"><div class="marker">
<a class="self-link" href="#metadata-example-5">範例<bdi> 5</bdi></a>
</div>
<pre><code aria-busy="false" class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">property</span>=<span class="hljs-string">"schema:accessModeSufficient"</span>></span>
visual,textual
<span class="hljs-tag"></<span class="hljs-name">meta</span>></span></code></pre>
</aside><p>如果一本固定版面的書其中所有的圖片都擁有敘述，那麼其<code>accessModeSufficient</code>定義為<code>textual</code>會較為合適，其意味著該書對螢幕閱讀器友善，可以透過輔助科技完整閱讀。</p><aside class="example" id="metadata-example-6"><div class="marker">
<a class="self-link" href="#metadata-example-6">範例<bdi> 6</bdi></a>
</div>
<pre><code aria-busy="false" class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">property</span>=<span class="hljs-string">"schema:accessModeSufficient"</span>></span>
textual
<span class="hljs-tag"></<span class="hljs-name">meta</span>></span></code></pre>
</aside></section><section id="accessibility-hazards"><h3 id="a11y-metadata-hazards"><bdi class="secno">8.4 </bdi>無障礙輔助性危害<a class="self-link" href="#a11y-metadata-hazards" aria-label="Permalink for Section 8.4"></a></h3><p>schema.org特性<code>accessibilityHazard</code>定義了書中的危害。</p>
<p>一般而言，在固定版面書中不會有危害，現在僅定義了三種可能的危害：閃光<code>flashing</code>、聲音<code>sound</code>和模仿動作<code>motionSimulation</code>。這些危害都指向書中的嵌入聲音、影片或者動態圖片，如<code>gif</code>。</p>
<p>如果書中沒有任何危害，可以簡單地提供<code>none</code>，或者每一項都宣告為非危害<code>noFlashingHazard</code>、<code>noSoundHazard</code>、以及<code>noMotionSimulationHazard</code>。</p><aside class="example" id="metadata-example-7"><div class="marker">
<a class="self-link" href="#metadata-example-7">範例<bdi> 7</bdi></a>
</div>
<pre><code aria-busy="false" class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">property</span>=<span class="hljs-string">"schema:accessibilityHazard"</span>></span>
none
<span class="hljs-tag"></<span class="hljs-name">meta</span>></span></code></pre>
</aside></section><section id="accessibility-summary"><h3 id="a11y-metadata-accessibility-summary"><bdi class="secno">8.5 </bdi>無障礙輔助性摘要<a class="self-link" href="#a11y-metadata-accessibility-summary" aria-label="Permalink for Section 8.5"></a></h3><p>schema.org特性<code>accessibilitySummary</code>為人可閱讀的宣告說明該本書如何具備無障礙輔助性以及不具備之處。</p><aside class="example" id="metadata-example-8"><div class="marker">
<a class="self-link" href="#metadata-example-8">範例<bdi> 8</bdi></a>
</div>
<pre><code aria-busy="false" class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">property</span>=<span class="hljs-string">"schema:accessibilitySummary"</span>></span>
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.
<span class="hljs-tag"></<span class="hljs-name">meta</span>></span></code></pre>
</aside></section></section><section id="references" class="appendix"><h2 id="a-references"><bdi class="secno">A. </bdi>參考資料<a class="self-link" href="#references" aria-label="Permalink for Appendix A."></a></h2><section id="informative-references">
<h3 id="a-1-informative-references"><bdi class="secno">A.1 </bdi>參考性文件<a class="self-link" href="#informative-references" aria-label="Permalink for Appendix A.1"></a></h3>
<dl class="bibliography"><dt id="bib-css">[CSS]</dt><dd><em class="respec-offending-element">Reference not found.</em></dd><dt id="bib-epub-33">[EPUB-33]</dt><dd><a href="https://www.w3.org/TR/epub-33/"><cite>EPUB 3.3</cite></a>. Matt Garrish; Ivan Herman; Dave Cramer. W3C. 8 December 2021. W3C Working Draft. URL: <a href="https://www.w3.org/TR/epub-33/">https://www.w3.org/TR/epub-33/</a></dd><dt id="bib-epub-a11y-11">[EPUB-A11Y-11]</dt><dd><a href="https://www.w3.org/TR/epub-a11y-11/"><cite>EPUB Accessibility 1.1</cite></a>. Matt Garrish; George Kerscher; Charles LaPierre; Gregorio Pellegrino; Avneesh Singh. W3C. 8 December 2021. W3C Working Draft. URL: <a href="https://www.w3.org/TR/epub-a11y-11/">https://www.w3.org/TR/epub-a11y-11/</a></dd><dt id="bib-epub-overview-33">[EPUB-OVERVIEW-33]</dt><dd><a href="https://www.w3.org/TR/epub-overview-33/"><cite>EPUB 3 Overview</cite></a>. Matt Garrish; Ivan Herman. W3C. 8 December 2021. W3C Working Group Note. URL: <a href="https://www.w3.org/TR/epub-overview-33/">https://www.w3.org/TR/epub-overview-33/</a></dd><dt id="bib-epub-rs-33">[EPUB-RS-33]</dt><dd><a href="https://www.w3.org/TR/epub-rs-33/"><cite>EPUB Reading Systems 3.3</cite></a>. Matt Garrish; Ivan Herman; Dave Cramer. W3C. 8 December 2021. W3C Working Draft. URL: <a href="https://www.w3.org/TR/epub-rs-33/">https://www.w3.org/TR/epub-rs-33/</a></dd><dt id="bib-wcag2">[WCAG2]</dt><dd><a href="https://www.w3.org/TR/WCAG2/"><cite>Web Content Accessibility Guidelines (WCAG) 2</cite></a>. W3C. URL: <a href="https://www.w3.org/TR/WCAG2/">https://www.w3.org/TR/WCAG2/</a></dd></dl>
</section></section><p role="navigation" id="back-to-top">
<a href="#title"><abbr title="Back to Top">↑</abbr></a>
</p><script id="respec-dfn-panel">(() => {
// @ts-check
if (document.respec) {
document.respec.ready.then(setupPanel);
} else {
setupPanel();
}
function setupPanel() {
const listener = panelListener();
document.body.addEventListener("keydown", listener);
document.body.addEventListener("click", listener);
}
function panelListener() {
/** @type {HTMLElement} */
let panel = null;
return event => {
const { target, type } = event;
if (!(target instanceof HTMLElement)) return;
// For keys, we only care about Enter key to activate the panel
// otherwise it's activated via a click.
if (type === "keydown" && event.key !== "Enter") return;
const action = deriveAction(event);
switch (action) {
case "show": {
hidePanel(panel);
/** @type {HTMLElement} */
const dfn = target.closest("dfn, .index-term");
panel = document.getElementById(`dfn-panel-for-${dfn.id}`);
const coords = deriveCoordinates(event);
displayPanel(dfn, panel, coords);
break;
}
case "dock": {
panel.style.left = null;
panel.style.top = null;
panel.classList.add("docked");
break;
}
case "hide": {
hidePanel(panel);
panel = null;
break;
}
}
};
}
/**
* @param {MouseEvent|KeyboardEvent} event
*/
function deriveCoordinates(event) {
const target = /** @type HTMLElement */ (event.target);
// We prevent synthetic AT clicks from putting
// the dialog in a weird place. The AT events sometimes
// lack coordinates, so they have clientX/Y = 0
const rect = target.getBoundingClientRect();
if (
event instanceof MouseEvent &&
event.clientX >= rect.left &&
event.clientY >= rect.top
) {
// The event probably happened inside the bounding rect...
return { x: event.clientX, y: event.clientY };
}
// Offset to the middle of the element
const x = rect.x + rect.width / 2;
// Placed at the bottom of the element
const y = rect.y + rect.height;
return { x, y };
}
/**
* @param {Event} event
*/
function deriveAction(event) {
const target = /** @type {HTMLElement} */ (event.target);
const hitALink = !!target.closest("a");
if (target.closest("dfn:not([data-cite]), .index-term")) {
return hitALink ? "none" : "show";
}
if (target.closest(".dfn-panel")) {
if (hitALink) {
return target.classList.contains("self-link") ? "hide" : "dock";
}
const panel = target.closest(".dfn-panel");
return panel.classList.contains("docked") ? "hide" : "none";
}
if (document.querySelector(".dfn-panel:not([hidden])")) {
return "hide";
}
return "none";
}
/**
* @param {HTMLElement} dfn
* @param {HTMLElement} panel
* @param {{ x: number, y: number }} clickPosition
*/
function displayPanel(dfn, panel, { x, y }) {
panel.hidden = false;
// distance (px) between edge of panel and the pointing triangle (caret)
const MARGIN = 20;
const dfnRects = dfn.getClientRects();
// Find the `top` offset when the `dfn` can be spread across multiple lines