Live region

Code:

<style>
  .visually-hidden {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
</style>

<header>
  <a href="/">Accessibility CookBook Demos</a>
  <nav>
    <ul>
      <li><a href="#page-home">Home</a></li>
      <li><a href="#page-about">About</a></li>
    </ul>
  </nav>
</header>

<div role="status" class="visually-hidden"></div>

<main>
  <h1>Live region</h1>
  
</main>

<template id="page-home">
 <h2>Home</h2>
</template>

<template id="page-about">
 <h2>About Us</h2>
</template>

<script>
  const nav = document.querySelector('nav');
  const main = document.querySelector('main');
  const region = document.querySelector('[role="status"]');

  nav.addEventListener('click', e => {
    if (e.target.nodeName === 'A') {
      e.preventDefault()
      const link = e.target
      const id = link.getAttribute('href')
      const page = document.querySelector(id)
      
      main.innerHTML = ''
      main.appendChild(page.content.cloneNode(true))
      region.textContent = `${link.textContent}`
    }
  })
 </script>