LOADING...
Text Size
How To's
March 14, 2014

This is not a complete list of actions needed to make content accessible. Please email us if you have additional suggestions.

PDF Remediation |Accessible Word Docs | Converting MS Office Docs to PDF | Creating Text Equivalents for Images
Creating Accessible Forms | Accessible CSS | Adding captions to Flash Video

How to Remediate PDF Documents for Section 508 Compliance
These are very basic steps that can help to better achieve accessibility, but these steps alone do not ensure compliance with Section 508. It is important to understand the standards and use all of the tools and resources available.

  1. Make sure the document is tagged. Much like HTML, there is “markup” or background information that will be accessed by the various Assistive Technologies.

    Acrobat has an automated “tagging” feature that simplifies the process. To tag the document, click on “Advanced” in the application menu, hover on “Accessibility” and select “Add Tags To Document”. This will automatically add tags. The automated tagging feature can be a bit imperfect and more manual remediation may be necessary.

    If you have a “scanned” document, the document will first need to be converted to be text-based using Acrobat’s OCR (Optical Character Recognition) tool. From the menu select “Document”, then “OCR Text Recognition”, and “Recognize Text using OCR”. The tool will attempt to convert the visible text into characters which will then be able to be manipulated using the various tools mentioned here. This can also be imperfect, and additional remediation may be necessary.

    The generated tags can be viewed by selecting "View" in the application menu, then “Navigation Panels”, and clicking on “Tags”. In navigating the "tags" tree structure, it can be seen how these tags resemble HTML tags. The tags should be reviewed to ensure that the proper structure and tags have been used and more detail on how to accomplish this can be found in the provided Reference Links.

  2. Next you will need to “Touch Up Reading Order”. If possible, it would be best if the document has a simplified layout to make the remediation process easier.

    Touch Up Reading Order can be opened by selecting “Advanced” in the application menu, then “Accessibility”, and “Touch Up Reading Order”. This tool provides a more visual depiction of how the tags were generated and provides a numeral in the top left corner detailing what order certain sections or items would be read in.

    Check to make sure that the content flows in the intended reading order on each page. If this is not the case, you can “Clear Page Structure”. Then, in the exact order you wish the content to be read, highlight each section of text, figure, table, form field, etc. and select the corresponding button from the Reading Order Tool. This should correctly adjust your tagging and content order. Sometimes, this is inexact and you may need to manually adjust the tagging structure and content order and information on how to accomplish this can be found in the Reference Links provided.

  3. Ensure that all images have alternate text associated with them. The alternate text should be as clear as possible to describe the image without being excessively long, unless the image or figure is exceptionally complex and requires an extensive textual description like complex graphs, tables in image format, etc.

    It may also be possible that some images or figures were not tagged accurately by the automated tagging feature and these can be easily corrected. First, using the Reading Order Tool, individually highlight any figure or graphic which is not accurately indentified as a figure and click the “Figure” button on the tool. Add alternate text to all figures or images using the Reading Order Tool to “right-click” on the highlighted image to open the menu and select “Edit Alternate Text”. A small popup will appear to type in the alternate text. Sometimes with longer descriptions, it is easier to type the text in a text editor and then copy and paste it into the small textbox. Once you are finished, click “OK” and verify that the alternate text appears next to the “reading order” numeral.

  4. It is important to move decorative images to the “background”. Often there are images that have no informational purpose and are solely ornamental like borders, dividers, background images, etc. These should be placed in the “background” of the document so that users do not confuse these with actual images anticipating further information.

    With the “Reading Order” tool open, individually highlight the decorative items and simply click the “Background” button on the Reading Order Tool which will cause the grey highlighting to disappear and the decorative image will no longer be a part of the document structure.

  5. Make sure Form elements are properly indentified to facilitate use. Form elements, much like images, should have textual information which relays to the user the purpose of the element or should be clearly associated with specific text (i.e. Question #1, Step 12).

  6. Ensure that data tables have markup to indentify table headers. Data tables, particularly complex tables, can be tough for any automated tools to infer. Usually, if the tables are well formed in the original document format, Acrobat can properly tag the tables without necessary remediation. Sometimes, the Reading Order Tool can also translate tables properly, but, often, manual review and remediation of the tags and content order would be necessary.

    If a table was not properly indentified by the software as a data table, use the Reading Order Tool to highlight the entire table and select the button “table”. Next, open the “tags” panel using the information in step 1. Highlight the table to be reviewed and in the “Tags” panel open the “Options” menu and select “Find tag From Selection”. Also, be sure to select “Highlight Content” in the “Options” menu.

    Review these tags to ensure table headers are properly defined and content is properly placed in the correct table data cells. Define the data table headers by simply changing the <TD> (table data) tags to <TH> (table header) tags. Viewing the “Content” structure maybe necessary in some cases to make sure the proper content is placed within the proper data cells. More detailed information on this can be found by using the “Reference Links” provided.

  7. Ensure color is not used as a sole indicator of any information and that color contrasts are sufficient.
    The best way to verify this is to print out the document or page in question using a black and white printer. If all the information can be clearly discerned, then the document should be acceptable.

Below is a short list of reference links which may assist with remediation.

Reference Links:
Adobe Acrobat - This link will provide details on how to use Acrobat to make accessible PDF documents.

Acrobat PDF Tutorials - Resources which will provide basic training on creating accessible PDF documents in different versions of Acrobat.


Accessible Word Documents
These are very basic steps that can help to better achieve accessibility, but these steps alone do not ensure compliance with Section 508. It is important to understand the standards and use all of the tools and resources available.

  1. Provide a clear navigable structure to your document. Text should be easily readable from left to right and top to bottom. Complex page structures should be avoided. Properly format all text using styles such as "Heading 1", "Heading 2", etc (Using bold text to indicate a heading is not sufficient). This allows Assistive Technologies to determine the visual formatting and create an outline of the document.

    To create a table of contents use the tools provided within the software instead of spacing and tabbing. Here are a few basic steps to creating a Table of Contents. Using the "Insert" menu item, point to "Reference", then click "Index and Tables", Select the "Table of Contents" tab, and click "OK".

  2. Provide alternate text for all images that are not solely used for decoration or formatting purposes. This can be done by "right-clicking" on the image and selecting "Format Picture" or selecting the image, then using the "Format" menu item and selecting "Picture". Select the "Web" tab and insert valid alternate text. The alternate text should be as clear as possible to describe the image without being excessively long, unless the image or figure is exceptionally complex and requires an extensive textual description like graphs, data tables in image format, etc.

  3. For data tables, make sure the headers are clearly identifiable and tables are well-formed to ensure table data can be associated with headers. The alternate text should be as clear as possible to describe the image without being excessively long, unless the image or figure is exceptionally complex and requires an extensive textual description like complex graphs, tables in image format, etc.

    Create tables using Word's table creation tool instead of the "Draw" feature. Do this by selecting "Table" from the menu, then "Insert", then "Table", and select the dimensions needed. Insert your data as desired and differentiate the row and column headers of the table using the "bold" option. Also, to further define the column headers and make sure that they repeat across new pages, which is necessary for long tables, highlight the column headers and open the "Table Properties" by either right clicking on the table or using the "Table" menu item. Select the "row" tab and make sure the checkbox for "Allow row to break across pages" is de-selected and the checkbox for "Repeat as Header row across the top of each page" is selected.

    There are a few other tips to keep in mind when creating tables. Keep tables simple with minimal nesting. Avoid complex nested tables with multiple split and merged cells. Do not use the "Draw" feature for tables and avoid splitting or merging cells after data has been entered when possible, as this can confuse the reading order of the cells for Assistive Technologies. And, add captions whenever possible to provide information about the table.

  4. Make sure Form fields are properly indentified to facilitate use. Form elements, much like images, should have textual information which relays to the user the purpose of the element or should be clearly coupled with the visible onscreen text associated with the Form Field (i.e. Question #1, Step 12).

    Typically, if a form element is placed immediately to the right of the associated text, no further remediation is necessary. If not, alternate text will need to be used to indentify the form field's purpose.

    One means to accomplish this is to use the "Bookmark" option in form fields "Properties" (double-click form field to open) to enter a purposeful "Field Name". If more extensive text would be necessary (i.e. form elements are spread out in a table format), use the "Add Text Help" button from the "Properties" dialog to enter the associated visible text or other information to indentify the form field's use.

  5. Ensure color is not used as a sole indicator of any information and that color contrasts are sufficient. The best way to verify this is to print out the document or page in question using a black and white printer. If all the information can be clearly discerned, then the document should be acceptable.

  6. Avoid the use of flashing or flickering images. If the use of flashing images is necessary, the images can only flicker with a frequency greater than 2 Hz and lower than 55 Hz.

Converting Microsoft® Office® documents to Compliant PDF
Quick overview on converting Office documents to PDF files with links to turorials online.

Many times the best way to deliver a MS Office document is by converting it to a PDF document. There are a few easy steps to make sure the final PDF is accessible. NOTE: There are limitations when converting Office documents to PDF's using the Macintosh operating system. If using Office products earlier than 2008, it's suggested to convert and modify PDF's on Windows platform.

  • The latest version of Office allow users to create tagged Adobe PDF files. However the Office document must be well marked up and use styles to format text such as "Headings" and "Paragraphs". That is, not by highlighting a piece of text and using the font and bold options to change its look.
  • Also, use styles to provide structure to the document. Use the "spacing before" and "spacing after" paragraph properties rather than the enter (return) key to add space between paragraphs.
  • Use the Column command in Word to create columns and the Insert Table or Draw Table tool to create tables.
  • Add alternative text to all images. In Word you can add descriptive text via the Web tab of the pictures Properties dialogue box within the Format menu. (In Apple® MS Office versions older then 2008, this option is greyed-out and must be manually entered within the PDF document tags.)

It is recommended not to use the Print option to save documents from Office to PDF. This method will not create tags if your Office document is already well formed. Use either the Adobe PDF > Convert to Adobe PDF menu within Office, or convert the Office document in Adobe Acrobat Professional using File > Create PDF menu. (This second method does not work on the MAC OS).

Additional links:
How To Create Accessible Adobe® PDF Files
WebAIM - PDF Accessibility


Creating Text Equivalents for Images
Adding alternative text for images is the first principle of web accessibility. It is also one of the most difficult to properly implement.

Despite being the biggest issue affecting web accessibility, there are still divergent and incorrect methods for implementing alternative text. By following the basic principles outlined here, web developers can make their web content more accessible to individuals with disabilities.

  • Adding alternative text to images is one of the easiest accessibility principles to learn and one of the hardest to master.
  • Alternative text may be provided in the alt attribute or in the surrounding context of the image.
  • Every image must have an alt attribute.
  • Alternative text should:
    • presents the CONTENT and FUNCTION of the image.
    • be succinct.
  • Alternative text should not:
    • be redundant (be the same as adjacent or body text).
    • use the phrases "image of…" or "graphic of…".
  • Appropriate alternative text depends heavily on the image's context.
  • Alt text of a functional image (e.g., an image within a link) should describe the function as well as the content.
  • Decorative images still need an alt attribute, but it should be null (alt="").

An in-depth article on proper usage of the image alt tag can be found at the WebAim web site. Go to the article »


Creating Text Equivalents for Charts and Graphs
How to create accessible charts and graphs.

It is common to find complex informational images such as charts, data tables & diagrams published to the Web by scholars, scientists and other researchers. Unlike graphics that merely serve a decorative function, users of assistive technology miss out on significant information by not being able to interpret these blank images.

Additional links:
How to Create Descriptive Text for Graphs, Charts


Creating Accessible Forms
Many users must use their keyboard to navigate and use the web. You must ensure that the forms on your web site can be completed using only the keyboard.

Many users must use their keyboard to navigate and use the web. You must ensure that the forms on your web site can be completed using only the keyboard. There are a few things that can make forms totally unusable with the keyboard, the most common of which is JavaScript. Be careful in your use of JavaScript to manipulate form data, set focus, change form elements, or submit forms. Each of these can make the form difficult or impossible to complete or understand using the keyboard alone. Always test your web site forms for accessibility.

Additional links:
WebAIM - Creating Accessible Forms


Accessible CSS
The strength of CSS lies in the ability to separate content from presentation, and to allow for more precise control over layout.

Take your web design to a higher level by eliminating tables that are used for layout. The way to do this is through CSS (Cascading Style Sheets). Note that authors can easily create INaccessible web sites using CSS. There is nothing magical about CSS that eliminates accessibility barriers.

One of the primary benefits of CSS is that it allows web designers to separate content from presentation. Content means the text, images and other elements that make up the core of the document. Presentation means the way in which content is displayed. A qiuck way to see if a web page is using CSS is to use the browsers built-in ability to turn-off style sheets. This is usually done through a top menu. If all background content disappears and the page displays in a linear fashion, then that page uses CSS. This is also a good way to check your page for accessibility as you create. Looking at a page with the style sheet turned-off will allow you to see if the content will be read in the order you intend.

Additional links:
WebAIM - Creating Accessible CSS


Adding Captions to Flash Video
Flash Professional CC allows developers to deliver accessible video through support for a new World Wide Web Consortium (W3C) caption data standard (TTML) in its FLVPlaybackCaptioning component and through accessible player controls for FLV and H.264 video.

Additional links:
Best Practices

Image Token: 
[image-36]
Image Token: 
[image-12]
Image Token: 
[image-62]
Page Last Updated: March 24th, 2014
Page Editor: NASA Administrator