Add `alt` attribute to image inside `<figure>` element to improve accessibility

[manav-sharma69]

What information was incorrect, unhelpful, or incomplete?

Link to live example: Basic View Transitions API demo


Improve incomplete code:

• The image in <figure> element do not have an alt attribute.
• According to W3's documentation, we should add the alt attribute whenever possible.
• In this example's case, all images have a name in imageData array. So, we do have alt but haven't added them in the image in <figure> element.
• The image in anchor elements do have alt attribute added:

What did you expect to see?

In the script.js file, I suggest adding the following code:

galleryImg.alt = imageData[0].name; // in the init() function
galleryImg.alt = targetIdentifier.alt; // in the displayNewImage() method inside updateView() function

Do you have any supporting links, references, or citations?

"If there is even the slightest possibility of the author having the ability to provide real alternative text, then it would not be acceptable to omit the alt attribute." - W3's documentation

Do you have anything more you want to share?

Upon reviewer's approval, I'll create a PR to fix this issue.

[bsmth]

Thanks a lot for opening, I think you can go ahead and create a PR for this 👍🏻