Module 4: Text Documents

Text 4 Text Documents

When we look at a document on our computer screen, it may seem like all of the information we're taking in is verbal information: the meaning of the words themselves. In fact, we derive a lot of meaning from structural cues we get from the layout and appearance of the document.

Indications like this are called semantic information, and they should be included in materials in ways that are accessible to users with visual disabilities. Fortunately, this is fairly simple to do, and provides other benefits as well, such as facilitating searches and automated tables of contents.

Learn more about making text documents accessible by clicking the titles below.

Headings

Headings within a document provide hierarchical information to the screen reader about the way the document is structured: Does the document have a title? Are there topics and subtopics?

If the document has no embedded semantics, this information is lost to the screen reader. Let's take a look at the first section of our example document.

Screenshot of Word document section with untagged headers. Transcript in following text.

When the screen reader renders this text, this is what it sees:

Nucleic acid sequence
Nucleotides 
Nucleic acids consist of a chain of linked units called nucleotides. Each nucleotide consists of three subunits: a phosphate group and a sugar (ribose in the case of RNA, deoxyribose in DNA) make up the backbone of the nucleic acid strand, and attached to the sugar is one of a set of nucleobases.

and this is what the user hears:

In Word, we use the Styles feature to add headings. You can use the default styles, or you can modify them to change your design. Styles are accessed from the Home tab:

Screenshot of Word Styles menu including normal, no spacing, headings, etc.

To add a heading to text, position your cursor anywhere in the line of text you want to affect. In the Styles menu, choose one of the Heading styles.

Listen to the screen reader rendition of our document once we've added heading styles to it:

Audio transcript

Tips for Creating Headings

  1. Use a logical and consistent heading structure.
  2. Begin with Heading Level 1 rather than skipping to a lower level. In Canvas, H1 is reserved for the title, so begin with heading level 2.
  3. Don't use heading styles for cosmetic changes to your text; save them for structural information.

Lists

Look at the highlighted text in our example document.

Screenshot of Word document section with highlighted text. Transcript in following text.

Rather than using the List feature, the author has created the list of amino acids using indents, carrier returns, and hyphens. This is what the screen reader sees:

The sequence of nucleobases on a nucleic acid strand is translated by cell machinery into a sequence of amino acids making up a protein strand.
A = adenine C = cytosine G = guanine T = thymine Apart from adenine (A), cytosine (C), guanine (G), thymine (T) and uracil (U), DNA and RNA also contain bases that have been modified after the nucleic acid chain has been formed.

and this is how it sounds:

To create a list in Word, position the cursor where you want to insert the list. On the Home tab, choose what kind of list you want to make. Click the “Bullets” buttons to start a bulleted list, click the “Numbering” button to start a numbered list, click the “Multilevel” button to start a list with multiple levels.

Screenshot of three types of list buttons on the Word toolbar

Listen to the screen reader rendition of our document once the list has been properly formatted:

Audio transcript 

Tips for Creating Lists

  1. All lists of items should be marked up as lists.
  2. Don't emulate lists using tabs, spaces, or special characters.
  3. Use the built-in list functionality.
  4. When creating multilevel (nested) lists, use different letters and numbers (Links to an external site.) for the various levels.

Tables

A well-constructed table can make it easier for the user to make associations between data. Tables can cause problems for screen readers, though, so it's important to follow some basic principles when creating them.

Here's the table from our example document:

Screenshot of Word document section with highlighted text and table.. Transcript in following text.

This is how the screen reader interprets it:

In DNA, the most common modified base is 5-methylcytidine (m5C).
Table with three rows and three columns.
Amino Acid
Codons
Compressed
Ala/A
GCT, GCC, GCA, GCG
GCN
Arg/R
CGT, CGC, CGA, CGG, AGA, AGG
CGN, MGR

And this is how it sounds:

Notice how all of the tabular data runs together when read out by the screen reader.

By designating a header row, you give the screen reader much more information to go by when it reads the table aloud.

In Word, go to the Table Design tab and tick the Header Row box.

Screenshot of Word document showing Header Row option

Let's listen to our screen reader rendition now that a header row is identified. Note how much easier it is to associate data with the correct column header.

Audio transcript 

Tips for Creating Tables

  1. Keep tables as simple as possible. Avoid subdivided columns or rows, or merged cells.
  2. Use the table feature--don't create tables using tabs or spaces.
  3. Designate a header row.
  4. Don't use tables to simulate layout: for instance, to position graphic elements on the page.

Links

Hypertext links are an essential part of Internet access, so inaccessible ones present a significant barrier to users with disabilities. Two important factors in link accessibility are navigation and screen reader rendition.

Many users can't use a mouse and must navigate pages from their keyboard. In most cases, they'll be able to jump from link to link using the TAB key, and go to the linked content by pressing ENTER. Screen readers may also give users the option of accessing a list of all links at the beginning or end of the document. With this in mind, we need to create links that make sense out of context.

Let's look at a section of our example document that contains a link.

Screenshot of Word document section with highlighted text and link. Transcript in following text.

Text equivalent:

In biological systems, nucleic acids https://en.wikipedia.org/wiki/Nucleic_acid contain information which is used by a living cell to construct specific proteins. The sequence of nucleobases on a nucleic acid strand is translated by cell machinery into a sequence of amino acids making up a protein strand.

Here's the screen reader version:

Notice that the URL for the link is read inline, verbatim, nonstop with the surrounding text. Furthermore, because the link is not identified as such, tab navigation will skip over it.

Here's how to create a link correctly.

In Word, highlight the text that you want to link. This should be text that indicates where the link will lead, rather than the URL itself, or a generic command like Click here.

On the Insert tab, select Links>Link.

Word menu bar showing hyperlink button

The text you selected will appear in the Text to Display box (you can edit this if you wish). Paste the URL into the Address field.

Screenshot of Word dialog box with Text to Display and Link address

Here's how the screen reader audio sounds now:

Audio transcript 

Color Contrast

For users with visual impairments, adequate contrast between text and background is essential. Let's look at a bad color choice for a heading in our example document.

Screenshot of Word document section with light yellow heading on white background

See how difficult it is to read the "Nucleotides" heading? It's a small font in a light color against a white background.

The readability of text is a function of its contrast value against its background (essentially, what the material looks like if rendered in grayscale) and of the text size.

Fortunately, this is a very simple problem to check and correct in a text document. This color contrast checker from WebAIM Links to an external site. will test your color values against WCAG standards.

The key to the contrast-checking process is to extract the 6-digit hexadecimal codes that correspond to the colors in your document. To do this, select your text and click on the drop-down menu beside the Text Color button on the Home tab. Select More Colors...

Screenshot of Word document section showing Word toolbar with text color button

Choose the RGB Sliders view. The hex color number will appear at the lower right.

(Note: On some versions of MS Word, the hex value is not shown below the RGB sliders. In that case, you'll need to copy the three RGB values and enter those into the web-based contrast checker.)

Screenshot of Word document screen showing RGB color sliders and hex value of FFFF00

Go to the color contrast checker and plug in your numbers. In this case, the foreground color (your text) is #FFFF00, and the background color is white, #FFFFFF. These values both yield a result of Fail for both small and large text at AA and AAA levels.

Screenshot of color contrast checker showing Fail result for large and small fonts at WCAG AA & AAA levels

You may remember that the WCAG AA and AAA standards are used for evaluating accessibility standards compliance for websites. AAA is the stricter standard; AA is sufficient for most applications.

The WebAIM checker provides a slider you can use to try out darker shades of the color you are using. In our case, sliding to #707000 will give us enough contrast to pass AA standard for small and large text:

Screenshot of color sliders with foreground color adjusted to dark olive green

Tips for Effective Use of Color

  1. Don't use color alone to indicate meaning. Screen readers don't indicate text color, and colorblind users may not be able to see the differences either.
  2. Use a contrast analyzer to check  your color combinations; aim for a minimum of AA compliance.
  3. Whenever possible, use black and white for your text.