Skip to content

Commit a9e4847

Browse files
avneeshsinghavneeshsingh
authored
Merge pull request #61 from daisy/poc-extended-description
Update of extended description POC
2 parents 51a14b6 + dd7dd7a commit a9e4847

File tree

7 files changed

+56
-160
lines changed

7 files changed

+56
-160
lines changed

‎extended-desc-experiments/extended-description-poc.epub‎

154 KB
Binary file not shown.

‎extended-desc-experiments/extended-description-poc/OEBPS/content.opf‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,14 @@
2121
<meta property="dcterms:conformsTo">EPUB Accessibility 1.1 - WCAG 2.2 Level AA</meta>
2222
</metadata>
2323
<manifest>
24-
<item id="poc-same-page-extended-description" href="poc-same-page-extended-description.html" media-type="application/xhtml+xml" properties="scripted" />
2524
<item id="poc-external-page-extended-description" href="poc-external-page-extended-description.html" media-type="application/xhtml+xml" properties="scripted" />
2625
<item id="poc-external-page-extended-description-appendix" href="poc-external-page-extended-description-appendix.html" media-type="application/xhtml+xml" />
2726
<item id="toc" href="toc.xhtml" media-type="application/xhtml+xml" properties="nav" />
2827
<item id="chart-ebcaadfb" href="chart-ebcaadfb.png" media-type="image/png" />
28+
<item id="ex1" href="ex1.jpg" media-type="image/jpeg" />
2929
</manifest>
3030
<spine>
31-
<itemref idref="poc-same-page-extended-description" />
3231
<itemref idref="poc-external-page-extended-description" />
33-
<itemref idref="poc-external-page-extended-description-appendix" />
32+
<itemref idref="poc-external-page-extended-description-appendix" linear="no" />
3433
</spine>
3534
</package>

‎extended-desc-experiments/extended-description-poc/OEBPS/ex1.jpg‎

154 KB
Loading

‎extended-desc-experiments/extended-description-poc/OEBPS/poc-external-page-extended-description-appendix.html‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@
22
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
33
<head>
44
<meta charset="utf-8" />
5-
<title>Description of Bar Chart</title>
5+
<title>Extended Descriptions</title>
66
</head>
77
<body>
8-
<aside id="extended-description-img1">
8+
<h1>Extended Descriptions</h1>
9+
<section id="extended-description-img1">
910
<h2>Description of Bar Chart</h2>
1011
<img role="presentation" src="chart-ebcaadfb.png" />
1112
<h3>Overview</h3>
@@ -55,6 +56,23 @@ <h3>Presentation</h3>
5556
<p>
5657
<a role="doc-backlink" href="poc-external-page-extended-description.html#img1">Navigate back to bar chart image</a>.
5758
</p>
58-
</aside>
59+
</section>
60+
<section id="extended-description-img2">
61+
<h2>Description of Heart and Lung Diagram</h2>
62+
<img role="presentation" src="ex1.jpg" />
63+
<p>Systems in Sync. The circulatory and respiratory systems work together to transport oxygen-rich blood through the body.</p>
64+
<p>A diagram shows a cross-section of a heart between two lungs. Red arrows show the path of oxygen-rich blood cells. Blue arrows show the path of oxygen-poor blood.</p>
65+
<ol>
66+
<li>Oxygen-rich blood cells travel to the heart from the lungs.</li>
67+
<li>The heart pumps enriched blood cells. They travel through the arteries to the body.</li>
68+
<li>Throughout the body, red blood cells deliver oxygen to cells and remove carbon dioxide.</li>
69+
<li>Veins carry oxygen-poor blood back to the heart.</li>
70+
<li>The heart pumps blood back to the lungs to eliminate carbon dioxide and absorb oxygen.</li>
71+
<li>Red blood cells move through the lungs, taking in oxygen and exchanging it for carbon dioxide.</li>
72+
</ol>
73+
<p>
74+
<a role="doc-backlink" href="poc-external-page-extended-description.html#img2">Navigate back to heart and lung diagram</a>.
75+
</p>
76+
</section>
5977
</body>
6078
</html>

‎extended-desc-experiments/extended-description-poc/OEBPS/poc-external-page-extended-description.html‎

Lines changed: 32 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,25 @@
77
<body>
88
<section role="doc-chapter">
99
<h1>External Page Extended Description</h1>
10-
<p>Here is my image:</p>
10+
<p>Here is an image in a <code>figure</code> cointainer:</p>
1111
<figure>
1212
<img id="img1" aria-details="anchor-extended-description-img1" src="chart-ebcaadfb.png" alt="Chart of 2014 First Quarter Visitors to example.com Websites"/>
1313
<figcaption>
14-
This is the caption for this image. <a id="anchor-extended-description-img1" href="poc-external-page-extended-description-appendix.html#extended-description-img1">Extended description</a>.
14+
<p>This is the caption for this image.</p>
15+
<p><a id="anchor-extended-description-img1" href="poc-external-page-extended-description-appendix.html#extended-description-img1">Extended description first image</a></p>
1516
</figcaption>
1617
</figure>
18+
<aside>
19+
<h2>Note</h2>
20+
<p>In the case of multiple grouped images, the content creator can decide to have a single extended description for all the images (with only one link), or different extended descriptions (with several links placed after the images, referring in the label to the corresponding image).</p>
21+
</aside>
22+
<p>This is placeholder text designed to simulate the actual text of the chapter.</p>
23+
<p>This is placeholder text serving as a substitute of the actual text of the chapter. The quick brown fox jumps over the lazy dog, demonstrating how various letters appear in different contexts. Meanwhile, the five boxing wizards jump quickly, showcasing another pangram that contains every letter of the alphabet. These sample sentences help designers and developers visualize how text will look in their layouts before the actual content becomes available.</p>
24+
<p>Here is an image without a container:</p>
25+
<img id="img2" aria-details="anchor-extended-description-img2" src="ex1.jpg" alt="A cross-section view of oxygen-rich blood flows between the heart and lungs." />
26+
<p><a id="anchor-extended-description-img2" href="poc-external-page-extended-description-appendix.html#extended-description-img2">Extended description second image</a></p>
27+
<p>This is placeholder text designed to simulate the actual text of the chapter.</p>
28+
<p>This is placeholder text serving as a substitute of the actual text of the chapter. The quick brown fox jumps over the lazy dog, demonstrating how various letters appear in different contexts. Meanwhile, the five boxing wizards jump quickly, showcasing another pangram that contains every letter of the alphabet. These sample sentences help designers and developers visualize how text will look in their layouts before the actual content becomes available.</p>
1729
</section>
1830

1931
<script>
@@ -23,37 +35,30 @@ <h1>External Page Extended Description</h1>
2335
try {
2436
// Test 1: identify links to extended descriptions
2537
const linkXPath = "//a[@id=//img[@aria-details]/@aria-details]";
26-
const linkResult = document.evaluate(linkXPath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
27-
const linkNode = linkResult.singleNodeValue;
38+
const linkResult = document.evaluate(linkXPath, document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
2839

2940
console.log('\nTest 1 - identify links to extended descriptions:');
3041
console.log('\t- XPath used:', linkXPath);
31-
if (linkNode) {
32-
console.log('\t- ✓ Link found with ID:', linkNode.id);
33-
console.log('\t- href:', linkNode.href);
34-
console.log('\t- HTML element:', linkNode);
35-
} else {
36-
console.log('\t- ✗ No links found in the page');
37-
}
3842

39-
} catch (error) {
40-
console.error('Error during the test:', error.message);
41-
console.error('Stack trace:', error.stack);
42-
}
43-
44-
try {
45-
// Test 2: identify extended description containers
46-
const linkXPath = "//*[@id=substring-after(//a[@id=//img[@aria-details]/@aria-details]/@href, '#')]";
47-
const linkResult = document.evaluate(linkXPath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
48-
const linkNode = linkResult.singleNodeValue;
43+
const linkNodes = [];
44+
let linkNode;
4945

50-
console.log('\nTest 2 - identify extended description containers:');
51-
console.log('\t- XPath used:', linkXPath);
52-
if (linkNode) {
53-
console.log('\t- ✓ Container found with ID:', linkNode.id);
54-
console.log('\t- HTML element:', linkNode);
46+
// Raccoglie tutti i nodi che corrispondono al criterio
47+
while (linkNode = linkResult.iterateNext()) {
48+
linkNodes.push(linkNode);
49+
}
50+
51+
if (linkNodes.length > 0) {
52+
console.log(`\t- ✓ Found ${linkNodes.length} link(s):`);
53+
54+
linkNodes.forEach((node, index) => {
55+
console.log(`\t Link ${index + 1}:`);
56+
console.log(`\t - ID: ${node.id}`);
57+
console.log(`\t - href: ${node.href}`);
58+
console.log(`\t - HTML element:`, node);
59+
});
5560
} else {
56-
console.log('\t- ✗ No containers of extended description found in the page');
61+
console.log('\t- ✗ No links found in the page');
5762
}
5863

5964
} catch (error) {

‎extended-desc-experiments/extended-description-poc/OEBPS/poc-same-page-extended-description.html‎

Lines changed: 0 additions & 121 deletions
This file was deleted.

‎extended-desc-experiments/extended-description-poc/OEBPS/toc.xhtml‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,7 @@
77
<nav id="toc" epub:type="toc" role="doc-toc">
88
<h2>Table of Contents</h2>
99
<ol>
10-
<li><a href="poc-same-page-extended-description.html">Same Page Extended Description</a></li>
11-
<li><a href="poc-external-page-extended-description.html">External Page Extended Description</a>
12-
<ol>
13-
<li><a href="poc-external-page-extended-description-appendix.html">Description of Bar Chart</a></li>
14-
</ol>
15-
</li>
10+
<li><a href="poc-external-page-extended-description.html">External Page Extended Description</a></li>
1611
</ol>
1712
</nav>
1813
</body>

0 commit comments

Comments
 (0)