Does every image have a suitable text alternative?
Images add great value to the web browsing experience, and can be a very accessible way of conveying information. But, unless a text equivalent is provided, information in images cannot be accessed or understood by users who cannot see them. This can result in screen reader users not being able to understand content or understand how to interact with content.
Images can either be foreground or background images. A foreground image is included in the HTML and can be accessed by screen readers. They should always have an alt attribute, which is a way to give the image a text equivalent that will be read out by a screen reader. The value of the attribute is text that is an appropriate alternative to the information provided by the image. What is "appropriate" depends on the type of image and its role on the page.
For example, if an image is the NYU logo, and it also acts as a link to the NYU Home page, an appropriate value for its alt text would be alt="NYU home page". In this case, the most important information is the destination of the link. However, if the same image is used as a decorative image that is not considered editorially significant, it would be appropriate to have null alt text e.g. alt="", which would signify to screen readers that there is no text equivalent, and it can safely be ignored.
Example code: The NYU logo image with examples of code without alt text and with alt text.
<a href="home.html"><img src="logo.gif"></a>
The code with alt text:
<a href="home.html"><img src="logo.gif" alt="NYU home page"></a>
Some images are background images, which means they are displayed using Cascading Style Sheets (CSS) rather in the page's HTML. This means that they can't be given an alt attribute. Images provided this way should only be decorative, but sometimes images that are informative are provided using CSS, for example as icons that label buttons and links. In such cases, a text equivalent needs to be provided in the page content. This can be done using text that is styled using CSS to be positioned offscreen, so it isn't visible by default, but can still be read out by screen readers.
This applies to all images, such as photos, logos, illustrations, diagrams, graphs and avatars.
- Learn more about creating accessible images.