Introduction

Images are integral part of web pages, and we use them frequently for various purposes such as logos, message reinforcement, decorations, icons, and more.

However, many developers misuse these images in a way that is not compatible with assistive technologies like screen readers. This often leads to confusion for users relying on assistive technologies, as they encounter inaccessible images that are skipped or read out with meaningless names.

Prerequisites

• Basic knowledge of HTML, especially the <img> tag.

How people interact with image

For normal users:

• They can see and understand the images based on their visual perception.

For people with disabilities relying on assistive technologies:

• They cannot see the images.

• They depend on assistive technologies to navigate websites.

• They comprehend the content through what the assistive technology reads out.

• They rely on assistive technologies to identify images and understand their meaning.

How most developers use the <img> tag

Alt attribute

• The most common and problematic practice is omitting the alt attribute.

• Using alt="" even for important images, which causes assistive technologies to skip all images with empty alt attributes.

• Using generic values such as "image," "img," "logo," "picture," etc., which can be confusing for users relying on assistive technologies.

• Using non-descriptive or too long alt texts, using non-descriptive or excessively long alt texts is problematic.

Role attribute

• Adding role="image" to images is redundant and unnecessary since images are already semantic in nature.

Best practices for images

Alt attribute

• Always include the alt attribute for your images.

• Use descriptive and specific alt text that properly describes the purpose or content of the image.

Decorative images

Decorative images are images that are used purely for visual embellishment or aesthetic purposes and do not convey any meaningful content or information.

• Use empty alt text (alt="") for decorative images.

Complex images

• For complex images, such as charts or diagrams, ensure there is additional descriptive text or an accessible alternative format (e.g., a textual description or a downloadable document) to provide comprehensive information.

SVG images

• SVG images should also have a descriptive alt attribute.

• Ensure that any text within the SVG image is accessible by using proper text elements instead of embedding text within graphical elements.

• When using the <svg> element for an image, make sure it has a title and description.

• You don't need to use the alt attribute once you have provided the title and description.

Example for SVG Images:

<svg aria-labelledby="svgTitle">
  <title id="svgTitle">Example SVG Image</title>
  <desc>
    This is an example SVG image that represents a landscape with mountains, trees, and a sun.
  </desc>
  <!-- SVG graphic elements here -->
</svg>

How to test your images

Testing images for accessibility involves evaluating the alternative text (alt text), ensuring the image has meaningful context, and verifying that it can be understood by users with visual impairments or relying on assistive technologies. Here's a simple testing method:

• Use screen readers such as NVDA, VoiceOver, or JAWS to listen to how the software reads out the alt text of your images. Close your eyes and rely solely on the auditory output to assess the effectiveness of your image descriptions.

Conclusion

The web and its content should be accessible to all individuals, regardless of their temporary or permanent conditions. By using accessible images, we make life easier for people relying on assistive technologies.