10 Tips for Creating Accessible Course Content

Professors and instructional designers need to make sure all their students enjoy equal access to course materials, including students with disabilities. To help educators tackle that challenge, web accessibility expert Janet Sylvia presented a webinar on 10 tips to creating accessible course content. Her 10 tips for inclusive design are summarized below.

1. Create an Accessibility Statement

An accessibility statement is an official, written commitment to supporting accommodations and inclusion for all students. It should outline specifics about how to submit accommodation requests and whom to contact for remediation. It can also include links to accessibility information for products or software used in the course.

Your university hopefully already has an accessibility statement on its website. If your institution doesn’t have one, write your own and post it on your course homepage and syllabus.

2. Provide Semantic Structure

Semantic structure is a way of labeling sections of a document to give it a logical, easily navigable hierarchy. In Word documents, these are called “styles.” In PDFs, they are called “tags.” And in HTML, they are “headings.” A properly marked up semantic structure is helpful for people who use screen readers. They can easily scan headings to get a sense of what a document contains.

Headings

Headings are a simple way to give documents semantic structure. Assign the H1 heading to the document title. There should be only one instance of H1 in a document or web page. Section titles or chapters can have the H2 heading. Sub-sections get H3, and so on.

In HTML, simply wrap the heading text in heading tags like so:

Chapter 7: Photosynthesis

. Your CSS style sheet should dictate the visual appearance of different heading levels. This helps headings stand out and help students scan documents visually as well.

Do not use bold, italics, or font size to create the visual appearance of a document structure, since that will not be accessible for a screen reader.

Table of Contents

In Word documents, make sure to include a Table of Contents for longer documents. In PDF, this section is called “Bookmarks.” You must use the program’s actual Table of Contents function (found on the References tab in MS Word 2013) instead of just typing out section headers by hand.

The bonus of using the official table of contents function is that it automatically updates to new or edited headers and changing page numbers with the click of a button.

Strong & Emphasis

Screenreaders can indicate if text is styled as strong or emphasis. Make sure to use these style markers to convey emphasis rather than changing font size, color, or capitalization.

3. Use True Lists, Columns, and Tables

It’s easy to create the appearance of lists by adding dashes or asterisks at line breaks like so:

Not a list:
– Apples
– Pears
– Bananas

Also not a list:
> Carrots
> Potatoes
> Corn

These are not true lists, since they lack the text markup that lets a screenreader identify it as such.

In Word, you can create true lists using the bulleted or numbered list function in the Home tab. In HTML, use the ordered list (

1. ) or unordered list (

1. ) markup to give lists semantic structure. Again, visual appearance of bullet points can be adjusted in your page’s CSS style sheet.

Similarly, avoid using spaces, line breaks, and tabs to create the illusion of columns or tables. This will cause a screen reader to read a table from left to right, instead of vertically. See the image below for an illustration of inaccessible vs. accessible columns.

4. Maximize Readability

There are simple steps you can take to make your text more readable for all students, but especially for students with cognitive disabilities. For instance:

1. 1. • Divide large blocks of text into smaller chunks. Use white space.
      • Avoid long or overly complex sentences.
      • Use at least 12 point Sans Serif font

Fun fact: the reason why Sans Serif fonts are recommended is because screen magnifiers don’t respond well to Serif fonts.

5. Provide Alt Text

Alt text is required for all non-text content, such as images, graphs, charts, etc. It should be a clear, concise description that conveys the meaning or purpose of the media content. If alt text alone cannot convey the image’s meaning, you can provide a long description in surround text or in a separate document.

If an image is purely decorative, use the null tag “” for alt text. This minimizes irrelevant alt text for the student to read.

To add alt text in Word, right-click on an image, go to properties, and navigate to the text box. In HTML, include alt="" within your <img /> tag.

6. Avoid Color Coding

If color is the sole differentiator for categories or information, that content will be inaccessible to blind, low-vision, or color blind students. Make sure that if you color code content, you include another way to determine categories, such as text labeling.

Color-coded highlighting is not accessible to visually impaired students, but it may be helpful for students with cognitive or learning disabilities.

7. Ensure Sufficient Color Contrast

Background color would contrast with text color enough to make the text stand out clearly. If you use a background image or pattern, make sure that it doesn’t make the overlaying text illegible.

Without enough color contrast between text and background, low-vision or color blind students may have difficulty reading it.

Here’s an example of an inaccessible PowerPoint slide (left) and an accessible version that conveys the same information with better readability (right).

You can use a free color contrast analyzer that works on both Mac and PC devises. This is a great way to make sure that your materials are designed accessibly.

8. Write Descriptive Hyperlink Text

When you add a link to a document or webpage, make sure to give the link descriptive text. This is important for people who use assistive technology that makes a list of all hyperlinked items on a page. The links must make sense out of context, so “click here” or “email” are not helpful.

The image on the right shows a real-life example of a link list with inaccessible hyperlink text.

Using URL text is also discouraged, because it is not descriptive and is a pain to listen to with a screenreader.

What should your hyperlink text say? It should describe the destination of the link. Make sure to give unique text for different destinations; e.g., don’t have 2 links on a page with hyperlink text “upload file” that lead to different pages.

9. Use Accessibility Checkers

Any software you use to create course content should have a native tool built-in to check for accessibility. Use these once you’ve created a document, and it will give you recommendations for fixing errors.

In MS Office 2010 programs, go to File > Check for Issues > Check Accessibility.

For MS Office 2013, find it at File > Info > Check for Issues > Check Accessibility.

In addition to automatic checkers, make sure to do a manual check for quality control. One helpful checklist for manual remediation is the Section 508 checklist created by the US Dept of Health and Human Services.

10. Make Multimedia Accessible

Video and audio files need to be made accessible to students with sensory disabilities. Audio files need an accompanying text transcript. Videos require a video description of key visual elements. And videos with audio need both of these, plus time-synched closed captions.

—

For more expert tips from Janet Sylvia, check out:

1. • 14 Questions for an Ed Tech Web Accessibility Expert
   • 10 Tips for Creating Accessible Web Content with WCAG 2.0: Webinar Q&A Highlights
   • Tips for Making Web Video & Audio Accessible
   • Tips for Making Online Documents Accessible: Word, PowerPoint, Excel & PDF