What is accessibility?
In simple terms, accessibility means that someone with a disability can use a document or Website. Although this may seem like a simple goal, it becomes more complex when you define the word ‘use.’ To use a document or Web page, a visitor must be able to perceive, understand, navigate, interact, and contribute (when appropriate) to the document. The disabilities that must be considered when designing accessible documents encompass visual, auditory, physical, speech, cognitive, and neurological issues. If you would like to learn more about how each of these disabilities affect ‘use,’ see the document created by the World Wide Web Consortium: http://www.w3.org/WAI/intro/people-use-web/Overview.html
What is an accessible PDF?
The term accessible PDF refers to ‘tagged’ PDF files. PDF tags are a method used to provide structured, textual representations of a document that can be interpreted by a screen reader. The tags provide accessibility but do not visually change the PDF document.
Microsoft Office documents are, by default, generally accessible to assistive technology. However, there are several attributes that must be used to make the documents fully accessible. Once a Word document has been made fully accessible, the content and associated styles can be translated into equivalent PDF tags and used to easily create accessible PDF documents.
This tutorial assumes users have working knowledge of Microsoft Word and their preferred PDF program. Instructions provided are for Microsoft Word 2013 (PC) & Microsoft Word 2011 (Mac) and Adobe Acrobat (Note: Adobe Acrobat and the free downloadable Adobe Acrobat Reader are not the same software program).
This tutorial uses Microsoft Word 2013 (PC) & Microsoft Word 2011 (Mac) and Adobe Acrobat. Both of these programs are available to SF State faculty and staff (students can purchase them through the Bookstore). For information on obtaining Microsoft Office, the software suite containing Word, visit http://tech.sfsu.edu/guides/microsoft-campus-and-select-agreements. Instructions for installing and licensing Adobe Acrobat can be found at http://tech.sfsu.edu/guides/adobe-creative-suite.
Download the tutorial file, Trees.docx, and save it to your computer for practice.
General Accessibility Requirements
There are several key ‘do-s and don’t-s’ to follow when creating accessible documents. Following these rules ensures correct reading order and allows the information to be understood no matter what method a viewer uses to access your documents.
- Place content in logical reading order
- Do not use Tab, Spacebar, or Enter for formatting (alignment)
- Define and use Styles to format elements such as paragraphs and headings, and to control typography and layout
- Use standard fonts that map to Unicode
- Avoid sidebars and other layout elements that can impact reading order
- Avoid canvases and text-boxes as these items ‘float’ to the bottom of the document when being read by a screen reader
- Provide alternative text for all non-text elements such as graphs and images that provide essential information
- Ensure that all navigation and interactivity can be performed using the keyboard
Styles and Themes
Styles consist of a series of ‘rules’ that define how an element such as a paragraph, heading, or list is displayed in your document. The types of rules that can be set include font size, color, type, kerning, alignment, left and right indent, line and paragraph spacing, borders and shading, and other element specific settings.
- Open Trees.docx, the tutorial file you downloaded earlier
- Highlight the single word Trees, at the top of the document
Create a Style
With the Home tab selected, open the expanded Styles window
- PC: Click the expand arrow at the bottom of the Styles group or press Alt+Ctrl+Shift+S on the keyboard
- Mac: Click the icon at the bottom right of the Styles group. It will read "Manage the styles that are used in the document," when you hover over it with your cursor
Click the New Style button:
- PC: The New Style button is located on the bottom left corner. It will read "New Style," when you hover over it with your cursor
- Mac: The New Style button is located on the top left
- In the New Style window, enter (Your Name’s) Title as the name for your new style (e.g., Jane's Title)
- Set the 'Style Type:' field to Paragraph
- Set the ‘Style based on:’ field to Heading 1 to make Heading 1 the parent style. (Note: It is important to have correct parent styles so that changes to the page’s theme will be correctly applied)
- Set the ‘Style for following paragraph:’ field to Normal
- Increase the font size to 18, add an underline, center the text, and increase the paragraph spacing (the icon with the arrows facing away from each other) by one or two, using the formatting options
- PC: The title style that you created will automatically apply to the single word Trees
- Mac: Manually apply the title style that you created by selecting it from the expanded Styles window, under the "Pick a style to apply:" field. (Trees should still be highlighted for the title style to apply)
- With the Home tab selected, open the expanded Styles window
Apply a Style
- Highlight the first three paragraphs of the document
- Select the style Subtle Emphasis from the expanded Styles window
- Close the expanded Styles window
Change the Page Theme
In Word, the theme defines the colors, fonts, and graphic effects for a document. The default theme is called ‘Normal.’ The purpose of a theme is to allow the changing of fonts and colors in a consistent way across a document without having to redefine individual styles. By changing the visual appearance of your document using themes, you will retain correct style information and decrease the risk of causing accessibility problems when transferring your document to PDF.
In the Themes group, click the Themes button
- PC: The themes group can be found in the Design tab
- Mac: The themes group can be found in the Home tab
Select a Theme
- PC: Hover your mouse over one of the themes to preview your document, using the settings of that theme. Select one you like. Note how the title style you created also changes
- Mac: Click on one of the themes to preview your document, using the settings of that theme. Select one you like. Note how the title style you created also changes
There are a number of reasons to use defined headings in your documents. Word associates automatic numbering with headings and uses headings when applying styles, creating tables of contents, referring to captions, publishing, etc. For the purpose of accessibility, headings are used by screen readers to make sense of documents. Having correct headings will also ease the transfer to PDF, as the headings will be automatically converted to bookmarks.
- Open the expanded Styles window
- Navigate to the line that reads Tallest trees and highlight it
- Select the style Heading 2 from the expanded Styles window
- Navigate to the line that reads Oldest trees and also highlight it and apply the style Heading 2
When working with graphics, good accessibility practices include using standard file formats, grouping multiple images into a single image (when appropriate), and always including alternative text (alt text) descriptions for images and non-text elements that provide essential information. Alt text works by having screen readers read the title of objects to users who may have difficulty seeing objects. After hearing the title, users can then decide if they'd like to hear a longer description of the object. Built-in autoshapes, Wordart, or charts are not always the best to use, as these elements automatically ‘float’ to the bottom of the document when being read by a screen reader.
Add alternative text:
- Navigate to the tree image in the middle of the document
- Click once on the image to select it
Format the Picture
- PC: Right click on the selected image and select Format Picture
- Mac: Hold down the control key and click the selected image (right click). Select Format Picture
Select the Alt Text option
- PC: Select the Layout & Properties icon in the Format Picture sidebar, then select Alt Text
- Mac: Select Alt Text in the Format Picture sidebar
- Enter a title and text description, in the provided boxes, that convey the meaning of the image
Close the Format Picture sidebar
- PC: Click the X to close the Format Picture sidebar
- Mac: Click Ok
Word includes several preformatted list options that are easy to create. For accessibility purposes, it is imperative that lists are not created using symbols, numbers (non-formatted), the spacebar, or the tab key.
- Highlight the 5 lines above the tree image that contain the names and locations of the 5 tallest trees
Make a numbered list on the Home tab in the Paragraph group, click the
- PC: Click Numbering list
- Mac: Click Numbered list
If you wish to have a different format displayed, click the small down arrow next to the Numbering/Numbered list and select a different format
The primary purpose of a table is to present data in a grid format. Although sometimes used to control the layout of a page, tables are highly discouraged when creating accessible documents. Most screen readers read the contents of a table linearly from top left to bottom right. It is important to identify the column and row header cells so that content can be easily associated with the headers. Word automatically considers the first row and first column of a table to be header cells. Some key items to be noted when creating tables include:
- Use minimal nesting of table cells
- Avoid multiple split and merged cells
- Avoid splitting or merging cells after data has been entered, as this can interfere with reading order
- Set the table size using percentages rather than pixels so that the table will resize gracefully
- Keep headings short and descriptive
- Add table captions
Add a Heading Row
- Highlight the text of a cell in the top row of the table under the Oldest trees section
Select the Layout tab
- PC: In the now visible Table Tools section, select the Layout tab
- Mac: Click on the Table Layout tab
Insert a row
- PC: Click the Insert Above button in the Rows & Columns group
- Mac: Click the Above button in the Rows & Columns group
- In the new row, add the headings: Common Name, Scientific Name, Age
Set the Table Size
- Click the Properties button in the Table Layout tab
- Check the little box next to the 'Preferred Width:' field in the Table tab
- Change the ‘Preferred width:’ field to 90% and the 'Measure in:' field to Percent
- Click Ok
- Select the File tab and Save As to save your document
When prompted, give the document a name, a location, and make sure the format is PDF
- For PC only:
- Click Options to open the Options window
- Check the box labeled Create bookmarks using: and set the type to Headings
- Verify that the Document structure tags for accessibility box is checked
- Click Ok
- Click Save
- Open your PDF document in Adobe Acrobat (Word/Acrobat may open the document automatically
PDF tags provide structural and textual representations of your document’s content to screen readers but will have no visible effect in the PDF file. Tags in PDF documents are similar to tags in HTML, but they are not identical, and there is no ‘Code view’ for inserting tags
The Acrobat Tags panel is one of several tools that allow you to view, reorder, rename, modify, delete, and create tags in a PDF file.
- Select, at the top, View > Show / Hide > Navigation Panes > Tags to open the Tags panel
To view the list of tags, expand the tags list
- PC: Expand the tags list by clicking the + next to the <Tags> and <Part> tags. Continue clicking the + next to each tag to further expand the tags list
- Mac: Create tags if the tag panel says "No Tags available"
- Mac: Click the Options (icon) drop-down at the top of the Tags panel and select "Add Tags to Document." A report will appear once completed.
- Mac: Click on the green Tags icon (last icon) to view the newly created tags in the Tags Panel
- Mac: Expand the tags list by clicking the gray arrow next to the <Tags>. Continue clicking the gray arrows to further expand the tags list
- Check to see if the Highlight Content is on by clicking the Options drop-down; a little check next to Highlight Content indicates that it is on. If the Highlight Content is off, turn it on
- Select a tag by clicking on it. Notice how the document automatically ‘jumps’ to see the content that corresponds to the tag. Acrobat also highlights the associated content by placing a box around it
- Work through the list of tags by briefly clicking on each tag in the Tags panel. (Note: The process of converting from Word to PDF is not perfect and depending on your Word settings, the theme applied, the types of objects inserted, etc., there may be some discrepancies between the two documents. In this document, it is likely you will find an extra/empty paragraph tag, visually located just after the tree image. If found, delete it by right clicking the tag and selecting Delete Tag)
If you find any tags of the default type: <normal> in your tags list, right click the <normal> tag and select Properties to open the Object Properties window
- Change to the Tag tab and select the correct tag type from the Type drop-down box
- Select Close
Add/Change Alternative Text
Acrobat includes several methods for adding/changing the alternate text on page elements. For minor changes and additions, the Tags panel provides easy access to the alternative text property.
- Find and click the <Figure> tag so that the image is visible on the screen
- Right click the <Figure> tag and select Properties
- On the Tag tab of the Object Properties window, edit the text in the Alternate Text box
- Click Close
Although changing the reading order of your document can be accomplished in the Tags panel by dragging and dropping the tags into a different order, Acrobat provides a second panel called Order, specifically for this task, that can speed up the re-order process. This is especially true for long documents. The Order panel will display each page of the document separately with each element on a page numbered in the order that the element will be ‘read’ by a screen reader.
- Open the Order panel by selecting View > Show / Hide > Navigation Panes > Order
Expand the list in the Order panel to see Page 2 of your document, as well as the components on the page
- PC: Notice how the image is listed at the bottom but visually is near the top of the page
- Mac: This issue will not occur for Adobe Acrobat XI
- Reorder the tags by dragging and dropping the image tag icon into the correct position on the list
- Close the Order panel
The accessibility check built into Acrobat is not a complete and comprehensive check, therefore the check must be done manually. It does, however, provide basic information and alert you of general problems such as missing alternate text
- Save your document
- Select View > Tools > Accessibility
- Select Full Check
- Leave the default items selected and click Start Checking
- If the document is correct, you should see the message “The checker found no problems in this document.” (Note: Due to a compatibility issue, Adobe Acrobat may report that the extra paragraph tag removed in the previous steps is now ‘Inaccessible page content.’ Because there is no content, this is not an actual error, but items that appear this way should be checked manually)
- Click Ok. The accessibility report will appear on the left of the screen
- In the Themes group, click the Themes button