Skip to Main Content

Accessibility Best Practices for LibGuide Content Creators

Text in Images

Examples and Best Practices | Resources

The intent of this page is to encourage LibGuide content creators to use text rather than text in images.

Standard text can be adjusted by users (font size and color, background and foreground color, and line spacing and alignment can be adjusted). Placing text in an image significantly decreases the user's ability to adjust these settings. Whenever possible, you should present the information as text rather than as text in an image.

Examples and Best Practices

There are several reasons why you may want to use an image that contains text - infographics, screenshots, pictures of notes are just a few. On this page, we will look at possible alternatives or tips for when there is not a better option. However, it is important to remember that text is better than images of text, and you should choose text whenever possible.

Note: The terms image, picture, graphic, etc. are somewhat synonymous with all online imagery. For these examples, we will specifically use the terms picture or photo when discussing an image captured by a photograph. We will use the term graphic to describe an image that has primarily been created by a graphics editor, such as Photoshop.

Taking a photo of an item with a motivational quote is trendy. It looks great! But it's not really accessible. If you want to use a photo with text as the primary focus, you have to remember that Alt Text is required. Similarly, it may be tempting to take a photo of text (such as a road sign, notes on a whiteboard, etc.) and place them onto your guide, but you're still going to have to transcribe the information contained. And, as we will discuss in the next section (Graphics with Text), when a user is viewing your guide on smaller device, the text contained in your photo may be useless.

Example 1: Quotes

Avoid Pictures where the Text is the Main Focus

An example of a photo that contains text as its main focus. 
Photo by Matej from Pexels

This example uses a fairly short quote. Does it need to be removed from my guide entirely? No.

You would just need to understand that this is completely inaccessible to someone without the ability to see the photo (whether because of no/low vision, internet restrictions, etc.) and add the proper Alt Text. Something like, alt="The quote 'Be yourself, everyone else is already taken.' by Oscar Wilde typed on a typewriter.".

Now, if the text had been longer, it would probably be best to just type the text instead of including a photo.

Also understand that a photo is probably going to take up a significant amount of space on your guide, whereas text will not.

Example 2: Notes

Avoid Pictures where the Text is the Main Focus

An example of a photo of notes on a whiteboard that uses text as the main focus. 
Photo by Jeswin Thomas from Unsplash

In this example, we are assuming that you took a photo of information you found relevant. This could be a photo of the whiteboard from an instruction session you thought went well. It could be from a slide presentation you thought contained useful information. The point is, regardless of what the photo is, if its focus is on the text, you will need to transcribe the information into Alt Text or into a paragraph if the text is lengthy.

The example photo contains too much information to be placed into an Alt Tag. Instead, because the information is relevant to everyone viewing the photo, you should transcribe the information to text. Even those that can see the text in the photo may have difficulty deciphering what it says depending on screen size, resolution, etc.

If, instead, you were using this photo as an example of an instructor teaching a course and the text didn't matter, you could simple use the photo with Alt Text similar to: alt="Professor Doe teaching a course about electrical current at the library.". (This topic is discuss in more detail under the Logotypes and Incidental Text example.)

Text can be styled to look various different ways while still maintaining the ability to change its size and be read by screen-readers. However, text that has been added to a graphic does not response well to change and will not be acknowledged by a screen-reader unless it is added as Alt Text.

While basic changes (like altering font and background color or font size) are easy to do using the text editor built into LibGuides, more complex alterations can be accomplished using an HTML element called style. It is highly recommended that if you want to add complex styling to your guide, you contact a member of the LibGuide Working Group at ut_libguides@live.utk.edu for help.

Example:

Styled Text vs Graphics with Text

Styled Text

The graphic above, which contains the text "Styled Text" is being styled using the HTML element style.

Example of text used in an image.

The graphic above, which contains the text "Image of Text" was created using Photoshop. Several items of code, which are specific to this image, have been added so that focus remains on the text as your screen/browser window size changes or moves to a mobile device, which is difficult to maintain and may not work in all browsers.

Example of text used in an image.

This version of the above graphic is the same Photoshop image but without the codes to make it responsive.

These "graphics" look very similar; however, the styled version can be read by screen-reader, altered by the user, and the text can even be copied/pasted. The first Photoshop image contains too much coding to make it worthwhile. The second Photoshop image, which is already slightly distorted because it is being constrained within the LibGuide box, will distort further if the screen/browser window size changes too much - go ahead and try adjusting the size of your browser window to see what happens.

Additionally, the only way the text in either of the Photoshop images can be read properly by a screen-reader is by adding alternative text (as discussed in the tab Alt Text).

Tip:

You can also add additional stylings, such as shadowing and letter spacing.

Styled Text

The W3Schools website provides great examples of CSS Text styling options (as well as other CSS properties).
If you have a graphic that contains text and want to use CSS instead, but don't know the exact color used, you can upload the image to the Adobe Color page. There, you can select the Extract Theme tab to upload an image. The site will then break down the colors used.

You can also use the Color Wheel tab to find colors that are related to shades you like.

Some programs, such as Canva, Adobe Acrobat, and Microsoft/Google Productivity Apps (through 3rd party extensions), allow you to save your documents as an image. One reason these programs allow this option is so that a document can be viewed without allowing edits. However, these documents should not be imported onto your guides as images. Once a document is saved as an image, any text within the document is no longer able to be read by a screen-reader. Additionally, these documents will render in odd manners on some devices and/or screen sizes.

Instead, import the document in its native format. This will maintain the document's ability to be interpreted by a screen-reader.

Example:

Uploading Documents in LibGuides

Use the Add option to import documents and/or files into your guide.

Screenshot of LibGuide's Add / Reorder drop-down menu open with Document / File highlighted.

  1. Open the Add / Reorder drop-down menu.
  2. Select Document/File.
  3. Provide the requested information in the pop-up window and Select File to import it.
    • Be sure to provide a Document Title. Otherwise, the link will appear blank.

Tip:

Many programs have built-in Accessibility Checkers. It's always a good idea to run these checks - especially if you are planning to import the document to your LibGuide. More information about this topic can be found in this guide under the Accessible Documents tab.

Complex images, such as Infographics, charts, graphs, etc., require special consideration when it comes to making them accessible to all users. Why? Because they are inherently visual representations of complex data and information.

As discussed in the Alt Text tab, complex images need longer descriptions that what can be included in a standard Alt Tag. The Universal Design Center at California State University, Northridge provides some guidance about creating accessible infographics.

Example 1: Image Infographics

Making Image Infographics Accessible

Excerpt from CSUN Universal Design Center: Accessible Infographics

Image infographics are the most popular infographic format, however; this format is also the least accessible. A screen reader cannot recognize the content (text) within an image infographic because it is an image. An image Infographic, therefore, requires an alternative method to ensure accessibility. Image infographics require an alternative text description in the form of a transcript. A transcript is simply a full-text version of the infographic that screen readers recognize and is therefore accessible to all users. When an image is displayed on a website, a transcript can be presented in the following ways:

  1. A transcript can be hidden behind an image. Advanced designers with web development skills can hide the text description of an image using a variety of HTML and CSS methods. However, precaution must be taken when using this approach to avoid inadvertently causing a new accessibility concern.
  2. A transcript can be displayed below an image infographic. Displaying the description under the infographic gives all users access to the information. An example of this method is available in WebAim’s infographic accessibility tutorials.
  3. A transcript can be linked. Advanced designers with web development skills can create a new page with the transcript and provide a link to the transcript directly above or below the image infographic. This method also gives all users the opportunity to access the transcript information. [1]

Example 2: PDF Infographics

Making PDF Infographics Accessible

Excerpt from CSUN Universal Design Center: Accessible Infographics

Infographics as PDFs are becoming widely popular thanks to their ability to be easily shared across multiple platforms. A PDF infographic can be made accessible if all document accessibility best practices for PDFs are followed. To make an accessible PDF infographic, users require Adobe Acrobat Professional (Pro). Adobe Acrobat Pro allows users to add accessibility markup (tags) and structure that can easily be read by screen readers. For a tutorial on creating accessible PDF through Adobe Acrobat Pro go to UDC’s PDF Documents page.

As rule of thumb, a PDF infographic must never be an image and should always have selectable text. This will allow users to accurately markup the PDF with appropriate accessibility tags. [1]

Logotypes and incidental text are excluded from this guideline.

Example 1: Logotypes

Logos that include text

"Logo images with text are exempt from some of the accessibility requirements." [2] For instance, according to the WCAG guidelines, "Logotypes (text that is part of a logo or brand name) are considered essential" [3] and can be included in logos. (Logotypes are also exempt from color contrast guidelines, which is covered in the tab Color Contrast.)

University of Tennessee, Knoxville logo.

The University of Tennessee logo includes text in the image. "The university logo combines two elements: the icon block and the wordmark. Together, these elements uniquely communicate both our tradition of excellence and our position as a dynamic public research university." [4]

The text included in the image is considered part of the logo and should NOT be replaced by text. However, alternative text should be included (as discussed in the tab Alt Text).

Additionally, even though it is acceptable that the logo contains text, you should not create an other images with text that include the logo.

Example 2: Incidental Text

Pictures/Images that include text, but the text is not the focus

Excerpt from WebAim ©: Contrast and Color Accessibility

WCAG defines four types of incidental text:

  • Text contained in inactive elements
  • Text that is pure decoration
  • Text that is not visible to anyone
  • Text that is part of a picture that contains significant other visual content [5]
    • (i.e., images where text is not the main focus)

We are specifically going to focus on images where text is not the main focus. Let's use the same photo that was found under the Pictures of Text example.

An example of a photo of an instructor writing notes on a whiteboard where the text is not the main focus. 
Photo by Jeswin Thomas from Unsplash

When we reviewed this photo previously, we made the assumption that you wanted to use it as a way of showing the notes the instructor was writing on the whiteboard. Now, let's assume you want to highlight an instruction session taking place in the library with Professor Doe.

In this instance, the text on the whiteboard would be considered "incidental" because it is not the important part of the photo. It would be fine to use this image with Alt Text similar to: alt="Professor Doe teaching a course about electrical current at the library.".

Tip:

Excerpt from WebAim ©: Contrast and Color Accessibility

As a rule of thumb, text that would be part of the image's alternative text should probably meet contrast [and text in image] requirements while text that would not be added to alternative text can usually be considered incidental. [5]