Images of text

Should

Images of text should be avoided.

Description

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 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.

iOS example

aLabel is a UILabel:

[aLabel setText:NSLocalizedString(@"Breaking News", @"Label title to go alongside image")];                        

logoImage is a UIImageView:

[logoImage setAccessibilityLabel:NSLocalizedString(@"Breaking News", nil)];                        

ANDROID

Use text label elements rather than images of text.

Android example

<TextView android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ACME Construction" />                        
<ImageView 
        android:layout_height="wrap_content" 
        android:id="@+id/acme" 
        android:src="@drawable/acme" 
        android:focusable="true" 
        android:contentDescription="ACME Construction"></ImageView>                        

HTML

Use text and style the text using CSS.

HTML example

h3 {
 font: bold italic 2em Georgia, Times, Arial;
 border-bottom: 2px dashed black;
 border-top: .5em solid black;
 margin: 0;
 font-size: 1em;
}
...
<h3>Eastenders</h3>                        
<h3><img src="Eastenders_logo.jpg" alt="" />                        

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.
Results

The following check is true:

  • Actual text is used instead of images of text.