D2L JAWS Demonstration Videos

The videos linked below show JAWS navigating various key interfaces in versions 8.1 and 8.2 of Desire2Learn. The videos were prepared for a post-conference session, held July 17, 2007, for the Fusion UC07 conference. The sessions were captured using Camtasia and output to be able to be played back using the Flash player in your web browser. (We will caption these videos as soon as possible.)

JAWS is set to read HTML headings in a deep, male voice and links in a female voice. Its verbosity is set to "beginner" and speach rate set to 85 words per minute—somewhat slower than most experienced JAWS users' speech rate setting, but perhaps faster than you may be used to listening to spoken text.

In general, navigating a web page with a screen reader comprises two activities:

1. Orientation on the page: Discovering from the structural elements of the page (headings, frames, tables, forms, etc.) where one is in the flow of the page. Common orientation techniques involve cycling through headings and frames, listing form elements and links, and, sometimes, as a last ditch effort, performing a keyword search.
2. Interaction with an interface element: This ranges from simple acts, such as clicking on a link, to more complex interactions with form elements and navigating through widgets/tools.

Screen Reader Accessibility of D2L Versions 8.1 and 8.2

Though not without its kinks, the 8.2 interface demostrates significant improvements in navigation and use of interface elements, when compared with previous versions of Desire2Learn. You will also notice clear improvements in the clarity and organization of the interfaces, leading to an overall improvement in usability. None of the accessibility enhancements had a detrimental effect on general usability, which is what we would expect: Accessibility properly implemented is part of enhanced usability, universally.

Each video below has a "Time Code Index" which gives the viewer insight into what the JAWS user was trying to accomplish at particular moments. We recommend reading through the time codes before you watch the videos and, if possible, keeping open this page while you watch, so you can refer back to it. You can use the time-line slider at the bottom of the movie window to move to the specified times in the screen captures.

Student View: Using Skip Navigation and Browsing Content in D2L Version 8.1

The video showing JAWS using skip navigation and viewing contents of 8.1. Total run time: 02:33.

Time Code Index

• 00:05 - Multiple attempts to trigger skip navigation fail. The link takes us nowhere.
• 01:15 - Frustrated browsing through the entire contents, the user pulls up a links list dialog. Here is an area where the "collapsable" table of contents sections in 8.2 is very useful.
• 01:34 - Getting into the course content frame, the user thinks he would not read the table of module names in the left hand column and instead be put in the true content frame. This is not the case and he has to browse the module names before moving on. A way to navigate using headings would be very helpful.
• 01:50 - We learn that we can "hide" the table of contents. A good feature. Note the confusing iconography for the tools in the toolbar and how long the list of tools is. 8.2 pairs down the list and provides much more intuitive icons.
• 02:23 - The only heading on the page is the heading "An HTML Heading," which was supplied by the content author. In general, 8.1 lacks headings throughout the LMS—a severe impediment to accessibility.

Student View: Using Skip Navigation and Browsing Content in D2L Version 8.2

The video showing JAWS using skip navigation and viewing contents of 8.2. Total run time: 02:25.

Time Code Index

• 00:10 - Skip navigation moves you past site navigation. 8.2 has working skip navigation. However we seem to be moving only to the bottom of the frame instead of into the content frame. Ideally, we want to have skip navigation jump into the content frame.
• 00:20 - Two levels of headings orient you to the table of contents. Too bad both headings say "Table of Contents." Would we naturally pick the lower one?
• 01:25 - Up to here we've seen now you can collapse the levels of the table of contents to make navigating easier. This works fine: The sub-levels are ignored by the screen reader user. We also hear: "collapsed row" for the final, collapsed state. Better would be "row is collapsed" or, even better, "Unit 3 row is collapsed. Click to expand." etc.
• 02:00 - We got through the toolbar in the content view and are now in the content area. The title of the frame is "title," which is not as good as the title used in version 8.1. The heavily nested frames are also difficult to get around, though this is the same in both versions.
• 02:15 - Note that the only headings on the page are the ones for the content map in the left column and the user-supplied "An HTML Heading" in the course content pane. The top of that pane should be a heading: "Content for Accessibility Test 2." Instead it is just text in a table row. The majority of other interfaces in Desire2Learn version 8.2 use headings to announce all major sections.

Student View: Using Discussions in D2L Version 8.1

The video showing JAWS using discussions in 8.1. Total run time: 03:40.

Time Code Index

• 00:12 - Orientation: "There are no headings on this page."
• 00:41 - We find the topic we are interested in and link to that page.
• 01:05 - Before we get to the "Add Message" button, we must browse through a long series of options.
• 01:30 - We start browsing by form elements and get to the proper button to add a message. We are immediately put in the subject line of the message: Good!
• 02:00 - We start typing in a text area, but since it is not labelled, it is not possible to tell that this is the form element that we should be typing our message in: Bad!
• 03:00 - Looking for and finding the "Reply" button. But are we sure what we are replying to? How do we tell?
• 03:15 - Again, we start to reply and again it is unclear that this is the textarea into which to put our response. This is the crux of the problem with not using HTML labels.

Student View: Using Discussions in D2L Version 8.2

The video showing JAWS using discussions in 8.2. Total run time: 05:43.

Time Code Index

• 00:15 - Browsing through the headings it is easy to find where the list of forums and topics are.
• 00:45 - Having tabbed through the links to each topic and forum, we get to the topic we want to post a message on. Notice in the browsing of topics and forums, there was no way to tell which was a forum and which a topic. The way to narrow that would be to use the "Display" drop down. The "Accessibility" forum creator labeled the forum by using the word "Forum" in his title for it. Perhaps D2L should add the word "Forum" automatically?
• 01:10 - The forum was set by the user to give forum listings as "threads", a user setting which improves accessibility. This causes the message form to pop open a new window. JavaScript works with JAWS to put the focus in that new window, and that is a very good thing. However, the title of that new window is read aloud, and it is a nasty string of URL ugliness. Desire2Learn ought to have a cleaner title for the popped-open window, something like "New message replying to topic X."
• 01:30 - Fortunately, we can check the names of both the forum and topic within the popped-open window, itself.
• 02:30 - Notice that JAWS fails to read the labels for the "Cancel" and "Post" buttons. This is likely a glitch in JAWS, since they get read on a second pass.
• 02:45 - When the window is killed by the post, focus returns to the parent window. This is exactly the behavior we want. In version 8.1, focus is not returned to the parent and we are left to browse through open applications to find our way back to the original browser window.
• 03:04 - When we get back to the parent window, we look for headings and cannot find any. This is inconsistent with other interfaces in Desire2Learn. We also cannot easily locate the "Reply" link, so we start up a links list window and begin typing "r" to browse through it for links that begin with that character. We cannot find "reply" because the hyperlink is sandwiched between two brackets: "[Reply]". This would affect readability, as well, but it thoroughly destroys searchability. Notice also all of the links for "Rating/actNotSet". These are ambiguous. We cannot tell what they mean. And if we could tell that they signify rating settings, we could not tell on what message or at what level we would be setting the rating.
• 04:00 - Finally, we find the reply link!
• 04:25 - It would be nice if we had a few more details, other than the subject line, to tell which message we were replying to. What about text reading, "Replying to message X," similar to how it was in the reply to topic window?

Instructor View: Managing Content in D2L Version 8.1

The video showing JAWS managing content in 8.1. Total run time: 05:40.

Time Code Index

• 00:15 - "Content manipulation tools frame" and "List of topics frame". Potentially the user could move between frames, but it would be nicer if there were a way the tools were in the same frame as the topics list, perhaps with just a heading indicating each section. Navigation between frames is always more cumbersome and is usually not as familiar to inexperienced screen reader users.
• 00:33 - As we start to browse the list of topics and tools for manipulating the content, we run quickly run into one of the things that makes the interface so difficult to use: none of the manipulation tools (in the right-hand column of the topics) is labelled in a way that identifies it as associated with a module or topic. We hear over and over: "Graphic add topic," "Graphic bulk-add topic," "Add module," etc., with no sense as to what we are adding a module or topic to. Contrast this with the clear labelling in 8.2.
• 01:45 - After a lot of browsing trying to find what we're looking for, we do a scan of headings: "No headings found", and resort to a links list search. (Notice the many "Add topic" and "Add module" links in the links list.)
• 02:00 - On the "Edit Module" page. Again, no headings.
• 02:45 - How do we know which "tab" we are on? We know only because that item is not a link. Is this indication enough? Better would be if each were a heading, styled to be a tab navigation bar or there were some indicator of status: Content <span class="screen-reader-visible">(selected)</span>.
• 02:52 - Again, the "Edit" and "Delete" icon/links are not labelled indicating what content topic they affect.
• 03:55 - The help links go to specific help topics, but we cannot determine from the links alone what part of the documentation they point to.
• 04:30 - After killing the browse window having selected the content to link to for our new topic, we are put adrift. We are no longer in the browser but, instead, somewhere else on the desktop or in a different application. (We went into the JAWS program interface.) When windows are closed, focus should return to the parent window.

Instructor View: Managing Content in D2L Version 8.2

The video showing JAWS managing content in 8.2. Total run time: 05:09.

Time Code Index

• 00:30 - After some garbage buttons being read ("zero button unavailable"), we get to a nice summary of the table, that details its functionality, contents, and organization.
• 01:20 - Search is used to look for the module number. The modules are automatically numbered as they are created and labeled with English rather than simple roman numerals, as in 8.1. Still, it would be better if this nested structure were lists and embedded lists, rather than data in a table. The collapse feature could be used to truncate options and make navigation easier.
• 01:30 - Note the contextual labelling of the functionality icons. We know exactly that we are adding topics to the "Accessibility Test module.", the alternative text is "smart" not generic.
• 02:30 - The help icons are now contextually labelled, as well.
• 02:55 - The custom dialog works nicely and is a more elegant solution than popping open a new window. It also generally works well. There are some implementation problems, however, when we hit the radio buttons to choose a file. The radio buttons are not labelled. This is inconsistent with much of the 8.2 interfaces that we tested. You can see here how hard it is to determine which item we are selecting without proper labelling.
• 03:40 - We get put into the HTML editor. For the most part, this is very confusing to a screen reader user. A keypoint in the confusion is that the HTML editor itself is inaccessible. Better would be to be provided a link to click to edit it. Once in the editor, it can be difficult to get the cursor to move out and all the interface items are confusing.
• 04:10 - We use the JAWS find dialog to get back the "Manage Content" interface.
• 05:00 - Notice how all of the supposed Roman numberals are read by JAWS as letters or are pronouced: "eye ee ee". This is because the lists of modules and topics are not true lists. Instead they are rows in a table. They should be HTML ordered nested lists.