A Model for Accessible LMS Discussion Boards November 2013 Accessing Higher Ground Part of EASI Session Series.

A Model for AccessibleLMS Discussion Boards

November 2013

Accessing Higher GroundPart of EASI Session Series

Presenters

Hadi RanginIT Accessibility & Collaboration CoordinatorDisability Resources and Educational Services (DRES)University of Illinois at Urbana-Champaign

Michael McKelveyCoordinator of Engagement Technology & New MediaOffice for Mathematics, Science, and Technology Education (MSTE)University of Illinois at Urbana-Champaign

Overview

Background on discussion board accessibility

Overview of our design modelDemo of our design modelDemo of U of I temporary solutionDemo of Moodlerooms solution

Background

Why discussion boards are powerful tools

How some discussion boards are more capable and consequently more complex

Understanding Forum, Thread, and Post dynamics

D2L’s additional layer: Topic

Current LMS Discussion Board Examples

• Blackboard• Thread listing

• Moodle• Thread Displayed in Nested View

• D2L• Discussion Reading View

General Problems

Too many layers to deal withMultiple nesting threads are a big issueDiscussion may easily venture off the

topicMassive, overwhelming information on

the interfaceScreen reader users cannot easily

determine the relationship/context for messages.

Vendor Response

Vendors have tried to improve the accessibility of their discussion tools

Discussion tools are currently technically accessible

Discussion tool interaction remains difficult, cumbersome, and ineffective

Problems with Existing Models

Too much flat information on each page Tool cannot be detached from application framework to reduce

clutter Many irrelevant elements/functions for common tasks Lack of a mechanism to customize the interface Too much noise for screen readers that read only one element at a

time No intuitive way of moving between major sections of the interface No well-organized grouping of relevant functions Incorrect use of elements—e.g., links instead of select, radio,

button Big problem: Use of basic HTML instead of advanced ARIA

techniques

Highlights of our Suggested ModelARIA landmarks to provide semantic structure

for each section of the applicationARIA menu for intuitive keyboard navigation in

the menu.Select box for selecting the desired forumARIA tree view to browse and select desired

threadHTML headings to structure message content

logicallyAction toolbar for each post to access

applicable functionsF6 key to switch focus between landmark

regions (theoretical)

Notes on our Suggested Model

This design is optimized for Firefox and Chrome. We have not worked on cross-browser compatibility yet

Use NVDA with Firefox to test for screen reader accessibility; do not use JAWS

Go to the following link and see the model in action:http://go.illinois.edu/AccessibleDiscussionBo

ardView a blog post describing the model:

http://go.illinois.edu/AccessibleDiscussionBoardBlog

Technical info on our Suggested ModelHeavy use of open-source JavaScript

frameworks/widgets:jQuery (core JS framework)

http://jquery.comjQuery UI (menu, menubar, modal dialog,

datepicker)http://jqueryui.comhttp://wiki.jqueryui.com (dev site)

OpenAjax Alliance (Treeview widget)http://

oaa-accessibility.org/examplep/treeview1Accessible Select List: capturing keydown,

change events & overriding default functionality until user hits <enter>

Disclaimer

We don't claim this design is the ultimate interface

It is a good, clean, functionally accessible interface

It can be offered along with other viewsNo branding for this view yet; maybe

Illinois View?We tried to group relevant functions

together, but it may not be perfectVendors are welcome to borrow the

design/code & remember to give credit to the team

A quick and incomplete enhancementInstitutions don't necessarily upgrade to

latest version of vendor productsWe need a quick (work-around) solution

for current implementationCollaborative work with Moodle

developers at University of IllinoisDeveloped a quick patchBig help navigating within the posted

messages pageIncorporated ARIA Region and headingsDemo: U of I temporary solution

About Moodle/Moodlerooms

Moodle: “open-source community-based tools for learning”

Collaboration in an open-source community is not easyDistributed developers with various technical

skillsVery limited knowledge of accessible design

within the Moodle communityMartin Dougiamas (father of Moodle) is

seriously looking into making Moodle more accessible

Moodlerooms (now part of Blackboard) is one of the major contributors to Moodle core

Moodlerooms Implementation

Impetus:Outstanding complaint about discussion

board at University of MontanaA working solution needs to be delivered by

end of 2013Progress:

Moodlerooms started with our suggested design

Moodlerooms has been incorporating Moodle Core feedback, concerns, and suggestions

Demo: Moodlerooms implementation

Acknowledgements

Marc Thompson, Instructional Designer, University of Illinois

Dan Hahn, ELearning Professional, University of Illinois

Ken Petri, Program Director, Ohio State University

Questions?

Contacts:Hadi Rangin [email protected] McKelvey [email protected]

URL for this presentation:http://go.illinois.edu/AHG2013