Alternative text serves several functions:

• It is read by screen readers in place of images allowing the content and function of the image to be accessible to those with visual or certain cognitive disabilities.
• It is displayed in place of the image in browsers if the image file is not loaded or when the user has chosen not to view images.
• It provides a semantic meaning and description to images which can be read by search engines or be used to later determine the content of the image from page context alone.

In the first case, pictures and images that are labeled with alt text are read aloud using software called a Screen Reader, so a visitor to your website doesn’t miss out on the site’s full content. It is important to make sure that all images on your website are labeled appropriately. When determining appropriate alternative text, context is everything. The text provided to the user should present the content and function of the images within your web pages. There is not always a clear answer to which alt text is appropriate for a given image in a given context, but keep in mind, labels that are not descriptive can make your site inaccessible.  An example of inaccessible alt text would be labeling an image of an important graph as “pie-chart” instead of describing the actual content of the graph.

When composing your alt text, there a few general rules to follow.

1. If the image file itself is (or includes) text, that text should be the alt text (or part of it).
2. Alt text should be a contextual description of the image as it relates to the content it is supporting. That means that alt text for the same image may vary depending on where and how the image is being used.
3. If the image is used for purely decorative purposes or does not offer any additional context or information, the alt text field should be null or blank. 
4. Alt text should not be redundant to the caption, text or headings adjacent to the image in the HTML. If this is the case, consider leaving the alt text field empty because Screen Readers will read both the Alt Text and HTML and the user will hear repetition of the same information.

A note about the title attribute - In addition to "alt" text, you may encounter a field called "title" that applies to images and other HTML elements. In Drupal, this field is often labelled "description." The "title" attribute is not an accessibility feature and often actually impedes accessibility. Please do not populate the “title” or “description” field in Drupal.

In-depth examples on choosing appropriate alternative text.

It is important for you to clearly indicate where a user is going when they click on a link.  Links created in in the text field in Drupal need to make sense out of context. Screen Readers users often navigate through a page by jumping from one link to the next, so all the user hears is the actual text that is linked. We have modeled this accessibility strategy throughout this page by labeling links with information about their actual destination.  For example, the link text below in this section says “accessible links” in contrast to saying “click here.” It is also important not to have the same link text on a page go to different pages (or URLs) or to excessively repeat a link multiple times on page.

With this in mind, if you have not labelled your links appropriately, a visitor to your site might hear:

• read more
• click here
• p-d-f
• next

Naturally, that makes your content inaccessible to screen reader users. Instead, your link text should be unambiguous:

• our curriculum
• application guidelines
• update your information

Screen Reader software does not always let the user know if a link opens in a new window.  This can cause someone to become lost in their navigation, as their back button no longer works and they no longer have access to the content they were reviewing prior to clicking a link. If your link opens in a new window, an email window, or a file (such as a PDF, DOC, etc.), it is important to clearly indicate this information in the link following the link text.

• Buy tickets (opens in a new window)
• April newsletter (PDF)
• John Smith (email link)

More on making accessible links

Using semantic HTML correctly increases the accessibility of web content, however, incorrect use of HTML can detract from the content's accessibility. For example, use I to emphasize text and B to strongly emphasize text with a sentence or paragraph. Use the ” option for quotes only (not solely to create a text indent).

Use Headings in numerical order

Drupal provides web editors with the ability to choose the type of Heading they would like to use on their pages.  These Headings are labeled in numerical order, such as Heading one, Heading two, and Heading three. Because the Headings are sized different from one another, web editors often make the mistake of using Headings out of order to impact the visual appearance of their page.  Screen Reader users rely on Headings to be in order to navigate a webpage.  If the Headings are out of order, the Screen Reader software will jump around on the page, following the order of the Headings and the user will get lost.

Here is an example of how headings should be structured in a continuous hierarchy. This is correct semantic structure::

• Heading one (used once, generally containing the page's title)
  • Heading two
  • Heading two
    • Heading three
    • Heading three
      • Heading four
    • Heading three

Use bulleted and numbered lists where appropriate

Lists of items should use propered coded unordered/bulleted or ordered/numbered lists. Screen readers describe the type of list and number of items, thereby improving the ability for users to navigate and work with this type of content.

More about using correct semantic structure

For your video and audio content to be accessible, you must include transcripts. For individuals with hearing, sensory, or cognitive impairments captions are necessary to allow them to access videos on your site. Similarly, for individuals who have visual impairments, audio descriptions is necessary to provide them with access to content. If your video content includes charts, diagrams, or other highly visual elements, you must include an audio description that explains what is in the visuals.

If YouTube is your video hosting platform, YouTube offers an easy-to-use captioning tool . We do not recommend using the YouTube auto-captioning. The auto-captioning feature does not provide accurate translation. However, you can use the auto-captioning tool to create a "rough draft" of your captions, which you can download and edit before uploading as your final captions. Additionally, the YouTube captioning tool allows you to type the content as the video plays and assure the content is accessible.

Though the creation of and inclusion of captions is the editor's responsibility, UVM does offer captioning services for high priority content through Student Accessibility Services. You can discuss your project with Student Accessibility Services to determine the best option for captioning and audio describing your site’s content.

Captioning services available at UVM

Many web content contributors and editors are tasked with writing web content even though they are not specifically trained as writers. The prose that appears on your pages can have an impact on the accessibility of your content. Unclear or confusing writing is an accessibility barrier to all readers, but can be especially difficult for people with reading disorders or cognitive disabilities. This is perhaps the most overlooked but also the most critical part of web accessibility. The good thing is, if you learn to write with accessibility in mind, it will improve your overall writing in most all contexts.

More about clear and simple writing

As stated above, it is important to always mark a a link to a PDF with a simple "(PDF)" at the end of the link, so that people understand they're about to launch a PDF.  

It is also necessary for a PDF to be “Tagged” so that Screen Reader software can read it.  A logical tagged structure tree is used within each document to provide a meaningful reading order for Screen Readers, as well as a method for defining structural elements role and relationship to page content. Within this tag structure, other properties such as alternative text and replacement text can be provided.

PDFs are more likely to be accessible if they are created from an accessible digital document, such as an accessible Word file.  Microsoft Office tools have a built in Accessibility Checker that can be used to improve your document before it is converted to PDF. Microsoft provides instructions on how to use the Accessibility Checker in their Office tools.

The full Adobe Acrobat software (not just the Reader software) is required to create and manipulate the tags in a PDF document.

WebAIM's discussion of tagging

Tables in HTML were designed to present tabular data using column or row headers (or both). If you choose to use a table for layout or design purposes only, there are some important things to keep in mind. Screen readers will read an HTML table in a linear fashion which may, or may not be appropriate for the content. If the content in a table does not linearize correctly, you should not use an HTML table. 

Creating accessible layout tables

Data tables in HTML must be coded properly to be accessible. This includes using header and caption elements appropriately and associating the correct cells with them using the scope element.

How to code your HTML table tables correctly

Graphics such as org charts, flow charts, graphical diagrams, etc., at a bare minimum, need to link to a text equivalent of the information explaining what is happening in the graphic.

However, it is best to design graphics with accessibility in mind from the start. For example, an org chart could be depicted as an outline using nested lists. If a graphic version is preferred,  you will also need to provide a link to an accessible text-based outline version that you create. If you go this route, both versions will need to be updated simultaneously going forward. For this reason, many prefer a text version because it is more universally accessible.

The University of North Georgia has done a great deal of funded work around accessibility guidelines and makes their findings available for all. Here's how UNG tackles organizational charts.