Author’s Note: Part 1 focused on the personal stories of Paige Sears and Linda Coccovizzo and a brief primer in screen readers. Part 2 focuses on the specifics of how to create an accessible Word document along with “how to” screenshots. We also discuss the reasons behind accessible Word design. For the purpose of this article all accessibility steps, processes and examples feature Microsoft Word 365.
So how do you make an Accessible PDF, EPUB or HTML (web page) file? The key is to make sure that the original source document (the Word Document) is accessible.
I would suggest that when developing content that eventually will be used as a PDF and a Web Page that it is better to start off making sure that the WORD DOC is created correctly. Rather than trying to fix up an existing PDF. Keeping this in mind if it is at all possible, all documents should start out as Word documents.
In this overview of creating accessible Word documents we will cover 6 Tips to improve the overall accessibility of your documents.
The 6 Tips are:
- USE STYLES VERSUS USING THE FORMAT FIELDS
- USE HEADINGS AS DOCUMENT NAVIGATION
- ADD ALTERNATIVE TEXT TO IMAGES
- DESIGN ACCESSIBLE TABLES
- PROVIDE DESCRIPTIVE TEXT FOR HYPERLINKS
- CREATE ACCESSIBLE BULLETED AND NUMBERED LISTS
TIP # 1: USE STYLES VERSUS USING THE FORMAT FIELDS
The first tip is the most important tip and it really impacts the overall design of your Word document dramatically.
It is much better for accessibility purposes to design Word documents using Styles versus using the Format Fields options such as Bold, Italic, Font Style, Font Size etc. An example of the Format fields that you should not use is shown in the screenshot example below in Figure 1.
Figure 1 Description: A Crossed-out Screenshot of the Font Ribbon section along with the words “Not This”. The crossed-out sections include the following: Font, Font Size, Bold, Italic, Underline, Strikethrough, Subscript and Superscript. End of Figure 1
Please note that the Figure descriptions in both the Alt Text and in the Main text are not perfect examples, because I am purposely trying to completely describe the screenshots due to the nature of this article. In practice it is not always practical to provide such lengthy Figure descriptions, but for this particular article, I thought it was important to provide detailed explanations.
One can access the Style menu in Word by using the following Keyboard Commands CTRL + ALT + SHIFT + S. Once you do this you should see something similar to the Styles Screenshot shown below in Figure 2. One can also go to Styles by selecting Home, then click on the box in the bottom right corner of the Styles Ribbon. Notice in the example below there are several different styles to choose from ranging from TOC (Table of Contents), Block Text, Body Text and various others.
Figure 2 Description: The styles listed are: TOC 9, TOC Heading, Balloon Text, Block Text, Body Text, Body Text 2, Body Text 3, BodyText First Indent, Body Text First Indent 2, Body Text Indent, Body Text Indent 2, Body Text Indent 3, Closing, Comment Reference, Comment Subject, Comment Text, Date, Document Map. The “Show Preview” and “Disabled Linked Styles” are unchecked check boxes. There are also 3 graphic icons: New Style, Style Inspector and Manage Styles. There is also a link to Style Pane Options it is labeled “Options… End of Figure 2”
One can create a new style, use the Style Inspector or Modify a Style by selecting the appropriate button at the bottom of the Style List. In the figure below you can see at the bottom an arrow pointing to the New Style button, the Style Inspector and the Modify Style button.
Figure 3 Description: The screenshot of Figure 3 is basically the same as the screenshot labeled Figure 2 except at the bottom there is a red arrow pointing to the left to the following icons: New Style, Style Inspector and Manage Styles. End of Figure 3.
Instead of creating your own styles. It might be a better idea to find someone that is well-versed in creating Accessible Word Documents and seeing if they can provide you with a handy template for creating accessible Word documents. This way you personally do not have to create styles for every different scenario but can just modify styles. I will provide you with an accessible template if you send me an email request to firstname.lastname@example.org
TIP # 2: USE HEADINGS AS DOCUMENT NAVIGATION
If one simply designs a large document, but does not use Headers for documentation it is very difficult for blind individuals to quickly skim through your document to find the paragraph or section that is of specific interest to them.
Think of the use of Headers as a way of creating a Table of Contents or Outline for your readers to navigate through your document.
If you take a look at the screenshot below in Figure 4, you will see a sample Navigation pane of a Word document that I created.
Figure 4: Note the words Title, Heading 1, and Heading 2 are actually not listed in the navigation pane but one can determine that heading 1 and 2 are different because of indentation. The Navigation Pane Shows the following. Navigation is the title of the pane below that is a search document field, Then 3 links Headings, Pages, and Results. Then the following Navigation is shown. Title: Workmates and Friends: Linda Coccovizzo and Paige Sears Discuss Document Accessibility Heading 1: Linda Coccovizzo’s Biography Heading Level 2 * Leber’s Congenital Amaurosis and my Early Childhood * Working as a Para Professional in Joplin * First Daughter is Born * Working for Columbia Lighthouse as a Rehab Engineer * Moving to Kansas City and Working with Paige at the Local Community College Today Heading Level 1 Paige Sears’ Biography Heading Level 2: * From Sports Writer to Disability Advocate * The Royal Proclamation * The Negative Phone Call * First Communications Job Re-evaluation of Life Path * A New Start Begins * Becoming An Adaptive Technology Specialist Heading Level 1: Linda and Paige Share A Passion for Accessible Design End of Figure 4.
Also, one can get to the Headings in the Styles Menu in two different ways.
Option 1: Click on the appropriate heading level in the Styles ribbon gallery. For example, Heading 1, Heading 2 or Heading 3.
Option 2: Use the Keyboard Command of CTRL + ALT + 1 for Heading 1, CTRL + ALT + 2 for Heading 2, CTRL + ALT + 3 for Heading 3
Figure 5: Screenshot of the styles ribbon. The style look and design are shown graphically and labeled as Heading 1, 2, 3 and 4 and there are 4 red arrows pointing to each separate heading. End of Figure 5.
TIP # 3: ADDING ALTERNATIVE TEXT TO IMAGES
Why is it important to provide Alternative Text to Images? Basically if you do not add descriptive text to your images then the blind end user has no idea what the image means in relationship to the other text. For the most part a massively in-depth description is not necessary. For example, in Figure 5 that depicts the Jaws Logo the following description is suffice.
DESCRIPTION BEGINS: The JAWS Logo which shows a blue shark speaking with the Word “Jaws” below the shark. DESCRIPTION ENDS
Sometimes a more in-depth description is appropriate. In some cases, the description needs to be wordy if the image for example is an actual body of text that contains 7 Steps or is a diagram showing how to do something in that case a lengthy description is appropriate. Often times, though what I do is that if the picture is a process or contains a lot of text I will include a description of what the picture entails in the body of my Word document.
Something to be aware of also with images is that often images are not just simple images but they are images that if clicked on will take you to another webpage. In those cases, it is imperative to make sure that you indicate in your alt tag description where that hyperlink will take the computer user.
So here is the Step by Step process of creating Alt text for the image. Select the image with your mouse, then point and click on that image. To see what that should look like when you select the image take a peek at Figure 6 below.
Figure 6: The JAWS Logo which shows a blue shark speaking with the Word “Jaws” below the shark. Figure 6 Ends
Then once the image is selected Right Click and Select Edit Alt Text as shown in Figure 7 below.
Figure 7: Screenshot of the menu that appears when you select a figure or image (in this case Figure 6) and right click. Highlighted in the menu is “Edit Alt Text…” End of Figure 7
Then simply enter the description in the Enter Alt Text field box. Example is shown below in Figure 8.
Figure 8: Screen shot of the Alt Text pane: “Alt Text” is at the Top Left below that it reads “How would you describe this object to someone who is blind?” (1-2 sentences recommended.)”. Below that is an empty field box with a red arrow pointing in it. Below that is a button labeled “Generate a description for me”, then a check box that is unchecked that reads “Mark as decorative” End of Figure 8
TIP # 4: DESIGN ACCESSIBLE TABLES
Tables should be used to communicate data; they should not be used for layout and design. One of the popular trends in both document and web design is to create “invisible tables” with no visible columns or rows. This technique may help improve the visual feel and layout for the sighted in often provides nothing but confusion and miscommunication to the blind end user. In my opinion tables should always be used to communicate data not layout. If you follow this one bit of advice regarding creating accessible tables it will improve the ability of creating accessible table dramatically.
Below is an example of a well-designed table
TABLE EXAMPLE BEGINS HERE
|Brett||21||Missouri Science and Technology|
|Brady||18||Maple Woods Community College|
End of Table
The best way for you to determine if your table is accessible is by tabbing through each cell. For example, when you navigate to the cell that has “Maple Woods Community College” in it, you will hear the screen reader Jaws say “College Attending: Maple Woods Community College”. Therefore, you know that the blind end user would be able to quickly understand what each cell content means and what cell column it corresponds to.
Something that is important for designing accessible tables is to make sure that your Header Rows are appropriately labeled. One can do this by selecting the table with your mouse. Select the Table by clicking on it. Once you have done this you will see 4 arrows pointing up, down, left and right just to the top left of your table. Then right click and select Table Properties. See screenshot example below.
Figure 9: Screenshot of the Paige’s Sons Table. The table has been selected and right clicked on. A menu appears. At the very bottom of the menu “Table Properties” is shaded in dark gray. End of Figure 9
Once you select Table Properties your screen should look very similar to the screenshot shown in Figure 10 below. Make sure that you select the “Row” tab and uncheck the “Allow row to break across pages” and make sure “Repeat as header row at the top of each page” is selected. When you do this it is easier for JAWS, NVDA and other screenreader users to help identify what table row header each table cell content relates too.
Figure 10: Screenshot of the Table Properties. There is a red arrow pointing upward to the Row tab and a red arrow pointing to the right of “Repeat as header row at the top of each page” check box. Above that is the “Allow row to break across pages” check box. The check box is unchecked. End of Figure 10.
TIP # 5 PROVIDE DESCRIPTIVE TEXT FOR HYPERLINKS
Hyperlink descriptions need to describe the nature of the hyperlink and what the Hyperlink content contains. Some very bad examples of Hyperlink descriptions would be using “Here” or “Click Here” to describe the hyperlink. Just imagine if a single web page has 30 or 40 “Click Here” links and each of those links takes the web navigator somewhere else. It would be a very confusing situation for that user.
So how can you provide descriptive text for hyperlinks.
Step 1: Visit the website and copy the URL of the hyperlink. See the up arrow in Figure 11
Step 2: Highlight some text as shown below. In the example below “This is the Descriptive text for the Web Aim Link…” is the highlighted text. Also it is right under the down arrow. Note: Do not highlight the actual hyperlink.
Figure 11: Screenshot of some content taking from a Word document. There is a down red arrow pointing to some gray highlighted text. That gray text reads: “This is the Descriptive text for the Web Aim Link”. It is not an actual hyperlink but just text. The second line of text reads, “This is the webaim hyperlink to the right https://webaim.org/techniques/word”. There is a red up arrow pointing to the web address. End of Figure 11
Step 3: After you highlighted some text right click the highlighted text and select Link from the Menu that appears and then you should see a dialog box like Figure 12 below.
Step 4: Copy the URL web address that you posted into your Word document in Step 1
Step 5: Paste it into the Address field as shown in Figure 12
Step 6: Type in the display text that you want to appear as the hyperlink in the Text to Display field. Select OK.
Figure 12: Screenshot of the Insert Dialog box and some Word document content is shown right under the dialog box. There are 3 red arrows labeled Step 4, 5, 6. Step 4 points to the Word document content that is a hyperlink. The hyperlink address is https://webaim.org/techniques/word. Step 5 The “Address” Form Field has the same web address mentioned in Step 4. Step 6 has a down arrow pointing to the text in the “Text to Display” field. The text in the “Text to display” field is Web Aim: Creating Accessible Word Documents. End of Figure 12
Step 7: Highlight and delete the URL web address that you began with in your Word document.
Now your hyperlink should look like Figure 13.
Figure 13 Screenshot of Word document content. It reads “The End Result” and then below that is a hyperlink labeled “Web Aim: Creating Accessible Word Documents”. End of Figure 13.
TIP # 6 CREATE ACCESSIBLE BULLETED LISTS AND NUMBERED LISTS
Intuitively, sighted readers look at bulleted and numbered list and know right away that information is important and is separated out in a vital way for the sighted user. It is important that when you use list that you must convey this information to the blind end user as well as the sighted end user.
Just a general guideline for creating accessible bulleted list is that it is ok to use the built in bulleted and numbered list generator in Microsoft Word, but it is not ok to insert an asterisk symbol and other characters to separate or highlight certain sections of the document.
Below is a list of sources and hyperlinks that I used in the development of this article. All of the links in this well-designed bulleted list are related to designing Accessible Word Documents.
- University of Washington – Creating Accessible Documents
- A PDF from the California Department of Rehabilitation: 7 Steps to Creating an Accessible Word Document
- Tutorial from Microsoft Office: Make Your Word Documents Accessible
- Seven Videos from Microsoft on How to Create Accessible Word Documents: Videos are Captioned with Transcripts available as well
Please note that the design of the website, Word documents and PDFs produced by Paige Sears are designed with the intent to provide a reference point of how an accessible document should look and feel. The use of visible fonts, navigable headers, described images and overall accessible layout is intentional as a way to promote accessible document design for Word Docs, PDFs and Web pages. If you are navigating one of the webpages and documents offered by Paige Sears please send her a link so she can correct the issue as soon as possible at email@example.com