Image elements do not have [alt] attributes

[Souvik-Cyclic]

I would like to take this, assign this to me.

[veronicamar]

From PageSpeed: Informative elements should aim for short, descriptive alternate text. Decorative elements can be ignored with an empty alt attribute.

Ensure all informative elements have short, descriptive alternate text and all decorative elements have empty alt attributes (e.g. alt="").

There are three main ways to add alternate text to an image:

Using an alt attribute i.e. < img alt="drawing of a cat" src="..." > Using an aria-label i.e. < img aria-label="drawing of a cat" src="..." > Using an aria-labelledby attribute i.e. < img arialabelledby="someID" src="..." >

When writing alt text, keep in mind that its purpose is to relay information to blind users about the image’s contents and purpose - blind users should be able to get as much information from alt text as a sighted user gets from the image itself. Alt text should give the intent, purpose, and meaning of the image.

When writing alt text, it is helpful to keep the following questions in mind:

Why is the non-text content here? What information is it presenting? What purpose does it fulfill? If I could not use the non-text content, what words would I use to convey the same information or function? Be sure that all text contained in the attribute is useful. Words like "chart," "image," "diagram," or image file names tend not to be very useful and thus should not be used in alt text.

[cdrini]

Awesome thank you @Souvik-Cyclic ! The strategy here is:

The last 3 images should have an empty alt, eg alt="", since they have visible text labels and the images are purely presentational and shouldn't be read aloud by screenreaders.

For the first one, update the HTML to be something like:

<button title="Go to next section">
  <img src="right-arrow.png" alt="">
</button>

This will require rejiggering the HTML/styling a bit :+1:

[AbhinavKRN]

@cdrini can you assign this issue to me?

[Souvik-Cyclic]

@veronicamar @cdrini Do I only need to add alt text to these four images, or should I add it to all the images on the website? Please clarify. Thanks.

[cdrini]

@Souvik-Cyclic just these four.

@AbhinavKRN This issue is already assigned to someone else.