Go to any online learning conference and you’re sure to hear concern about universities being sued for web accessibility issues under the Americans with Disabilities Act. Making your course site accessible can feel overwhelming, but let’s take a look at a few ways you can make some progress.
Use Headings for Content Structure
Think about how you scan a page to look for large, bolded text to get an idea of what’s important and how the content is laid out. Screen readers do essentially the same thing, provided the page uses actual headings (rather than text that has been bolded or just uses a larger font). True headings range from H1-H6, largest to smallest. Your WYSIWYG editor likely has a formatting dropdown menu like this one in D2L:
Typically, you’d use the top-level (H1) to indicate a page title or main content heading, second-level (H2) for major sections, then third-level (H3) for subsections, and so on. Doing so will give your page a hierarchical structure that makes it easy for both sighted users and screen readers to navigate from the top-level to the lower level elements. And consistency is critically important—your hierarchical structure should be applied uniformly throughout your course site.
Provide Alternative Text to Images
Visually impaired users often rely on screen readers to access the information on a webpage. Screen readers can’t interpret images, charts, graphs, or color-coded information, so you must provide the text equivalent in the form of an “alt” tag.
Modern learning management systems make this easier, because they prompt you for alternative text when you insert an image into your webpage. Suppose you’re Professor Simpson and want to add a photo of yourself to your welcome page. You’ll want to provide the text equivalent of the content, so the alt tag should contain the text “Professor Simpson.” Again, your LMS should give you a dialog box similar to this one:
The HTML code would look something like this:
<img src=”professor-simpson.jpg” alt=”Professor Simpson”>
And when you placed your cursor over the image on your web page, the alternative text would display:
Now, I grant you that conforming to ADA guidelines can quickly get more difficult when dealing with more detailed images. Fortunately, the W3C publishes this complex images web accessibility tutorial that makes things easier And WebAIM has this detailed article on adding alternative text to images.
Add Accessible Information to Tables
You probably use tables to present tabular data, like a course schedule or assignment rubric. These can be made more accessible with some relatively easy changes, but you’ll have to be comfortable editing the HTML source code.
First, add a caption that indicates the content of the table. You’ll do this in the HTML code of the page, which you can see in your LMS editor. Use the <caption> tag to indicate to screen readers that the text is associated with the table. The <caption> tag should immediately follow the opening <table> tag:
<table>
<caption>Favorite Coffee and Donuts</caption>
…
</table>
It’s very important to identify row and column headers. In your HTML editor, make sure that the table headers use the table header tag <th> instead of the default table data tag <td>. In my example below, the column headers are Name, Favorite Coffee, and Favorite Donut. The row headers are Heather and Eric.
Favorite Coffee and Donuts
| Name | Favorite Coffee | Favorite Donut |
| Heather | Starbucks | Old fashioned |
| Eric | Dunkin Donuts | Chocolate glazed |
We also need to associate the cells with the appropriate headers. We do this using the scope attribute, which indicates whether the table header is a column header or row header. The markup would look like this:
<table border="1" cellspacing="0" cellpadding="0">
<caption>Favorite Coffee and Donuts</caption>
<tr>
<th scope=”col”>Name</th>
<th scope =”col”>Favorite Coffee </th>
<th scope=”col”>Favorite Donut</th>
</tr>
<tr>
<th scope=”row”>Heather</th>
<td>Starbucks</td>
<td>Old fashioned</td>
</tr>
<tr>
<th scope=”row”>Eric</th>
<td>Dunkin Donuts</td>
<td>Chocolate glazed</td>
</tr>
</table>
Adding these elements to your table HTML can be time consuming, but doing so goes a long way towards making your page accessible to visually impaired users.
Make PDFs Accessible
The single most important thing to remember about PDFs is that you should avoid using scans of text. Scanning a page typically produces an image of the text, not actual text (although some OCR programs can convert the scan to text), and the resulting PDF is impossible for screen readers to translate. A truly accessible PDF will use actual text, be tagged and have textual representations of all content, including images and other graphics. WebAIM provides this useful guide to creating accessible PDFs.
Caveats
Aligning your page headings, images, tables, and PDFs with these guidelines will go a long way toward making your online course accessible, but it’s really just a start. All audio and video content needs to be available in text equivalents. This means that videos should be captioned—and providing captions for all the videos in a course is typically a huge undertaking. Some video platforms will create automatic speech recognition (ASR) generated captions, but ASR technology is far from perfect, as anyone who’s had to decipher Outlook’s voice mail speech-to-text translation can attest.
Additionally, detailed transcripts need to be available for users who can’t access content from audio or video media. These can also be time consuming to create—especially after the fact. I’ve found that working from and saving a script when creating audio or video content ultimately saves me a lot of work.
Finally, please remember that while the methods I’ve outlined are good steps toward the goal of aligning your online course with ADA requirements, you shouldn’t take them as the final word or legal guidance. Use them to start the process—and to start a discussion about meeting ADA standards with the stakeholders at your institution.