aria-atomic

Recipe 3.7 Fix client-side rendering

Sample:

My name is Claudia

Code:

<button>Change name</button>

<div aria-live="polite" aria-atomic="true">
 My name is <span>Claudia</span>
</div>

<script>
  const button = document.querySelector('button');
  const names = [
  "Moritz",
  "Valentina",
  "Johanna",
  "Magdalena",
  "Victoria",
  "Philippa",
  "Olivia",
  ];
  const name = document.querySelector(' span');

  button.addEventListener('click', e => {
    const random = Math.floor(Math.random() * names.length);
    name.textContent = names[random];
  })
</script>