MHCC Accessible Course Template

Online Learning provides HTML template pages for faculty to customize and build their course content. A template page is basically a pre-formatted page that needs to be filled in with course or lesson details. Our template is continually improved to adapt to evolving Internet technologies and trends and to take faculty suggestions into account.

Key features of our template:

• ADA Section 508 compliant and Level AA accessible
• Built with HTML and CSS for cross-platform, multi-device usability
• Editable through any Internet browser (works best with Chrome and Firefox)
• Versions are themed and named after Oregon landmarks (Crater Lake, then Haystack Rock, etc.)

The template includes an entire course architecture that faculty can customize and add to, if necessary. When template files are copied into an empty course shell, the course will now have these items:

• Syllabus Section
  • Course/instructor overview file
  • Syllabus file pre-loaded with boilerplate language and many areas for course customization
  • Schedule file with layout appropriate to term length and course style (hybrid, online, etc.)
  • Syllabus activities, quiz, and other resources
• Navigation Menu links to key course and college resources
• Lessons Homepage
• Module folders for a complete term
  • An overview page inside of each module
  • A lecture page inside of each module
• Course banner image template and customization instructions

As of the 2016 Crater Lake version of the accessible template, the entire structure of the file directory and other key elements are vastly different from previous course templates. The new templates also embrace the concept of streamlining the student experience within a course by reducing the number of documents per lesson.

In short, moving to the new template for the first time will involve restructuring lesson files and perhaps even lesson layout and design. It is possible to retain much of the content used in an older template, but there is no automated method to import that content into the new template. Please reach out to one of the instructional designers in Online Learning if you would like more guidance.

The new template provides a convenient method of editing your course content from any computer that is connected to the Internet.

• No more WebDav
• No more MS Word template files for Mac users

All course content can now be edited in your Internet browser using a WYSIWYG (What You See Is What You Get) editor. Chrome and Firefox browsers, along with Opera, work best. Internet Explorer and Edge browsers are not fully compatible and should not be used.

To edit any page...

1. Hover over the page title while in Edit Mode, then click the Action Link to the right of the title. A menu will appear.
2. Click "Edit Content" to edit the actual content of the page in question.
3. Or click "Edit Options" to change the name of the page or set its availability.

It is critical to maintain ADA accessibility in all documents in your online course. One key keeping your template pages accessible as you edit is to maintain heading levels. To do this, just highlight the template heading text and begin typing your own text to replace it. You may prefer to place your cursor either at the beginning or the end of the heading text, type in your own text, and delete the original text using the delete or backspace button on your keyboard. Find the method you like best and stick with it. If you ever "lose" a heading's style, simply highlight the text that should be a heading and then use the format drop down list to select the fitting heading level, as shown in the image below.

The accessible template is designed to follow guidelines regarding things like document structure. As you edit, you may unintentionally make changes to that structure. Here are some guidelines to keep in mind.

• Headings are the main method of establishing overall page organization.
• Headings must be used in nested order (H1 is followed by H2, which is followed by H3, and so on.)
• A page should have only one level H1 heading
• Generally, no other text should appear before the H1 heading.
• Do not skip heading levels (For example, do not move from H2 to H4 without including a H3 level in between).

TIP: If you are using the browser editor and don't know which heading level to apply, you can click your mouse on another heading (one of the same level or maybe one of a level higher than you are working on) and look at the format dropdown area. The heading level of the text you clicked on will be displayed there. Use this as reference for which style to apply to the heading you are working on. If the style says Paragraph, this means no heading level is applied to that text. In a nutshell, if you remember how to create a proper outline, you should have no problem understanding the use of headings to create accessible document structure.

Why are headings so important, anyway? Aren't they just big, bold, attention-getting words?

To the reader who has no difficulty seeing the document, yes, the visual aspect of headings is what we notice. These differences in font size, indentation, and so forth act as visual signposts to the hierarchy of information on the page.

But for someone using assistive technology, such as a screen reader, headings are not just formatted text. Headings communicate the document's structure to the technology and allows the user to navigate to the desired section of the page. Without headings or other landmarks built into the document, a user who relies on assistive technology would have on choice but to listen to the entire page, from the beginning -- and to repeat this ordeal every time they visit the page.

This is why using the dropdown format styles is critical: It is not the same as just making a font larger or adding color or highlighting (none of those visual aspects communicate anything at all to assistive tech). Styles include not just a visual element but a structural element in the code of the document. This semantic structure allows assistive tech to understand things like the outline of the page -- and to convey this structure to the user.

We all make typos sometimes. Hitting the wrong keys while editing template pages may cause an unexpected change in the appearance of the page. Here are some tips to getting your page back the way you want it.

• CTRL+Z (CMD+Z): Using this keyboard shortcut will undo changes one at a time. You will be able to step backwards through a series of your recent changes, up until the last time you saved the document.
• Cancel: If stepping back through your changes does not restore the document, you can always click "Cancel" instead of "Submit" to discard any changes made to your document since you last saved your work.

It can be frustrating to lose work, but these tricks can help you preserve the layout and accessibility of your documents. If you ever save your work after the page appearance has been unintentionally altered or if you can't bear to "Cancel" all the content you just typed, go ahead and save your work and contact an instructional designer in Online Learning. We can often restore the layout to a page.

• Edit Schedule Tables
• Schedule: Add and Delete Rows
• Add and Delete Lesson Steps (Crater Lake)
• Blackboard Embed Video in Course Content
• How to Acquire YouTube Embed Code
• Using Stylized Lists (Haystack)

Online Learning created the accessible template as a starting point for faculty. The template provides a thoughtfully designed way to structure your lessons without having to start from scratch. And, of course, the template is accessible. But the template is meant to be customized to best present your course content. It can be modified and customized in various ways to suit your needs while still maintaining accessibility and usability.

Any faculty new to online learning and teaching or who are ready to refresh an existing course should contact an instructional designer in Online Learning. We'd be happy to help you imagine the shape of your course and develop the online component as you envision.

We look forward to working with you!