|
3 | 3 | <head> |
4 | 4 | <meta charset="utf-8" /> |
5 | 5 | <title>External Page Extended Description</title> |
| 6 | + <style> |
| 7 | + .icon { |
| 8 | + width: 1em; |
| 9 | + } |
| 10 | + |
| 11 | + img { |
| 12 | + max-width: 100%; |
| 13 | + } |
| 14 | + </style> |
6 | 15 | </head> |
7 | 16 | <body> |
8 | 17 | <section role="doc-chapter"> |
|
26 | 35 | <p><a id="anchor-extended-description-img2" href="poc-external-page-extended-description-appendix.xhtml#extended-description-img2">Extended description second image</a></p> |
27 | 36 | <p>This is placeholder text designed to simulate the actual text of the chapter.</p> |
28 | 37 | <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> |
| 38 | + <p>A third example with two images in a <code>figure</code> container, with the link to the extended description outside the <code>figcaption</code>:</p> |
| 39 | + <figure> |
| 40 | + <img id="img3" aria-details="anchor-extended-description-img3" src="pie-chart-154411_640.png" alt="Pie chart"/> |
| 41 | + <p><a id="anchor-extended-description-img3" href="poc-external-page-extended-description-appendix.xhtml#extended-description-img3">Extended description for the first image of this container</a></p> |
| 42 | + <img id="img4" aria-details="anchor-extended-description-img4" src="infographic-1786704_1280.png" alt="Infographic"/> |
| 43 | + <p><a id="anchor-extended-description-img4" href="poc-external-page-extended-description-appendix.xhtml#extended-description-img4"><img src="info-circle-icon.svg" class="icon" alt="Extended description for the second image of this container - taken from https://uxwing.com/license/" /></a></p> |
| 44 | + <figcaption> |
| 45 | + <p>This is the caption for these two images.</p> |
| 46 | + <p>Image by <a href="https://pixabay.com/users/openclipart-vectors-30363/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=154411">OpenClipart-Vectors</a> from <a href="https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=154411">Pixabay</a></p> |
| 47 | + <p>Image by <a href="https://pixabay.com/users/gustavofer74-791316/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=1786704">Gustavo Ferreira Gustavo</a> from <a href="https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=1786704">Pixabay</a></p> |
| 48 | + </figcaption> |
| 49 | + </figure> |
29 | 50 | </section> |
30 | 51 |
|
31 | 52 | <script> |
32 | 53 | function runTest() { |
33 | 54 | console.log('=== XPATH TEST to identify extended descriptions for reading system developers ==='); |
34 | | - |
| 55 | + |
35 | 56 | try { |
| 57 | + // Namespace resolver for XHTML documents |
| 58 | + const nsResolver = function(prefix) { |
| 59 | + const ns = { |
| 60 | + 'xhtml': 'http://www.w3.org/1999/xhtml' |
| 61 | + }; |
| 62 | + return ns[prefix] || null; |
| 63 | + }; |
| 64 | + |
36 | 65 | // Test 1: identify links to extended descriptions |
37 | | - const linkXPath = "//a[@id=//img[@aria-details]/@aria-details]"; |
38 | | - const linkResult = document.evaluate(linkXPath, document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null); |
39 | | - |
| 66 | + const linkXPath = "//xhtml:a[@id=//xhtml:img[@aria-details]/@aria-details]"; |
| 67 | + const linkResult = document.evaluate(linkXPath, document, nsResolver, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null); |
| 68 | + |
40 | 69 | console.log('\nTest 1 - identify links to extended descriptions:'); |
41 | 70 | console.log('\t- XPath used:', linkXPath); |
42 | | - |
| 71 | + |
43 | 72 | const linkNodes = []; |
44 | 73 | let linkNode; |
45 | | - |
| 74 | + |
46 | 75 | // Raccoglie tutti i nodi che corrispondono al criterio |
47 | 76 | while (linkNode = linkResult.iterateNext()) { |
48 | 77 | linkNodes.push(linkNode); |
49 | 78 | } |
50 | | - |
| 79 | + |
51 | 80 | if (linkNodes.length > 0) { |
52 | 81 | console.log(`\t- ✓ Found ${linkNodes.length} link(s):`); |
53 | | - |
| 82 | + |
54 | 83 | linkNodes.forEach((node, index) => { |
55 | 84 | console.log(`\t Link ${index + 1}:`); |
56 | 85 | console.log(`\t - ID: ${node.id}`); |
|
60 | 89 | } else { |
61 | 90 | console.log('\t- ✗ No links found in the page'); |
62 | 91 | } |
63 | | - |
| 92 | + |
64 | 93 | } catch (error) { |
65 | 94 | console.error('Error during the test:', error.message); |
66 | 95 | console.error('Stack trace:', error.stack); |
67 | 96 | } |
68 | 97 | } |
69 | | - |
| 98 | + |
70 | 99 | // Run the test automatically when the page loads |
71 | 100 | window.addEventListener('load', runTest); |
72 | 101 | </script> |
|
0 commit comments