Make Your Course Accessible

nullCoursera Accessibility Guides

Structuring and Formatting Coursera Content for Accessibility

Main Links
Headings

Heading levels should be organized hierarchically, just as in a topic outline. The page title in Coursera is always automatically coded as Heading 1. Heading 2 is used for all subtopics on the page, Heading 3 for sub-subtopics, and so on.

To add a Heading Level to your Text

  1. Enable Edit mode in the top right corner of your screen.
  2. Click on the Styles dropdown menu on the left side of the screen ("Body" is displayed as the default style).
  3. Select the appropriate heading level, starting with Heading 2.

Additional Information

  • To learn more about why logical structure is important to visually impaired users, visit  WebAIM's Headings.
Lists

To Create Accessible Lists in Coursera

You must have the Body text style selected to use a list tool. If the list tools are grayed out on your toolbar, it is likely because you have selected a style that does not allow list formatting.

  1. Enable Edit mode in the top right corner of your screen.
  2. If not already selected, set the text style to Body.
  3. Select the appropriate list tool from the toolbar.

Keep in mind that depending on the content, some list styles are more appropriate than others. For instance, if you are providing instructions that must be followed in order, you should choose an ordered (numbered) list style. If the list data isn't sequential, you should use an unordered (bullet point) list style.

Links

When making links in Coursera, link text should be unique within a page. There is only one way to format an accessible link in Coursera.

To Create Accessible External Links

  1. Enable Edit mode in the top right corner of your screen.
  2. Type your desired link text.
  3. Highlight the text.
  4. Select the Insert Link option from the toolbar.
  5. Copy the URL to your clipboard.
  6. Paste the URL into the URL Link field.
  7. Click Done.

While Coursera offers an Accessibility Description field in their link creator, it is unnecessary to use it. Adding an Accessibility Description to a properly formatted link can introduce redundant information, which may hinder the experience for screen reader users.

Points to Keep in Mind

  • Links should be descriptive and make sense out of context. Link text such as “click here” or “more” does not give sufficient information about the link destination.
  • Avoid using identical link text for different destinations on the same page.
  • Using URLs as links is not a descriptive way of providing links, can be cumbersome for all users, and can pose problems for screen reader users and voice input users because URLs are often lengthy and difficult to read and understand out of context.

Additional Information

Tables

General guidelines

  • To ensure proper reading order, organize information left to right and top to bottom.
  • Provide a text summary of the content if the table contains complex data.
  • Don’t use tables for content layout. Only use tables for tabular data.

Because Coursera's table creator doesn't have a field for table captions, you should use headings to introduce your tables. If the page contains multiple tables, consider numbering them (e.g., "Table 1: Name," "Table 2: Name," etc.) to reference individual tables in the body text.

Be aware that Coursera only allows the user to designate the first row as table headers. The first column cannot be marked as row headers. 

Additional Information

Color

Using color can help convey information, but many users cannot benefit from the use of color due to visual impairment or color blindness. All users benefit from color contrast that makes information easy to read.

General guidelines

  • Ensure that the contrast between text and background is high enough to be easily readable.
  • Don't rely on color alone to convey information. Combine with visual cues other than color.
  • Avoid combinations known to be problematic for colorblind users (e.g. red/green). 

Color in Coursera

Although Coursera does not allow users to change the text and background color, you still need to ensure that informational images added to a page meet color contrast guidelines. Text inside charts, graphs, and diagrams must have sufficient color contrast ratios. If an image contains text, it must meet color contrast requirements in order to be accessible.

You can manually check color contrast with tools like WebAIM’s Color Contrast Checker. To meet WCAG 2.0 level AA requirements, the contrast ratio must be at least 4.5:1 for normal text and 3:1 for large text.

How to Use WebAIM’s Color Contrast Checker

  1. Open WebAIM’s Color Contrast Checker.
  2. Use the tools under the Foreground section to enter your text color. You can use a hex code, RGB value, or use the eye dropper tool to sample your text color.
  3. Use the tools under the Background section to enter the background color.
  4. Check the report below to ensure that your document content meets WCAG AA guidelines.

If you use the Eye Dropper Tool to sample your document colors, be sure that you select a pixel from the center of the character. This will give you the best sample for the font color. Pixels near the edge of a character will not be an accurate representation of the font color.

Additional Information

Images

Coursera uses Accessibility Descriptions instead of alternative text to describe images.

General Guidelines

  • Be specific. Consider the purpose of using the image and the context it is being presented in.
  • Be concise. Coursera Accessibility Descriptions are limited to 125 characters.
  • Don't start your description with "An image of..." The screen reader will tell the user that an image is being described.
  • For complex images, provide a brief summary and describe the contents more fully in the text.
  • For icons, describe the purpose of the icon rather than its shape (e.g. Describe the magnifying glass icon for searching as "Search" rather than "magnifying glass").

Adding Alternative Text to Moodle

  1. Enable Edit in the top right corner of your screen.
  2. Click on the image you'd like to add a description to.
  3. Select Accessibility Description from the pop-up menu.
  4. Write a description in the description box.
  5. Click Done to save the description.

Keep in mind that Coursera saves Accessibility Descriptions to the metadata on each image in the library. That means that the descriptions cannot be updated on individual pages to suit the context of the image. If you'd like to use the same image in two different places with different descriptions, you'll have to upload another copy of the image and write a second description.

Decorative Images

If the description field is left blank, Coursera will automatically classify the image as decorative. Automatic accessibility descriptions will not be applied to images marked as decorative.  

Accessibility settings for course images can be updated in the Asset Library.

Additional Information

Language

Coursera offers limited support for language accessibility.

Users who want to adjust the interface language for their individual preferences can do so by changing the account language.

In the case of multi-language courses (e.g., a language class that teaches the Korean language), there is no way to add the language attribute directly to page content authored in the editor. To ensure multi-language content is read by assistive technology like screen readers and other text-to-speech assistive technology, the workaround is to upload a Word document that has been formatted for multiple languages. Here are the steps for doing so:

  1. Add language markup to the Word document
  2. Sign into Coursera.
  3. Upload the Word document by following the instructions for embedding file attachments in Coursera (note: you must be logged into Coursera to access these file attachment instructions).