This web page has three cards with information above and an image below. I am using JavaScript and HTML to get the information that goes to my web page. My JavaScript gets the information it needs from the following online JSON file. The file doesn’t contain alt text for the image. when I run the Wave evaluation tool, it says I need alt text for my images. The images are provided through the JSON file. How can I create alt text for it? Do I do it in the HTML or in the JavaScript? How would I do that?
Array(3) 0: averageRainfall: 14.2 currentPopulation: 501 motto: "This is Fish Heaven." name: "Fish Haven" photo: "fishhaven.jpg" yearFounded: 1864__proto__: Object 1: averageRainfall: 16.65 currentPopulation: 5204 motto: "Home of Napoleon Dynamite." name: "Preston" photo: "preston.jpg" yearFounded: 1866 __proto__: Object 2: averageRainfall: 15.75 currentPopulation: 2985 motto: "Historic Oregon Trail Oasis. The Soda is on Us. "name: "Soda Springs" photo: "sodasprings.jpg" yearFounded: 1858 __proto__: Object MY JAVASCRIPT file js/home.js //set JSON source const requestURL = 'https://byui-cit230.github.io/weather/data/towndata.json'; //fetch data fetch(requestURL) .then(function (response) { return response.json(); }) .then(function (jsonObject){ const towns = jsonObject['towns']; //create town input const fishhaven = towns.filter(x => x.name === "Fish Haven"); const preston = towns.filter(x => x.name === "Preston"); const sodasprings = towns.filter(x => x.name === "Soda Springs"); const sort = []; sort.push(...fishhaven, ...preston, ...sodasprings) console.log(sort); // let eachTown = towns.sort('sort'); sort.forEach(town => { let card = document.createElement('div'); let info = document.createElement('section'); let name = document.createElement('h2'); let motto = document.createElement('h3'); let year = document.createElement('p'); let pop = document.createElement('p'); let rain = document.createElement('p'); let photo = document.createElement('img'); //use template literals name.textContent = `${town.name}`; motto.textContent = `${town.motto}`; year.textContent = `Year Founded: ${town.yearFounded}`; pop.textContent = `Population: ${town.currentPopulation}`; rain.textContent = `Annual Rainfall: ${town.averageRainfall}`; photo.src = `images/${town.photo}`; card.append(info); info.append(name); info.append(motto); info.append(year); info.append(pop); info.append(rain); card.append(photo); document.querySelector(".towns").appendChild(card); }); }) HTML only consists of: <!DOCTYPE html> <html lang="en-us"> <title>Whether to Weather Home</title> <body> <main class="homepage"> <div class="hero-div"> <img src="images/prestonhero.jpg" alt="image of mountains near Preston, Idaho."> </div> </main> <footer></footer> <script src="js/home.js"></script> </body> </html>
Advertisement
Answer
Just add an alt
attribute to photo
let photo = document.createElement('img'); photo.src = `images/${town.photo}`; // What you need is the line below photo.alt = `${town.name}`;