Demo of updating image alt text as you type in JavaScript

Enter image text

Keep the pointer over the image to inspect its title tooltip while you type. The image's alt value is updated at the same time.

Here is the text as you enter it:

Return to tutorial on image alt tag

JavaScript

const image = document.getElementById('i1');
const input = document.getElementById('t1');
const output = document.getElementById('d1');

input.addEventListener('input', () => {
  const text = input.value;
  image.alt = text;
  image.title = text;
  document.title = text || 'Live image alt text demo';
  output.textContent = text;
});

HTML

<img src="images/help.jpg" id="i1" alt="This is help" width="50" height="50">
<input type="text" id="t1" size="50" aria-label="Image alt text">
<p>Here is the text as you enter it:</p>
<div id="d1" aria-live="polite"></div>

Complete working page

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Live image alt text demo</title>
</head>
<body>
  <img src="images/help.jpg" id="i1" alt="This is help" width="50" height="50">
  <br><br>
  <input type="text" id="t1" size="50" aria-label="Image alt text">
  <p>Here is the text as you enter it:</p>
  <div id="d1" aria-live="polite"></div>

  <script>
    const image = document.getElementById('i1');
    const input = document.getElementById('t1');
    const output = document.getElementById('d1');

    input.addEventListener('input', () => {
      const text = input.value;
      image.alt = text;
      image.title = text;
      document.title = text || 'Live image alt text demo';
      output.textContent = text;
    });
  </script>
</body>
</html>