Courses: Rich Text Editor and Accessibility

All images need to have an alternative or ALT text description to explain the purpose, context, or content of the image. Do not start the description with an opening like "Image of" or "Picture of." A screen reader will introduce the object as an image, so you will produce redundancy for those using assistive technologies. Focus on the context. For longer descriptions, consider whether it would be best to introduce the image, art, or photograph with the text on the page to benefit all learners.

The exception to the rule is a picture or image that serves a purely decorative purpose with no meaning or value other than aesthetic design appeal. Decorative images should have a blank description so that assistive technology will skip over the object on the page. An example of a decorative image might be an image of a fancy scribble to act as a visual separator on a page. Other than being a design element, it offers no substance or value.

• Edit the page or text object.
• Run the Accessibility Checker.
• Enter the description in the box.
• Select "Quick Fix."

Structuring your document with headings helps users of assistive technology navigate the page and "skim" content to get to what they need. To accomplish this, we must use the formal heading style (e.g. Heading 1-9). Sometimes we make the mistake of simply bolding text and increasing the font size, which is not the same as a true heading. The accessibility checker will do its best to find possible situations where formatting was used rather than the official heading style.

• Edit the page or text object.
• Run the Accessibility Checker.
• Select the heading from the drop-down menu.
• Select "Quick Fix."

All data tables need clear headers that explain the data or information expected within each column, row, or both. This helps all learners since it eliminates a fundamental assumption that content and structure is "obvious." A "horizontal" header sets the first row as the header row which defines the content for each column. A "vertical" header sets the headers in the first column that explains the contents for each row. The choice of "both" allows you to define the first row (column headers) and first column (row headers).

• Edit the page or text object.
• Run the Accessibility Checker.
• Choose the appropriate location for the headers (horizontal, vertical, or both).
• Select "Quick Fix."
• Enter the appropriate labels for each header.

While the accessibility checker is very helpful, it does not catch everything. As instructors, we must follow best practices and check for common issues manually by reviewing our own content.

• Logical Reading Order: When we structure our content on web pages, we need to use heading styles (e.g. Heading 1 (H1), Heading 2 (H2), etc.). Headings must flow logically and when moving downward, we cannot skip heading levels; we cannot jump from Heading 1 to Heading 4, for example. If we have multiple rich text objects on a page, we need to verify that the content headings flow logically. Since the accessibility checker can only check the individual object being edited, you will need to make sure that the next text object on the same page flows with any prior text object that came before (if multiple text objects are on the same page).
• Place Links on Descriptive Text: When you link to other websites or locations, never place the link on generic language like "click here," "this website," or "learn more." Instead, place the web link on descriptive text that explains the destination or action of the link. Consider rewriting sentences so that the link is placed on the objective or the direct object of the sentence. Example: Learn more about how to add a teaching assistant to Courses.
• Use Formal Lists. Did you manually type in a list of items, such as 1), 2), 3) or 1., 2., 3.? Instead of manual lists, be sure to use either the numbered or bulleted list options in the rich text editor to help users of assistive technologies navigate and understand the content more easily.
• Verify Color Contrast: If we place light-colored text on a light background, (or dark on dark) then some of our learners may not be able to see the content or will have challenges reading it. 
• Color and Meaning: We need to be mindful that many people perceive colors in different ways. Some community members have color blindness which may impact their abilities to discern red, green, or other color variations. If we are using color to express meaning (e.g. good/bad, complete/incomplete), we need to include another element such as the verbose text label (meets criteria/does not meet criteria) along with the color so that we reduce the chance that someone without a visual color challenge can still benefit from the context or meaning of the color.
• Video Captions/Transcripts: When we embed or link to video content from our web pages, we need to be sure that each video has at least accurate closed captions that convey the content of the video (audio and video). The best practice is to verify that the videos have the following:
  • Captions: Text descriptions or transcriptions of what each person says in a video. The captions should identify each speaker and include appropriate punctuation and spelling. While automated captions are very good, they often fail to pick up nuances or specialty terms within academia. Review and edit the captions of your own videos for accuracy.
  • Audio descriptions: Additional details about the video to explain visual and auditory items in addition to the speech of individuals within the video. This can include descriptions of content visually displayed on a presentation slide or actions taken by people in the video, such as "Sally enters the room looking agitated." We must provide an equivalent experience by providing information and context to someone that might not be able to see or hear the video. Some platforms support both captions and audio descriptions as separate features, such as Panopto. For platforms that only support captions, then enter the appropriate audio description into the captions themselves or work with the source of the video to augment the captions.
  • Transcript: This is a document or other content that exists outside of the video itself, such as a Word document or PDF. It would contain both the captions of all speakers and the audio descriptions for visual and auditory content from the video.
  • Link to External Source: If the embedded content is a video located externally, such as YouTube, Panopto, or Vimeo, please provide a direct link to the video on the page. This can help anyone that may be experiencing browser or other issues that may prevent an embedded video from playing.

The above items are the most common issues to review.

Reading Order

• Verify that headings are used and flow in a logical reading order that aligns with the content.

Links

• Avoid placing links on generic text like "click here." Place links on meaningful text that helps someone understand where the link will take them or what action the link will do.

Lists

• Use the numbered or bulleted list options in the rich text editor.

Color Contrast

• Use a tool like WebAIM's Color Contrast Checker and Link Color Contrast Checker. Modify any colors as needed.

Color and Meaning

• Combine the color with a text label and/or icon to help all learners understand the context or meaning of the formatting.

Videos

• Verify or provide captions and audio descriptions for all videos.