10 Tips for Creating Accessible Course Content
Updated: February 26, 2018
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 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:
Also not a list:
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 (
- ) or unordered list (
- ) 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:
- 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:
5 Publishing Firms Doing Captioning Right
In the world of publishing, people are going digital. As a result, this outburst of digital content has created greater access to educational materials for a wider range of people. While digital content is easier to disseminate, it can also be made…
Q&A: McGraw-Hill’s Roadmap Towards Greater Accessibility
Through their Roadmap to Accessibility, McGraw-Hill is steadily incorporating its accessibility initiatives into their products. As a result, McGraw-Hill is becoming a leader in accessible publishing. While they are the first to admit that it’s not always a clear road ahead, McGraw-Hill’s…
4 Reasons You Need Caption Encoding
What is it? Caption encoding is when captions are embedded into the video and presented as a single asset. Typically, captions are added onto a video as a “sidecar file,” but this method is intended for online video where one can upload…