Tips for creating online courses

Tips for writing

• Page titles are informative and unique
• Headings are used to convey meaning and structure
• Hyperlink text is meaningful
• Alternative descriptions for images are meaningful
• Transcripts and captions for multimedia elements are available
• Instructions for interactive elements are clear
• Instructions are provided to help users prevent and correct errors
• Content is clear, concise and in plain language
• Reading order is clearly identified (for the graphic designer and developer)

Design tips

• Colour is not used as the only visual means of conveying information
• Interactive elements are easy to identify visually and when focus is placed on the elements
• Navigation options are clear and consistently presented throughout all sections.
• Videos do not start automatically, and all video controls are visible at all times and properly labelled
• All form elements have clearly associated labels
• Easily identifiable feedback is provided
• Headings and spacing are used to group related content
• Instructions and required fields are clearly identified to help users prevent errors.
• Error messages are short, clear and specific for users to understand and fix errors.
• Alternative descriptions for images and media are presented to users

Tips for development

• Use the right size for the text; commonly 12px for web and PDF content, and 18px for PPT documents
• Sufficient contrast between the foreground and background is provided
• Labels for each form control are well associated
• Alternative descriptions for images are using proper mark-up; decorative image alt text is set to empty quotations like <alt= "">
• Proper language attributes are used for the page language and for any language change within the page (for example French content on an English page)
• Help users avoid and correct errors by provide clear instructions
• Mark-up is used to convey meaning and structure
• The code order reflects the reading order of the content
• The design is responsive and mobile first
• The code used adapts to the user’s technology
• All interactive elements are accessible using the keyboard