Add Column Tool for Rich Content Editor

0 Kudos

I have spent hours trying to find a way to create a column layout or grid layout using the Rich Content Editor in Canvas to no avail. It seems that even using HTML code does not help because the only way to edit the defined columns is via the CSS code, which it does not appear that I have access to. The only other option is to use tables, which is ultimately NOT AN OPTION for the purpose of visual formatting because it is not accessible to screen readers for this purpose. Having clean, visually appealing layouts can play a key role in student engagement and is something that should really be easily added/editable by admins and teachers. If there is a way to create the type of column or grid layout that I am looking for that is currently accessible to screen readers, please let me know. But, otherwise, I really think it is ESSENTIAL that there be some sort of tool available to create a column/grid layout that is accessible to both visual learners and those that are visually impaired, much in the same way that there is in programs like Microsoft Word. 

 

Thank you.

4 Comments
Stef_retired
Instructure Alumni
Instructure Alumni
Status changed to: Open

Thanks for sharing this idea, @henderson651 . We'll move it forward as a request for an enhancement to the Rich Content Editor. I can see how this formatting would be pleasing to the eye on the web, but might cause issues with students accessing Canvas from the much smaller screens of their mobile devices—so should you decide to create a workaround in the interim, please test the mobile view as well as the web view.

Thanks again.

James
Community Champion

I'm not completely sure how this relates, but on July 7, 2021, Canvas started allowing the flex and grid style properties to the Rich Content Editor. Related to that change is an idea to add flex and grid alignment properties.

There's no tool to develop these and I wasn't aware that Word had a tool either, but I don't like using Word so that's not surprising. Anyway, it seems that you can now use inline CSS with the HTML editor view to support some of this functionality rather than having to rely on an institutional stylesheet that is uploaded through the theme editor.

henderson651
New Member

If that is the case, does anyone have an example of code that I might be able to play around with? I'm not very well versed in HTML and have been trying to use a few examples that I have found within our university, but nothing seems to be allowing me to format items they way I want them to appear. With that said, having an actual tool to organize content into columns and grids would still be extremely helpful for the majority of faculty that do not have a deep understanding of HTML. As of now, I see a lot of people utilizing tables to get around the issue, which creates a lot of additional issues with accessibility. Thank you.

Stef_retired
Instructure Alumni
Instructure Alumni

@henderson651  For specific questions about creating custom HTML, you'll find lots of solutions in the Instructional Designers group, and you can post questions to the ID Discussions board if you don't find what you're looking for.