6.6 Images

6.6.1 Use of images for representing text should be limited

Though images add life to a website, they also increase downloading time. Images should only be used when it adds value to the content. Images should not be used to present text as those using text only browsers shall not be able to access the information thus rendering the site inaccessible to many. Therefore, text MUST be used to convey information rather than images of text except when the image of text can be customised to the users requirement or when a particular representation of text is essential for the information being conveyed (such as a text in a logotype): The use of text, rather than images of text, should be considered for page headings and website navigation items (Menus). (Ref. WCAG 1.4.5)

6.6.2 Size of image files should be minimised

The size of image files should be reduced as much as possible to minimise the download time of web pages. A variety of techniques can improve the download time of pages:

  • Scaling of images should be avoided as they tend to distort when scaled. Instead, a correct size should be prepared in image processing software.
  • A thumbnail (a smaller version) for a large image and link to the full-size copy should be provided where appropriate.

6.6.3 Images and other non text content MUST be made Accessible

  • A meaningful explanatory text equivalent MUST be specified for images and other non text content e.g. by using the ALT attribute. The ALT text for an image is displayed before the image is fully downloaded. It is the main source of image information for users of text-only browsers, users of browsers with graphics turned off, and users who are sight impaired. The description should summarise the content or purpose of the image. For example, to use the description ‘Picture’ to explain a graphic does not serve any purpose. The following situations are exceptions:

    (i) If the non text content is a control or accepts input e.g. a submit button then it must have a name describing the purpose of the control.

    (ii) If the non text content is time based media (audio/video) then the text equivalent provides a descriptive identification of the same.

    (iii) If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content.

    (iv) If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content.

    (v) CAPTCHA: If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities.

    (vi) If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology (by using blank alt attribute). (Ref. WCAG 1.1.1)
  • The HEIGHT and WIDTH dimension attributes force the browser to allocate space for images and download the text first. The height and width specifications should be the same as the actual height and width of the image. This speeds up the time to download the web page and display the content.