JavaScript Image Alt Text
The alt property of an image element reads or changes its alternative text. It reflects the HTML alt attribute and is important because that text can replace the image when the image is unavailable and can provide the image's meaning to assistive technology.
const image = document.getElementById('i1');
console.log(image.alt);
image.alt = 'Help icon';
Table of Contents
Read and change image alt text Top ↑
const image = document.getElementById('i1');
const currentAlt = image.alt;
image.alt = 'A concise description of the image';
If an image is purely decorative, an empty value such as alt="" can be appropriate. For meaningful images, write concise text that communicates the image's purpose or information in context.
Alt text should match the image purpose Top ↑
Do not use alt text as a place to insert unrelated keywords. Describe the information or function the image contributes. An action image should describe the action; a decorative image should usually have empty alt text.
// Informative image
image.alt = 'JavaScript console showing an array result';
// Decorative image
image.alt = '';
Alt text and the title attribute are different Top ↑
The title attribute may appear as a tooltip, but it is not a substitute for alt. The original plus2net demos update both properties so you can inspect the difference. In production pages, avoid duplicating the same text in both unless there is a specific reason.
Change alt text with a button Top ↑
Demo of changing alt message by user
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change image alt text with JavaScript</title>
</head>
<body>
<img src="images/help.jpg" id="i1" alt="Default alt text" width="50" height="50">
<br><br>
<input type="text" id="t1" size="50" aria-label="New image alt text">
<button type="button" id="change-alt">Change Alt</button>
<p>Here is the text you entered:</p>
<div id="d1" aria-live="polite"></div>
<p>Return to <a href="image-alt.php">tutorial on image alt tag</a></p>
<script>
const image = document.getElementById('i1');
const input = document.getElementById('t1');
const button = document.getElementById('change-alt');
const output = document.getElementById('d1');
button.addEventListener('click', () => {
const text = input.value.trim();
image.alt = text;
image.title = text;
output.textContent = text;
});
</script>
</body>
</html>
Update alt text while typing Top ↑
The second original demo updates the image as the user types. The modern version uses the input event instead of legacy key-event normalization and updates the output with textContent.
Demo updating alt message as user types
<!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>
Managing Height of Image Image Object
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
Subscribe to our YouTube Channel here
