For visual users, images can enhance content surrounding it and add more meaning to the content. When placing images on your page, it is important for editors, developers, and designers to keep screen reader users in mind. Many screen reader users include users who are blind, have low vision, or have cognitive disabilities. Images should always provide an effective "alternative text" for images. When a screen reader encounters an image the alt text is read out to them.
Not only do screen readers rely on the alt text to make sense of an image, but there may users who prefer to disable images on the web. In this case the alt text will display in place of the image. These users may be those who have slow internet connections or cognitive disabilities that cause them to prefer to disable images.
Aside from alt text, optimizing images and making sure your images use generous color contrast ratios is also important. Users with low vision may zoom into a page in order to make better sense of the content and image, if an image is not properly optimized then the image may become pixelated when a user zooms into the page. If your image shows text or important content in it (e.g. graph), make sure the color contrast ratio is appropriate so that color blind users can make out the varying colors or the possible importance of the colors.
Images and non-text content should always include an alternative text, or simply known as "alt text". The alt text presents a text equivalent of the image or non-text content. Therefore, alt text should properly present the content and function of an image. Alt text is displayed in the HTML code for the image. Screen readers read the alt text aloud to the user and the alt text will display instead of the image if a user prefers to disable images or the image fails to load.
Alt text can be added to an image once an image has been uploaded. After uploading an image, edit the image properties and fill out the "Alternative text" field.
The "Title" field is not the same as the alternative text. The title appears when hovering over an image.
Making sure your alt text is appropriate can be tough depending on what the image is displaying and the content that ties in with the image. Since alt text should be conveying the content and function of an image, writing effective alt text can be challenging. A few best practices to follow are:
For more information on alt text and how to write effective alt text visit WebAIM: Alternative Text
Images of text is highly discouraged, especially if content within the image is important for users to have access to. If image has multiple lines of text then it is much more appropriate for the text to be elsewhere on the page as actual content. If the image only has a small amount of text like a short quote, then the text should be mimicked in the alt text. If your text is very long then do not replicate it in the alt text field. That is not an appropriate use of the alt text field.
If you do use images of text then it is important that you follow these guidelines:
Complex images include images of maps, tables, graphs, infographics, illustrations, etc. These type of images are a lot harder to describe to users and alt text is not sufficient in this case to convey the importance of the image. Additional information should be included next to the image and alt text should direct users to that information.