Online accessibility can seem daunting. There are numerous aspects to consider, and figuring out where to start can be a challenge. Fortunately, the World Wide Web Consortium (W3C) has established a set of accessibility standards, the Web Content Accessibility Guidelines (WCAG). The latest version of these standards are known as WCAG 2.0 and are built around four guiding principles—Perceivable, Operable, Understandable, and Robust. In the service of those principles, WCAG 2.0 established 12 guidelines and 61 criteria underneath those guidelines.

Understanding and applying all 61 criteria is a challenge but there are resources available to help. One such resource is WebAIM’s WCAG 2.0 Checklist; another is the OLC and 3PlayMedia webinar on WCAG 2.0. In this webinar, the presenter provided 10 tips for making online content accessible. The first five tips are summarized here, and the next five will be featured in Part II next week. For more information, or if you want to learn about all 10 tips now, check out the webinar itself and the resource links.

1.      Use Consistent Page Titles and Headings

For users who rely on screen readers to interact with content, this step is crucial. Consistent and clear page titles help to orient blind or low-vision users who are unable to see the full layout of the site. Headings, such as those used for each sub-section of this blog post, also allow those using screen readers to quickly navigate through the page by listening to the heading titles, then choosing which one they want to hear read in full. Headings can be added during document creation (in Microsoft Word, for example, through the use of styles) or in HTML code by using the <h1>, <h2>, <h3>, and so forth tags. It is strongly recommended that content creators use headings rather than bold or italics for section titles, as screen readers can’t recognize bold font as anything other than emphasis.

2.      Use Descriptive & Unique Hyperlinks

This is another strategy to help screen reader users. When providing a link, the link text should describe where it is going—for example, SPS DL Homepage is far preferable to “click here” or http://dl.sps.northwestern.edu. (Try reading the full URL out loud and imagine having to listen to that every time an article contained a link!) In addition, link titles within a page should be unique. If you have two discussion board posts, don’t label both links as “discussion board post.” That will make it difficult for users who are skimming through content to find the link they want. Instead, be more specific: Q&A Discussion Board and Module 2 Assignment Discussion Board are much better link descriptions.

3.      Use Alt-Text, Captions, and/or Long Descriptions on All Images

Every image must have alt-text, which can be set in Canvas on the Embed Image pop-up window. This alt-text should be a concise description of the information conveyed by the image. Per WebAIM, alt-text serves the following 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.

When writing alt-text, consider the context of the image. What information is the image conveying to users? (Sometimes the answers is none, if the image is purely decorative, and this is acceptable! The alt-text can be left empty if it serves no informational purpose.) What information about the image is provided in the text? If there is a sufficiently descriptive caption, then the alt-text may be left empty as well.

It is important to note that empty alt-text is different from no alt-text. Having no alt-text means that within the page code, the alt-text field simply doesn’t appear, and thus can’t be read by a screen reader (or any other software). An empty alt-text field would appear in the code for the image as alt=””, which would tell the screen reader that while there is an image, no description has been attached.

4.      Create Accessible Documents

Standards of accessibility apply to downloadable documents as well as online-only content. Many of the strategies applied to online text—clear headings, descriptions on images, good color contrast—can also be applied to document design. In addition, many word processing programs have basic accessibility checkers built in. These checkers don’t necessarily cover every aspect of accessibility, but they can be a good start. Finally, it is generally advised to save downloadable documents as PDFs whenever possible. This allows for documents to be technologically accessible as well—not everyone is able to open .docx files, for example, but there are numerous free options for PDF readers that any student can obtain.

5.      Create Accessible Multimedia

One of the most well-known accessibility features is video captions. However, they are only one of many items needed to make multimedia—video, audio, and audio/video recordings—accessible. All video recordings must have captions that describe all relevant sound on screen, not just dialogue. For example, in a movie, if an explosion happens off-screen, it needs to appear in captions to explain what the characters are reacting to. Any audio recordings must have complete transcripts available, also including any relevant non-dialogue sounds. Captions and transcripts are both much easier to input if a script is available, which is why we advise faculty to write scripts for their multimedia.

Check back next week to learn about keyboard controls, color contrast, and more. Have questions about accessibility in your course? Leave a comment or contact the DL team.