Formatting accessible Sakai site content with the updated rich text editor

Last week we updated Sakai’s rich text editor and after listening to the Duke Community, we’re deploying a smaller update this Thursday. This update includes:

  1. Add Duke color palette options for block styles
  2. Add the same color options for use on inline styles
  3. Rename the “Normal div” style to “Single space”
  4. Display the styles drop-down in multiple columns instead of a single column
  5. Adjusts the text size of Heading 1 and Heading 2 so previously created content displays appropriately alongside the new styles

Updated Style options in Sakai's rich text editor

How can I edit existing text styles or styles pasted from other sources?

If your content has styles you wish to change or remove, there are several options.

Option 1: Change the style to the Paragraph option. This will remove block level styles including headings.

animation showing how to select the paragraph style in Sakai's rich text editor

Option 2: Use the Remove Formatting button. Remove formatting removes inline styles which commonly come over when pasting from Word, Google Docs, or the web.

animation showing how to remove inline styles in Sakai's rich text editor

Option 3: Under your browser’s Edit menu, use Paste as Plain Text or Paste and Match Style instead of regular Paste if your operating system supports them.

Option 4: If none of these options display your content satisfactorily, we recommend saving the content as a PDF and uploading to Resources where it can be linked from anywhere in your Sakai site.

How can I adjust the font size of my text?

The styles function offers a variety of headings to increase the size of your text. Heading Large, Heading Medium, and Heading Small do not add additional styling other than increased font size via the use of HTML heading tags, while the remaining heading options also change the foreground and background color of the text.

How can I get help?

If you do not see the new styles mentioned above after 10am EDT Thursday, please clear your browser cache. If you continue to experience issues creating content in Sakai, visit our open office hours.

Why were these changes made?

There are three drivers behind the recent changes to Sakai’s rich text editor.

1. Students ask for more consistency between courses on Sakai

We receive feedback from Duke’s Student Government and Graduate and Professional Student Council annually via a survey distributed to the student body and presented at ITAC. Every year, students request more consistency in how Sakai is used across their courses.

In the student focus groups we ran this summer as part of the Sakai Conversations Tool project we heard similar comments, some explicitly requesting the removal of the font and color options.

There are a tremendous number of valid reasons for one course to be different from another.

These changes balance the opportunity for increased consistency between course sites with individuality for faculty and staff creating content.

2. It was really easy to create inaccessible content with the old editor options

Below is an example of what was possible in the old editor. The text size was increased using the font-size option, given a background color, and a portion was given a different color for additional emphasis. 

Item with no vision impairmentformatted text with no vision impairment
Item with Protanopia emulation (red blindness)formatted text with Protanopia emulation (red blindness)
Item with Deuteranopia emulation (red-green blindness)formatted text with Deuteranopia emulation (red-green blindness)
Item with Tritanopia emulation (blue-yellow blindness)formatted text with Tritanopia emulation (blue-yellow blindness)
Item with Achromatopsia (partial or total absence of color vision)formatted text with Achromatopsia (partial or total absence of color vision)

We don’t believe any Sakai user purposely creates content that is inaccessible to others in their course. We also recognize that creating accessible content isn’t always top of mind.

We asked, “wouldn’t it be nice if the system made it easy to create content and hard to create inaccessible content?” Replacing the previous color, background color, and font options with the new styles help accomplish that.

Below are some options now available for displaying the message above with a single click inside the Styles menu.

Here’s what this content looks like when emulating common vision deficiencies.

Various Sakai content emulating Protanopia
Various Sakai content emulating Deuteranopia
Various Sakai content emulating Tritanopia
Various Sakai content emulating Achromatopsia

We also recommend using the Check Accessibility button which reviews the content you’re editing and makes suggestions for how you might fix accessibility issues if they are found.

3. New users and students feel overwhelmed by the number of options in the editor and rarely use most of them

Each year, new students, staff, and faculty join the Duke Community, and some express awe, joy, fear… they are overwhelmed by the flexibility Sakai gives them. In some cases, this leads to decision fatigue and giving up, in others it’s the start of a journey towards becoming a power user.

This was a primary driver behind the new single row layout for the editor and hiding less frequently used options under the drop-down toggle.

animation showing how to toggle additional options in the Sakai rich text editor

If you wish to always display all the editor options and remove the need to toggle them, visit Home > Preferences > Editor and select the Force full/desktop mode (Full set of buttons, all features) option.

We are part of many efforts in the Open Source Sakai Community to increase the overall usability of the platform. The rich text editor is one of the most used components in Sakai, as such, it offers one of the largest opportunities for impact. 

While we did demonstrate and discuss these changes with small groups of faculty, students, and staff in and outside of Duke before deploying them to you all, it is clear we did not communicate the changes well enough beforehand. 

Unfortunately, during those discussions we did not hear the constructive feedback you all have given us over the past week and we truly appreciate the time you’ve given to us to iterate and improve things further and your patience as we do so.

We do not have further changes planned for the Sakai rich text editor at this time. If you do not see the options described in this post after 10am EDT Thursday, please clear your browser cache. If you continue to experience issues creating content in Sakai, visit our open office hours or email us at