When adding images to your site, you must ensure that the images are accessible to users with all different types of disabilities. For example, some users may have may have trouble with colours and contrasts, so adding colored text within an image can become an obstacle. Other users may be using assistive technologies, so it is fundamental that you provide an alternative text and that this text is relevant.
General accessibility guidelines to follow
- Image content
- There should never be any text within images. This is a very poor Web practice.
- Alternative text (ALT text)
- All images require an alt tag.
- Simple informative images: If the image conveys information that helps understand the message, you must provide alternative text that conveys that information.
- Decorative images: Due to current limitations, you must provide an alternative text even if the image is decorative. However, in the future, if the image is purely decorative and does not provide any additional content, the alternative text area will have to be left empty.
- Complex images: For complex images (such as a graphic, a table, a pie chart, a diagram, etc.), you must provide alternative text that best summarizes the content. If the details of the complex image are important or relevant, provide a long description that links to a page containing all the fine details of the image.
- Do not use such phrases as “Image of…”, “Icon of…”, “Photo of...” or “Graphic of…” to describe the image.
- Long description
- The long description attribute must contain a URL towards a page that contains the full description, as well as the title of that URL. It must not contain the long description text itself.
- Title text
- Avoid adding any information in the “Title” text field of an image, as this text is not read by most screen readers.
To learn more on accessibility: