Web Content Accessibility

Use headings to organize the content of your page and provide a logical hierarchy. Headings support on-page navigation for screen readers and other assistive technologies.

• Headings will always appear on their own line.
• Nest headings by their rank (or level). The most important heading has the rank 1 (<h1>), the least important heading rank 6 (<h6>). Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section.
• A webpage should have only one <h1> heading - usually the page title. Drupal and WordPress will create this <h1> automatically.

Images that are not purely decorative must include alternative text (alt tags). Alt tags are used by assistive technologies such as screen readers to interpret an image using text.

• Alt text should clearly and concisely describe the content of the image, or explain its purpose.
• Images should not include text as part of the image.
  If your image does includes text for decorative purposes, such as on a banner or button, you should include it in the alt text.

Links to Word docs, pdfs, or other files that are not webpages should specify the file type in the link text.

• Example: “Download the flyer (PDF)” 

Avoid using “Read more” or “Click here” for links – use descriptive, action-oriented language.

• Examples: “Access the guidelines”, “Register to attend”, etc.

Tables should include table headers (<th>) to identify rows and columns for screen readers and other assistive technologies.

Use the free Wave Accessibility Evaluation Tool (wave.webaim.org) to check individual pages for errors.

The tool will scan for and highlight specific issues on-page and provide detailed information on how to fix them.

Videos must include captions. Captions must be 99% accurate per compliance requirements. This not only makes them accessible to those who are deaf, hard of hearing, or learning disabled, but also to those who are unable to listen to the audio in a video due to environmental/technology limitations, to those who may be learning a new language, etc.

• If you host your videos on YouTube, you can opt in for community contributions to provide captions (as well as title, description, and subtitles). You will have the opportunity to review contributed captions before posting. Learn more about community contributions here.
  Note: We cannot use YouTube's automatic captions, as they are only 60-70% accurate.
• You can also use a third-party service such as Rev to create captions, which is likely to be more accurate but does carry a fee.

Transcripts are required for audio content such as podcasts, and are highly recommended for videos, to ensure accessibility for users who are both deaf and blind. Transcripts must be 99% accurate per compliance requirements. 

• Rev can also provide this service, or you can generate the transcript yourself (this is especially easy if you created a script for your video before it was filmed.)
• Transcripts should be included wherever the media is hosted (YouTube, SoundCloud, etc.)

As with webpages, headings should be used throughout the document to identify sections of content and establish hierarchy.

• Nest headings by their rank (or level) and use only one Heading 1 for the title of your document; all other headings should be level 2 or below.
• To create a heading in Word, type or select your heading text and select a heading style (Heading 1, Heading 2, Heading 3…) in the “Styles” section of the Home tab.

Also as with webpages, all images in a Word document should include alt text. In addition, alt text should be applied to tables, charts and graphs.

• To add alt text to an image, table, chart or graph, right click on the object, select “Format Picture” (images), “Table Properties (tables), or “Format Chart Area” (charts and graph), then select the “Alt Text” tab and enter your text into the “Description” field.

Charts and graphs should also include captions for the data they contain.

• To add a caption to a chart or graph, right click on chart’s border and select “Insert Caption”.

Use the “Check Accessibility” tool in Word to automatically detect errors.

• Click on the “File” tab, select “Info”, then “Check for Issues”, then “Check Accessibility”
• Errors will appear in a separate panel - address any errors and warnings as needed

It is best to publish your content as a web page wherever possible, rather than forcing users to view/download a PDF.

PDFs are generally less accessible, less searchable, and more difficult to optimize, and require additional resources to view and interact with your content.

When a PDF is necessary (or when you are offering content in a PDF as an alternative option for users who prefer them) it is still important that your PDF be made accessible.

At minimum, accessible PDFs must be formatted as searchable text and “tagged” with hidden labels that describe the structure of the document. These tags act similarly to headings on webpages and in Word documents.

Enhance the accessibility of your document using Acrobat Pro's Make Accessible Tool.

To utilize the tool, in Acrobat Pro, select “Tools”, then select “Action Wizard” > “Make Accessible” from the sidebar, which will take you through a series of steps:

• Add Document Description — Enter a descriptive document title
• Set Open Options — Runs automatically
• Recognize Text using OCR — If your PDF contains images of text, it will be converted into true text during this step.
• Detect Form Fields — Skip unless your page contains fillable forms.
• Set Tab Order Property — Runs automatically
• Set Reading Language
• Add Tags to Document — If your document does not have tags they will be added during this step. (Advanced users can check the quality of these tags later on.)
• Set Alternate Text for images
• Run Accessibility Full Check- This checker will show additional issues. Right click errors and warnings and select “Fix” to address them; select “Skip Rule” if the issue has already been addressed, and “Explain” for additional information about the error and its solution.

You can also run an on-demand check under “Tools” > “Accessibility” > “Full Check”.