Skip to content

Commit 51a14b6

Browse files
avneeshsinghavneeshsingh
authored
Merge pull request #60 from daisy/poc-extended-description
Proof of Concept: extended descriptions
2 parents 3b0eccb + 2a250b1 commit 51a14b6

File tree

9 files changed

+312
-0
lines changed

9 files changed

+312
-0
lines changed

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

15.3 KB
Binary file not shown.

‎extended-desc-experiments/extended-description-poc/META-INF/container.xml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
2+
<container version="1.0" xmlns="urn:oasis:names:tc:opendocument:xmlns:container">
3+
<rootfiles>
4+
<rootfile full-path="OEBPS/content.opf" media-type="application/oebps-package+xml" />
5+
</rootfiles>
6+
</container>

‎extended-desc-experiments/extended-description-poc/OEBPS/chart-ebcaadfb.png‎

10.2 KB
Loading

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
2+
<package version="3.0" xmlns="http://www.idpf.org/2007/opf" unique-identifier="bookid" prefix="ibooks: http://vocabulary.itunes.apple.com/rdf/ibooks/vocabulary-extensions-1.0/" xml:lang="en-US">
3+
<metadata xmlns:dc="http://purl.org/dc/elements/1.1/">
4+
<dc:title>POC: Extended Description</dc:title>
5+
<dc:creator>Gregorio Pellegrino</dc:creator>
6+
<dc:date>2025-06-18</dc:date>
7+
<dc:language>en</dc:language>
8+
<meta property="dcterms:modified">2025-06-18T12:27:49Z</meta>
9+
<dc:identifier id="bookid">urn:uuid:86B8E595-0EC7-4744-9CFC-75DF58F56AFE</dc:identifier>
10+
<!--accessibility options-->
11+
<meta property="schema:accessibilityFeature">alternativeText</meta>
12+
<meta property="schema:accessibilityFeature">ARIA</meta>
13+
<meta property="schema:accessibilityFeature">displayTransformability</meta>
14+
<meta property="schema:accessibilityFeature">longDescription</meta>
15+
<meta property="schema:accessibilityFeature">structuralNavigation</meta>
16+
<meta property="schema:accessibilityFeature">tableOfContents</meta>
17+
<meta property="schema:accessibilityHazard">none</meta>
18+
<meta property="schema:accessMode">textual</meta>
19+
<meta property="schema:accessMode">visual</meta>
20+
<meta property="schema:accessModeSufficient">textual</meta>
21+
<meta property="dcterms:conformsTo">EPUB Accessibility 1.1 - WCAG 2.2 Level AA</meta>
22+
</metadata>
23+
<manifest>
24+
<item id="poc-same-page-extended-description" href="poc-same-page-extended-description.html" media-type="application/xhtml+xml" properties="scripted" />
25+
<item id="poc-external-page-extended-description" href="poc-external-page-extended-description.html" media-type="application/xhtml+xml" properties="scripted" />
26+
<item id="poc-external-page-extended-description-appendix" href="poc-external-page-extended-description-appendix.html" media-type="application/xhtml+xml" />
27+
<item id="toc" href="toc.xhtml" media-type="application/xhtml+xml" properties="nav" />
28+
<item id="chart-ebcaadfb" href="chart-ebcaadfb.png" media-type="image/png" />
29+
</manifest>
30+
<spine>
31+
<itemref idref="poc-same-page-extended-description" />
32+
<itemref idref="poc-external-page-extended-description" />
33+
<itemref idref="poc-external-page-extended-description-appendix" />
34+
</spine>
35+
</package>

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Description of Bar Chart</title>
6+
</head>
7+
<body>
8+
<aside id="extended-description-img1">
9+
<h2>Description of Bar Chart</h2>
10+
<img role="presentation" src="chart-ebcaadfb.png" />
11+
<h3>Overview</h3>
12+
<p>The chart shows the website hits for the first quarter of 2014. It shows that Site 1 has more visitors than either
13+
of the other sites, but the number of visitors is decreasing. Site 2 has a fairly constant number of visitors,
14+
while for Site 3 page hits are increasing month on month.
15+
</p>
16+
<h3>Data</h3>
17+
<table>
18+
<tr>
19+
<th scope="col">Period</th>
20+
<th scope="col">Site 1</th>
21+
<th scope="col">Site 2</th>
22+
<th scope="col">Site 3</th>
23+
</tr>
24+
<tr>
25+
<th scope="row">Jan</th>
26+
<td>135</td>
27+
<td>112</td>
28+
<td>92</td>
29+
</tr>
30+
<tr>
31+
<th scope="row">Feb</th>
32+
<td>117</td>
33+
<td>114</td>
34+
<td>99</td>
35+
</tr>
36+
<tr>
37+
<th scope="row">Mar</th>
38+
<td>96</td>
39+
<td>111</td>
40+
<td>126</td>
41+
</tr>
42+
<tr>
43+
<th scope="row">Qtr Total</th>
44+
<td>348</td>
45+
<td>337</td>
46+
<td>308</td>
47+
</tr>
48+
</table>
49+
<h3>Presentation</h3>
50+
<p>The bar chart represents both the number of visitors per month for each website, and the total number of visitors
51+
per website for the entire quarter. Website visitors for each month are represented using columns lined up
52+
horizontally, with heights indicating the number of visitors. A fourth column is provided for each website
53+
with the accumulated site visitors for the quarter.
54+
</p>
55+
<p>
56+
<a role="doc-backlink" href="poc-external-page-extended-description.html#img1">Navigate back to bar chart image</a>.
57+
</p>
58+
</aside>
59+
</body>
60+
</html>

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

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>External Page Extended Description</title>
6+
</head>
7+
<body>
8+
<section role="doc-chapter">
9+
<h1>External Page Extended Description</h1>
10+
<p>Here is my image:</p>
11+
<figure>
12+
<img id="img1" aria-details="anchor-extended-description-img1" src="chart-ebcaadfb.png" alt="Chart of 2014 First Quarter Visitors to example.com Websites"/>
13+
<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>.
15+
</figcaption>
16+
</figure>
17+
</section>
18+
19+
<script>
20+
function runTest() {
21+
console.log('=== XPATH TEST to identify extended descriptions for reading system developers ===');
22+
23+
try {
24+
// Test 1: identify links to extended descriptions
25+
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;
28+
29+
console.log('\nTest 1 - identify links to extended descriptions:');
30+
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+
}
38+
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;
49+
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);
55+
} else {
56+
console.log('\t- ✗ No containers of extended description found in the page');
57+
}
58+
59+
} catch (error) {
60+
console.error('Error during the test:', error.message);
61+
console.error('Stack trace:', error.stack);
62+
}
63+
}
64+
65+
// Run the test automatically when the page loads
66+
window.addEventListener('load', runTest);
67+
</script>
68+
69+
</body>
70+
</html>

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

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Same Page Extended Description</title>
6+
</head>
7+
<body>
8+
<section role="doc-chapter">
9+
<h1>Same Page Extended Description</h1>
10+
<p>Here is my image:</p>
11+
<figure>
12+
<img id="img1" aria-details="anchor-extended-description-img1" src="chart-ebcaadfb.png" alt="Chart of 2014 First Quarter Visitors to example.com Websites"/>
13+
<figcaption>
14+
This is the caption for this image. <a id="anchor-extended-description-img1" href="#extended-description-img1">Extended description</a>.
15+
</figcaption>
16+
</figure>
17+
</section>
18+
19+
<aside id="extended-description-img1">
20+
<h2>Description of Bar Chart</h2>
21+
<h3>Overview</h3>
22+
<p>The chart shows the website hits for the first quarter of 2014. It shows that Site 1 has more visitors than either
23+
of the other sites, but the number of visitors is decreasing. Site 2 has a fairly constant number of visitors,
24+
while for Site 3 page hits are increasing month on month.
25+
</p>
26+
<h3>Data</h3>
27+
<table>
28+
<tr>
29+
<th scope="col">Period</th>
30+
<th scope="col">Site 1</th>
31+
<th scope="col">Site 2</th>
32+
<th scope="col">Site 3</th>
33+
</tr>
34+
<tr>
35+
<th scope="row">Jan</th>
36+
<td>135</td>
37+
<td>112</td>
38+
<td>92</td>
39+
</tr>
40+
<tr>
41+
<th scope="row">Feb</th>
42+
<td>117</td>
43+
<td>114</td>
44+
<td>99</td>
45+
</tr>
46+
<tr>
47+
<th scope="row">Mar</th>
48+
<td>96</td>
49+
<td>111</td>
50+
<td>126</td>
51+
</tr>
52+
<tr>
53+
<th scope="row">Qtr Total</th>
54+
<td>348</td>
55+
<td>337</td>
56+
<td>308</td>
57+
</tr>
58+
</table>
59+
<h3>Presentation</h3>
60+
<p>The bar chart represents both the number of visitors per month for each website, and the total number of visitors
61+
per website for the entire quarter. Website visitors for each month are represented using columns lined up
62+
horizontally, with heights indicating the number of visitors. A fourth column is provided for each website
63+
with the accumulated site visitors for the quarter.
64+
</p>
65+
<p>
66+
<a role="doc-backlink" href="#img1">Navigate back to bar chart image</a>.
67+
</p>
68+
</aside>
69+
70+
<script>
71+
function runTest() {
72+
console.log('=== XPATH TEST to identify extended descriptions for reading system developers ===');
73+
74+
try {
75+
// Test 1: identify links to extended descriptions
76+
const linkXPath = "//a[@id=//img[@aria-details]/@aria-details]";
77+
const linkResult = document.evaluate(linkXPath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
78+
const linkNode = linkResult.singleNodeValue;
79+
80+
console.log('\nTest 1 - identify links to extended descriptions:');
81+
console.log('\t- XPath used:', linkXPath);
82+
if (linkNode) {
83+
console.log('\t- ✓ Link found with ID:', linkNode.id);
84+
console.log('\t- href:', linkNode.href);
85+
console.log('\t- HTML element:', linkNode);
86+
} else {
87+
console.log('\t- ✗ No links found in the page');
88+
}
89+
90+
} catch (error) {
91+
console.error('Error during the test:', error.message);
92+
console.error('Stack trace:', error.stack);
93+
}
94+
95+
try {
96+
// Test 2: identify extended description containers
97+
const linkXPath = "//*[@id=substring-after(//a[@id=//img[@aria-details]/@aria-details]/@href, '#')]";
98+
const linkResult = document.evaluate(linkXPath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
99+
const linkNode = linkResult.singleNodeValue;
100+
101+
console.log('\nTest 2 - identify extended description containers:');
102+
console.log('\t- XPath used:', linkXPath);
103+
if (linkNode) {
104+
console.log('\t- ✓ Container found with ID:', linkNode.id);
105+
console.log('\t- HTML element:', linkNode);
106+
} else {
107+
console.log('\t- ✗ No containers of extended description found in the page');
108+
}
109+
110+
} catch (error) {
111+
console.error('Error during the test:', error.message);
112+
console.error('Stack trace:', error.stack);
113+
}
114+
}
115+
116+
// Run the test automatically when the page loads
117+
window.addEventListener('load', runTest);
118+
</script>
119+
120+
</body>
121+
</html>

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
2+
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" lang="en-US" xml:lang="en-US">
3+
<head>
4+
<title>Table of Contents</title>
5+
</head>
6+
<body>
7+
<nav id="toc" epub:type="toc" role="doc-toc">
8+
<h2>Table of Contents</h2>
9+
<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>
16+
</ol>
17+
</nav>
18+
</body>
19+
</html>

‎extended-desc-experiments/extended-description-poc/mimetype‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
application/epub+zip

0 commit comments

Comments
 (0)