Accessibility considerations for course materials
On Udemy, your video content and course materials will go together, reinforcing what you’ve taught and adding new skills. So to make sure your whole course is accessible, anything you provide with your course should be accessible.
In this section we’ll cover accessible course materials in four parts:
- Keep your content organized and break the text into shorter paragraphs with distinctive headings. This will make it easier to scan and more readable for all users.
- For all documents, provide a table of contents at the beginning or a summary (in a few sentences or in a bulleted list) of what’s to come.
- Include a glossary of terms and their definitions as a downloadable resource to help users as they go through the course. It’s also ideal to include a downloadable resource or link to any slides you may be using.
- Always check your spelling, grammar, and readability. Readability refers to how easy a passage of text is for someone to read. It may include factors such as sentence length, syllable density, subject complexity, and word familiarity. Find a colleague or friend to read over your course content and try out your exercises as a final check to ensure your course is accessible!
Making documents accessible
Screen readers (such as JAWS, NVDA, or Voiceover) used by the visually impaired are able to not just read the text on the page, but also convey the way it’s organized into headings, subheadings, and list items. For instance, while a person reading visually sees a page with large, bold text indicating section titles, a visually impaired person is told what’s a headline through what’s called “semantic markup.” This meta information is crucial for accessible documents. Fortunately, many word processing programs and apps, such as Microsoft Word and Google Docs, have this built-in.
It is also important to know what makes things more difficult for a screen reader. Merged cells in a table, for example, can be harder to navigate and understand the organization when using a screen reader. Plus, when formatting is done in a way that is not semantic, screen readers may deliver confusing information. For example, if you use an asterisk and a tab for a bullet, the screen reader may read it as “tab” or “asterisk” instead of “bullet point.”
This section includes only a few topics for adding semantics to a digital document, but we’ve included several comprehensive resources.
Headings are one of the best ways to make your content more accessible. The use of true semantic and visual headings makes content more readable for both sighted and non-sighted users.
By organizing your content using true semantic headings, which are sometimes labeled as “H1” or “Heading 1” in word processing or slideshow applications, you can ensure screen readers communicate your content accurately. For example, the document’s title should be a first-level heading, a section title should be second level (e.g. H2), and subsection headings might be third- or fourth level. Here’s an example:
Page Title (Heading 1)
Section Title (Heading 2)
Text content here.
Sub-section heading (Heading 3)
Text content here.
Note: Avoid skipping heading levels — for instance, don’t skip from a first-level heading to a third-level heading.
True bulleted and numbered lists
Always use the bullet point (unordered list) and numbered list (ordered list) functions of word processing or slideshow applications instead of manually styling the text with tabs, asterisks, and numbers. Screen readers will recognize these list types and present your content properly.
Simple table structures
Be careful with spanned (or merged) rows or columns and avoid multiple levels of table headers. Merged cells can be confusing to explain to learners and for screen readers to interpret. When possible, also avoid using tables for visual layout.
Ensure links are descriptive
Avoid stand-alone phrases that lack context like:
- “Click here”
- “More information”
- “Read more”
We recommend these alternate phrases that provide more context:
- “You may <link start>download the syllabus<link end>”
- “The <link start>citation to ____<link end>”
- “<link start>Additional ____ <link end> are available from this link”
Also avoid using URLs alone as links, such as www.abcde.com, unless the document is intended to be printed or if the URL is relevant content.
Alternative text for images/media
A picture is worth a thousand words, but learners living with vision loss or blindness, will rely on alternative text for your images. Always provide clear and context-driven alternative text for images in your documents, slide presentations, etc. This text will be read aloud to those using a screen reader, or other assistive technologies.
- Many tools allow you to provide alternative text for images. These boxes are sometimes labeled with phrases like “alt text,” “alternative,” or even “image description.” If present, use this field to provide alternative text for the image.
- Alternative text should present the meaning of an image, not necessarily just a description. For example, alternative text should say, “an image of gears representing Settings” rather than “gear icon.” If you had to remove the image, what text would you put in its place? Alternatively, if you had to describe the image to someone over the phone, think about what you might mention to them and allow that to inform your image description.
- If an image has no relevant content or function, is purely decorative, or the alternative text is provided in nearby text, then the image should have empty alternative text if possible. Some word processing or slideshow applications have an option for “blank” or “empty”.
- Avoid adding words like “picture of,” “image of,” or “link to.” Assistive technology will automatically take care of this and let users know they are on an image.
- Use the fewest number of words possible without losing clarity or context.
- For PDF documents, Adobe Acrobat Pro can verify whether your document conforms to accessibility standards. You will find a link in the Resources section.
Example image with alternative text
Many times, the copy will default to the image file name which may not be helpful.
Default Alt Text (name of file): adult-kid-tech_revised_220811.jpg
Modified Alt Text: On a couch sits an adult working on a laptop and a child, with headphones, viewing a tablet.
Use strong color contrast
Color contrast is a measurement of the difference in brightness between two colors, which is expressed as a ratio from 1:1 (bad) to 21:1 (excellent). Make sure to use high color contrast, especially between your text and the background. Images that include text should also have high contrast. To help illustrate the difference between low and high contrast combinations, we’ve checked a few examples of colored text on white backgrounds below.
The minimum contrast ratio to qualify as accessible content is 4.5:1. Here are examples of color combinations that fail to meet the threshold and should be avoided:
- Yellow text – score: 1.07:1
- Pale green text – score: 1.12:1
- Orange text – score 2.14:1
- Pink text – score: 3.14:1
- Red text – score: 4.0:1
The color combinations below are good choices as they provide sufficient contrast (ratio of 4.5:1 to 7:1):
- Blue text – score: 4.68:1
- Dark green text – score: 5.14:1
- Purple text – score: 6.95:1
You’ll want to use the colors listed below as they provide the best contrast (ratio over 7:1):
- Burnt orange text – score 7.43:1
- Dark grey text – score: 12.63:1
- Black text – score: 21:1
Summary of best practices for accessible course content
- Keep your copy organized and break the content into shorter paragraphs
- Provide a table of contents or a summary for all long documents
- Include a glossary of terms as a resource
- Check spelling, grammar, and readability
- Use semantic markup so assistive technologies may function properly
- Organize your content using true headings
- Use true bulleted and numbered lists
- Use the simplest table structure possible
- Ensure links are descriptive
- Provide appropriate alternative text for images in your documents, slide presentations, etc.
- Use strong color contrast for text and images
Links to other accessibility and inclusivity articles