If you are using decorative images - that is, images that are purely decorative and do not convey any information - you can use a null alt. This will make the screen reader ignore the image, or signal to the user that there’s an image in place but it is decorative.
You can leave the alt-text box in the Image editor in LibGuides blank, but if you need to check the html code, it should look like this:
img alt="" src="image.jpg" (That is, there is nothing between the quotation marks after the img alt= .)
If you are using functional images, including screenshots, infographics, or images that contain text, you need to provide an alt-text and ensure that it conveys in words exactly the same information the user would get from the image. It’s not enough to use the title of the image, or describe what the image is depicting. You need to explain the meaning the user is supposed to get from the image:
- What context does the image convey?
- What is the relevant information the user needs to understand?
Exception
If your image is "functional", but you have provided the information within the content on your page, you don't need to duplicate this information in the alt-text.
For example, if you've provided step-by-step instructions as part of your content, and you've provided a screenshot illustrating those instructions, don't repeat the instructions in your alt-text. You can probably consider the image decorative.
A slightly different example could be that if you've provided a chart or graph, and the information in the image is discussed in detail above or below, you can make your alt-text "[Title of chart], as described [above/below]".