2 Text Basics

On This Page

Attribution

“Unusual Symbols” information is provided by Maria Tobar and Carrie Hansel.

Key Takeaways

Organized text helps learners find and process information. A good format can help reduce learner questions and focus attention on the content.

  • Use existing formatting tools whenever possible instead of manually creating the look of headings, lists, columns or tables.
  • Use bold and italic text only for the most important information.
  • Avoid using text colors, highlights, underlines, or extra spaces as the only method to convey information.
  • Organize information into sections that start with headings and subheadings (discussed below).
  • Don’t bury important information in paragraphs of text.
  • Keep it short. Don’t use unnecessary words.

Overview

Text should be formatted to support understanding of its contents. A clear structure can:

  • Help all learners access important information
  • Allow screen reader users to navigate the text
  • Assist learners with cognitive disabilities in understanding the text content

Text is formatted with headings, paragraphs, lists, and other features. These features can often be created using options provided in the tool you’re using, but they must be used carefully to make sure the result is accessible.

The instructions for creating these features may be different depending on the tool you’re using. However, the same principles apply regardless of whether you’re making a course, web page, or printable material.

Is It Really Text?

Sometimes words will appear to be text, but will actually be an image. There is a quick test for this: if you can highlight individual words, then they’re page text; if a whole block of the page highlights at once, then it’s an image.

If the image consists only of words, it should be reproduced as page text (i.e., typed directly into the page). Alt text (see Image Basics) is not an appropriate fix for this type of error.

If the image contains words that are necessary for full understanding of its visual elements (such as in a labeled graph), then the words can remain and you should include them in your image description. For more information, see Image Basics.

Organizing Text

Organizing text helps support executive functioning. It is essential for individuals with learning disabilities, but can also support learners with a large range of abilities (CAST 2018).

In addition, new learners organize information less efficiently than an expert on the same subject. Organizing information can therefore show connections, provide expert guidance, and promote learning behaviors that are necessary for better understanding of the content (SERC 2018).

Text can be organized in terms of the overall structure of the document or course, and also on a more detailed level of subunits and paragraphs. For the purposes of this discussion, “subunits” refers to any smaller part of the bigger whole – a page in a module, a section of a document, and so on.

Overall Structure

Consistent structure helps learners know where to go in the course to get the information they need. This method of reducing extraneous cognitive load can also reduce confusion, frustration, and stress (“Basic Course Design During COVID”, 2020). Whenever possible, use a consistent design for course subunits and try to put like information in the same place.

Ideally, organize ideas by providing an introduction, high-level explanation, and breakdown (in that order). This may be on the same page, or across the span of several pages or sections. For example, new modules typically have an introduction to the topics covered in the module. A high-level explanation might include a description of a process, a list of vocabulary terms, an overview of a key diagram, or an introductory video from the instructor. The following pages would include detailed breakdowns of each component of the process, terms, diagram, etc.

Subunit Structure

Within each subunit of content, organize information into paragraphs of like content. Each paragraph should provide a complete unit of information. Avoid frequent shifts from one topic to another, especially when comparing topics. Discuss one topic fully before moving on to another.

Put key information at the beginning of paragraphs, or in their own section with a heading. This prevents key aspects of the learning experience from being buried in other content. Key information may include:

  • Due dates
  • Criteria for assignments
  • Vocabulary lists
  • Key concepts assessed in the course
  • Concepts that are frequently confused by learners

Introduce each subunit with text or a video that provides context to the rest of the subunit. It is likely that learners will complete course activities across multiple study sessions, so each subunit should in essence be treated as a short mini-lesson with an introduction, middle, and conclusion.

Use formatting tools to organize information. Sometimes text descriptions can be less efficient or less clear than simply providing a list or a table.

  • Use lists to highlight parts and processes.
  • Use definition lists to provide study guides of key vocabulary.
  • Use tables to show data and make comparisons.

Supporting Content

Sometimes additional content will be included in a course that learners will need to review or use frequently. Examples include lab instructions, data charts, and downloadable worksheets.

In these cases, having the supporting content separate from other course content can be beneficial. For example, it can allow learners to open up lab instructions in a separate browser tab while they work, or allow them to print worksheets without using extra paper on unrelated text.

If your course contains a lot of supporting content, consider making a coursepack, Pressbook, eText, or use another tool to organize the information.

Headings

Headings and subheadings label sections of your content. They allow you to organize your content and create subsections that are clearly distinguished from the rest of the content.They provide important navigation information to both screen reader users and non-screen reader audience members.

Headings are NOT:

  • Large text (on its own)
  • Bold text (on its own)
  • Italic text (on its own)
  • Underlined text
  • Text on its own line

A heading must be specified using one of the methods described below (Applying Headings). Once a heading is specified, it can be modified for graphic design purposes, including using italics or bold text, colors, borders, and font colors. However, bold or italic text do not specify headings on their own, and headings should never be underlined (which makes them look like links). Also make sure that sufficient color contrast is maintained between the heading text and background.

Examples of when headings should be used include:

  • At the beginning of each new topic or subtopic
  • Labeling instructions for a set of problems
  • Labeling examples
  • In some cases, labeling the solution for an example
  • Labeling key parts of a long example explanation
  • Labeling a video or interactive tool

Headings must not be present without accompanying content (i.e., they shouldn’t just appear at the end of a page with nothing after them).

Headings come in sizes, usually numbered 1 through 6. These sizes describe the order in which the headings should be used. Heading 1 is used for page titles, and should only be used once per course page or per document. Heading 2 is used for subsections under heading 1, heading 3 is used for subsections under heading 2 sections, and so on.

A page can have an unlimited number of headings 2 through 6, but only one heading 1 (as the first item on the page). You can switch back to a lower-number heading if you’re starting a new subsection of that type. Never skip heading sizes when making a new subsection (e.g., if you’re making subsections under a heading 2, make the subsections heading 3, not heading 4 or 5).

Applying Headings

Built-In Tools

Headings are provided as formatting options in many tools (such as Canvas headers), so often all you need to do is highlight the text that should be a heading and select the option you need. Sometimes headings 1 and 2 won’t be available in the tool you’re using, because they’ve been reserved for other parts of the document or web page. In that case, start with the heading with the lowest number. For example:

  • Canvas uses heading 1 to start every page in a course, so you should start any subsections on a page with a heading 2.
  • Pressbooks already uses a heading 1 for the page title, so while heading 1 is an available option, you should start each page with a heading 2.

HTML

In HTML, headings are indicated with <h#> and </h#> tags, where the number sign (#) should be replaced with the size of the heading. For example, to produce a page with headings of sizes 1, 2 and 3, followed with paragraphs, you would write:

<h1>Page Title</h1>

<p>Introductory text for the page could go here.</p>

<h2>Subtitle</h2>

<p>Text for this subsection could go here.</p>

<h3>A Subtitle Under a Subtitle</h3>

<p>Text for a subtopic could go here.</p>

Example

A Canvas page contains an overview of the planets of our solar system. Subsections organize like planets together based on composition: rocky planets, gas giants, and dwarf planets. Under these subsections, each planet is also discussed in its own subsection.

The resulting document is mostly correct, but contains two errors. Incorrect headings are highlighted in bold in the list below.

  • Heading 1: The Planets of Our Solar System [document title]
    • [Optional: Introductory text for the whole document could go here]
    • Heading 3: Rocky Planets
      • [Optional: Text that applies to all rocky planets could go here]
      • Heading 4: Mercury
        • [Text for Mercury would go here]
      • Heading 4: Venus
        • [Text for Venus would go here]
    • Heading 2: Gas Giants
      • [Optional: Text that applies to all gas giants could go here]
      • Heading 4: Jupiter
        • [Text would go here]

The outline is inaccessible for two reasons:

  1. The heading “Rocky Planets” skips heading level 2. (The headings for “Mercury” and “Venus” are following the correct order, but are one level off due to this error.)
  2. The heading “Jupiter” skips heading level 3. (The heading level for “Gas Giants” is correct but the heading level for “Jupiter” is not.)

Correct Outline

  • Heading 1: The Planets of Our Solar System [document title]
    • [Optional: Introductory text for the whole document could go here]
    • Heading 2: Rocky Planets
      • [Optional: Introductory text that applies to all rocky planets could go here]
      • Heading 3: Mercury
        • [Text for Mercury would go here]
      • Heading 3: Venus
        • [Text for Venus would go here]
    • Heading 2: Gas Giants
      • [Optional: Text that applies to all gas giants could go here]
      • Heading 3: Jupiter
        • [Text would go here]

Links

Screen reader users often navigate through a list of links separately from the main content. Similarly, sighted learners may scan through a page looking for specific links to key documents or information. It’s important for link text to be descriptive on its own, without relying on context from the surrounding content.

Link text should be:

  • Descriptive of what the link destination is
  • Unique for each link on the page that goes to the same destination (e.g., if there are multiple links to the course main page, they can all be labeled the same)

When writing links, avoid:

  • Vague link text like “click here”, “link”, “more info”, etc. without more information
  • Excessively long link text

In certain circumstances, an image can be used as a link. In these circumstances, make sure that one of the following is true:

  • The image has alt text that indicates what the link destination is (for more information about alt text, see Image Basics)
  • The image is accompanied by descriptive text, contained in the link, that indicates what the link destination is

If a link opens in a new browser tab or window, it’s important to indicate this behavior as it is unusual and can be disorienting for screen reader users. Canvas provides this information automatically for external links. When linking to an internal course page that opens in a new tab or window, or working in a platform other than Canvas, include text in the link that indicates the unusual behavior. For example, a link to the course main page might say “Course main page (opens in new tab or window)”. For more information, see Image Captions in Methods for Applying Image Descriptions.

Lists

Lists organize pieces of information that are related to each other. They support information processing by providing structure to the items in the list and setting them apart from the rest of the text.

The most common type of lists are ordered and unordered lists. Ordered lists must be interpreted in a specific order and often use a numbering system (“1, 2, 3”, “A, B, C”, “I, II, III”, etc.). Unordered lists organize related information, but do not need to be interpreted in a specific order. They often use bullets or shapes to indicate each item in the list (represented as dots, circles, squares, arrows, etc.).

Lists should be used for:

  • Steps and substeps in a process
  • Possible options
  • A series of information or data
  • Terms and definitions
  • Content outlines

Ordered Lists

Ordered lists should be used when the items in the list should be read or interpreted in a certain order. Ordered lists signal to all learners, especially screen reader users, that the items in the list have a specific meaning when considered as a whole.

Examples include:

  • A list of steps that must be completed in order
  • Content outlines
  • Ranked items

Creating an ordered list with built-in tools or HTML automatically numbers the items in the list. You can sometimes customize the numbering system using the built-in interface for the platform you’re using. For more information about customizing numbering systems with HTML, see Appendix: Common HTML Templates.

Example

A set of instructions is being written to help learners to create content in an online tool.

Correct

The instructions should be formatted as an ordered list, because they include steps that should happen in order. For example:

  1. Log in to the online tool.
  2. Create a new content type.
  3. Give your project a name.
  4. etc.
Incorrect

The instructions should not be formatted as an unordered list, because the list items must be interpreted in a specific order. While an unordered list would indicate that the steps are grouped together, it would not communicate that their order is important.

Unordered Lists

Unordered lists should be used when the items in the list have relevance to each other, but can be shown in any order. Examples include:

  • Examples
  • Possible variations
  • Vocabulary lists
  • Self-contained concepts

Creating an unordered list with built-in tools or HTML automatically provides bullets for each item in the list. You can sometimes customize the bullet design using the built-in interface for the platform you’re using. For more information about customizing bullet types with HTML, see Appendix: Common HTML Templates.

Example

An instructor is writing a list of concepts relevant to the field of geology that learners will be practicing throughout the instructor’s course.

Correct

The list should be formatted as an unordered list, because the concepts do not need to be listed in any particular order. For example:

  • Critical thinking
  • Applying concepts to new information
  • Basic physics
  • Etc.
Incorrect

The list should not be an ordered list, because these items should not be interpreted in a specific order.

Text Appearance

To ensure readability and consistency across the most platforms and devices, and to make sure code remains working with future updates to platforms like Canvas, use the default styling for text whenever possible. Usually, this means no action needs to be taken when creating a new page.

Settings that should remain unchanged include:

  • Font family
  • Font size
  • Text alignment (use left-aligned text in most cases; use right-aligned text for right-to-left languages; small blocks of center-aligned text is appropriate for design purposes; avoid justified text)

Bold and Italic Text

Bold and italic text are used to indicate emphasis, such as when:

  • A key word should be highlighted visually
  • A sentence or sentence fragment is especially important
  • Two or more concepts are similar but should be highlighted to show differences

Like font color, size and highlights, bold and italic text are not usually communicated to screen reader users. It’s important to communicate information through the text itself, and use emphasis only to draw visual attention.

For example, bolding a vocabulary word will not communicate its importance to someone who is blind. To communicate its importance through text, it’s recommended to do the following:

  • Define the word when it is first used immediately and clearly.
  • Provide a list when more than one vocabulary word is introduced at a time.
  • Set vocabulary lists apart from the rest of the text using a descriptive heading.

Emphasis is only eye-catching when it’s used sparingly. If a page contains too much bold or italic text, everything — including important information — will start to appear the same to your audience. In addition, large sections of bold and italic text can cause problems for audience members with dyslexia.

If you need to highlight a lot of important information, consider making a separate section with its own heading, or creating a callout box. A dedicated heading will catch the learners’ attention better than a paragraph of bold text can. Bullet points can also make a list of instructions easier to read.

Bold, italic, and underlined text should never be used to indicate titles or headings. Screen readers can’t detect headings unless they are formatted with heading tools or HTML.

Example: Appropriate Use of Bold Text

An instructor wants to highlight the term “single-spaced” in the following instructions, as this is different from requirements for other assignments in the course:

“Your paper should be 12pt font, Times New Roman, single-spaced, with one-inch margins.”

Correct Option 1

Only the unusual requirement is in bold text.

Your paper should be 12pt font, Times New Roman, single-spaced, with one-inch margins.

Correct Option 2

The instructions are in their own subsection and are formatted as a list for easy reference. The unusual requirement is listed first and emphasized with bold text.

Instructions

Your paper should be:

      • Single-spaced
      • 12pt font
      • Times New Roman
      • One-inch margins

Incorrect

The following example is incorrect because all information — including standard requirements for the course — are in bold, so the unusual requirement isn’t eye-catching.

Your paper should be 12pt font, Times New Roman, single-spaced, with one-inch margins.

 

Example: Highlighting Instructions

Instructions for a discussion forum assignment are written as follows:

“In this assignment, you will practice refuting arguments made by your classmates. Each of you will pick a position on the specified topic. You will post an argument on the topic and state your reasoning. Then, make two posts in response to your classmates, mentioning a weakness in each argument. The deadline to make all of your posts is this coming Friday.”

This text is inaccessible because:

  • An excessive amount of bold and italic text is used
  • Underlining is used for text without links
  • Important information is still buried in the middle of the paragraph

Correct

These instructions would benefit from a dedicated heading, bullet points, and bold text. The following demonstrates how this information could be formatted.

Instructions

In this assignment, you will practice refuting arguments made by your classmates. The deadline to make all of your posts is this coming Friday.

      • Pick a position on the specified topic.
      • Post an argument on the topic and state your reasoning.
      • Make two posts in response to your classmates, mentioning a weakness in each argument.

Using Color

This content has been moved to the new Using Color page.

Underlined Text

Underlined text is a standard notation used to indicate links to documents or web pages. Underlines applied to regular text are not reported to screen readers. For these reasons, use underlines only for links and special formatting needs approved by your local accessibility expert. For more information, see When to Go Further at the end of this Basics section.

If you are not sure whether underlined text is actually a link, test with the following:

  • Hover over the text with your mouse. If it is a link, sometimes a pop-up message showing the link address will appear.
  • Click on the text. Sometimes the link address will appear, and other times the link will open automatically.

If neither of these options produces results, the text is likely not a link and should not be underlined.

For typical formatting needs, follow these best practices:

  • For book or media titles, use italics.
  • For emphasis, use bold or italic text.

Unusual Symbols

Symbols may be considered unusual if they do not appear as options on a standard English keyboard. Unusual symbols can cause the following problems:

  • Screen readers may not be able to interpret the symbols correctly for the user.
  • Learners may not understand the meaning of the symbol if it is not previously defined in the content.

If the symbol can be replaced with text without affecting the content’s meaning, the best practice is to do so. If the symbol must be used, such as when it is a field convention:

  • Define the meaning of the symbol in your content before it is used.
  • Review the contents of this Pressbook (particularly MathJax and best practices relating to the field in question) to determine if the symbol should be represented with special HTML or MathJax code.
  • Ask your resident HTML expert and/or ATAC for guidance.

Example

An instructor uses the § symbol to identify different accounting sections in his videos. For example, a section is denoted as “§1231”.

Correct Option 1

Write “Section 1231″ to ensure that there are no accessibility issues with a screen reader.

Incorrect

Write “§1231” without clarification or a text alternative.

References

CAST (2018). Guide information processing and visualization. Retrieved August 5, 2021 from https://udlguidelines.cast.org/representation/comprehension/processing-visualization

Indiana University Online (2020). Baseline Course Design During COVID. Retrieved August 5, 2021 from https://teachingonline.iu.edu/doc/Baseline%20Course%20Design%20Recommendations%20010521.pdf

SERC (2018). Novice versus Expert Learning. Retrieved August 5, 2021 from https://serc.carleton.edu/sp/carl_ltc/quantitative_writing/noviceVexpert.html

License

Accessibility and UDL Best Practices Guide Copyright © by Caitlin Malone. All Rights Reserved.