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 know. 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. Images of simple tables should be converted to a table with actual text.
The font size of the text in an image should be large, the larger the better. This will help mitigate pixelation when image is magnified. Color contrast ratios becomes a very important issue when it comes to text in images. Make sure that contrast ratio is at least 4:5:1.
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.