In this document I will be reviewing the Canvas Learning Management System (LMS) for Florida State College’s Center for E-Learning (CEL). To that end, I have created a course inside the Canvas LMS sandbox site for testing purposes, and will be basing my review upon this course. That means that this is a brand new course created within it’s native application system. It is not a course that has been migrated from another LMS like Blackboard. All the content that is created within the course will be created using only the tools available within Canvas.
Guidelines we need to follow.
Since Florida State College is a state institution we must adhere strictly to certain guidlines outlined by state and federal law on both the academic and technical level. These include best practices when it comes to creating HTML/CSS, and making sure that we adhere to the standards put forth by the ADA, section 508, and the ARIA. I will not go into too much detail on those standards here because they are beyond the scope of this document, but here are some links you can follow if you would like to research them yourself.
Two Levels Only
Canvas is an open source application that uses partner companies to provide some of the functionality to their application, and during the course of this evaluation it became clear that I
would need to evaluate Canvas on a couple of different levels. The main Canvas UI level, and the content editor level. I chose these levels for the sake of brevity, and the fact that many of the issues that appeared as a result of this review were actually common across sections of Canvas.
The main Canvas UI level is comprised of all the menus, the tabs, and pages you use to create and manage your course within the Canvas application.
The Content Editor level is only invoked when you choose to create new content within the system, or choose to edit existing content. It’s more commonly known as the edit screen. The edit screen has a menu bar at the top of a field of editable text. You have your choice whether to use the WYSIWYG editor or the code editor. It’s easy to switch between the two views by using the Switch View button located at the top right of the editor window.
On the right side of this editor is a small version of the Files content tool that is called Page Tools. With this tool you can access any of your existing files that are already located within the Canvas content system, or you can choose to upload a file from here.
The Canvas User Interface
The main interface uses the HTML5 doctype, and some of the new HTML5 elements (ex. <aside>). This might make it appear as if Canvas uses the HTML5 standard, but they do not. The simple reason for this is that the HTML5 standard does not exist as a W3C standard yet. Currently the HTML5 standard is due to be recommended in 2014, and a fully final standard some time around the year 2021. Technically Canvas uses the HTML 4.01 standard with a few HTML5 elements thrown in for good measure. This future proofs the HTML for when the W3C finally catches up to what the browsers can render.
Sitting here looking at the source for the main page; I see many examples of best practice structural markup.
Some things that stand out are as follows:
- You can tell what the content is by looking at the code.
- Everything is structured in as simple a manner as possible.
- Tables were used to display tabular data, NOT to layout the content.
- You can’t go too deeply into the DIV structure before you hit good semantic HTML.
- The menus are all made using an UL (unordered list) element enclosed within a NAV element.
- Each new HTML element has been designed to gracefully degrade if the browser can’t handle the new HTML5 elements.
- They have effectively separated the content structure from the style and layout.
I want to make this as brief as possible, and say that I could find little wrong with the main Canvas user interface. In terms of following web standards, and complying with accessibility standards, it’s squeaky clean. Canvas has even received the National Federation of the Blind Non-visual accessibility web certification. Here is a link to the article if you would like to read up on the details.
Over and above using alt tags on all their <img> tags, the UI is built using divs and spans that contain semantic HTML. This makes it easier for screen readers because there is no HTML table structure to navigate just to get to the main content. The menu structure is simple, and leads the user to the content quickly using minimal click steps.
It is somewhat refreshing to see that ARIA roles have been utilized to great extent in the main UI. Using these Roles allows further means to communicate meaning, importance, and content relationships, and by doing so increases usability for all users by enabling navigation models familiar to desktop applications.
The Canvas Editor
The editor in Canvas allows you to edit a content page using either a WYSIWYG view, or a code view. If you click the Switch Views button, the WYSIWYG editor disappears to reveal the raw HTML code. This allows you fine grain control of your content if you are so inclined.
Many times the content contained within course pages is comprised of formatted text with a accompanying graphic or video. The editor behaves much as you would expect it to. If you type in a paragraph and hit the return key it creates paragraph HTML P tags with your paragraph contained within. You can use the editor to justify text, or bold a certain word. All the things you would expect out of a WYSIWYG text editor.
The HTML that Canvas uses to build all this can be seen by switching views and examining the source code. The HTML that the editor produces is at the same level as the HTML that they used while building the main user interface.
The editor starts to drop the ball when you want to insert something like an image, multimedia content, or a document created using MS Word or Powerpoint. I say this because Canvas gives you different methods to use while inserting content, and changes the HTML inserted depending on which method you choose.
Inserting an Image
For the purposes of this review I am going to use one of the simplest ways I can think of to add accessible features to an image which is to add an alt tag. By doing this we are adding a text equivalent for a non text html element which speaks toward section 508 compliance.
There are many ways to insert an image using the Canvas editor; I am reviewing what I think are the two most common. You can click the Insert Image button located in the WYSIWYG view of the content editor, or you can use the Page Tools located in right side menu of the content editor window.
The “Embed Image” Button Method
Here is an example of the code inserted by the editor when you link to an existing graphic using a URL.graphic, then add alt text, or search Flickr for your graphic.
If you insert a URL you have full control over what the alt tag for that image will say because there is a text box for you to enter it into right there under the URL field. If you choose to search Flickr, when you choose a picture it inserts it, yet used the alt tag that accompanies the image on Flickr. The choices you have to change that alt tag are going to Flickr and changing it from there (That is if you own that content,) or changing it in the code view.
<p><img src="http://www.americanmanufacturing.org/files/american-flag.jpg" alt="The American Flag" /></p>
Here is an example of the code inserted by the editor when you search Flickr for your image.
<p><a href="https://secure.flickr.com/photos/48896557@N00/5058048551"><img style="max-width: 500; max-height: 500;" title="America the Beautiful Country" src="https://farm5.static.flickr.com/4107/5058048551_df82962b20.jpg" alt="America the Beautiful Country" /></a></p>
Do you see the difference in the code that was inserted.
If you insert the graphic by using Page Tools located in the right side menu in the editor window the experience is much different. If you click on either the Files tab or the Image tab then choose an image to insert; the tool quickly inserts the image into your document. There is no chance for you to set an alt tag before the image gets inserted.
If you switch to code view you can see that Canvas used the file name as the alt tag, and they enclosed it in a div element this time instead of a paragraph element.
<div style=”float: right;”><img src=”/courses/351681/files/8999587/preview” alt=”This will be the alt text” /> </div>
From here you can change the alt tag itself, or if the tag is a short one you can just change the name of the file so when you insert it the alt tag will be correct.
So while the ability might be there to change the alt tag by going into the code, it was not added to the application in a simple, elegant, or even consistant way. If you are an inexperienced Canvas user, you are forced to hunt around for functionality when all you really wanted to do was add an alt tag to an image.
In all fairness, Canvas does technically provide the functionality. My problem is it was not provided in a simple, elegant, or even consistant manner. This makes it hard on us course builders, (which in many cases is an instructor, NOT someone who is tech savy), but does not end up being a “deal breaker” because…well…they DID give us the ability to add the alt tags. It just takes more time and knowledge to do so.
Inserting Powerpoint and Word Files
Many instructors use Word docs and powerpoint files to present their content to students. While this might be an easy and convenient tool to use as an instructor it does not meet the needs of an institution like ours. Those file formats are not accessible by any means, and fall well short of meeting the guidelines set upon us by the accessibility folks.
The Canvas application attempts to remedy this situation by using the ScribD Api liberally, and in doing so provide both a download link, and preview of the file.
A good example of this in action is a powerpoint file. When you use the Page Tools in the right menu to upload a Powerpoint file it immediately inserts it into your document. Right next to the link to the download you will find a preview button that, when clicked, will embed the document in all it’s glory within your page.
This would be fine if ScribD did not use a Flash Player to render the document to the web page. Flash player is well know for not playing well with screen readers, and for being almost entirely inaccessible with assistive technology.
There is no way to stop this from happening, and the only real remedy to the situation can potentially come from two places. The first is ScribD has an option that you can set that allows you to offer up a rendered txt version of the file for download. The other would mean creating a new business practice that requires subject course builders to provide a download link that contains a plain txt version of the content.
I think that Canvas as an application is a great tool for managing your courses. It was built using best practices, and web standards that have been future proofed as much as humanly possible in this day and age.
Where Canvas falls short is when it comes to the content inserted into a course and the methods used to do so. There are multiple ways to insert different types of content, but each one of those methods uses a different technique to actually write the HTML code. The methods I reviewed to insert a graphic, and to insert a document were inconvenient, but still technically met the needs of the course author. Technically, using Canvas, you can provide the content you need in a way that meets accessibility guidelines. Whether Canvas does that in an intuitive manner is another story all together.
Final Grade B+