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.
62 lines
1.5 KiB
62 lines
1.5 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>
|
|
<h1>tait.tech</h1>
|
|
|
|
<nav>
|
|
|
|
<a href="/" class="nav-link" >Home</a>
|
|
|
|
<a href="/blog/" class="nav-link" >Blog</a>
|
|
|
|
<a href="/ideas/" class="nav-link" >Ideas</a>
|
|
|
|
<a href="/links/" class="nav-link" >Links</a>
|
|
|
|
<a href="https://github.com/TTWNO/" class="nav-link" target="_blank" rel="noopener noreferrer" >Github</a>
|
|
|
|
</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(e) {
|
|
ALDIV.innerText = 'Updating... Hello world!';
|
|
});
|
|
DELETE_BTN.addEventListener('click', function(e) {
|
|
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>
|