Images of text Should

Images of text should be avoided.

Images are an inflexible way to present text information. The text can blur when magnified or enlarged, is difficult to adapt for users wishing to change the colour, language or spacing, and is not available to assistive technology such as screen readers. Additionally, images can be slow to download and require more data.

Sometimes it may be difficult to avoid using images of text, such as for brand logos or interactive content. If text can be read, it should also be available to assistive technology. Consider using methods such as SVG images, text alternatives, hidden text, and ARIA labels.

Icons should always have a consistent label, which is visible text when possible.

Examples

iOS

Use text label elements rather than images of text. Even though an image can have an accessible label - the image will not likely scale correctly when magnified.

Android

Use text label elements rather than images of text.

HTML

Use text and style the text using CSS.

Testing procedures

  1. Activate the app.
  2. Identify images of text by enlarging the default text size to determine if all text on the screen resizes.
  3. View the screen in a magnified state to determine if any text looks pixelated and is therefore an image of text.
  4. Exclude any images that would be considered an exception, such as logos, icons or interactive content that uses canvas.

Testing results

The following check is true:

  • Actual text is used instead of images of text.;

Background images Must

Background images that convey information or meaning must have an additional accessible alternative.

Background images are not available to assistive technology such as screen readers and are not supported on devices with minimal support for CSS. Additionally, a background image may not load.

It is not possible to directly assign alternative text to a CSS background image. Another method must also be used to provide the same information visibly, and in a way that is programmatically determinable by assistive technology, such as screen readers.

Examples

iOS

iOS allows background images to be set for most views. The views for an accessibility element can be given {labels}labels{/labels}, for example, to provide information on these images. There is no difference regarding the accessibility of decorative background images and inline images in iOS. All other accessibility standards and guidelines still apply - for example, apps must enter the proper contrast of colours between the background and any text on top of it and must not use of background images of text.

Android

Developers should ensure that images that convey meaning or information to a user are focusable. There is no difference regarding the accessibility of decorative background images and inline images in Android apps. All other accessibility standards and guidelines still apply - for example, apps must ensure the proper contrast of colours between the background and any text on top of it and use of background images of text.

HTML

As it is not possible to assign alternative text to a CSS background, either use an inline image or a suitable replacement technique in CSS to provide a visual and textual alternative.

Testing procedures

  1. Activate a screen reader.
  2. Identify all images which contain information.
  3. Identify which images are background images.
  4. Verify that alternative text is announced by a screen reader.
  5. In some cases this may require checking the code or testing on a non-mobile device.

Testing results

The following checks is true:

  • The image can be focused using assistive technology and meaningful information is announced.