aria-notify-element-announcement-manual.html (1485B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>ARIA Notify API Test: Element Announcement</title> 5 <link rel="help" href="https://github.com/w3c/aria/pull/2577"> 6 <link rel="author" title="Jacques Newman" href="mailto:janewman@microsoft.com"> 7 <script src="core-aam/arianotify/resources/aria-notify-helpers.js"></script> 8 </head> 9 <body> 10 <h1>ARIA Notify API Test: Element Announcement</h1> 11 <p>This test checks the behavior of the <code>ariaNotify</code> API with an announcement on a specific element.</p> 12 13 <h2>Setup Instructions</h2> 14 <p><strong>Setup:</strong> Use a screen reader (NVDA, JAWS, VoiceOver, etc.) or other assistive technology that 15 supports the ARIA Notify API.</p> 16 <p><strong>Instructions:</strong> Click the "Run Test" button and listen for the announced text from your screen reader.</p> 17 18 <p><strong>Note:</strong> If the ariaNotify API is not supported in your browser, the test will show an appropriate 19 error message.</p> 20 21 <div> 22 <h3>Test: Simple Announcement on Specific Element</h3> 23 <p><strong>Expected:</strong> Screen reader should announce "Hello, world!" using the button element as context.</p> 24 25 <button id="test-button" onclick="test()">Run Test</button> 26 <div id="status"></div> 27 28 <script> 29 function test() { 30 const button = document.getElementById('test-button'); 31 document.getElementById('status').textContent = tryCallAriaNotify(button, 'Hello, world!'); 32 } 33 </script> 34 </div> 35 </body> 36 37 </html>