You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
1.4 KiB
1 line
1.4 KiB
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test ARIA-live region with label | tait.tech</title> <link rel="stylesheet" href="/assets/css/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="author" content="Tait Hoyem"> <meta name="keywords" content=""> <meta name="description" content=""> </head> <body> <div id="wrapper"> <header> <nav> <input type="checkbox" id="menu"> <label for="menu">☰</label> <div class="menu-content"> <a href="/" class="nav-link">Home</a> <a href="/blog/" class="nav-link">Blog</a> <a href="https://github.com/TTWNO/" class="nav-link" target="_blank" rel="noopener noreferrer">Github</a> </div> </nav> </header> <main> <div id="test-aria" aria-live="polite" aria-label="Test label"> I am some text. </div> <button id="btn">Update labled ARIA region.</button> <button id="btn2">Delete text</button> <p>Test</p> <script>ALDIV=document.getElementById("test-aria"),NEW_TEXT="new text;",UPDATE_BTN=document.getElementById("btn"),DELETE_BTN=document.getElementById("btn2"),UPDATE_BTN.addEventListener("click",function(){ALDIV.innerText="Updating... Hello world!"}),DELETE_BTN.addEventListener("click",function(){ALDIV.innerText=""});</script> </main> <hr> <footer> This page is mirrored on <a href="https://beta.tait.tech/tests/live-label/">beta.tait.tech</a>. </footer> </div> </body> </html> |