As job aids, supplementary information in eLearning courses, resources, and a way to share information securely and easily, PDFs are ubiquitous and invaluable. Unfortunately, though, a vast number of them lack even basic accessibility features. Creating accessible PDFs is simple, so there’s no reason not to build usability into these versatile documents.
Some eLearning developers believe that PDFs are “automatically” accessible. This is not the case. However, an automated process built into recent versions of Adobe Acrobat empowers developers to easily improve and verify PDF accessibility.
Characteristics of an accessible document
A keystone of online accessibility is enabling mobility aids and assistive technologies to interpret content and convey it to learners. When the content is text or images, the primary assistive device is screen-reading software—and what these virtual assistants crave more than anything else is structure.
Creating a logically structured document is the only way to ensure accessibility. This accessibility goes far beyond usability with screen readers—a well-structured document is more accessible to any learner, regardless of ability or familiarity with the topic. As is the case with many accessibility features, preparing a screen-reader-friendly document really just means creating a logical, well-designed document—a benefit to all learners, including those with visual disabilities.
A well-structured document:
- Has a logical reading order, with headings of different levels and body text tagged appropriately—using heading and body styles, rather than manually formatting heading text to create a visual hierarchy
- Includes alt text descriptions for images and charts
- Formats lists correctly—with HTML tagging or bullets or numbers built into a list style rather than inserting numbers or bullet characters manually
- Includes readable, useful link text
- Bookmarks useful text passages and charts, in addition to section headers, if the document is longer than a few pages
- Optimizes tables and form fields for usability
Heading and body styles, alt text, and list formatting use HTML tags. The body, heading, and list styles should be built into document templates to ensure consistency and easy updating. Word, Adobe Acrobat, and most authoring tools and social media tools include a place to add alt text, along with captions, in the dialog boxes that allow inserting and formatting photos and graphics. Alternatively, Adobe Acrobat’s Set Alternate Text option (part of the Accessibility menu) makes it easy to add alt text; it even offers a checkbox where you can decline to add alt text for a decorative image, such as a cover photo or graphic design flourish:
Figure 1: Setting alt text in Adobe Acrobat offers the option to mark an image as decorative; decorative figures do not need alt text descriptions
Creating usable links is a habit that all eLearning designers and developers, as well as anyone who writes online text, should cultivate.
These structure and design features should exist in all content, regardless of whether it will be converted to PDF.
Reading or “tab” order
An accessible document must have a logical reading order—the screen reader needs to “know” how to read the text in a way that makes sense to the learners. Tab order is also important; this is the order in which a learner will access sections of text or form fields when using the Tab key to navigate a screen of content. Many assistive devices use the tab order to navigate, even if the learner cannot actually press the Tab key. When using tab navigation, some screen readers may skip text, tabbing only between form fields and links.
When checking the accessibility of a PDF, you can check and change the reading and tab order; you can also use the Reading Options tool in the Adobe Acrobat Accessibility menu (Figure 2) to set Reading Order to “Tagged reading order,” which means that the reading and tab order will be the same. Reading Order is an option on the Accessibility tool menu. Clicking it opens the Touch Up Reading Order dialog box (Figure 3), where you view and change the reading order.
Figures 2 and 3: The Adobe Acrobat Accessibility menu options (left) and the Touch Up Reading Order dialog box (right)
You can toggle between seeing the order (Page content order) and the type (Structure types). The order—indicated by numbered boxes (Figure 4)—tells you whether the flow is correct, and the type tells you whether each content item is tagged correctly.
- To change the order, click the Show Order Panel button and, in the pane that opens, drag items to reorder them.
- To correct tagging, select content—the cursor turns into crosshairs when you hover over a content element; draw a rectangle around, say, a Level 1 heading—and click the appropriate button in the dialog box.
Figure 4: The Show Order Panel lists the content items in the order that a screen reader would read them. Developers can move them up or down.
You can test the reading order using the Read Out Loud option on the View menu. Activate Read Out Loud, then read a page or an entire document.
Tags, tags, and more tags
The “Make Accessible” process in Adobe Acrobat adds PDF tags to a document. Creating a properly structured Word or web document requires using HTML tags. PDF tags and HTML tags are similar but not interchangeable: A file with correct HTML tags will not automatically become a properly tagged PDF.
Putting in the HTML tags is a great start and an important step in creating any web content. All of the tags—HTML and PDF—provide information to the screen reader about the document’s structure and the order in which content is to be read. If the document is tagged correctly in Word—using heading, body, and list styles—much of the structure will transfer to the PDF. HTML tags identify:
- Document title
- Each level of heading and subheading
- Body text
- Alt text descriptions of photos, charts, and other graphics
- Ordered (numbered) and unordered lists and list items
- Table elements
- Captions for photos, charts, and tables
If your document is based on a Word template with defined styles, this tagging occurs invisibly. Unfortunately, later versions of Word (Word 2007 and later) no longer offer the options to “Save as a web page” or view the source code. However, if you experiment by formatting a Word document with styles and without, and use a screen reader with both, you will quickly understand the difference!
Recent versions of MS Office (Word, PowerPoint, Excel) support an Adobe Acrobat toolbar that can create tagged PDFs directly from the Office application. Using the Create PDF and Run Action option allows you to run the Make Accessible action at the time you create the PDF.
Figure 5: The Acrobat toolbar is available in the latest versions of Word and other MS Office applications
Figure 6: The Create PDF and Run Action button in the Acrobat toolbar allows developers to create tagged PDFs right in Word and other MS Office applications
If your version of Word (or other authoring program) does not support an Adobe Acrobat toolbar or PDF maker, you can simply run the Make Accessible action in Acrobat.
Navigation is easier with PDF bookmarks
When a PDF is created, the PDF generator automatically creates a bookmark for each table of contents entry—usually Level 1 and Level 2 headings. You can add or rename these (and all) bookmarks and set or change their destination—the place in the document that they mark.
In addition to bookmarking section headings, consider adding bookmarks for lists, processes, charts, or instructions that learners might refer to frequently. The bookmarks, especially if you give them clear, easily understood text descriptions, are useful navigation aids for all learners.
To view and revise bookmarks, open the Bookmark menu (click the Bookmark icon).
You can bookmark:
- Text—select with the selection arrow
- Images—select the entire image or draw a rectangle around part of it
With
the text or image selected—this is the bookmark’s destination—click the Add
Bookmark icon to add a new bookmark.
The new bookmark appears in the list under an existing bookmark, such as the section heading, or at the end of the bookmarks list.
Table talk
Tables are a great way to present data and show logical relationships—unless the learner can’t see them. Without the visual hierarchy and associations and visual cues that differentiate row or column headers and data, it can be impossible to understand the data in a table and the relationships between different pieces of data. Improperly formatted tables are a nightmare for screen readers and anyone who relies on them. HTML markup for tables includes:
- <table>—Defines a table
- <th> Table header—marks a cell as a header
- <tr> Table row—defines a row in the table
- <td> Table data—marks a cell as data
- <scope> plus <row> or <col>—Indicates whether a <th> cell is a row header or a column header
- <caption>—Indicates that the brief descriptive text that often appears right before or after the table describes the contents of the table; the caption should immediately follow the <table> tag
Additional tags are needed for tables with complex formatting, cells that span more than one row or column, etc. Not all assistive technologies support this complex formatting, so it is preferable to create simpler tables that are more easily rendered accessible.
It’s possible to add tags to tables in Adobe Acrobat, but the process is smoother if you tag the document in Word or the original authoring tool. Acrobat’s Touch Up Reading Order tool, described earlier, can assist you in correcting tags and improving screen reader accessibility. You can use this tool to fix any errors in table tagging or add missing tags. During this process, you can also add a table summary, which is a description of the table structure that some screen readers and other assistive technologies can use; but, again, simplifying the table makes this attribute unnecessary—and improves accessibility for all learners, not only those using screen readers.
Form fields need tooltips
A great feature of PDFs is their support for fillable forms. It’s easy to add form fields to a PDF or create a new PDF form within Acrobat, and even to convert a scanned paper form or a non-fillable Word form into a form that learners can fill out and submit using Acrobat Reader. These forms need some tweaking to be accessible, though.
Choose Prepare Form from Acrobat’s Tools menu. If a document you open or scan already has form fields, Acrobat will add the fillable fields automatically. Check to be sure that all the needed form fields are there, though—and add any additional forms using the toolbar.
For accessibility, each form field—and each button—needs an HTML <label> that tells the screen reader the purpose of the field. (Note: The label is called a “name” in the WCAG 2.0 standard and an “accessible name” in WAI-ARIA.)
- Use Acrobat’s tooltips to add labels. You can add tooltips in the Form Field Properties dialog, which you open by right-clicking on the form field or clicking on All Properties at the time you add the field.
- You can leave the dialog box open and click on each field in a document to check, revise, or add tooltips.
- The tooltip must include all of the information
that the learner needs to know to correctly complete the field, such as:
- Whether the field is required
- What information the learner should enter
- Example: “Last Name (required)”
- For buttons, the tooltip can be identical to the text on the button itself, e.g., Enter or Submit; the tooltip should tell the learner (via the screen reader) what the button does.
Not all types of form fields are equally accessible. The best choices for an accessible form are:
- Text boxes. Most screen readers will read the “default” text—whatever appears in the form as a placeholder—but do not count on this. Leaving the placeholder text blank is less confusing to many learners.
- Drop-down lists. These are navigated using arrow keys or by typing the first letter of an option. Screen readers will generally read the default option. Each option needs its own tooltip.
- Checkboxes. The tooltip for each checkbox in a group must include both a description of the group—what is the question that the learner must answer?—and the individual option choice the box represents.
Other types of form fields, such as list boxes and radio buttons, are more challenging for screen readers to navigate accurately. Avoid these in accessible forms.
Once all of the needed fields are in the document and correctly labeled, the next step is tagging them. Tagging ensures that the screen reader identifies the form fields and reads them in the correct order. Use the Autotag Form Fields option in the Accessibility menu to do this.
Check the reading order once you’ve done this; you can “touch up” the reading order at any time, but checking it as you add layers of complexity can ensure that new elements stay where they belong.
A final check: Is this PDF accessible?
Congratulations; if you’ve gone through all of the steps to ensure that your document is logically structured, you are well on the way to an accessible PDF. A few additional issues can hang up screen readers, though, so don’t skip these steps:
- Ensure that the document title shows in the Acrobat title bar; check Acrobat’s File: Properties dialog box. Fill in the title if that attribute is empty.
Figure 7: Make sure a title appears in the Document Properties: Title field
- Set a document language in Word or your other authoring tool. You can also choose a language in Acrobat’s File: Properties dialog box, on the Advanced tab.
- Disable document security settings that prevent copying, printing, or extracting text. Some screen readers are able to override these settings—but Adobe does not provide a list, and learners can be using a variety of assistive devices, so it’s best to disable these settings in accessible documents.
- Use OCR software to convert images of text, such as scanned documents, into readable text.
- If the document uses colors, part of the accessibility check verifies that there is sufficient contrast that the colors are accessible to learners who have color-blindness.
Figure 8: The Full Check is the final step in verifying that a PDF is truly accessible
The last step is a final accessibility check. Run the “Full Check” and request a report. The check will catch anything you missed—an image without alt text or a missing label, for example.
If your document creation process does not include steps to build in structure and accessibility, it might seem like a lot of effort. The resulting logical, well-structured documents will benefit all learners, though, and are easier to update and maintain because the formatting is consistent and integrated with the content. These steps quickly become an integral part of the document creation and revision cycle, and are habits worth developing. Creating accessible PDFs is an easy way to improve content and make it usable for all learners.