How you organize and present information plays a big role in determining the usability and inclusivity of your electronic content. Visual formatting—layout, spacing, color, and font selection—all affect the degree to which information can be easily read and understood. We know this from age-old principles of graphic design as well as modern studies of usability.

Yet we mustn’t rely on visual formatting alone to convey important information. That’s because not every reader will see your document the way you designed it due to varying screen sizes, printing, and photocopying. Others won’t see it at all; they will hear it using text-to-speech software. Thus, Visual formatting should be combined with structural formatting.

Structural formatting is accomplished with Headings. Headings are used to create an outline, or table of contents, that helps users to navigate the content more efficiently. This is especially true for readers who navigate using assistive technology. Thus, using headings is a very simple method of increasing the usability of your electronic content. You can apply headings in Word documents, on the web, and in Canvas courses.

• Use headings to provide a page structure or outline
• Nest appropriately - do not skip levels
• Use headings to indicate sections of content. Avoid over-using them, especially for links.

Further resources on appropriate use of headings:

• Heading Tags (H1, H2, H3, P) in HTML - Accessibility at Penn State

Word provides one powerful tool—Styles—for managing both visual and structural formatting. Styles control the appearance of text (size, color, spacing, etc.), while also applying structure, such as headings (levels 1-9) and lists (bulleted and numbered). Word comes with lots of built-in styles, which are preformatted in appearance yet fully customizable. You can also add new styles of your own. It’s important to realize that the appearance of a style can be modified without changing its structural meaning. For example, the style “Heading 2” can be modified to appear in any size, font, and color without altering its meaning as a second-level page heading.

In a long, complex document, Styles help you maintain consistent visual and structural formatting: change the characteristics of the Style and everything to which that style has been applied will instantly be updated. This is a huge time-saver, especially in long, complex documents. But the structural aspect of Styles has additional benefits. For example, once you have identified headings in a document, Word’s Navigation pane will display a hierarchical outline that lets you jump from heading to heading. Word can also use the headings to create a table of contents, complete with page numbers that update dynamically as you edit the document.

Use the Styles Toolbar

Click on the section title, and select the heading level using the Styles toolbar on the Home Ribbon.

You can quickly change the visual appearance of headings across an entire document to match your formatting preferences.

• Set the font, color, spacing, etc., to what you would like Heading 1 to be.
• Highlight the correctly formatted text.
• Right-click on Heading 1 in the Ribbon, and click Update Heading 1 to Match Selection.

Now each Heading 1 will use your preferred formatting. You should see that all Heading 1 text has changed throughout your document. (You can also click Modify for more formatting options.)

Check the Table of Contents

• To see the Table of Contents that is generated by the headings, click on the View Ribbon, then check the Navigation Pane checkbox.
• The document outline appears on the left side of the document in the Navigation Pane.
• Click on any of the headings in the Navigation Pane to go to that section.
• You can also drag headings in the navigation pane to quickly re-order content.

To format links in Microsoft Office, Select the link text. On the Insert Ribbon, click Hyperlink.

Type the text that will actually be displayed in your document in the Text to Display field.

• This should be a description followed by the link in parentheses: Description (Link)
• For example: Accessibility By Design Website (http:/accessibility.colostate.edu)
• This formatting allows for links to be readable in both electronic and paper copy

Type the actual link in the Address field. This is the link that will be followed.

While many authors try to indicate a header row by changing its appearance (e.g., font and background color), a change of this type provides little or no information about the structure of the table. A document that relies entirely on visual formatting will, when converted to HTML or PDF, lack the structural information needed by readers who use assistive technology.

Fortunately, Word offers a setting for table headers that provides this important structural information. This brief tutorial shows you how to set this table header property.

To define the header row on a table in Word, right-click on the top row of the table and select Table Properties.

In the dialog box, switch to the Row tab. Check the box to Repeat as header row at the top of each page.

Images convey information quickly and powerfully—assuming they can been seen and understood. However, some readers may not understand the meaning of the image; others may not be able to see it due to visual impairment, personal viewing preferences (especially on the web), or technological limitations.

Alternate text (“alt text” or "alt tag") is added to an image to provide a textual alternative to visual information. Why is this important? Remember, some users won’t see your information; instead, they’ll hear it using text-to-speech or screen-reading software. By adding an alt text to an image, you make its meaning available to people who, for whatever reason, cannot see it.

Alternate text should be added to all non-text elements, including:

• Pictures
• Graphs
• Charts
• Tables
• Microsoft Office SmartArt

Make alternate text meaningful to a listener:

1. What is the context of the image? What meaning does it add to the page?
2. Be concise. Describe only what you expect visual users to get out of the image.
3. If the image is already described in the surrounding text, the alt text can be very short.
4. Avoid redundant statements like “Image of” or “This is a picture of.” Simply state what it is.
5. If an image is purely decorative, mark it as such (various methods depending on software).

Alternate Text: Office 2013 & Later

Note: Sometimes images that are downloaded from the web have “junk” alternate text (usually a long file name). Make sure to manually check every image.

Right-click on the image, then select Format Picture from the menu. (This menu option may be Format Shape on other types of graphics).

A Format Picture menu will open in the document pane to the right. Select the Layout and Properties tab, the third option in the Format Picture Pane.

If it is not expanded already, open the Alt Text menu by clicking on the arrow.

Type the alt text in the Description box. Ignore the Title field, since it will not be read by a screen reader.

Alternate Text: Office 2010 & Earlier

Right-click on the image to get the "Format Picture" menu option.

Click on the "Alt Text" menu on the bottom left.

The text goes in the "Description" section on the right (not the "Title" section).

How do you know which colors will have enough contrast to be universally readable? One approach, of course, is to play it safe and stick to black and white, which are the default colors in applications like Microsoft Word. But color is an important—some would say essential—design element of slide presentations and the Web. So, which colors are best?

When text is placed against a solid color background, we recommend you use the Colour Contrast Analyser (CCA) by the Paciello Group to determine whether the contrast ratio passes the WCAG 2.0 standards. This free tool helps you “determine the legibility of text and the contrast of visual elements” using color contrast criteria established in the Web Content Accessibility Guidelines (WCAG) 2.0. The tool also simulates certain visual conditions, including dichromatic color-blindness and cataracts, to demonstrate how your web content appears to people with less than 20/20 vision. Use the CCA eyedropper tool to select foreground and background colors. The results display immediately below.

In the following example, we’ve run the CCA on a website designed with orange headings, gray text, and blue link text.

For this website, the CCA reports insufficient contrast between orange text and the white background. You would want to select a darker orange color from the drop-down color palette.

When we check the gray text against white background, the CCA shows mixed results. This color combination passes at the "AA" standard, but not the more stringent "AAA" standard, which is the goal for most university and public websites. A darker gray would be better.

Finally, we test the blue link text against the white background. This combination of colors fails both the “AA” and “AAA” standards for normal text sizes, as well as the “AAA” test for larger sizes. It passes only the “AA” standard for large text. A darker blue is required for universal readability.

Microsoft Office has a built-in tool that generates a report on the accessibility of a document. The tool is available in both Word and PowerPoint.

Note: The checker will not recognize “junk” alternate text, so it is still important to check images manually. Double-check that the alternate text is meaningful.

The Accessibility Checker is located under File > Info > Check for Issues > Check Accessibility.