<div id="container">
  <div aria-hidden="true" id="note">
    Below is the demo using <code>aria-live</code>. Try adding this <a href="https://chrome.google.com/webstore/detail/screen-reader/kgejglhpjiefppelpmljglcjbhoiplfn/related?hl=en" target="_blank">Screen Reader extension</a> and interact with it by typing something into the text input. 
  </div>

  <div role="article" aria-label="Main" id="article">

    <label role="label" tabindex="0" for="name">What's your name?</label>
    <input type="text" id="name" aria-label="Name input">
    <div role="heading" aria-level="2" aria-live="polite" tabindex=0 id="paragraph"></div>

  </div>
</div>

:root {
  --bg-light: #FFF;
  --txt-light: #333;
  --bg-dark: #111;
  --txt-dark: #EEE;
}

*{
  padding: 0;
  margin: 0;
}

#container{
  padding: 20px;
  height: max-content;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#note{
  margin-bottom: 10px;
  width: 75%;
  max-width: 600px;
}

[role="article"]{
  border: 1px solid #BBB;
  padding: 10px;
  width: 75%;
  max-width: 600px;
  color: var(--tx-light);
}

[role="heading"]{
  font-weight: bold;
}

[aria-level="2"]{
  font-size: 19px;
  width: max-content;
  margin-top: 5px;
}

#paragraph{
  text-align: justify;
  min-height: 30px;
}

const paragraph = document.getElementById("paragraph");
const input = document.getElementById("name");

input.addEventListener('input', function () {
  if (input.value.length < 1) {
    paragraph.textContent = '';
  } else {
    paragraph.textContent = 'Hello ' + input.value.trim() + '!';
  }
}, false);