17 Text and Image Readability

Whenever you are presenting content to students, it’s important to check whether the text in your course content is recognizable to a computer as text.^[1] For example, accurate optical character recognition (OCR) is often required to make the text in a PDF understandable to screen readers. In this chapter, you will learn best practices for making course materials readable, including using heading levels, true lists, alt text and captions, descriptive link text, and accessible colors and fonts.

Using Heading Levels (H1, H2, H3, etc.)

Text-based OER should have a clear and logical structure. Using headings and other structural elements to organize your webbook can make it easier for all learners to access and understand the material. Many editing tools support table of contents (TOC) generation based on the placement of section markers within a text, which can help students navigate to a specific chapter or section of the text, especially if the digital version of the resource has its TOC hyperlinked to each section within the text.

Individuals using screen readers can also more easily navigate the sections of your webbook when heading levels are applied consistently.

Using True Lists

Using asterisks or icons to visually separate the items in a list may look similar to a bulleted list, but it can confuse a screen reader that is expecting to encounter structured content. Whenever listing items, use the true list features of your content editor.

For example, do use the bulleted list feature.

• First item
• Second item

Or, use the numbered list feature.

1. First item
2. Second item

But do not use asterisks, as in the following example:

* First item

* Second item

Providing Alt Text and Captions

No matter what the subject of an image used in your webbook may be, you need to offer descriptive text for that image. A screen reader will look for a contextual description of an image to share with readers, which should live in the text surrounding the image (title or caption) or as alternative text, or “alt text”. This aspect of the accessibility of instructional content is commonly overlooked even though most text editors include tools for adding alt text to images.

When adding alt text to an image, be sure to clearly and succinctly describe the most important elements for the student to know about the image. Do not include extraneous details. In some cases, you do not need to add alt text at all, as in the case of purely decorative images.

The following are examples demonstrating necessary alt text and extraneous alt text:

• Necessary descriptive alt text: “Part A: a container holding volume V subscript 1 of gas on the left side only. Part B: a container filled with volume V subscript 2 of gas.”
• Too much descriptive alt text: “There is a figure with a white background and two squares labeled A and B. Part A has a rectangle (representing a container) with a shaded grey section on the left half of the container with dots representing a gas. The gas is labeled V subscript 1. Part B …”
• Unnecessary descriptive alt text: “An icon of a person smiling, included to liven up the page!”

Video and audio content needs descriptive text as well, but it usually takes the form of captions or, in the case of audio-only content, transcripts. You can easily add captions to videos by using YouTube’s built-in editor tools. Some free tools you can use to create transcripts are Otter and Descript.

Using Descriptive Link Text

When you include hyperlinks (implicit links) in your webbook, be sure that the linked text describes the topic or purpose of the link. Readers should be able to determine the purpose of the link from the text alone without additional information justifying the use of the link, such as generic text that says “click here” or “read more.”

Compare the following examples:

• An example with descriptive link text: “CUNY’s Accessibility Toolkit for Open Educational Resources provides additional guidance on creating accessible OER.”
• An example of generic text: “Click here for more information on creating accessible OER.”

If the OER design does not permit the inclusion of explicit links (written out URLs) in the text, implicit links (hyperlinked text) can be used, and a more detailed list of sources should be provided at the end of the resource or in a separate document. Footnotes are a great way of providing more explicit links for content without cluttering the text on a page.

Using Accessible Fonts and Colors

Some best practices for ensuring that fonts and colors are accessible include the following:

• Use dyslexic-friendly fonts, such as Arial, Century Gothic, Open Sans, and Verdana. Your institution might recommend certain fonts for digital and print materials. These recommended fonts are usually chosen for ease of use and accessibility and may be a good fit for your needs as well.
• Make sure there is a clear contrast between colors (e.g. between the background and font color, or between different colors on a graph). There are many free online tools available for checking color contrast, but we recommend WebAIM’s Contrast Checker and Acart Communications’ Contrast Checker.
• Do not use color to communicate meaning without other markers of that meaning present. If you have color-dependent information in images or within the text of your resource, be sure that either alternative methods of recognition (such as differing patterns) are present, or that the contrast can be adjusted by users.