Site Map

• About the project
• Preface
• Online Learning: Unprecedented Opportunity, Limited Access
  • Accessibility of Learning Management Systems
  • Accessibility of Online Content
  • Assistive Technologies and What They Do
  • The Legal Context: Equitable Access
• Universal Design for the Web
  • Seven Principles of Universal Design
  • How Online Educational Content Benefits from Universal Design
• Best Practices and Advice for Designing Course Content
  • Best Practices Towards Functional Accessibility

• Best Practices for Common HTML Accessibility Issues
  • Course Organization and Navigation
  • Content Layout and Styling
  • Content Markup and Organization: Headings, Lists, and Links
  • Images, Charts, and Other Graphics
  • Data Tables
  • Forms
• Advice on Non-HTML Content
  • Dynamic, JavaScript-Enabled Content
  • Video and Audio
  • Non-HTML Documents (Word, PDF, and PowerPoint)
  • Non-HTML Dynamic Content (Flash, Silverlight, and JavaFX)
• Appendix

LMS Accessibility Design Considerations

The capability of commercial and open source Learning Management Systems are increasing year-by-year. Every new version of these products offers new features that can potentially improve a user's interaction within the LMS environment.

Frequently, product developers do not consider accessibility in the design process of new features. As a result, we will most likely experience those new LMS features as inaccessible which causes students with disabilities not to be able to utilize the new features.

Commercial and open source LMS come in different formats with different feature lists, however they all offer a series of fundamental features that are commonly used across all LMS's.

We cannot offer accessibility design considerations for all possible modules for the LMS in the market; however we can provide the most essential accessibility considerations for commonly used LMS features.

The accessibility design considerations below are not specific to any particular LMS. These accessibility design considerations are based on the function of the most common LMS features.

We are hoping that the LMS developers find these design considerations helpful.

General Accessibility Design Considerations

• Use consistent layout and format across the application.
• Use an H1 element to provide the main topic/function of the page, e.g. "Assignment", or "Quiz 123 - Assignments - Geography 101".
• Provide at least the content of the main H1 (see above) in the title element, e.g. "Quiz 123 - Assignments - Geography 101 - my_LMS".
• Provide a Breadcrumb to show user's exact location and provide links to go back to the parent page including course home page and LMS main page.
• Make sure that all functions in the application can be performed using a keyboard.
• Do not use color as the only mechanism to convey information.
• Do not use inline styling for presentation. Use Cascading Style Sheet (CSS) for any styling effects.
• Provide proper alternative text for any graphical elements conveying substantial information. Set the alt tag value to Null for stylistic and decorative images.

Accessibility Design Considerations for Common LMS Features

Quizzes

• Show list of quizzes in an ordered list or data table markups. Make sure that you follow the best practices for data tables and you number quizzes.
• Provide relevant information for each quiz such as posted time, due date, status (Pending, Draft, Submitted, Reviewed, Graded, etc.), type (essay, multiple choice, yes/no, etc.), time allowed, remaining time (if multiple attempts is allowed), and title of the quiz.
• Provide link to the quiz, e.g., make the title of the quiz a link and open the quiz in a new browser window or tab.
• Provide a mechanism to warn users preferably using a JavaScript Alert Box if user tries to close the quiz session to make sure that user doesn't close the active session unintentionally.
• Provide Title element containing at least the name of the quiz and other relevant information.
• Provide the name of the quiz as H1 element.
• Make the the page as clean as possible and avoid including any links that could move the focus out of the page.
• Provide real-time information about the current status of the quiz at the beginning of the content area and optionally at the end of the content area, e.g., "12 questions total, 8 answered, 4 not answered, time allowed: 60 minutes, time elapsed: 45 minutes, time remaining: 15 minutes". The best way to show this information is to use an unordered list, stylize it accordingly and provide an H2 heading called something like "quiz status info". Make sure that the cursor doesn't move to the status information automatically upon each update.
• Introduce briefly any accessibility features in the page such as accesskeys information preferably at the top of the page.
• Use either an ordered list for questions or make the questions a header element of proper level (H2-H6) to ease keyboard navigation.
• Number questions uniquely within the assignment regardless of the markup used, e.g., "question 1", "question 1a", "question 1b", and so on.
• Show question status in-line with the question text right at the beginning of each question, e.g. "Not answered, Question 2. Question text".
• Provide proper labeling for all form controls associated with each questions such as text boxes, radio buttons, checkboxes, select boxes, and all buttons according to Web Best Practices. See Associate form elements with a text label (BP1).
• Make sure that the original session doesn't expires due to inactivity.
• Use JavaScript Alert for any kind of alert (e.g., session expiration, announcing time remaining periodically) to ensure that user notices it automatically.
• Alert user when he/she is about to submit the quiz to avoid unintentional submission.
• Provide warnings and error messages according to the Errors and Warnings Best Practices (BP7).
• Provide verification information in plain text about the result of the submission (see Form Submission Best Practices (BP 8)). Provide also a Close button in the verification page that closes the current window and moves the focus back to where he/she started the quiz and update the information accordingly.

Upload/Download

• Provide standard Upload and Download functions or dialogue boxes for uploading and downloading files/folders and avoid proprietary programs.
• Provide Browse option in the Upload/Download dialogue box to allow browsing in the user's computer system and allow multi-files/folders selections.
• Show the available files/folders of the current directory and selected filed/folders in separate lists and provide proper heading for each list.
• Provide Add/Remove functions to add or remove files/folders to/from available lists.
• Provide clear and human understandable text labels for all the buttons and make sure that the text labels do match their on-screen labels.
• Make sure that all the operations in the Upload/Download functions are keyboard accessible and provide shortcut keys to frequently used buttons such as Add, Remove, Upload, Download, or Cancel buttons.
• Provide textual real-time upload/download information and warn users to wait until the upload/download process is complete and optionally provide brief sound effects upon completion of the process.

Blogs

• Use list markup to group relevant information to a blog such as author, type of the blog, number of entries, number of comments, etc. Provide a proper heading of the logical header elements (H2-H6) to this list.
• Provide filtering and sorting options to allow users to view selected blogs in the desired order.
• Provide plain text information to indicate status of the blogs such as New Entry or New Comment. If icons are used to provide such information, set the alt attribute for those icons to provide the same information.
• Provide form labels (BP1) to all form fields including edit boxes, radio and check boxes, select boxes, text area and buttons.
• If the blog text field which is usually a text area allows formatted text, configure the formatting options of the editor to prevent deprecated markups.
• Provide mechanism to save user's preferences for reading and adding blog options.
• Provide warnings and error messages (BP7) according to the Best Practices.
• Provide verification information in plain text about the result of the submission. Provide also a Return to the page link to allow a quick to return.

Chat

• Provide accesskeys to Chat entry box and Chat display container.
• Provide mechanism to allow user to scroll in the Chat display container and select/copy desired content.
• Make sure that cursor does not move to the Chat display area when the focus is in the Chat entry box.
• Provide a configurable audio signal/sound upon receiving each message. Provide different sound/signals for private and public messages.

Choices

• Provide the proper heading level to the Poll/Choices section.
• Use plain and easy understandable text for question/choices or provide alternative text if graphics are used.
• Provide accesskeys to choices, e.g., 1 for yes, 2 for no, or 1 for a, 2 for b, 3 for c, etc.
• Provide sound effect when a new question/poll is posted.

Forums

• Provide a uniquely identifiable H1 heading containing at least the name of the Forum, topic, and thread.
• Provide at least the same information as H1 heading in the title element of the page.
• Provide logical headings for main, secondary and page navigation, breadcrumb, search, main content area, search result, filter options, sort options, and other possible sections/sub-sections in the page.
• Use ordered/unordered lists to group forums/sub-forums. A collapsible/expandable menu system that is keyboard accessible is a good way to implement it. Make sure that the alt tag for the icons associated with each expandable menu has the proper alt tag. See the expandable/collapsible system in the Best Practices chapters of this project, e.g. Forms Best Practices.
• Provide proper labels for all the form controls in search, filter and sort options, page navigation options and generally any form controls based on the Forms Best Practices techniques.
• Provide textual information about the status of each message (e.g. read/unread or contains any attachment) and labels for operational buttons (e.g., reply). If icons are used for this purpose, make sure that the icons have proper alt tag (BP2).
• Provide mechanism to open a message in a new browser tab or new window if user prefers.
• Open a new browser tab or window for Create New Thread or Reply function.
• Provide warnings and error messages (BP7) according to the Errors and Warnings Best Practices.

Glossaries

• Provide proper form labels for all fields in the entry/modify forms.
• For any term associated with a graphic, provide an alternative text and make it a required field (BP5) in the entry form.

Lessons

• Make the main topic/heading of the page which is usually the title of the page an H1 heading.
• Provide a uniquely identifiable title element for each page usually comprised from the main heading (H1), e.g., main topic/heading of the page - Lessons - my_course - My_LMS.
• Use ordered/unordered lists to group page navigation links such as Previous page, Next Page, Previous chapter, Next chapter, First chapter, Last chapter, etc. Provide a proper heading to this list and call it something like Page Navigation.
• Provide a Breadcrumb to show user's exact location and allow navigation via the Breadcrumb.
• For tab-style navigation, always indicate the selected tab in an accessible way, e.g., you can use a one-pixel image on the left side of the selected tab and set its alt value to "selected". Use unordered list for tab-style navigation and precede the list with a heading entitled "Tab" in it, e.g., "main navigation tabs".

Surveys

• Preferably open surveys in new browser window.
• Provide instruction information like total number of questions, estimated time needed and any relevant information right in the first page.
• Provide form labels for all fields in the survey.
• Group related questions and provide a proper heading. For example, group first name, last name, e-mail, etc., together and give the heading "Contact information".
• Do not put more than 5 questions on a page.
• Always provide information about the remaining questions in a consistent way and place.
• Use an accessible technique to indicate required questions
• Provide question numbers inline with each question.
• If images used in the survey questions, make sure that you provide clear alternative texts (BP2) for them.
• Use (preferably) ordered list to layout your questions.
• Use Java Script Alert box for any client-side validation.
• Provide verification messages (BP8) for successful submissions or warning/error messages (BP7) for unsuccessful attempts.

Wikis

• Make the main heading of the page which is usually the title of the page an H1 heading.
• Provide a uniquely identifiable title element for each page usually comprised from the main heading (H1), e.g., "main_heading_of_the_page - my_course - Wiki".
• Use ordered/unordered lists to group system, content related links, and Wiki operational links (edit, preview, commit, etc) and provide headings for all navigation bars.
• Provide unique text labels for Wiki operational links/buttons if operational functions are available for multiple section of the page, e.g., Edit navigation bar, Edit content, Edit footer.
• Provide form labels for all form controls including page title field, main content field, and submit, cancel, and all other operational form controls. See the Associate form elements with a text label (BP1).
• Provide log-in status consistently in all pages. Provide a Log-in link in the System navigation bar if user is not logged in and provide a Log-out link in the System navigation bar if user is logged in.
• Provide warnings and error messages according to the Errors and Warnings Best Practices (BP7).
• Provide verification information in plain text about the result of the submission (see Form Submission Best Practices (BP 8))). Provide also a Return to the page link to allow moving back to the page quickly.

Copyright © 2012 CANnect