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

2. Presenters  Hadi Rangin IT Accessibility & Collaboration Coordinator Disability Resources and Educational Services (DRES) University of Illinois at Urbana-Champaign  Michael McKelvey Coordinator of Engagement Technology & New Media Office for Mathematics, Science, and Technology Education (MSTE) University of Illinois at Urbana-Champaign

3. Overview  Background on discussion board accessibility  Overview of our design model  Demo of our design model  Demo of U of I temporary solution  Demo of Moodlerooms solution

4. 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

5. Current LMS Discussion Board Examples Blackboard Thread listing Moodle Thread Displayed in Nested View D2L Discussion Reading View

6. General Problems  Too many layers to deal with  Multiple nesting threads are a big issue  Discussion may easily venture off the topic  Massive, overwhelming information on the interface  Screen reader users cannot easily determine the relationship/context for messages.

7. 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

8. 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

9. Highlights of our Suggested Model  ARIA landmarks to provide semantic structure for each section of the application  ARIA menu for intuitive keyboard navigation in the menu.  Select box for selecting the desired forum  ARIA tree view to browse and select desired thread  HTML headings to structure message content logically  Action toolbar for each post to access applicable functions  F6 key to switch focus between landmark regions (theoretical)

10. 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/AccessibleDiscussionBoard http://go.illinois.edu/AccessibleDiscussionBoard  View a blog post describing the model:  http://go.illinois.edu/AccessibleDiscussionBoardBlog http://go.illinois.edu/AccessibleDiscussionBoardBlog

11. Technical info on our Suggested Model  Heavy use of open-source JavaScript frameworks/widgets:  jQuery (core JS framework)  http://jquery.com http://jquery.com  jQuery UI (menu, menubar, modal dialog, datepicker)  http://jqueryui.com http://jqueryui.com  http://wiki.jqueryui.com (dev site) http://wiki.jqueryui.com  OpenAjax Alliance (Treeview widget)  http://oaa-accessibility.org/examplep/treeview1 http://oaa-accessibility.org/examplep/treeview1  Accessible Select List: capturing keydown, change events & overriding default functionality until user hits

12. 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 views  No branding for this view yet; maybe Illinois View?  We tried to group relevant functions together, but it may not be perfect  Vendors are welcome to borrow the design/code & remember to give credit to the team

13. A quick and incomplete enhancement  Institutions don't necessarily upgrade to latest version of vendor products  We need a quick (work-around) solution for current implementation  Collaborative work with Moodle developers at University of Illinois  Developed a quick patch  Big help navigating within the posted messages page  Incorporated ARIA Region and headings  Demo: U of I temporary solution Demo: U of I temporary solution

14. About Moodle/Moodlerooms  Moodle: “open-source community-based tools for learning”  Collaboration in an open-source community is not easy  Distributed developers with various technical skills  Very limited knowledge of accessible design within the Moodle community  Martin 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

15. Moodlerooms Implementation  Impetus:  Outstanding complaint about discussion board at University of Montana  A working solution needs to be delivered by end of 2013  Progress:  Moodlerooms started with our suggested design  Moodlerooms has been incorporating Moodle Core feedback, concerns, and suggestions  Demo: Moodlerooms implementation Demo: Moodlerooms implementation

16. Acknowledgements  Marc Thompson, Instructional Designer, University of Illinois  Dan Hahn, ELearning Professional, University of Illinois  Ken Petri, Program Director, Ohio State University

17. Questions?  Contacts:  Hadi Rangin hadi@illinois.eduhadi@illinois.edu  Michael McKelvey mmckelve@illinois.edummckelve@illinois.edu  URL for this presentation:  http://go.illinois.edu/AHG2013 http://go.illinois.edu/AHG2013