aria-notify-mixed-priorities-manual.html (2174B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>ARIA Notify API Test: Mixed Priorities</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: Mixed Priorities</h1> 11 <p>This test checks the behavior of the <code>ariaNotify</code> API when a high priority message interrupts a normal 12 priority message.</p> 13 14 <h2>Setup Instructions</h2> 15 <p><strong>Setup:</strong> Use a screen reader (NVDA, JAWS, VoiceOver, etc.) or other assistive technology that 16 supports the ARIA Notify API.</p> 17 <p><strong>Instructions:</strong> Click the "Run Test" button and listen for the announced text from your screen reader.</p> 18 <p><strong>Note:</strong> You may need to slow down your screen reader speech rate so that the second, higher priority 19 notification occurs while the first message is still being spoken. 20 </p> 21 22 <div> 23 <h3>Test: A Normal Priority Message Interrupted by a High Priority Message</h3> 24 25 <p><strong>Expected:</strong> Screen reader should start announcing the long message, then be interrupted after a 26 2 second delay by "This is a high priority notification!" at high priority. This second notification should occur mid-speech if the 27 speech rate is slow enough. 28 </p> 29 30 <button onclick="test()">Run Test</button> 31 <div id="status"></div> 32 33 <script> 34 function test() { 35 // Start the long message first 36 document.getElementById('status').textContent = 37 tryCallAriaNotify(document, 'This is a longer message that tests how well the ariaNotify API handles interruptions, it will repeat once for extra length. This is a longer message that tests how well the ariaNotify API handles interruptions.', { priority: 'normal' }); 38 39 setTimeout(() => { 40 document.getElementById('status').textContent += ' ' + 41 tryCallAriaNotify(document, 'This is a high priority notification!', { priority: 'high' }); 42 }, 2000); 43 } 44 </script> 45 </div> 46 </body> 47 48 </html>