How do I make textual content accessible?

Surprisingly, a document that only includes textual content may pose accessibility challenges. Issues can arise if:

  • The document does not have a meaningful title,
  • Page content is not structured with headings,
  • Images of text are used,
  • Color or spatial position are the sole indicators used to convey critical information,
  • Or line breaks are used to separate lines of text.

This article describes how to structure a document and add text as follows:

Tip: To learn more about creating accessible documents in programs like Microsoft Word and Adobe Acrobat, see the UVA Accessibility page: Accessible Document Creation (opens new window).

Use unique and descriptive page titles.

Assistive technology users rely on page titles. Assistive technology (opens new window) includes any piece of equipment, product or system that is used to improve the functional capacities of people with disabilities. Keyboards, screen readers, text-to-speech software, and screen magnifiers are commonly used forms of assistive technology.

Use unique and descriptive titles in modules and pages so readers know what content they will encounter on each page.

Pictured above is a Week 1: Getting Started module with three pages:

  • Welcome!
  • Importance of Accessibility
  • Accessibility Basics

Add structure with headings.

If a document can be outlined or you have an outline in mind when writing it, adding headings will convey its structure. Keyboard and screen reader users need headings to navigate a page. Structuring your page with headings will help all readers access important information more easily and parse it.

Use short title-like headings that describe content which follows.

What heading structure should I use?

In general, a document should have exactly one Heading 1 that describes the document's purpose, its title.

In pages created in Canvas, the page title is always a Heading 1. The Rich Content Editor allows you to add lower-level headings, starting with Heading 2.

Headings should follow in numerical order, Heading 2, Heading 3, Heading 4, etc. A document can have multiple lower-level headings.

For example, if there are two sections in the document, each section would be identified with a Heading 2. If a section contains several sub-sections, each sub-section would be identified with a Heading 3.

Examples of document headings

The list below shows how this Help article is structured using headings.

  • Heading 1 - How do I make textual content accessible?
    • Heading 2 - Use unique and descriptive page titles.
    • Heading 2 - Add structure with headings.
      • Heading 3 - What heading structure should I use?
        • Heading 4 - Examples of document headings
      • Heading 3 - How do I add headings in Canvas?
        • Heading 4 - Add headings with the Blocks menu.
        • Heading 4 - Add headings with the Formats menu.
    • Heading 2 - Avoid images of text.
    • Heading 2 - Do not use color or spatial position alone to convey information.
    • Heading 2 - Use paragraph breaks instead of line breaks.
      • Heading 3 - Images with examples of paragraph and line breaks.

How do I add headings in Canvas?

In the Canvas Rich Content Editor, you can use either the Blocks or the Formats menu to add Heading 2 through Heading 4. If Heading 5 and Heading 6 are also needed, use the Formats menu to add them.

Tip: For complete steps to add and format text, see How do I add and modify text in the Rich Content Editor as an instructor? (opens new window) or How do I add and modify text in the Rich Content Editor as a student? (opens new window).

Add headings with the Blocks menu.

By default, Paragraph will be selected from the Blocks menu. You may use this menu to add Heading 2, Heading 3, and Heading 4.

Important: Headings are not appropriate for typographical effects because people who use assistive technologies navigate through a document by jumping from heading to heading. To include large text that should not be a heading in the body of your document, use the Paragraph format for the text. Then, change the font size using the Font sizes menu.

Add headings with the Formats menu.

To add a lower-level heading:

  1. From the editor's menu, select Format.
  2. Select Formats.
  3. Select the appropriate heading level, e.g., Heading 5.

Note: After adding a heading, you can adjust the size of its text with the Font sizes menu. In particular, the default size of Heading 6 may be too small to read.

Avoid images of text.

Image of a page from the story Dracula with a red circle with a slash on top of it to indicate you should not create images like it.

Using an image of text may seem tempting to quickly insert a large block of text on a page. Some textbook publishers also use images of text to try to restrict students' ability to copy and paste content.

However, images of text cannot be read by someone who uses a screen reader or text-to-speech software. If you can't select the text to copy and paste it somewhere else, it is not accessible!

Note: Scanned image-only PDF files are similarly inaccessible, and should be avoided. For more information, see the UVA Accessibility page: Accessible Document Creation - PDF (opens new window).

Do not use color or spatial position alone to convey information.

Using color or spatial position alone to convey important information, such as instructions, can be problematic.

For example, if you were to say, "Select the green button on the left," someone who is colorblind may not be able to distinguish the button from other buttons on the page. Someone using a screen reader users may have difficulty interpreting "left" because a screen reader reads from the top of the page to the bottom, as well as left to right.

The best solution is to quote the exact text of a target item. For example, you might say: "Select Start Assignment," or "Select the Save button." If information about the color or location of an item on the page could help some viewers access the content they need, you might include this information as well; for example, "Select the green Start Assignment button at the bottom of the page."

Use paragraph breaks instead of line breaks.

A paragraph break (press Enter or Return on the keyboard) is more meaningful than a line break (press Shift + Enter or Shift + Return on the keyboard). A paragraph break inserts what looks like a double-space in between one line of text and another, and allows screen reader users to parse the information on the page more easily.

Although programs like Microsoft Word have options to create single-spaced documents with paragraph breaks, web pages do not. You may find using a line break more aesthetically pleasing than a paragraph break, but line breaks can create problems for screen reader users.

While a screen reader can interpret a paragraph break as a pause or "blank," a line break may not be indicated. Text that was separated from a previous line by a line break may sound like part of the same sentence or the start of a new sentence, instead of the start of a new line or paragraph.

Images with examples of paragraph and line breaks.

  1. The first image above is of a poem, Mary Had a Little Lamb, where line breaks were used to separate each line. While the line breaks may "look better" for a visual reader, someone using a screen reader will hear the poem that is split up with line breaks as a single long sentence: "Mary had a little lamb, his fleece was white as snow, etc."
  2. In the second image, paragraph breaks separate the lines. With a paragraph break at the end of each line, a screen reader will pause before starting to read the next line, which is how someone would normally read the poem.