Skip to main content
Pepperdine | Community

Courses: Rich Text Editor and Accessibility

What Does It Do?

You can use the Accessibility Checker in the CKEditor toolbar to inspect the accessibility level of content created in the editor and immediately solve any issues that are found.

The Accessibility Checker presents any accessibility issues with each item in the text box, one at a time. For many issues, the Accessibility Checker gives you a "Quick fix" option. If a "Quick fix" is not available, the checker will describe what needs to be done to fix the issue. This feature is very helpful, although it cannot ensure your course content is 100% accessible.

The Sakai community is committed to accessibility; visit the Sakai LMS accessibility statement to learn more. The community regularly reviews the platform for compliance and works with institutions and vendors to address any issues that are discovered so the service is usable by people with different abilities.

How You Can Use It

  • Help your course meet accessibility standards by quickly adding alternative text (ALT text) to images. ALT text is what a screen reader reads to an individual when it encounters an image.
  • Ensure that your paragraph formatting and headings are optimized for screen reader accessibility.
  • Use the CKEditor Accessibility Checker to quickly add headers to tables. Users of screen readers cannot read tables the same way sighted users do. While sighted users can tell at a glance what column and row a given cell is associated with, a screen reader user needs a table to include appropriate headers and captions so that they can match up content in columns and rows.

Instructions

  1. Create your content in the CKEditor, e.g. select "Edit" on a page.
  2. In the rich text editor, select the "Check Accessibility" button. The icon looks like a little human inside a circle.
  3. Review the identified issue(s) and use the window to take action.
    • Error: Items listed as an error should be fixed. The checking engine is 100% certain this is a problem.
    • Warning: Items listed as warnings indicate likely issues but not 100% certainty. If it is a legitimate issue, use the option(s) and implement the fix(es). If a false positive, you can ignore the notice.
    • Notice: Items listed as notices indicate possible issues that require manual review. They may be errors, but may also be false positives. If a false positive, you can ignore the notice.
  4. Select the "Quick fix" button to implement the fix.
  5. Continue editing, check again if needed, and save your content.

Common Problems and Quick Fix Options

Images without Descriptions

All images need to have an alternative description (or ALT text) 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.

Steps to Resolve
  • Go to the page and select "Edit" to open the rich text editor.
  • Select the "Check Accessibility" button in the editor toolbar.
  • For the warning "Use empty alternative text only for decorative images," enter the description in the "Alternative text" box.
  • Select "Quick Fix" to update the content.
  • Finish the edit with the appropriate button (e.g. Update Options, Save, Post, Continue, etc.).

Note: You may also right-click the image, select "Image Properties," and enter the description in the "Alternative text" field. Select "Ok" when done.

Back to top

 

Manually Formatted or Missing Headings

Structuring your document with headings helps all users. It also allows people using assistive technologies to navigate the page and "skim" content to get to what they need. To accomplish this, we must use the formal heading styles (e.g. Heading 1-6). 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 manual formatting was used rather than the official heading style. However, as the content creator, you should always use the appropriate heading style by selecting it from the drop-down menu in the editor. 

Steps to Resolve
  • Go to the page and select "Edit" to open the rich text editor.
  • Select the "Check Accessibility" button in the editor toolbar.
  • For the warning "Paragraphs must not be used for headers," choose the desired heading level in the "Header level" drop-down menu.
  • Select "Quick Fix" to update the content.
  • Finish the edit with the appropriate button (e.g. Update Options, Save, Post, Continue, etc.).

Note: When creating content directly in the rich text editor, please use the 

Back to top

 

Tables Missing Headers

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 the content and structure are "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).

Steps to Resolve
  • Go to the page and select "Edit" to open the rich text editor.
  • Select the "Check Accessibility" button in the editor toolbar.
  • For the warning "Data tables should contain a header," choose the desired header position (Horizontally, Vertically, or Both).
    • Horizontally will turn the first row into the column headers.
    • Vertically will turn the first column into the row headers.
    • Both will make the first row and the first column headers.
  • Select "Quick Fix" to update the content.
  • Finish the edit with the appropriate button (e.g. Update Options, Save, Post, Continue, etc.).

Note: You may also apply headers to your data table directly. Right-click the table in the rich text editor. Select "Table Properties." From the "Headers" drop-down menu, select "First Row," "First Column," or "Both", and then select "OK." We also recommend entering a "Caption" in the Table Properties to act as a title for your data table and provide the purpose of your table.

Back to top

 

Manual Lists

Lists help us process sequences or groups of items in a logical manner. When writing lists, always use the formal list options in the rich text editor (e.g. Numbered Lists or Bulleted Lists).

Steps to Resolve
  • Go to the page and select "Edit" to open the rich text editor.
  • Select the "Check Accessibility" button in the editor toolbar.
  • For the warning "List items should be marked using list markup," note where the error is located. Exit the checker. Go to the problematic text. Select the text and choose the appropriate list option in the editor toolbar (Numbered List or Bulleted List). Edit your content as needed, e.g. remove any manual numbers or manual characters like asterisks or hyphens; add line breaks; or modify the list items.
  • Finish any remaining edits and save your work with the appropriate button (e.g. Update Options, Save, Post, Continue, etc.).

Note: Best practice is to use the list buttons in the rich text editor when writing your content. The accessibility checker will not catch all possible versions of lists that you may write.

Back to top

 

Other Accessibility Items to Check

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.

Table of Common Items to Check for Web Accessibility Compliance
Item Short Description Long Description
Logical Reading Order Verify that headings are used and flow in a logical reading order that aligns with the content. 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). Use the "Paragraph Format" drop-down menu of the rich text editor to set or change headings on text.
Place Links on Descriptive Text 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. 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 Use the numbered or bulleted list options in the rich text editor. 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 Avoid placing light text on a light background or dark text on a dark background.

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. We must make sure that the colors have adequate contrast and meet minimum accessibility standards.

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.

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 Verify or provide captions and audio descriptions for all videos.

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, but this is not an exhaustive list.

Back to top

 

See Also

 

← Back to Faculty Guides for Courses.

← Back to Accessibility Guides