Support Centre

Use Text instead of Images of Text

Gino B.
Gino B.
  • Updated

Available on the following Venngage subscription plans: Premium, Business and Enterprise.

You might use images representing text in order to create visual interest, structure within your document, or manage styling.

How do images fit into accessible design?

Images of text represent a potential barrier for users with different access needs. Screen readers and other accessibility tools rely on text characters to make text accessible to users.

Take this image of a brochure, for example:

 

A flat image of a brochure. In one column there is text (image of text) describing an event called 'Creative Artists Awards Night', with details of events listed underneath; in the other, a design featuring graffiti visuals of a human face, a cat, other characters and words makes up the background of the brochure design.

The background of the brochure is covered in graffiti-style drawings that include words and letters. The words and letters that are part of the background visuals are not essential to understanding the design, and don't need to be read by a screen reader.

However, the image also features text in the left column, with the event title "Creative Artists Awards Night" and below it, details of an event that a screen reader cannot read, unless it is transcribed and included in the alt text.

How do I ensure images in my document are accessible?

The easiest way to do this is to use text instead of images of text wherever possible.

Style text easily and quickly in the Venngage Editor, using the Text menu in the left sidebar.

 
 

Click on the type of text you'd like to put on your canvas, then use the bounding box to move or resize it.

Use the top toolbar to customize font face, size and color.

 

From left to right, the tools include:

  • Color picker

  • Font face menu

  • Font size menu

  • Font weight and style (Bold, Italic, Underline)

  • Font alignment (Left, Center, Right, Justified)

  • Line height (px)

  • Line spacing
  • Unordered (bullet) list

  • Ordered (numbered) list

  • Link embed

  • Text tag (for tagging headers and entering alt text)

  • Improve text
  • Effects
  • Layers (change the position of the element to appear in front of or behind other elements in the design)

  • Align

  • Group

  • Lock/Unlock

  • Duplicate

  • Delete

If you can't use text to replace images of text, use alt text for the image. Ensure that it contains the same text as is shown in the image.

If the text is decorative or part of a logo, use alt text to clarify this.

 

Was this article helpful?

2 out of 2 found this helpful

Have more questions? Submit a request