Images of text should

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.

Where available, use BBC Global Experience Language iconography. Icons should always have a consistent label, which is visible text when possible.

---

iOS

Use a UILabel in place of images of text. If the text is not dynamic, you may apply the UIAccessibilityTraitStaticText trait to the label. Text coded in this way can be styled using a variety of methods that can be used to modify the text size, background color, foreground color, and so on, thus avoiding the need for images of text.

iOS Example (Objective-C)

[myLabel.setAccessibilityTraits:UIAccessibilityTraitStaticText];

[myLabel.setBackgroundColor:[UIColor blueColor]];

[myLabel.setTextColor:[UIColor yellowColor]];

---

Android

Use a TextView, combined with the android:text attribute, in place of images of text. Methods such as setTextColor and textSize may be used too.

Android Pass Example

<TextView
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:text="My text"
  android:textSize="32sp"
  android:setTextColor(Color.RED) />

---

HTML

Use CSS to control the visual presentation of text.

HTML Pass Example

.myBigFont {
  font-size: 4em;
  font-weight: bold;
  background-color: yellow;
  color: blue;
}

<p class="myBigFont">Large bold blue text with a yellow background </p>

---

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.

Outcome

The following check is true:

• Actual text is used instead of images of text.

---