Module 4: Text Documents
Icon Progress Bar/Navigation (built in browser, hidden in app)
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.
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:
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:
Tips for Creating Headings
- Use a logical and consistent heading structure.
- 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.
- 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.
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.
Listen to the screen reader rendition of our document once the list has been properly formatted:
Tips for Creating Lists
- All lists of items should be marked up as lists.
- Don't emulate lists using tabs, spaces, or special characters.
- Use the built-in list functionality.
- 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:
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.
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.
Tips for Creating Tables
- Keep tables as simple as possible. Avoid subdivided columns or rows, or merged cells.
- Use the table feature--don't create tables using tabs or spaces.
- Designate a header row.
- 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.
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.
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.
Here's how the screen reader audio sounds now:
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.
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...
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.)
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.
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:
Tips for Effective Use of Color
- 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.
- Use a contrast analyzer to check your color combinations; aim for a minimum of AA compliance.
- Whenever possible, use black and white for your text.