When someone is using a screen reader, they do not have access to the images in your guide. If you provide Alt-text (Alternative Text), the screen-reader will read that out, in place of the image. It’s important for this text to be clear and meaningful.

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]".

Which do you think is the best and most meaningful alt-text to use in each of the following contexts? 

1. For an image of a convention hall filled with people on a page of wrap-up content about a conference:

A. alt=”conventionhall1.jpg”

B. alt=”Convention Hall”

C. alt=”Busy convention hall”

D. alt=”Convention Hall – ALIA Conference 2018”

E. alt=”The Convention Hall was extremely crowded during the first few hours of Day 1 of the 2018 ALIA Conference”

Answer: E

2. For a screenshot of a menu in a software program, on a page of content about using the software. The menu is not discussed elsewhere on the page:

A. alt=”screenshot.jpg”

B. alt=”Screenshot of Software menu”

C. alt=”Settings menu in Software Program”

D. alt=”The Settings menu in Software Program has options including Layout, Sync Accounts, Share Accounts, and My Account Preferences.”

Answer: D

3. For an infographic image about referencing, which depicts a citation and highlights all the different elements that make it up, in order according to APA Style. The rest of the page does not have any information on it:

A. alt=”infographic.jpg”

B. alt=”APA citation of a book”

C. alt=”Book citations in APA 7th Style should have the following structure: Author/s. Year of publication in round brackets. Book title in italics. Edition in round brackets. Publisher.”

Answer: C

• A filename is not acceptable alt-text: it's meaningless to all users.
• Don’t include “picture of” or “image of” or “screenshot of”. A screen reading will read out “image” and then your alt text.
• Be concise
• Not all images need alt-text. If an image is genuinely decorative, that’s fine.
• Image captions can take the place of alt-text, but only when they provide the same degree of meaningful information.
• An image of a chart on a page of content that describes/duplicates the information in the chart can have alt-text of "[Title of the chart], as described [above/below].”
• Images of words should include exactly the words in the image - e.g. an image of a quote should have an exact replication of that quote in the alt-text.