You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<p>After thorough evaluation, we are able to propose two techniques at this point of time. These techniques worked in a majority of the reading environments. This does not guarantee full support, but these provide a way forward while the web browsers, EPUB reading systems and assistive technologies catch-up.</p>
62
+
<p>After thorough evaluation, we are able to propose two techniques at this point of time. These techniques worked in a majority of the reading environments. This does not guarantee full support, but these provide a way forward while the web browsers, EPUB reading systems and assistive technologies catchup.</p>
58
63
59
64
<sectionid="technique1">
60
65
<h3>Recommended technique: Extended description in a separate HTML file with hyperlink</h3>
61
66
62
-
<p>This technique provides extended descriptions in separate HTML file(s) (e.g. and appendix at the end of the e-book, a file containing extended descriptions for each chapter of the publication or even a file for each image). A hyperlink placed below the image in the main content links to the description in the separate file. And a back link placed in the description returns the user to the original reading position in the main content.</p>
67
+
<p>This technique provides extended descriptions in separate HTML file(s) (e.g. an appendix at the end of the e-book, a file containing extended descriptions for each chapter of the publication or even a file for each image). A hyperlink placed below the image in the main content links to the description in the separate file. And a back link placed in the description returns the user to the original reading position in the main content.</p>
63
68
64
-
<pclass="note">This technique is recommended over the use of HTML <code>details</code> element (see <ahref="#technique3">Deprecated technique</a>) as it provides better support across reading systems and reduces cognitive load for users.</p>
69
+
<pclass="note">This technique is recommended over the use of HTML <code>details</code> element (see <ahref="#technique3">Deprecated technique</a>) as it provides better support across reading systems.</p>
65
70
66
71
<p>Advantages:</p>
67
72
<ul>
68
73
<li>Simple technique, authors and publishers are already familiar with it.</li>
69
-
<li>Complexities and technical limitations in some EPUB reading systems due to collapsing and expanding are avoided, and fidelity of the page is maintained to a great extent.</li>
70
-
<li>Almost all EPUB reading systems support hyperlinks.</li>
71
-
<li>Including a copy of the original image marked as presentational (<code>role="presentation"</code>) can help cognitive users with understanding the extended description in context with the image.</li>
74
+
<li>Well supported by EPUB reading systems, avoiding the technical limitations associated with collapsing and expanding elements.</li>
75
+
<li>Including a copy of the original image marked as presentational (<code>role="presentation"</code>) can help users with understanding the extended description in context with the image.</li>
72
76
<li>Multiple extended descriptions can be placed in the same HTML file, organized with <code>section</code> elements.</li>
73
77
<li>The extended description file can be excluded from the reading order by setting <code>linear="no"</code> in the EPUB spine.</li>
74
78
</ul>
@@ -77,7 +81,6 @@ <h3>Recommended technique: Extended description in a separate HTML file with hyp
77
81
<ul>
78
82
<li>Results in branching from the reading flow and sometimes the reading position may be lost when returning.</li>
79
83
<li>Accuracy of linking back to original reading position matters, and some reading systems may fail to provide this accuracy.</li>
80
-
<li>The navigation process (clicking the link, reading the description, then clicking the back link to return) may increase cognitive load for some users.</li>
81
84
</ul>
82
85
83
86
<sectionid="technique1-main-content">
@@ -226,10 +229,13 @@ <h4>Setting up the external file with extended descriptions</h4>
226
229
<li>Include a heading that describes the content</li>
227
230
<li>Include a copy of the image marked as presentational (<code>role="presentation"</code> and <code>alt=""</code>) to prevent screen readers from announcing it twice, but for for visual reference</li>
228
231
<li>Contain the detailed description</li>
229
-
<li>Include a back link with <code>role="doc-backlink"</code> to return to the original image</li>
232
+
<li>Include a backlink with <code>role="doc-backlink"</code> that returns to the anchor of the link to the extended description.</li>
233
+
<li>The backlink text must clearly identify which image the user is returning to, especially when the file contains multiple extended descriptions.</li>
230
234
</ul>
231
235
<pclass="note">To avoid external files with many extended descriptions becoming too large and creating long load times, multiple files can be used (for example, one per chapter of the publication). These files must be identified in the spine as described below.</p>
232
236
237
+
<pclass="note">When a file contains many extended descriptions – for example in an end-of-book appendix – consider using one file per extended description, each with a single back link. This removes ambiguity: with only one back link in the file, the user cannot accidentally navigate to the wrong location in the main content. While this results in more files to manage, it provides the clearest and safest navigation experience.</p>
238
+
233
239
<h5>EPUB spine configuration</h5>
234
240
235
241
<p>The extended description file can be marked as <code>linear="no"</code> in the EPUB <code>spine</code> (inside the OPF file) to exclude it from the normal reading order.</p>
<p><a role="doc-backlink" href="chapter01.xhtml#img2">Navigate back to heart and lung diagram</a>.</p>
298
+
<p><a role="doc-backlink" href="chapter01.xhtml#anchor-extended-description-img2">Navigate back to heart and lung diagram</a>.</p>
293
299
</section>
294
300
</body>
295
301
</html>
@@ -348,6 +354,8 @@ <h4>Setting up the main content with extended description</h4>
348
354
</pre>
349
355
</aside>
350
356
357
+
<pclass="note">The heading levels used inside the <code>aside</code> element should follow the surrounding document structure. They should be one level below the last heading used before the <code>aside</code>.</p>
358
+
351
359
<h5id="technique2-examples">Example</h5>
352
360
353
361
<asideclass="example" title="Extended description below the image in an aside element">
<img src="chart-ebcaadfb.png" alt="Bar chart showing monthly and total visitors for the first quarter 2014 for sites 1 to 3." aria-details="image1-extended-desc" />
358
366
<aside id="image1-extended-desc">
359
-
<h5>Overview</h5>
367
+
<h4>Overview</h4>
360
368
<p>The chart shows the website hits for the first quarter of 2014. It shows that Site 1 has more visitors
361
369
than either of the other sites, but the number of visitors is decreasing. Site 2 has a fairly constant
362
370
number of visitors, while for Site 3 page hits are increasing month on month.</p>
<pclass="note">The code patterns shown in the <ahref="#technique1-main-content-examples">Recommended technique examples</a>(such as images in figure with link in figcaption, multiple images, using an icon) can also be applied to this technique by replacing the link element with the <code>aside</code>element containing the extended description.</p>
415
+
<pclass="note">Code patterns from the <ahref="#technique1-main-content-examples">Recommended technique examples</a>can also be applied to this technique by replacing the link element with the <code>aside</code> element. However, when images are wrapped in a <code>figure</code> element, the <code>aside</code> cannot be placed inside the <code>figure</code> (as it would conflict with the required placement of <code>figcaption</code>); in this case, the <code>aside</code>should be placed immediately after the closing <code>figure</code> tag.</p>
408
416
409
417
410
418
</section>
@@ -424,7 +432,7 @@ <h3>Deprecated technique: Extended description in a details element below the im
424
432
425
433
<p>Disadvantages:</p>
426
434
<ul>
427
-
<li>If a publication has a large number of images and extended descriptions, the task of locating the details, and expanding it to read descriptions puts considerable cognitive load, especially on the people with cognitive disabilities.</li>
435
+
<li>If a publication has a large number of images and extended descriptions, the task of locating and expanding each details element to read the description may be cumbersome.</li>
428
436
<li>There are EPUB reading systems which do not support HTML details properly, or the expansion of the element may cause pagination issues.</li>
429
437
<li>This is one of the rare cases in which the content creator of the EPUB attempts to force a particular user experience (show/hide content); the world of EPUBs is normally declarative, identifying semantic structures and leaving it up to reading solutions to interpret them and show the user the best interface (think of footnotes managed in pop-ups or similar).</li>
430
438
<li>If the extended description inside the details element is huge, expanding it may disorient the user, especially when the reading system has paginated view.</li>
0 commit comments